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

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

What we will talk about More about UI sketches Prototypes 3

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

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

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

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

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

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

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

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

Prototypes 12

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

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

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

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

CMSC 434 Introduction to Human Computer InteractionSpring Prototyping in other areas Houses

CMSC 434 Introduction to Human Computer InteractionSpring Prototyping in other areas Car

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

CMSC 434 Introduction to Human Computer InteractionSpring

CMSC 434 Introduction to Human Computer InteractionSpring

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

CMSC 434 Introduction to Human Computer InteractionSpring

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

CMSC 434 Introduction to Human Computer InteractionSpring

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

CMSC 434 Introduction to Human Computer InteractionSpring

CMSC 434 Introduction to Human Computer InteractionSpring

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

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

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

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

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

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

CMSC 434 Introduction to Human Computer InteractionSpring Make it large pointing = clicking

CMSC 434 Introduction to Human Computer InteractionSpring Keep it (mostly) black and white

CMSC 434 Introduction to Human Computer InteractionSpring Keep UI components organized

CMSC 434 Introduction to Human Computer InteractionSpring Make photocopies of components for multiple runs

CMSC 434 Introduction to Human Computer InteractionSpring User transparency for text input

CMSC 434 Introduction to Human Computer InteractionSpring Sticky notes

CMSC 434 Introduction to Human Computer InteractionSpring Use index cards for different data items

CMSC 434 Introduction to Human Computer InteractionSpring Dialog boxes and popup messages

CMSC 434 Introduction to Human Computer InteractionSpring Highlighting

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

CMSC 434 Introduction to Human Computer InteractionSpring 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

CMSC 434 Introduction to Human Computer InteractionSpring 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

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

CMSC 434 Introduction to Human Computer InteractionSpring 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

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

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

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

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

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

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

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.

Example high-fidelity prototype

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

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

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

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.

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.

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

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

CMSC 434 Introduction to Human Computer InteractionSpring Observer Facilitator User Computer

Usability testing We will talk about it next week 65

TODO: Homework 2 If you submitted Homework 1, I will 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 , 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

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 with the subject “[SE204] HW 2” (without – 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.