1. HCDE 418 Monday, February 11 Prototyping

2. Today Announcements – 5 min P2 debrief – 5 min Lecture – 40 min Break – 5 min Prototyping tools demos – 30 min Mid-quarter evals – 20 min

3. Announcements P4 due Friday at 5:00 PM Cathie Toshach, UX Designer II, Microsoft on Wednesday

4. Questions, Comments ?

5. P2 – User Research – Debrief Overall, good work Issues Overview design problem to start Justify methods, explain shortcomings Individual findings vs. themes across participants – “high-level synthesis” Include some raw data (examples) to be convincing Use actual numbers rather than “many,” “most”

6. Lecture ~40 minutes Quick prototyping review Lo-fi vs. hi-fi Experience prototyping

7. Prototype: n. A first or preliminary model of something, esp. a machine, from which other forms are developed or copied. v. Make a prototype (of a product).

8. Sketches vs. Prototypes Sketches are about exploring ideas Prototypes are about testing ideas

9. Sketch vs. Prototype SketchPrototype InviteAttend SuggestDescribe ExploreRefine QuestionAnswer ProposeTest ProvokeResolve Tentative, non committalSpecific depiction The primary differences are in the intent

10. Prototype vs. System Development In engineering, prototyping is system development: building the first example of a system by hand In UX design, the effort on the functionality of the system is minimized for the prototype Focus on the "visible" parts of the system Still a range, in terms of fidelity and level of activity, in relation to the final product

11. Prototyping in the Design Process

12. What is a prototype? In experience design it can be: a series of screen designs (e.g., from Photoshop) a storyboard, i.e., a cartoon-like series of scenes a PowerPoint slide show or HTML pages a video simulating the use of a system a lump of wood (e.g., PalmPilot) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language etc.

13. Why prototype? Evaluation and feedback are central to interaction design Users can see, hold, interact with a prototype more easily than a document or a drawing You can test out ideas for yourself It encourages reflection: important aspect of design Prototypes answer questions, and support designers in choosing between alternatives

14. Lo-fi Hi-fi Lo-fidelity and Hi-fidelity prototypes

15. Paper Cardboard Sketches etc. Lo-fi Looks less like the real thing Looks more like the real thing Software: Photoshop Flash Visual Basic Hi-fi Lo-fidelity and Hi-fidelity prototypes

16. Fidelity: n. The degree to which a model or simulation reproduces the state and behavior of a real world object, feature or condition.

17. Fidelity: n. The quality of being faithful or loyal. Its original meaning regarded duty to a lord or a king.

18. BEING TRUE

19. Paper Cardboard Sketches etc. Lo-fi Looks less like the real thing Looks more like the real thing Software: Photoshop Flash Visual Basic Hi-fi BEING TRUE

20. Paper Cardboard Sketches etc. Lo-fi NOT THE THING MORE THE THING Software: Photoshop Flash Visual Basic Hi-fi BEING TRUE

21. Hi-Fi vs. Lo-Fi Lo – FiHi – Fi Advantages Disadvantages

22. Hi-Fi vs. Lo-Fi – How’d we do? Lo – FiHi – Fi AdvantagesFast Cheap Easy – kindergarten skills! Can simulate actual product Better sense of finished product Can judge aesthetic appeal More realistic experience Can evaluate experience DisadvantagesSlow response time Can’t get feedback about aesthetics User may question design quality Users may focus on unnecessary details Takes a lot of time to make Users may lose track of big picture

23. Horizontal vs. Vertical How much to represent? “Deep” or “vertical” prototyping provide a lot of detail for only a few functions “Broad” or “horizontal” prototyping provide a wide range of functions, but with little detail

24. Horizontal vs. Vertical Vertical prototype Scenario Horizontal prototype Full interface

25. Horizontal vs. Vertical Product e.g., main menu items

26. Horizontal vs. Vertical Vertical prototype Scenario Horizontal prototype Full interface

27. Prototyping Recommendations Start early Avoid evolutionary prototypes Temptation is too great to stick with bad ideas Level of polish should reflect maturity of the prototype

28. Experience Prototyping The key is making the interactions and experience as authentic to the real thing as possible Typically a Hi-fidelity experience Use Wizard-of-Oz to save time and avoid complicated implementation

29. Wizard of Oz A method of testing a system that does not exist –the listening typewriter, IBM 1984 Dear Henry What the user sees Speech Computer From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

30. A method of testing a system that does not exist –the listening typewriter, IBM 1984 What the user seesThe wizard Speech Computer Dear Henry From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983. Wizard of Oz

31. Name origin From the book & movie http://www.youtube.com/watch?v=NZR64EF3O pA&feature=related

32. Humbug: n. Deceptive or false talk or behavior.

33. Important Note Up until the point the wizard is discovered, the thoughts, feelings, and actions of Dorothy and the others were all genuine They were genuinely experiencing what it would be like to talk to a powerful and terrible wizard

34. Wizard of Oz Human ‘wizard’ simulates system response interprets user input according to an algorithm controls computer to simulate appropriate output uses real or mock interface wizard sometimes visible, sometimes hidden “pay no attention to the man behind the curtain!” good for: adding simulated and complex vertical functionality testing futuristic ideas

35. Sketch-a-move

36. Anti-Gravity Bar http://www.youtube.com/watch?v=DL9cAcQ- gKQ

37. Experience Prototypes w/ Paper Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington

38. Real Human Interface http://www.youtube.com/watch?v=Gjd7rtlu5b U

39. P5: Prototypes – Wed, Feb 27 Prototypes must simulate the experience of using your system Wizard of Oz, HTML prototypes, fully functioning system In-class demos Wed, Feb 27, & Mon, Mar 4 About 15 minutes of class time per group will be available for demos Wed, Feb 27: Groups 1, 3, 5, 7 Mon, Mar 4: Groups 2, 4, 6, 8

40. Break About 5 minutes

41. Demos Axure – Chris Rovillos Balsamiq – Ezra Park Photoshop – Kyle Karpack

42. Mid-quarter evals Please provide feedback on how course can be improved – for the rest of this quarter, and for future students