1. SE 204 – Human Computer Interaction Lecture 6: Prototypes Lecturer: Gazihan Alankuş Please look at the last slides for assignments (marked with TODO) 1

2. What we talked about before Collecting requirements Identifying the current workflow Using a storyboard to propose a new workflow Drawing UI sketches 2

3. What we will talk about More about UI sketches Prototypes 3

4. Motivation Why are we doing all this? Why not just create the software? – after collecting the requirements – finding a better workflow Why take the time to draw? – storyboards – design sketches – paper prototypes (user interfaces made with paper) 4

5. Spiral Model: smaller scale iterations 5 Develop Deliver $$$$$$$ Deliver $$$$$$$ Requirements Design Test Start Design Requirements Develop Test Requirements Design Develop Test

6. Spiral Model: smaller scale iterations If we create the real software instead of its representations on paper, we will lose a lot of time! We want to get feedback from users as early as possible Talking about possible solutions is not enough to get valuable feedback, you have to show them possible solutions and get users to experience them 6 Develop Deliver $$$$$$$ Deliver $$$$$$$ Requirements Design Test Start Design Requirements Develop Test Requirements Design Develop Test

7. Motivation We want early feedback The process has to be – Quick – Inexpensive So that we can – rapidly explore the set of possible solutions – quickly improve promising ones via iteration 7

8. Things that we can do quickly Consider alternative workflows and create storyboards for them – Get feedback about them – Improve them Create UI sketches for promising storyboards – Get feedback about them – Improve them Create paper prototypes for promising sketches – Get feedback about them – Improve them 8

9. Iterate quickly 9 Develop Deliver $$$$$$$ Deliver $$$$$$$ Requirements Design Test Start Design Requirements Develop Test Requirements Design Develop Test

10. Motvation How do you get feedback for something you drew on paper? Is it enough for the user to look at it and voice his opinions? – We know that users usually don’t know what they need – We need to watch them use the interface If we had the actual software, we could let the user use it and clearly see what needs to be improved. How can we do this when all we have is things that are drawn on paper? Users can’t use paper interfaces, can they? – Let’s watch a video http://www.youtube.com/watch?v=GrV2SZuRPv0 http://www.youtube.com/watch?v=GrV2SZuRPv0 10

11. Motivation Oh, users can use interfaces drawn on paper! – Maybe it’s not the same as real software, but definitely better than simply asking for their opinions Using paper prototypes, we can get feedback from users that is comparable with feedback that we would get by using the actual software! 11

12. Prototypes 12

13. Prototypes Remember playing with your toys when you were 6 years old? – Toys + imagination = loads of fun! Let’s play cars! – Shared imagination – Make your friend experience a car race He can step into your imagination and contribute Any other board game Same idea – Create a low-fidelity interactive experience that enables you to share imagination with others 13

14. Why Prototype? Communicate (with users and other team members) – Demonstrate – Make them experience rather than convince Decide (yourself and with team members) – You are stateful! – Decisions about the interface are better made when playing/using. Not when staring at Microsoft Word. 14

15. Communicate: Talking is not enough! “A picture is worth a thousand words” -Napoleon You are not a painter. You are designing interactive experiences! “A one-minute user experience is worth a thousand pictures!” -ME! 15

16. Decide Use -> Better decisions How can you use it before creating it? – PAPER PROTOTYPE! Paper prototypes allow you to simulate using the interface you want to create, so that you can make better decisions without using the actual interface 16

17. CMSC 434 Introduction to Human Computer InteractionSpring 2010 13 Prototyping in other areas Houses

18. CMSC 434 Introduction to Human Computer InteractionSpring 2010 14 Prototyping in other areas Car

19. CMSC 434 Introduction to Human Computer InteractionSpring 2010 16 Children collaboration Users: – Children Task: – Making seating arrangement collaboratively seating Technology: – Tabletop

20. CMSC 434 Introduction to Human Computer InteractionSpring 2010 17

21. CMSC 434 Introduction to Human Computer InteractionSpring 2010 18

22. CMSC 434 Introduction to Human Computer InteractionSpring 2010 19 Hybrid museum experience Users: – Museum visitors Task: – Obtain more information about an artifact Technology: – Some kind of digital display

23. CMSC 434 Introduction to Human Computer InteractionSpring 2010 20

24. CMSC 434 Introduction to Human Computer InteractionSpring 2010 21 Wireless P2P Users: – Teenagers Tasks: – Share data with others Technology: – Mobile devices

25. CMSC 434 Introduction to Human Computer InteractionSpring 2010 22

26. CMSC 434 Introduction to Human Computer InteractionSpring 2010 23 Cell-phone robot User: – Cell phone users Task: – Interacting with a cell phone Technology: – Robot

27. CMSC 434 Introduction to Human Computer InteractionSpring 2010 24

28. CMSC 434 Introduction to Human Computer InteractionSpring 2010 25

29. Paper prototypes If you are mainly creating software, creating user interfaces on paper is usually sufficient Paper prototypes are actively used in many design firms to mock up the user interface before actually creating it 29

30. How should we create paper prototypes? Start with the design sketches Improve them a bit, enough to make it possible for someone to use it. Don’t try to improve the visual look, we want our prototypes to be low fidelity as well 30

31. How should we create prototypes? Don’t get attached – Plan to throw one or two away Throwing away is not easy. Force yourself at least once. The whole point of prototypes is to feel free! – Forget about it and create a new one with a different idea, rather than trying to force things to work together Parallelize them – Keep more than one working paper prototype when you have multiple really good options 31

32. Buliding paper prototypes To simulate a working interface, drawing is not enough Pieces of user interfaces change – Menus appear – Popups are shown – Text is entered – Warnings are shown Build paper prototypes from multiple pieces of paper, post-it notes, etc. – Be creative! 32

33. Elements of a possible prototype Windows, background – Poster board, large table top Menus, window content, dialog boxes – Index cards Text fields, checkboxes, short messages – Write on tapes, masking tapes Highlighting, user typing – Transparencies Animation – Move with hands Sound – Make noises 33

34. Ideas for tools that you can use White poster board Big index cards Restickable glue and post-it notes White correction tape Overhead transparencies Photocopiers Pens, markers, scissors, tape 34

35. CMSC 434 Introduction to Human Computer InteractionSpring 2010 47 Make it large pointing = clicking

36. CMSC 434 Introduction to Human Computer InteractionSpring 2010 48 Keep it (mostly) black and white

37. CMSC 434 Introduction to Human Computer InteractionSpring 2010 49 Keep UI components organized

38. CMSC 434 Introduction to Human Computer InteractionSpring 2010 50 Make photocopies of components for multiple runs

39. CMSC 434 Introduction to Human Computer InteractionSpring 2010 51 User transparency for text input

40. CMSC 434 Introduction to Human Computer InteractionSpring 2010 52 Sticky notes

41. CMSC 434 Introduction to Human Computer InteractionSpring 2010 53 Use index cards for different data items

42. CMSC 434 Introduction to Human Computer InteractionSpring 2010 54 Dialog boxes and popup messages

43. CMSC 434 Introduction to Human Computer InteractionSpring 2010 55 Highlighting

44. Fidelity Paper prototypes should be “low fidelity” They should evolve into “high fidelity” prototypes through iterations – What does that mean? 44

45. CMSC 434 Introduction to Human Computer InteractionSpring 2010 5 Five fidelity dimensions 1. Level of visual refinement 2. Breadth of functionality 3. Depth of functionality 4. Richness of interactivity 5. Richness of data model

46. CMSC 434 Introduction to Human Computer InteractionSpring 2010 6 1.Level of visual refinement Low The prototype does not look like the final product. Hand-drawn sketches Box-and-line wireframes Brick High The prototype looks very similar to the final product. Pixel-accurate mockups

47. CMSC 434 Introduction to Human Computer InteractionSpring 2010 7 2.Breadth of functionality Low The prototype only supports a small subset of tasks. High The prototype supports all the tasks. Horizontal prototype

48. CMSC 434 Introduction to Human Computer InteractionSpring 2010 8 3.Depth of functionality Low The prototype allows users to perform only parts of a task. High The prototype allows users to complete a task. Vertical prototype

49. CMSC 434 Introduction to Human Computer InteractionSpring 2010 9 4.Richness of interactivity Low The prototype gives users limited ways to interact. High The prototype provides a fully interactive experience.

50. CMSC 434 Introduction to Human Computer InteractionSpring 2010 10 5.Richness of data model Low The prototype includes a small amount of fake data. High The prototype includes a large amount of real data.

51. Ideal fidelity dimensions for paper prototypes Visual (low) Breadth (low to high) Depth (low to high) Interactivity (medium) Data (low) 51

52. Saul Greenberg Sketching and Prototyping Sketches / low / medium / high fidelity prototypes –as investment in design increases (red arrow), so does the formality of the criteria whereby concepts are reviewed or accepted From design to evaluation –similarly, interface design (idea generation) progresses to usability testing (idea debugging and refinement) From Design for the Wild, Bill Buxton (in press) with permission

53. Saul Greenberg Sketching vs Prototyping Low fidelity –Invite –Suggest –Explore –Question –Propose –Provoke High fidelity –Attend –Describe –Refine –Answer –Test –Resolve From Design for the Wild, Bill Buxton (in press) with permission

54. Saul Greenberg Sketching and Prototyping Early design Late design Brainstorm different representations Choose a representation Rough out interface style Sketches & low fidelity paper prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Medium fidelity prototypes Limited field testing Alpha/Beta tests High fidelity prototypes Working systems

55. Saul Greenberg Limiting prototype functionality vertical prototypes –includes in-depth functionality for only a few selected features –common design ideas can be tested in depth horizontal prototypes –the entire surface interface with no underlying functionality –a simulation; no real work can be performed scenario –scripts of particular fixed uses of the system; no deviation allowed Vertical prototype Scenario Horizontal prototype Full interface Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press.

56. Example high-fidelity prototype

57. Scan the stroller -> Change the color -> Place the order -> Initial screen

58. Scan the shirt -> Touch previous item -> Delete that item-> Alternate path…

59. How do we test with prototypes? Remember that we can get users to use paper prototypes: 59

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

61. Wizard of Oz 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.

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

63. Running tests with paper prototypes Roles: User Design Team – Computer – Facilitator – Observer 63

64. CMSC 434 Introduction to Human Computer InteractionSpring 2010 58 Observer Facilitator User Computer

65. Usability testing We will talk about it next week 65

66. TODO: Homework 2 If you submitted Homework 1, I will e-mail you about which idea you should continue with. This is what you need to do for Homework 2 1.Go to the user’s environment and observe the user while performing the task. You can also shadow if you have time. Interview the user afterwards. 2.Write down the current workflow. Look at the relevant slides on what you should capture (pain points, etc.). Draw a storyboard for it. 3.Come up with an alternative workflow and draw a storyboard for it. 4.Show it to the user and get feedback about it. 5.Create a new version of the storyboard according to the user’s suggestions. 6.Draw sketches for the screens of the storyboard. In your e-mail, you need to have a heading for each of the six bullet points above and provide necessary information for each Provide photographs of – You and the user (for 1) – Storyboards (for 2, 3, 5) – Sketches (for 6) 66

67. TODO: Homework 2 Submission – Due July 24th, before class – Write down (or paste) your responses in the body of an e- mail. Do not attach a document. Refer to the attached photographs by their file names. – Send them to gazihan.ieu@gmail.com with the subject “[SE204] HW 2” (without quotes)gazihan.ieu@gmail.com – If you do not follow these submission instructions, your homework may be invalid. – Homeworks are done individually. Do not work together. Homeworks that are very similar may be considered cheating and would be punished according to the university regulations.