1. Prototyping

2. 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.

3. What is a prototype?

4. Sketches

5. Cardboard Mockups

6. ‘Functional’ Paper Prototypes

7. Storyboards

8. 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->

9. ‘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

10. 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

11. Software Prototypes Usually high fidelity Incomplete functionality May be a collection of predefined pages & links

12. Horizontal & Vertical Prototyping

13. 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

14. 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

15. 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