Prototyping: What? Why? and How?

1. Prototyping: What? Why? and How? Emma J. Rose UW Technical Communication

2. Today we’ll talk about • What is a prototype • Why and how prototypes are used • How this applies to you • Some examples • …and, if time permits, we’ll build a prototype Emma J. Rose - UWTC

3. What do you think when you hear the word “prototype”? Emma J. Rose - UWTC

4. What is a prototype • An original … what other forms will be developed from • A physical model • A design of some part (or entire) system Emma J. Rose - UWTC

5. What do prototypes look like? • They are “mock ups” • Rough drafts or sketched of a design • Can be just a drawing or have extended functionality • A work in progress Emma J. Rose - UWTC

6. We use prototypes all the time • User-centered design (UCD) • Is a philosophy and an approach to creating products and processes • Puts the user in the center of the design decisions • Usability • Is an essential part of UCD • Helps evaluate a product to see if it’s working Emma J. Rose - UWTC

7. Why do we use prototypes? • To get a sense of how a product will work • Identify essential features or components • Have something to evaluate early on • And…. Emma J. Rose - UWTC

8. Why else do we use prototypes? • Helps you from going in the wrong direction • A cheap way to do it! • Let’s you make changes quickly, try something new without being tied down. Emma J. Rose - UWTC

9. According to Jakob Nielsen • Cheaper to change a product early than later in the development process • Common estimate is that it's 100 times cheaper to make a change before any code has been written Emma J. Rose - UWTC

10. How are prototypes used • Throughout the design process • Help design and evaluate a product along the way • Moves from simple to more complex: this is called fidelity Emma J. Rose - UWTC

11. How detailed a mock up is How close to being “done” Low - Paper Medium - Visio, PowerPoint, Word High - Programming can include full functionality Fidelity Emma J. Rose - UWTC

12. Prototypes Evaluate Design Emma J. Rose - UWTC

13. evaluate evaluate evaluate Summary of findings Summary of findings Summary of findings High fidelity Low fidelity Higher cost Lower cost Emma J. Rose - UWTC

14. What do prototypes look like? Picture from Norman Nielsen Group (NNG.com) Emma J. Rose - UWTC

15. Picture from Norman Nielsen Group (NNG.com) Emma J. Rose - UWTC

16. Many products started on paper • Can just use stickies • Draw idea on a napkin! Emma J. Rose - UWTC

17. Choosing diamonds on Amazon.com Actual interface Mock up Emma J. Rose - UWTC

18. How do we evaluate prototypes? • Similarly to how we evaluate any product • An essential element to user-centered design….. • We do usability studies! Emma J. Rose - UWTC

19. Evaluating prototypes • All you need is paper • A person to play “computer” • Some imagination Emma J. Rose - UWTC Picture from Norman Nielsen Group (NNG.com)

20. Emma J. Rose - UWTC Picture from Norman Nielsen Group (NNG.com)

21. Objections you may hear • I can’t use a prototype, my product is too complex! • How will people know what the system is doing? It needs to be coded so it’s interactive. • How can we evaluate a paper version? Users will think it’s silly. Emma J. Rose - UWTC

22. How we respond • No product is too complex! Think of it from a user’s perspective. You can think just screen to screen. • An evaluation can be interactive, someone plays the computer and simulates interactivity • Users are willing to go along! They pretend it is real product. Emma J. Rose - UWTC

23. How this applies to you • The Make it Better assignment • When you suggest a redesign, it is helpful to provide visual elements • Consider creating a prototype • You can evaluate it with real users • You will have data about what works and what doesn’t • Gives you an aid to talk about what you changed and why • All design is iterative…this is why you can “Make it Better” Emma J. Rose - UWTC

24. In class activity • How many people drive in Seattle? • How about park? • What’s hard about parking? • How about after you park? Emma J. Rose - UWTC

25. Progress? • We went from Emma J. Rose - UWTC

26. Design scenario • The city of Tacoma has hired you to create new digital parking meters • After doing some research, they like some aspects of the Seattle digital meters: • Solar powered • Send data to a central location • Let users pay with credit card • However… Emma J. Rose - UWTC

27. They don’t like the design! • Your task: Design an interface for a parking meter • It should: • Allow use of Credit cards, cash: bills and coins • Be easy to use • Not required lots of instructions on the design itself • Use paper and pencil or pen Emma J. Rose - UWTC

28. Debrief • What was easy or hard about the exercise? • What would you do next before pitching the design to the City of Tacoma? • What are some extra bonuses of doing a prototype? Emma J. Rose - UWTC

29. If you want to learn more • About Paper Prototyping • Paper Prototyping by Carolyn Snyder • Jakob Nielsen’s article on Useit.com Emma J. Rose - UWTC

30. If you want to learn more about • User centered design and usability • Coordinated study: Offered Spring 2006 • Meets evenings and weekends • 3 linked courses: • Theory of Human Computer Interaction • User Experience Design • Usability Research Methods • You get to design a product and evaluate it. Emma J. Rose - UWTC

31. Thanks for your time! Questions? • Email • Me: ejrose@u.washington.edu • TC advisor: knappy@u.washington.edu • Pick up a brochure • See the website • http://www.uwtc.washington.edu/programs/certs/coordstudy.php Emma J. Rose - UWTC