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 types
of 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
CS147 - Terry Winograd - 2
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
CS147 - Terry Winograd - 3
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
CS147 - Terry Winograd - 4
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?
CS147 - Terry Winograd - 5
Design Process
UNDERSTAND OBSERVE IMPLEMENT
VISUALIZE
EVALUATE PROTOTYPE
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.
CS147 - Terry Winograd - 7
FAIL EARLY
(Cost of failure vs. project time curve)
From Hans Haenlein, IDEO
CS147 - Terry Winograd - 8
FAIL OFTEN
(Risk vs. iteration curve)
From Hans Haenlein, IDEO
CS147 - Terry Winograd - 9
3 stages of prototyping
# of ideas
INSPIRE EVOLVE VALIDATE
project time
LOW
prototype
RESOLUTION
driven specs → spec
HIGH
driven
RESOLUTION
prototypes
From Hans Haenlein, IDEO
CS147 - Terry Winograd - 10
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
CS147 - Terry Winograd - 11
What can be a Prototype?
• Sketches
• Diagrams & Frameworks
• Hand Made Constructions
• Machined Constructions
• Virtual Models
• Graphics
• Packaging
• Spaces
• Role Play, Experiences
• Video
• …
CS147 - Terry Winograd - 12
Prototypes
• Look like…
• Work like…
• Experience like …..
CS147 - Terry Winograd - 14
PROTOTYPE RAPID
(IDEO “surgical tool”)
CS147 - Terry Winograd - 15
PROTOTYPE ROUGH
CS147 - Terry Winograd - 16
Experience Prototyping
Jane Fulton Suri - IDEO
From Greenbaum and Kyng, Design at Work 1991
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
CS147 - Terry Winograd - 19
Storyboards
CS147 - Terry Winograd - 20
Paper Prototype
[Link]
CS147 - Terry Winograd - 21
Low-Fidelity Prototype
[Link]
CS147 - Terry Winograd - 22
CS147 - Terry Winograd - 23
CS147 - Terry Winograd - 24
Flipbook
CS147 - Terry Winograd - 25
Flipbook
CS147 - Terry Winograd - 26
Flow Diagrams
From a previous cs147 project…
CS147 - Terry Winograd - 27
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
CS147 - Terry Winograd - 28
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
CS147 - Terry Winograd - 29
Wizard of Oz for Multimedia Design (Oviatt)
CS147 - Terry Winograd - 30
Fidelity is a Spectrum
• Medium fidelity
– Cleaned up but not decorated
– Wireframes, Blocks, Greeking,…
CS147 - Terry Winograd - 31
Medium Fidelity Prototypes
CS147 - Terry Winograd - 33
High Fidelity Tools
• Web
– 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,…
CS147 - Terry Winograd - 34
Breadth vs. Depth
• Horizontal Prototype
– Top level
– Basic features
• Vertical Prototype
– Path in depth
– Clickthrough or interactive
• Combinations
CS147 - Terry Winograd - 35
Web prototypes (Van Duyne)
• Industrial strength methods
• Artifacts
– Site maps
– Storyboards
– Schematics
CS147 - Terry Winograd - 36