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 CallHelp Help-> Computer Telephone Last Name: Greenberg First Name: Phone: Place CallHelp Dialling.... Cancel Call connected... Computer Telephone Last Name: Greenberg First Name: Phone: Place CallHelp 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 CallHelp 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

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