1. CS:2520 Human-Computer Interaction. Fall 2016.
Empathize
Define
Ideate
Prototype
Test
CS:2520 Human-Computer Interaction. Fall 2016.

2. From Preece, Rogers & Sharp’s Interaction Design
Designing Prototypes
From Preece, Rogers & Sharp’s
Interaction Design
CS:2520 Human-Computer Interaction. Fall 2016.

3. CS:2520 Human-Computer Interaction. Fall 2016.
Process
Conceptual design
What product will do
How it will behave
Physical design
Actual visual design
After requirements are established
Iterative
CS:2520 Human-Computer Interaction. Fall 2016.

4. CS:2520 Human-Computer Interaction. Fall 2016.
What is a prototype?
Can range from paper-based to programmed
Requirements can be used to see what design will work best
Save resources by testing out design ideas before investing major resources in writing code
CS:2520 Human-Computer Interaction. Fall 2016.

5. CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
Why should prototypes be used during the design process?
CS:2520 Human-Computer Interaction. Fall 2016.

6. CS:2520 Human-Computer Interaction. Fall 2016.
Prototypes
Many ideas can easily be sketched
Make it easier to communicate ideas about how technology will work
Stakeholders can provide feedback
Helps in learning about strengths and weaknesses of alternative designs
It may be hard for stakeholders to say exactly what they want (hard to get direct requirements), but they will very quickly tell you what they don’t want
CS:2520 Human-Computer Interaction. Fall 2016.

7. CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
What do you think are the advantages of developing low-fidelity prototypes?
CS:2520 Human-Computer Interaction. Fall 2016.

8. Low-fidelity prototyping
Advantages
Simple
Inexpensive
Quick to develop
Quick to modify
Easy to discard
Help concentrate on big picture rather than details
Explore different ideas
CS:2520 Human-Computer Interaction. Fall 2016.

9. CS:2520 Human-Computer Interaction. Fall 2016.
Paper prototyping
Underline links
Text input fields with rectangular boxes
Check boxes and radio buttons use correction tape
Buttons with text inside oval
Sticky notes for dropdown
Drag and drop – hard to prototype
Draw x or dot
Draw list with empty box, instructions, ask “what do you expect to happen now”
CS:2520 Human-Computer Interaction. Fall 2016.

10. CS:2520 Human-Computer Interaction. Fall 2016.
Paper prototyping
Scrolling: cut a box out of a piece of paper and lay on top of screen, move as the user scrolls
Might be faster to type info and print as opposed to writing it by hand
CS:2520 Human-Computer Interaction. Fall 2016.

11. CS:2520 Human-Computer Interaction. Fall 2016.
CS:2520 Human-Computer Interaction. Fall 2016.

12. CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
One type of low-fidelity prototypes
Sketches showing how user would interact with technology
Good for presenting ideas to non-users
Can be used to sell innovative ideas
Most useful for early concepts of highly innovative designs
Storyboards come from film and animation
Useful for a person to envision the use, as opposed to just a text scenario
CS:2520 Human-Computer Interaction. Fall 2016.

13. CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
May not get the best feedback from users because you show them how the system should be used
May not be the best for comparing different alternatives for same reason
CS:2520 Human-Computer Interaction. Fall 2016.

14. CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
Setup context
Clear progression
Give a “script” of important events
Leave out the details
CS:2520 Human-Computer Interaction. Fall 2016.

15. CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
Five visual elements:
Level of detail
Inclusion of text
Inclusion of people and emotions
Number of Frames
Portrayal over time
CS:2520 Human-Computer Interaction. Fall 2016.

16. CS:2520 Human-Computer Interaction. Fall 2016.
#1 Level of detail
Comic by Scott McCloud.
CS:2520 Human-Computer Interaction. Fall 2016.

17. #2 Inclusion of text Include text, but keep it short
CS:2520 Human-Computer Interaction. Fall 2016.

18. #3 Inclusion of people and emotions
Include people experiencing the system and their reactions
CS:2520 Human-Computer Interaction. Fall 2016.

19. CS:2520 Human-Computer Interaction. Fall 2016.
#4 Portrayal of Frames
4-6 frames ideal
Present a succinct story
Less work to illustrate
If longer
May lose focus of story or attention
CS:2520 Human-Computer Interaction. Fall 2016.

20. CS:2520 Human-Computer Interaction. Fall 2016.
#5 Portrayal of Time
Only use passage of time if necessary to understand
E.g. a longer break is necessary between two frames
CS:2520 Human-Computer Interaction. Fall 2016.

21. CS:2520 Human-Computer Interaction. Fall 2016.
Examples
Storyboarding is on a time axis, while sketching is not
CS:2520 Human-Computer Interaction. Fall 2016.

22. CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding Tips
If drawing is too difficult take pictures or use existing images with credit
Blur out unnecessary details
CS:2520 Human-Computer Interaction. Fall 2016.

23. CS:2520 Human-Computer Interaction. Fall 2016.
Sketching
Do not worry about your drawing skills
Best when they don’t look good
Avoids concentrating on details, colors
Helps everyone concentrate on whether design has the right elements and flows well
CS:2520 Human-Computer Interaction. Fall 2016.

24. CS:2520 Human-Computer Interaction. Fall 2016.
Sketching
Does not tell users how to interact
Could be confusing if ideas are highly innovative
Not as useful for physical (non-screen) design
CS:2520 Human-Computer Interaction. Fall 2016.

25. CS:2520 Human-Computer Interaction. Fall 2016.
Sketching
Sketch all screens (including variations) involved in the tasks you want to get feedback on
Usually useful to use a large sheet of paper
Pencils better for initial sketches
Colored pens may be used for more elaborate sketches
May use additional pieces of paper/other materials to show changes on the same screen (e.g. keep navigation menu, change content)
CS:2520 Human-Computer Interaction. Fall 2016.

26. CS:2520 Human-Computer Interaction. Fall 2016.
Examples
CS:2520 Human-Computer Interaction. Fall 2016.

27. CS:2520 Human-Computer Interaction. Fall 2016.
Index cards
Use common for developing websites
Also useful for applications with a large number of screens
Each card represents a screen
Can help organize websites
Can help with information architecture
CS:2520 Human-Computer Interaction. Fall 2016.

28. CS:2520 Human-Computer Interaction. Fall 2016.
Examples
CS:2520 Human-Computer Interaction. Fall 2016.

29. CS:2520 Human-Computer Interaction. Fall 2016.
When prototyping
Start building.
Don’t spend too long on one prototype.
Build with the user in mind
Identify what is being tested
Even if you aren’t sure what you’re doing, the act of picking up some materials (paper, tape, and found objects are a good way to start!) will be enough to get you going.
Move on before you find yourself getting too emotionally attached to any one prototype.
What do you hope to test with the user? What sorts of behavior do you expect? Answering these questions will help focus your prototyping and help you receive meaningful feedback in the testing phase.
Identify what’s being tested with each prototype. A prototype should answer a particular question when tested.
CS:2520 Human-Computer Interaction. Fall 2016.

30. CS:2520 Human-Computer Interaction. Fall 2016.
When prototyping
Impose Constraints
Add a constraint while brainstorming (e.g. what if it were morning?)
Time (create artificial deadlines to work efficiently)
CS:2520 Human-Computer Interaction. Fall 2016.

31. CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
How do you use low-fidelity prototypes to get feedback on your design?
CS:2520 Human-Computer Interaction. Fall 2016.

32. Evaluating prototypes
Go over user tasks to see how well the prototype will work
Evaluate in terms of requirements, usability goals, user experience goals
Evaluate using usability principles and heuristics
CS:2520 Human-Computer Interaction. Fall 2016.

33. Evaluating prototypes
Examples
Can users complete tasks?
How many steps does it take to complete tasks?
Are all the necessary functions available?
Are the necessary actions easily identifiable?
Is it easy to recuperate from errors?
What is the likelihood that users will make mistakes?
CS:2520 Human-Computer Interaction. Fall 2016.

34. Evaluating prototypes
Ask users to complete a particular task
For each step in the task
Ask: what would you do next?
After they show you what they would do, show them how the system would react
Show sketch for another screen
Use materials to modify current sketch
Ask: how do you interpret the system’s response?
CS:2520 Human-Computer Interaction. Fall 2016.

35. Evaluating prototypes
Tell users you are not testing them, they are testing your design
Do not be defensive about your design
Document any issues
Don’t know what to do
Surprised by response
Can’t find what they are looking for
Document what works well
CS:2520 Human-Computer Interaction. Fall 2016.

36. CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
What can go wrong with evaluating a low fidelity prototype?
CS:2520 Human-Computer Interaction. Fall 2016.

37. CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
Artificial Constraints “First, using your account number, make 15 copies of a document. Then, make another 15 copies, but DO NOT use your account number for these.”
CS:2520 Human-Computer Interaction. Fall 2016.

38. CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
Artificial sub goals
Photocopying machine: Tell someone to photocopy a 2-sided document on 8½” x 11” paper
Don’t say “make copies 50% dark”, “use bin b”, etc.
Let the user figure out for themselves what to do
CS:2520 Human-Computer Interaction. Fall 2016.

39. CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
Artificial ordering
Enter in 10 copies, with lightness set to 10%.
Choose 1 sided to 2 sided, use paper source bin A.
Cover sheet needed, using paper bin B for cover sheet.
Set stapling feature on and collating on.
Start printing.
Do not give them a procedure to complete the task, this might tell them which order to perform certain actions and what they are called
CS:2520 Human-Computer Interaction. Fall 2016.

40. CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
Do not make this a data entry task
Make 23 copies
With collate
Cover sheets
Default darkness
1 Sided-> 1 Sided
You want the user to determine these features, not the instructions
CS:2520 Human-Computer Interaction. Fall 2016.

41. CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
“You are a teacher and are trying to make 40 copies of a one-sided magazine article that is 10 pages long for your class tomorrow. Due to the large number of copies, you print the article double-sided. In other words, the 10 page article would be printed on 5 sheets of paper. Due to the high contrast of the article, you must lighten the copy. In other words, change the contrast. You then want the copies to be collated and stapled.”
Don’t give away the answer!
CS:2520 Human-Computer Interaction. Fall 2016.

42. CS:2520 Human-Computer Interaction. Fall 2016.
What should I do?
“It’s your first day in the office, starting a new job. You would like to make some copies of several documents that your boss gave you to browse through. Your colleague in the next cubicle tells you that you need an access code to make copies. The code is You walk over to the copy machine at the end of the hall and realize that it is not the Xerox copier that you are accustomed too... Make 2 copies of the ‘Company Annual Report’.”
Give a realistic scenario with context
CS:2520 Human-Computer Interaction. Fall 2016.

43. CS:2520 Human-Computer Interaction. Fall 2016.
Class activity
How would you evaluate storyboards?
How about index card prototypes?
CS:2520 Human-Computer Interaction. Fall 2016.

44. CS:2520 Human-Computer Interaction. Fall 2016.
Class activity
Sketch in your notebook, a design for a coloring system based on your tasks
Join your group project team and discuss everyone’s designs
Develop a design for the team using large sheets of paper and markers
Present to the class
CS:2520 Human-Computer Interaction. Fall 2016.

45. CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
What are some drawbacks to low-fidelity prototypes?
CS:2520 Human-Computer Interaction. Fall 2016.

46. Low-fidelity prototyping
Disadvantages
Slower than a computer
Hard to implement dropdowns, drag and drop, audio, video
Won’t look like final product
Participants cannot use them on their own
CS:2520 Human-Computer Interaction. Fall 2016.

47. Low-fidelity prototyping
What you will do for Phase 2 of group project
Use low-tech materials
White and colored paper, medium tip pens, cardboard, scissors, post its, tape, overhead transparencies, paper correction tape
Colored paper good if you want to visually separate different areas in your interface, but don’t take too long deciding, these aspects resolved later
Colored paper good for multi tab interactions
Medium tip pens – lines are big enough to read but not too big
Post-its could be good for dropdown boxes
Paper correction tape/overhead transparency (or other easy to add/remove item) good for filling out form fields so you can reuse the paper prototype
Transparency good to show highlighting
CS:2520 Human-Computer Interaction. Fall 2016.

48. Sketching: Medium Fidelity
Wireframes are a variation of sketching used for websites
Developed in software
Some may be interactive
May be used after first round of paper-and-pencil prototypes
See for an example
Half-way between low-fidelity and high-fidelity prototypes
CS:2520 Human-Computer Interaction. Fall 2016.

49. CS:2520 Human-Computer Interaction. Fall 2016.
Examples
CS:2520 Human-Computer Interaction. Fall 2016.

50. CS:2520 Human-Computer Interaction. Fall 2016.
Credits
These slides are adapted from:
Juan Pablo Hourcade
The University of Washington Introduction to Human-Computer Interaction (CSE 440):
CS:2520 Human-Computer Interaction. Fall 2016.