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

Brainstorm different representationsChoose a representationRough out interface styleTask centered walkthrough and redesign

Fine tune interface, screen designHeuristic evaluation and redesign

Usability testing and redesign

Limited field testing

Alpha/beta tests

LoFi (paper) prototypes

Medium Fidelity prototypes

HiFi Prototypes / restricted systems

Working system

Early design

Late design

Next Steps

• Project– Paper Prototypes due next week