Prototyping
REVIEW : Why a prototype?
• Helps with:
– Screen layouts and information display
– Work flow, task design
– Technical issues
– Difficult, controversial, critical areas
Low-fidelity (LoFi) Prototypes
• Quick and cheap to make, easy to change
• Use a medium which is unlike the final medium,
e.g. paper, cardboard
• Examples
• sketches of screens, task sequences, etc
• ‘Post-it’ notes
• storyboards
• ‘Wizard-of-Oz’
Surprisingly…
• In many circumstances, LoFi prototypes
work better than HiFi prototypes
• Why? The goal is to try out lots of ideas
fast, early in development (when changes
are cheap)
– “To get a good idea, get lots of ideas”
• HiFi prototypes take too long to develop
Surprisingly…
• Testers focus on superficial issues rather than
content
• Developers resist changes
• HiFi prototypes can set unrealistic expectations
• A single bug in a HiFi prototype can halt testing
• Downside of LoFi prototypes: hard to envision
course of an interaction
– Storyboards help
Need a “toolkit” for making LoFi
prototypes
•
•
•
•
•
•
Construction paper
Note cards
Post-it notes
Scissors
Glue, tape
Lots of paper copies of standard GUI
elements: text fields, buttons, check boxes,
radio buttons, labels, etc.
For More Information…
http://www.snyderconsulting.net/us-paper.pdf
http://www.uie.com/articles/prototyping_tips/
Let’s go to the Film
• First 5 chapters of Nielsen DVD
Storyboards
• Series of sketches showing how a user might
progress through a task using an interface
• Often used with scenarios, bringing more detail
• Make it easier to envision the progress of the
interaction
Medium fidelity prototypes
• Now move to the computer (e.g., use Visual
Basic)
– Simulate some but not all features of the intended
system  more engaging for users
• Purpose
– Provide interactive (but limited) scenario for user to try
out; gets around limits of LoFi prototypes on testing
flow of interaction
– May offer a development path to running system
How do you limit functionality?
• Horizontal prototypes
– Entire UI is implemented, but no underlying
functionality
• Vertical prototypes
– Include in-depth functionality for a few features
– Common design ideas can be tested in depth
• Scenario-based
– Scripts of particular uses of the system; no deviations
• Wizard of Oz – human simulates the intelligence
High fidelity prototypes
• Basically complete running system
• But may not be:
–
–
–
–
In a suitable language for delivery
Efficient
Robust
Well-coded
• “Build one to throw away”… a common
research methodology
Recall benefits of LoFi
Prototypes
• LoFi prototypes are very quick to develop
– Early in the process when changes are cheap
• Users focus on content instead of superficial
issues
• Developers aren’t yet invested, thus are
willing to change
• Don’t set unrealistic expectations
• No bugs to halt testing
The Prototyping Spectrum
Early design
Brainstorm different representations
Choose a representation
Rough out interface style
Task centered walkthrough and redesign
Fine tune interface, screen design
Heuristic evaluation and redesign
LoFi (paper) prototypes
Medium Fidelity prototypes
Usability testing and redesign
Limited field testing
Alpha/beta tests
HiFi Prototypes / restricted systems
Working system
Late design
Next Steps
• Project
– Paper Prototypes due next week