Lecture 9 Prototyping Terry Winograd CS147 - Introduction to - - PowerPoint PPT Presentation

▶

Feb 04, 2023 47 likes •408 views

Lecture 9 Prototyping Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006 CS147 - Terry Winograd - 1 Learning Goals Understand the uses of different

SLIDE 1

CS147 - Terry Winograd - 1

Lecture 9 – Prototyping

Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006

SLIDE 2

CS147 - Terry Winograd - 2

Learning Goals

Understand the uses of different types
f prototypes for different kinds of

designs and be able to choose appropriately

Know the basic techniques for low-

fidelity prototyping

Be able to determine and apply the

relevant techniques for your project

SLIDE 3

CS147 - Terry Winograd - 3

What is a Prototype?

A representation of a design before

the final artifacts exist

To evoke reactions from

stakeholders in the design process

–Designers –Users –Clients

SLIDE 4

CS147 - Terry Winograd - 4

Uses of Prototypes

Design by doing

– Clarify goals and requirements – “Reflective conversation with the materials”

Give users the experience of use

– Look and feel

Test specific aspects

– Compare alternatives – Make changes

Show feasibility for buy-in

– Proof of concept – Manage expectations

SLIDE 5

CS147 - Terry Winograd - 5

What to Prototype?

“…Prototypes provide the means for examining design problems and evaluating solutions. Selecting the focus of a prototype is the art of identifying the most important open design questions.”

Houde and Hill – What do Prototypes Prototype?

SLIDE 6

Design Process

OBSERVE VISUALIZE PROTOTYPE EVALUATE UNDERSTAND IMPLEMENT

SLIDE 7

CS147 - Terry Winograd - 7

Iterative Prototyping

Quality is a function of the number of

iterations and refinements a design undergoes before it hits the street.

To get a good idea, get lots of ideas.
Enlightened trial and error is better

than than the planning of a flawless intellect.

SLIDE 8

CS147 - Terry Winograd - 8

FAIL EARLY

(Cost of failure vs. project time curve)

From Hans Haenlein, IDEO

SLIDE 9

CS147 - Terry Winograd - 9

FAIL OFTEN

(Risk vs. iteration curve)

From Hans Haenlein, IDEO

SLIDE 10

CS147 - Terry Winograd - 10

3 stages of prototyping

LOW RESOLUTION

project time EVOLVE VALIDATE # of ideas

prototype driven specs → HIGH RESOLUTION spec driven prototypes

INSPIRE

From Hans Haenlein, IDEO

SLIDE 11

CS147 - Terry Winograd - 11

Designing the Prototype

Choose what aspects to prototype

for relevance to your project goals

Identify measurable design goals
Good enough to provide feedback

but flexible enough for significant changes to be made down the line

SLIDE 12

CS147 - Terry Winograd - 12

Sketches
Diagrams & Frameworks
Hand Made Constructions
Machined Constructions
Virtual Models
Graphics
Packaging
Spaces
Role Play, Experiences
Video
…

What can be a Prototype?

SLIDE 13

SLIDE 14

CS147 - Terry Winograd - 14

Prototypes

Look like…
Work like…
Experience like …..

SLIDE 15

CS147 - Terry Winograd - 15

PROTOTYPE RAPID

(IDEO “surgical tool”)

SLIDE 16

CS147 - Terry Winograd - 16

PROTOTYPE ROUGH

SLIDE 17

Experience Prototyping

Jane Fulton Suri - IDEO

SLIDE 18

From Greenbaum and Kyng, Design at Work 1991

SLIDE 19

CS147 - Terry Winograd - 19

Early Stage Prototypes

Low Fidelity (Paper)

–Work with artifacts

Skits / Informance

–Understand roles and context Focus on concepts, not detail Low investment in status quo Openness to change

SLIDE 20

CS147 - Terry Winograd - 20

Storyboards

SLIDE 21

CS147 - Terry Winograd - 21

Paper Prototype

http://www.mindspring.com/~bryce_g/projects/lo_fi.html

SLIDE 22

CS147 - Terry Winograd - 22

Low-Fidelity Prototype

http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/t4/body/low-fi/

SLIDE 23

CS147 - Terry Winograd - 23

SLIDE 24

CS147 - Terry Winograd - 24

SLIDE 25

CS147 - Terry Winograd - 25

Flipbook

SLIDE 26

CS147 - Terry Winograd - 26

Flipbook

SLIDE 27

CS147 - Terry Winograd - 27

Flow Diagrams

From a previous cs147 project…

SLIDE 28

CS147 - Terry Winograd - 28

Be Clever About Faking It

Device Mockups

– Palm, Utopia,..

Device substitution

– PC prototype for small device – Tethers for wireless – Pager for defibrillator – …

Wizard of Oz techniques

SLIDE 29

CS147 - Terry Winograd - 29

Wizard of Oz

Some aspects of interface are implemented
Operation requires processing that is

actually done by a human, not directly visible to the user

The “wizard” intervention needs to be

designed to be believable, both technologically and to the user

SLIDE 30

CS147 - Terry Winograd - 30

Wizard of Oz for Multimedia Design (Oviatt)

SLIDE 31

CS147 - Terry Winograd - 31

Fidelity is a Spectrum

Medium fidelity

–Cleaned up but not decorated –Wireframes, Blocks, Greeking,…

SLIDE 32

Medium Fidelity Prototypes

SLIDE 33

CS147 - Terry Winograd - 33

SLIDE 34

CS147 - Terry Winograd - 34

High Fidelity Tools

– FrontPage, GoLive, Dreamweaver,…

Screen mockups

– Illustrator, Photoshop, PowerPoint,….

Clickthroughs

– Flash, PowerPoint,…

Graphic interface builders

– Visual Basic, Visual C#, … – Smalltalk, Lisp,… – Flash, Director,…

Graphic toolkits

– Java JFC/Swing, TCL/TK, Prefuse,…

SLIDE 35

CS147 - Terry Winograd - 35

Breadth vs. Depth

Horizontal Prototype

–Top level –Basic features

Vertical Prototype

–Path in depth –Clickthrough or interactive

Combinations

SLIDE 36

CS147 - Terry Winograd - 36

Web prototypes (Van Duyne)

Industrial strength methods
Artifacts

Lecture 9 – Prototyping

Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006

Learning Goals

designs and be able to choose appropriately

fidelity prototyping

relevant techniques for your project

What is a Prototype?

the final artifacts exist

stakeholders in the design process

–Designers –Users –Clients

Uses of Prototypes

– Clarify goals and requirements – “Reflective conversation with the materials”

– Look and feel

– Compare alternatives – Make changes

– Proof of concept – Manage expectations

What to Prototype?

“…Prototypes provide the means for examining design problems and evaluating solutions. Selecting the focus of a prototype is the art of identifying the most important open design questions.”

Design Process

Iterative Prototyping

iterations and refinements a design undergoes before it hits the street.

than than the planning of a flawless intellect.

FAIL EARLY

(Cost of failure vs. project time curve)

FAIL OFTEN

(Risk vs. iteration curve)

3 stages of prototyping

Designing the Prototype

for relevance to your project goals

but flexible enough for significant changes to be made down the line

What can be a Prototype?

Prototypes

PROTOTYPE RAPID

(IDEO “surgical tool”)

PROTOTYPE ROUGH

Experience Prototyping

Early Stage Prototypes

–Work with artifacts

–Understand roles and context Focus on concepts, not detail Low investment in status quo Openness to change

Storyboards

Paper Prototype

Low-Fidelity Prototype

Flipbook

Flipbook

Flow Diagrams

Be Clever About Faking It

– Palm, Utopia,..

– PC prototype for small device – Tethers for wireless – Pager for defibrillator – …

Wizard of Oz

actually done by a human, not directly visible to the user

designed to be believable, both technologically and to the user

Wizard of Oz for Multimedia Design (Oviatt)

Fidelity is a Spectrum

–Cleaned up but not decorated –Wireframes, Blocks, Greeking,…

Medium Fidelity Prototypes

High Fidelity Tools

Breadth vs. Depth

–Top level –Basic features

–Path in depth –Clickthrough or interactive

Web prototypes (Van Duyne)

–Site maps –Storyboards –Schematics