Prototyping

Objectives

By the end of class, you will be able to… •  Explain why prototyping is an important

phase of design. •  Create and test paper prototypes. •  Explain how to create a high-fidelity

prototype. •  Explain what kind of prototype is appropriate

for a given product and phase of design.

What is a prototype?

Q: What are the reasons for creating prototypes?

Low vs. High Fidelity

•  Higher fidelity The more it looks & feels like the real system

•  A continuum from low to high – Low: paper prototypes, storyboards – High: interactive software prototypes

Sketches

Cardboard Mockups

‘Functional’ Paper Prototypes

Storyboards

Storyboard of a computer based telephone

Computer Telephone

Last Name: First Name: Phone:

Place Call Help

Help->

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Dialling....

Cancel

Call connected...

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Connected

Hang up

Call completed...

Return

Help Screen You can enter either the person's name or their number. Then hit the place button to call them

Call by name->

Computer Telephone

Last Name: Greenberg First Name: Phone:

Place Call Help

Establishing connection->

Low-fidelity prototyping tips •  Use sturdy paper – aids reuse •  Use separate cards for each component and

containers – flexible rearrangement •  Whiteboards are very useful:

–  Can move paper components on top of it –  Use pens to draw containers and relationships –  Multiple colors, easy to erase

•  Users can take part in arranging / drawing components

Low-fidelity tips continued

•  Use drawing software like Visio – Components can be easily moved, resized

•  Alternative: dedicated prototyping software – E.g. Balsamiq:

http://balsamiq.com/products/mockups

‘Wizard-of-Oz’ prototyping • The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. • Good for complex, futuristic functionality

>Blurb blurb >Do this >Why?

User

Speech Interfaces •  Experimenter hears the command and makes the system respond accordingly

Intelligent Agents •  Person trained to mimic “learning agent”

•  user provides examples of task •  computer learns from them

‘Wizard-of-Oz’ examples

Software Prototypes •  Usually high

fidelity •  Incomplete

functionality •  May be a

collection of predefined pages & links

Horizontal & Vertical Prototyping

Vertical prototype

Horizontal prototype

Scenario

Full System

Creating Software Prototypes: Tools

•  Powerpoint (tips at http://www.boxesandarrows.com/view/interactive) •  Keynote (tips at

http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-or-less-using-apple-keynote/)

•  Flash •  HTML •  Programming languages •  …

Advantages of Low & High fidelity prototypes?

Low fidelity •  Quick & cheap •  Easy to change •  Shows look & feel •  Looks incomplete, so

users are more likely to offer suggestions

High fidelity •  More complete

functionality •  Shows look, feel, &

behaviour •  Can test interactivity •  Can be used as a

marketing demo

Key Points

•  Use rapid prototyping techniques – Low fidelity for early iterative design – High fidelity for more thorough testing of

later designs •  User testing is possible, even with

paper prototypes