Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Paper Prototyping Workshop

1,914 views

Published on

A workshop to create and conduct usability testing on paper prototypes.

Published in: Design

Paper Prototyping Workshop

  1. 1. Paper Prototyping Jim Ross Senior UX Architect, Infragistics jross@infragistics.com @anotheruxguy Flickr: CannedTuna Paper Prototyping
  2. 2. Paper Prototyping Jim Ross Senior UX Architect, Infragistics jross@infragistics.com @anotheruxguy
  3. 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. 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. 5. How many people have… • Designed a user interface? • Created a paper prototype? • Conducted usability testing? About You June 11, 2015 5
  6. 6. z z Why Prototype? June 11, 2015 6
  7. 7. Prototyping is the link between design and development. Why Prototype? June 11, 2015 7 Flickr: CannedTuna Flickr: Yandle
  8. 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. 9. You get the best feedback from designs that people can try out. Why Prototype? June 11, 2015 9 Flickr: Samuel Mann
  10. 10. Prototypes provide something concrete to interact with and react to. Why Prototype? June 11, 2015 10 Flickr: Samuel Mann
  11. 11. You can focus on observing behavior instead of opinions. Why Prototype? June 11, 2015 11 Flickr: Samuel Mann
  12. 12. z z Why Paper Prototype? June 11, 2015 12
  13. 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. 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. 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. 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. 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. 18. You can easily make changes to the prototype during usability testing. Why Paper Prototype? June 11, 2015 18 Flickr: Samuel Mann
  19. 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. 20. Disadvantages of Paper Prototypes • They’re less realistic than higher-fidelity prototypes Why Paper Prototype? June 11, 2015 20 Flickr: Rosenfeld Media
  21. 21. Disadvantages of Paper Prototypes • You can’t do the testing remotely. Why Paper Prototype? June 11, 2015 21 Flickr: yooperann
  22. 22. z z Creating Paper Prototypes June 11, 2015 22
  23. 23. z z / / / Creating Paper Prototypes Design First, Then Prototype June 11, 2015 23
  24. 24. Focus on designing first. Design First, Then Prototype June 11, 2015 24Flickr: Johan Larsson
  25. 25. Focus on designing first. Design First, Then Prototype June 11, 2015 25Flickr: Canned Tuna
  26. 26. Then create a prototype to show how the design works. Design First, Then Prototype June 11, 2015 26Flickr: Rosenfeld Media
  27. 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. 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. 29. z z / / / Creating Paper Prototypes Examples of Paper Prototypes June 11, 2015 29
  30. 30. Examples of interactions you can create with paper prototypes: Examples of Paper Prototypes June 11, 2015 30Example 2Example 1
  31. 31. z z / / / Creating Paper Prototypes Gather the Materials June 11, 2015 31
  32. 32. For screens • Paper • Cardboard/card stock Gather the Materials June 11, 2015 32
  33. 33. Cutting tools • Scissors • X-Acto knife Gather the Materials June 11, 2015 33 Flickr: Hsin-Cheng Lin
  34. 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. 35. For elements that lay on top of screens • Post-it notes Gather the Materials June 11, 2015 35 Flickr: Samuel Mann
  36. 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. 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. 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. 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. 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. 41. z z / / / Creating Paper Prototypes Create the Prototype June 11, 2015 41
  42. 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. 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. 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
  45. 45. Prototyping element kit Create the Prototype June 11, 2015 45http://www.userfocus.co.uk/resources/prototype.html
  46. 46. The three main types of elements that make up a paper prototype: • Background • Screens • States Create the Prototype June 11, 2015 46
  47. 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
  48. 48. Create screens. Create the Prototype June 11, 2015 48Flickr: Toms Baugis
  49. 49. Create states. Create the Prototype June 11, 2015 49Flickr: d_jan
  50. 50. Menus Create the Prototype June 11, 2015 50 Flickr: Samuel Mann
  51. 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.
  52. 52. Dialog windows, tooltips, etc. Create the Prototype June 11, 2015 52 Flickr: Rob Enslin
  53. 53. Flickr: Squidsoup.org Movable elements Create the Prototype June 11, 2015 53Flickr: Yandle
  54. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  64. 64. Scrolling Create the Prototype June 11, 2015 64 Flickr: Liza Berseneva
  65. 65. Scrolling Create the Prototype June 11, 2015 65 Flickr: Samuel Mann
  66. 66. Carousels Create the Prototype June 11, 2015 66
  67. 67. Side scrolling menus Create the Prototype June 11, 2015 67Flickr: Rob Enslin
  68. 68. Slider Create the Prototype June 11, 2015 68 Flickr: Samuel Mann
  69. 69. Updating value Create the Prototype June 11, 2015 69 Flickr: Samuel Mann
  70. 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. 71. You can test many things without any interaction. • Navigation • Expectations • Labeling • Icons Create the Prototype June 11, 2015 71
  72. 72. z z Testing Paper Prototypes June 11, 2015 72
  73. 73. Examples of testing paper prototypes: Testing Paper Prototypes June 11, 2015 73Example 1
  74. 74. z z / / / Testing Paper Prototypes Create the Tasks June 11, 2015 74
  75. 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. 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. 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. 78. z z / / / Testing Paper Prototypes The People Involved in Testing June 11, 2015 78
  79. 79. The participant The People Involved in Testing June 11, 2015 79 The participant
  80. 80. The participant The People Involved in Testing June 11, 2015 80 The facilitator
  81. 81. The participant The People Involved in Testing June 11, 2015 81 The computer
  82. 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. 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. 84. When you create the prototype, try to keep it simple. The People Involved in Testing June 11, 2015 84Flickr: Samuel Mann
  85. 85. Conduct several pilot tests. The People Involved in Testing June 11, 2015 85Flickr: Samuel Mann Flickr: Samuel Mann
  86. 86. z z / / / Testing Paper Prototypes Conducting the Test June 11, 2015 86
  87. 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. 88. Introduce the prototype. • “Not every screen or interaction will be shown.” Conducting the Test June 11, 2015 88 Flickr: Samuel Mann
  89. 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. 90. Introduce the testing process. • “Think out loud.” Conducting the Test June 11, 2015 90 Flickr: Samuel Mann
  91. 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. 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. 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. 94. Examples of testing paper prototypes: Testing Paper Prototypes June 11, 2015 94Example 2
  95. 95. z z / / / Exercise: Creating and Testing a Paper Prototype Introduction June 11, 2015 95
  96. 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
  97. 97. Divide into groups of two people. Introduction June 11, 2015 97
  98. 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. 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. 100. Wish list on an ecommerce site Introduction June 11, 2015 100
  101. 101. Weather site or app Introduction June 11, 2015 101
  102. 102. Store Locator Introduction June 11, 2015 102
  103. 103. z z / / / Exercise: Creating and Testing a Paper Prototype Create the Paper Prototype June 11, 2015 103
  104. 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
  105. 105. z z / / / Exercise: Creating and Testing a Paper Prototype Testing the Paper Prototype June 11, 2015 105
  106. 106. Join with another group. Testing the Paper Prototype (30 minutes) June 11, 2015 106 Group 1 Group 2
  107. 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. 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. 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. 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
  111. 111. z z / / / Exercise: Creating and Testing a Paper Prototype Discussion June 11, 2015 111
  112. 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. 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. 114. Questions or other comments? • Any other questions for me? • Comments? Discussion June 11, 2015 114
  115. 115. z z Resources for Paper Prototyping June 11, 2015 115
  116. 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. 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
  118. 118. June 11, 2015 118 Thank You

×