3. An introduction to: (45 minutes)
• Creating paper prototypes
• Conducting usability testing with paper prototypes
Exercise
• Create your own paper prototype (30 minutes)
• Usability testing of your paper prototype (30 minutes)
• Discussion (10 minutes)
What We’ll Do in this Workshop
June 11, 2015 3
4. We won’t get into the details of:
• Usability testing in depth
• Analyzing the data
What We’ll Do in this Workshop
June 11, 2015 4
5. How many people have…
• Designed a user interface?
• Created a paper prototype?
• Conducted usability testing?
About You
June 11, 2015 5
7. Prototyping is the link between design and development.
Why Prototype?
June 11, 2015 7
Flickr: CannedTuna Flickr: Yandle
8. Prototyping allows you to validate the design before building it, with:
• The project team
• Clients and stakeholders
• Users
Why Prototype?
June 11, 2015 8
9. You get the best feedback from designs that people can try out.
Why Prototype?
June 11, 2015 9
Flickr: Samuel Mann
10. Prototypes provide something concrete to interact with and react to.
Why Prototype?
June 11, 2015 10
Flickr: Samuel Mann
11. You can focus on observing behavior instead of opinions.
Why Prototype?
June 11, 2015 11
Flickr: Samuel Mann
13. “Someone once asked me what the paper prototyping bumper sticker would say, and my
answer was, ‘Maximum feedback for minimum effort.’” - Carolyn Snyder
Why Paper Prototype?
June 11, 2015 13
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
14. Paper
prototypes
Spectrum of prototypes
Why Paper Prototype?
June 11, 2015 14
Fully coded
prototypes
Low-fidelity High-fidelity
Flickr: Andy Bardill
Interactive
prototypes
Static wireframes
linked together
15. Because they are quick and easy to create:
• You don’t waste time trying to make them look perfect.
Why Paper Prototype?
June 11, 2015 15
Flickr: Samuel Mann
16. Because they are quick and easy to create:
• You can get feedback early in the design process.
Why Paper Prototype?
June 11, 2015 16Flickr: Samuel Mann
17. Usability testing participants feel more comfortable being critical with a low-fidelity design.
Why Paper Prototype?
June 11, 2015 17
Flickr: Kevin Pelrine
18. You can easily make changes to the prototype during usability testing.
Why Paper Prototype?
June 11, 2015 18
Flickr: Samuel Mann
19. Paper prototyping can be a way for more people to contribute to the design.
Why Paper Prototype?
June 11, 2015 19
Flickr: Samuel Mann
20. Disadvantages of Paper Prototypes
• They’re less realistic than higher-fidelity prototypes
Why Paper Prototype?
June 11, 2015 20
Flickr: Rosenfeld Media
21. Disadvantages of Paper Prototypes
• You can’t do the testing remotely.
Why Paper Prototype?
June 11, 2015 21
Flickr: yooperann
23. z
z
/ / /
Creating Paper Prototypes
Design First, Then Prototype
June 11, 2015 23
24. Focus on designing first.
Design First, Then Prototype
June 11, 2015 24Flickr: Johan Larsson
25. Focus on designing first.
Design First, Then Prototype
June 11, 2015 25Flickr: Canned Tuna
26. Then create a prototype to show how the design works.
Design First, Then Prototype
June 11, 2015 26Flickr: Rosenfeld Media
27. Determine what you want to test, and create the prototype elements to test those things.
Design First, Then Prototype
June 11, 2015 27Flickr: Christian_Campos
28. Things you might want to test:
• Can people accomplish their tasks?
• Findability – navigation, organization, and labeling of content or functions
• Understanding of icons, terminology, instructions, etc.
• Expectations
Design First, Then Prototype
June 11, 2015 28
29. z
z
/ / /
Creating Paper Prototypes
Examples of Paper Prototypes
June 11, 2015 29
30. Examples of interactions you can create with paper prototypes:
Examples of Paper Prototypes
June 11, 2015 30Example 2Example 1
31. z
z
/ / /
Creating Paper Prototypes
Gather the Materials
June 11, 2015 31
34. For elements that lay on top of screens
• Index cards
Gather the Materials
June 11, 2015 34
Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
35. For elements that lay on top of screens
• Post-it notes
Gather the Materials
June 11, 2015 35
Flickr: Samuel Mann
36. For elements that lay on top of screens
• Transparencies
Gather the Materials
June 11, 2015 36
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
Flickr: Rosenfeld Media
37. Adhesives
• Tape
• Glue sticks
• Restickable glue
Gather the Materials
June 11, 2015 37
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
38. To make quick changes
• Correction fluid/White Out
Gather the Materials
June 11, 2015 38
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
39. Writing instruments
• Pencil
• Pens and markers – black, blue, red, and green
• Transparency markers for data entry
Gather the Materials
June 11, 2015 39
Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Canned Tuna
40. Container for the prototype
• To keep all the elements from getting lost
• Paper clips to keep small elements together
Gather the Materials
June 11, 2015 40
41. z
z
/ / /
Creating Paper Prototypes
Create the Prototype
June 11, 2015 41
42. Determine how you’ll create your paper prototype.
• Drawn
• Electronic design printed out
• Combination of both drawn and printed elements
Create the Prototype
June 11, 2015 42
43. Determine how you’ll create your paper prototype.
• Drawn
• Electronic design printed out
• Combination of both drawn and printed elements
Create the Prototype
June 11, 2015 43
44. Determine how you’ll create your paper prototype.
• Drawn
• Electronic design printed out
• Combination of both drawn and printed elements
Create the Prototype
June 11, 2015 44
Flickr: Yandle
46. The three main types of elements that make up a paper prototype:
• Background
• Screens
• States
Create the Prototype
June 11, 2015 46
47. Create a background.
Create the Prototype
June 11, 2015 47Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA:
Morgan Kaufmann Pub., 2003. Print.
Flickr: Samuel Mann Flickr: d_jan
51. Dropdown lists
Create the Prototype
June 11, 2015 51
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
54. Tabs
Create the Prototype
June 11, 2015 54Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan
Kaufmann Pub., 2003. Print.
Flickr: Squidsoup.org
55. Expanding/collapsing sections
Create the Prototype
June 11, 2015 55
Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Rosenfeld Media
Flickr: Rosenfeld Media
Fold in paper Unfolded
56. Highlighting an item
Create the Prototype
June 11, 2015 56
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
Flickr: Rosenfeld Media
57. Disabled elements
Create the Prototype
June 11, 2015 57Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan
Kaufmann Pub., 2003. Print.
58. Disabled elements
Create the Prototype
June 11, 2015 58Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan
Kaufmann Pub., 2003. Print.
59. Text field input
• Post-it Notes
Create the Prototype
June 11, 2015 59
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
Flickr: Samuel Mann
60. Text field input
• Post-it Notes
• Transparencies
Create the Prototype
June 11, 2015 60
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
61. Checkboxes and radio buttons
Create the Prototype
June 11, 2015 61
Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Rosenfeld Media Flickr: Rosenfeld Media
62. Tip: Create handlebars on elements
Create the Prototype
June 11, 2015 62
Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Rosenfeld Media
63. Scrolling
Create the Prototype
June 11, 2015 63
Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
Flickr: Rosenfeld Media
70. Do what works for you.
• Feel free to invent new ways of doing these things.
• Balance interactivity with the ease or difficulty of testing.
Create the Prototype
June 11, 2015 70
71. You can test many things without any interaction.
• Navigation
• Expectations
• Labeling
• Icons
Create the Prototype
June 11, 2015 71
73. Examples of testing paper prototypes:
Testing Paper Prototypes
June 11, 2015 73Example 1
74. z
z
/ / /
Testing Paper Prototypes
Create the Tasks
June 11, 2015 74
75. Phrase tasks as a simple, realistic scenario.
• “Show me what you’d do if you wanted to look at men’s running shoes.”
• “You want to book a hotel room in Sofia near the center of the city. Show me how
you’d do that.”
Create the Tasks
June 11, 2015 75
76. “Show me” reminds participants to take an action.
• Bad: “What would you’d do if you wanted to find a hotel in Sofia?”
• “I’d search on Sofia.”
• Good: “Show me what you’d do if you wanted to find a hotel in Sofia.”
• Clicks Hotels and types “Sofia” in the search field.
Create the Tasks
June 11, 2015 76
77. Avoid words that “give away” the task.
• Bad:
• “Show me what you’d do if you wanted to add those shoes to your shopping cart.”
• Good:
• “Show me what you’d do if you decided you wanted to buy these shoes.”
Create the Tasks
June 11, 2015 77
78. z
z
/ / /
Testing Paper Prototypes
The People Involved in Testing
June 11, 2015 78
82. Playing both the role of the computer and the facilitator is nearly impossible.
The People Involved in Testing
June 11, 2015 82
Flickr: Samuel Mann
83. Get someone else to play the role of the computer.
• Knowledge of the design
• Organizational skills
• Attention to detail
The People Involved in Testing
June 11, 2015 83
Flickr: Samuel Mann
84. When you create the prototype, try to keep it simple.
The People Involved in Testing
June 11, 2015 84Flickr: Samuel Mann
85. Conduct several pilot tests.
The People Involved in Testing
June 11, 2015 85Flickr: Samuel Mann
Flickr: Samuel Mann
86. z
z
/ / /
Testing Paper Prototypes
Conducting the Test
June 11, 2015 86
87. Introduce the prototype.
• “This is just a crude, initial prototype. Don’t focus on how it looks.”
Conducting the Test
June 11, 2015 87
Flickr: Samuel Mann
88. Introduce the prototype.
• “Not every screen or interaction will be shown.”
Conducting the Test
June 11, 2015 88
Flickr: Samuel Mann
89. Introduce the testing process.
• “Use your finger to tap on what you would click on.”
• “Bear with us as the computer reacts to show you
what happens next.”
Conducting the Test
June 11, 2015 89
Flickr: Samuel Mann
90. Introduce the testing process.
• “Think out loud.”
Conducting the Test
June 11, 2015 90
Flickr: Samuel Mann
91. During the testing:
• Facilitator reads the tasks.
• Participant performs the tasks, while thinking aloud.
• Computer responds to the participant’s actions.
• Facilitator notes success, errors, problems, reactions, etc.
• Facilitator asks questions.
Conducting the Test
June 11, 2015 91
Flickr: Samuel Mann
92. If the participant runs into a dead end…
• “We don’t have that created in the prototype, but what would
you expect to happen?”
Conducting the Test
June 11, 2015 92
Flickr: Samuel Mann
93. If the participant runs into a dead end…
• “Let’s say you clicked on that, and you realized it wasn’t
where you wanted to go. What would you do next?”
Conducting the Test
June 11, 2015 93
Flickr: Samuel Mann
94. Examples of testing paper prototypes:
Testing Paper Prototypes
June 11, 2015 94Example 2
96. What we’ll do
• Divide into groups of two people each.
• Create a simple paper prototype. (30 minutes)
• Test the prototype with people from other teams. (30 minutes)
• Discussion (10 minutes)
Introduction
June 11, 2015 96
98. Create a simple prototype.
• Keep it simple. It doesn’t need to include every detail.
• Plan and sketch it out first.
• Decide which tasks you want to test.
• Create screens and states for those tasks.
Introduction
June 11, 2015 98
99. Choose one of these prototypes to create (website or mobile app)
Introduction
June 11, 2015 99
Wish list on an ecommerce site Weather site or app Store Locator (on a physical store’s
website or app)
Possible
tasks to test
Start on the home page and find
your wish list
Check the current weather in Sofia Find the nearest stores to this
location
Remove an item from your wish
list
See what the weather is going to
be like tonight in Sofia
Check the store’s hours to see how
late they are open tonight
Add a comment about an item Check the weather for Monday in
Sofia
Get driving directions to the store
Mark one of the items high
priority and another low priority
Check the current weather for
Paris
Change the order of the items in
the list
100. Wish list on an ecommerce site
Introduction
June 11, 2015 100
104. Choose one of these prototypes to create (website or mobile app)
Create the Paper Prototype (30 minutes)
June 11, 2015 104
Wish list on an ecommerce site Weather site or app Store Locator (on a physical store’s
website or app)
Possible
tasks to test
Start on the home page and find
your wish list
Check the current weather in Sofia Find the nearest stores to this
location
Remove an item from your wish
list
See what the weather is going to
be like tonight in Sofia
Check the store’s hours to see how
late they are open tonight
Add a comment about an item Check the weather for Monday in
Sofia
Get driving directions to the store
Mark one of the items high
priority and another low priority
Check the current weather for
Paris
Change the order of the items in
the list
106. Join with another group.
Testing the Paper Prototype (30 minutes)
June 11, 2015 106
Group 1 Group 2
107. Conduct four tests, rotating roles so that each person plays each role once.
Testing the Paper Prototype (30 minutes)
June 11, 2015 107
Facilitator
Computer
Participant 1
Group 1 Group 2
Participant 2Round 1
Sits Out
About 5 minutes per participant
108. Conduct four tests, rotating roles so that each person plays each role once.
Testing the Paper Prototype (30 minutes)
June 11, 2015 108
Computer
Facilitator
Participant 1
Group 1 Group 2
Participant 2Round 2
Sits Out
About 5 minutes per participant
109. Conduct four tests, rotating roles so that each person plays each role once.
Testing the Paper Prototype (30 minutes)
June 11, 2015 109
Facilitator
Computer
Participant 1
Group 2 Group 1
Participant 2Round 3
Sits Out
About 5 minutes per participant
110. Conduct four tests, rotating roles so that each person plays each role once.
Testing the Paper Prototype (30 minutes)
June 11, 2015 110
Computer
Facilitator
Participant 1
Group 2 Group 1
Participant 2Round 4
Sits Out
About 5 minutes per participant
112. Creating the paper prototype
• How did you feel about creating the prototype?
• Was it easier or harder than you expected?
• What would you do if you had more time?
Discussion
June 11, 2015 112
113. Testing the paper prototype
• What did you find from the testing?
• What was it like playing the computer? Being the facilitator? The participant?
• Which one was the most difficult?
• What would you do differently next time?
Discussion
June 11, 2015 113
114. Questions or other comments?
• Any other questions for me?
• Comments?
Discussion
June 11, 2015 114
116. Paper prototyping
• Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces,
Carolyn Snyder
• Prototyping: A Practitioner’s Guide, Todd Zaki Warfel
Paper Prototyping Elements
• Paper Prototyping Helper Kit from User Focus
Resources for Paper Prototyping
June 11, 2015 116
117. Usability Testing
• Rocket Surgery Made Easy: Steve Krug
• Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests:
Jeffrey Rubin and Data Chisnell
Resources for Paper Prototyping
June 11, 2015 117