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?

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

ConnectedHang 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->

‘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

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

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