paper prototyping workshop
TRANSCRIPT
![Page 1: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/1.jpg)
Paper Prototyping
Jim Ross
Senior UX Architect, Infragistics
@anotheruxguy
Flickr: CannedTuna
Paper Prototyping
![Page 3: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/3.jpg)
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
![Page 4: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/4.jpg)
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
![Page 5: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/5.jpg)
How many people have…
• Designed a user interface?
• Created a paper prototype?
• Conducted usability testing?
About You
June 11, 2015 5
![Page 6: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/6.jpg)
zz
Why Prototype?
June 11, 2015 6
![Page 7: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/7.jpg)
Prototyping is the link between design and development.
Why Prototype?
June 11, 2015 7
Flickr: CannedTuna Flickr: Yandle
![Page 8: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/8.jpg)
Prototyping allows you to validate the design before building it, with:
• The project team
• Clients and stakeholders
• Users
Why Prototype?
June 11, 2015 8
![Page 9: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/9.jpg)
You get the best feedback from designs that people can try out.
Why Prototype?
June 11, 2015 9Flickr: Samuel Mann
![Page 10: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/10.jpg)
Prototypes provide something concrete to interact with and react to.
Why Prototype?
June 11, 2015 10Flickr: Samuel Mann
![Page 11: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/11.jpg)
You can focus on observing behavior instead of opinions.
Why Prototype?
June 11, 2015 11Flickr: Samuel Mann
![Page 12: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/12.jpg)
zz
Why Paper Prototype?
June 11, 2015 12
![Page 13: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/13.jpg)
“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 13Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
![Page 14: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/14.jpg)
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
![Page 15: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/15.jpg)
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 15Flickr: Samuel Mann
![Page 16: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/16.jpg)
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
![Page 17: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/17.jpg)
Usability testing participants feel more comfortable being critical with a low-fidelity design.
Why Paper Prototype?
June 11, 2015 17Flickr: Kevin Pelrine
![Page 18: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/18.jpg)
You can easily make changes to the prototype during usability testing.
Why Paper Prototype?
June 11, 2015 18Flickr: Samuel Mann
![Page 19: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/19.jpg)
Paper prototyping can be a way for more people to contribute to the design.
Why Paper Prototype?
June 11, 2015 19Flickr: Samuel Mann
![Page 20: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/20.jpg)
Disadvantages of Paper Prototypes
• They’re less realistic than higher-fidelity prototypes
Why Paper Prototype?
June 11, 2015 20Flickr: Rosenfeld Media
![Page 21: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/21.jpg)
Disadvantages of Paper Prototypes
• You can’t do the testing remotely.
Why Paper Prototype?
June 11, 2015 21Flickr: yooperann
![Page 22: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/22.jpg)
zz
Creating Paper Prototypes
June 11, 2015 22
![Page 23: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/23.jpg)
zz
/ / /
Creating Paper Prototypes
Design First, Then Prototype
June 11, 2015 23
![Page 24: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/24.jpg)
Focus on designing first.
Design First, Then Prototype
June 11, 2015 24Flickr: Johan Larsson
![Page 25: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/25.jpg)
Focus on designing first.
Design First, Then Prototype
June 11, 2015 25Flickr: Canned Tuna
![Page 26: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/26.jpg)
Then create a prototype to show how the design works.
Design First, Then Prototype
June 11, 2015 26Flickr: Rosenfeld Media
![Page 27: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/27.jpg)
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
![Page 28: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/28.jpg)
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
![Page 29: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/29.jpg)
zz
/ / /
Creating Paper Prototypes
Examples of Paper Prototypes
June 11, 2015 29
![Page 30: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/30.jpg)
Examples of interactions you can create with paper prototypes:
Examples of Paper Prototypes
June 11, 2015 30Example 2Example 1
![Page 31: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/31.jpg)
zz
/ / /
Creating Paper Prototypes
Gather the Materials
June 11, 2015 31
![Page 32: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/32.jpg)
For screens
• Paper
• Cardboard/card stock
Gather the Materials
June 11, 2015 32
![Page 33: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/33.jpg)
Cutting tools
• Scissors
• X-Acto knife
Gather the Materials
June 11, 2015 33
Flickr: Hsin-Cheng Lin
![Page 34: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/34.jpg)
For elements that lay on top of screens
• Index cards
Gather the Materials
June 11, 2015 34Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
![Page 35: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/35.jpg)
For elements that lay on top of screens
• Post-it notes
Gather the Materials
June 11, 2015 35
Flickr: Samuel Mann
![Page 36: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/36.jpg)
For elements that lay on top of screens
• Transparencies
Gather the Materials
June 11, 2015 36Snyder, 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
![Page 37: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/37.jpg)
Adhesives
• Tape
• Glue sticks
• Restickable glue
Gather the Materials
June 11, 2015 37Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
![Page 38: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/38.jpg)
To make quick changes
• Correction fluid/White Out
Gather the Materials
June 11, 2015 38Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
![Page 39: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/39.jpg)
Writing instruments
• Pencil
• Pens and markers – black, blue, red, and green
• Transparency markers for data entry
Gather the Materials
June 11, 2015 39Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Canned Tuna
![Page 40: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/40.jpg)
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
![Page 41: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/41.jpg)
zz
/ / /
Creating Paper Prototypes
Create the Prototype
June 11, 2015 41
![Page 42: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/42.jpg)
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
![Page 43: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/43.jpg)
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
![Page 44: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/44.jpg)
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
![Page 45: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/45.jpg)
Prototyping element kit
Create the Prototype
June 11, 2015 45http://www.userfocus.co.uk/resources/prototype.html
![Page 46: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/46.jpg)
The three main types of elements that make up a paper prototype:
• Background
• Screens
• States
Create the Prototype
June 11, 2015 46
![Page 47: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/47.jpg)
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
![Page 48: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/48.jpg)
Create screens.
Create the Prototype
June 11, 2015 48Flickr: Toms Baugis
![Page 49: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/49.jpg)
Create states.
Create the Prototype
June 11, 2015 49Flickr: d_jan
![Page 50: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/50.jpg)
Menus
Create the Prototype
June 11, 2015 50Flickr: Samuel Mann
![Page 51: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/51.jpg)
Dropdown lists
Create the Prototype
June 11, 2015 51Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
![Page 52: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/52.jpg)
Dialog windows, tooltips, etc.
Create the Prototype
June 11, 2015 52Flickr: Rob Enslin
![Page 53: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/53.jpg)
Flickr: Squidsoup.org
Movable elements
Create the Prototype
June 11, 2015 53Flickr: Yandle
![Page 54: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/54.jpg)
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
![Page 55: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/55.jpg)
Expanding/collapsing sections
Create the Prototype
June 11, 2015 55Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Rosenfeld Media
Flickr: Rosenfeld Media
Fold in paper Unfolded
![Page 56: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/56.jpg)
Highlighting an item
Create the Prototype
June 11, 2015 56Snyder, 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
![Page 57: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/57.jpg)
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.
![Page 58: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/58.jpg)
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.
![Page 59: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/59.jpg)
Text field input
• Post-it Notes
Create the Prototype
June 11, 2015 59Snyder, 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
![Page 60: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/60.jpg)
Text field input
• Post-it Notes
• Transparencies
Create the Prototype
June 11, 2015 60Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Diego, CA: Morgan Kaufmann Pub., 2003. Print.
![Page 61: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/61.jpg)
Checkboxes and radio buttons
Create the Prototype
June 11, 2015 61Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Rosenfeld Media Flickr: Rosenfeld Media
![Page 62: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/62.jpg)
Tip: Create handlebars on elements
Create the Prototype
June 11, 2015 62Warfel, Todd Zaki. Prototyping: A Practitioner's Guide. Brooklyn, NY: Rosenfeld Media, 2009. Print.
Flickr: Rosenfeld Media
![Page 63: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/63.jpg)
Scrolling
Create the Prototype
June 11, 2015 63Snyder, 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
![Page 64: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/64.jpg)
Scrolling
Create the Prototype
June 11, 2015 64Flickr: Liza Berseneva
![Page 65: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/65.jpg)
Scrolling
Create the Prototype
June 11, 2015 65Flickr: Samuel Mann
![Page 66: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/66.jpg)
Carousels
Create the Prototype
June 11, 2015 66
![Page 67: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/67.jpg)
Side scrolling menus
Create the Prototype
June 11, 2015 67Flickr: Rob Enslin
![Page 68: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/68.jpg)
Slider
Create the Prototype
June 11, 2015 68
Flickr: Samuel Mann
![Page 69: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/69.jpg)
Updating value
Create the Prototype
June 11, 2015 69
Flickr: Samuel Mann
![Page 70: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/70.jpg)
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
![Page 71: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/71.jpg)
You can test many things without any interaction.
• Navigation
• Expectations
• Labeling
• Icons
Create the Prototype
June 11, 2015 71
![Page 72: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/72.jpg)
zz
Testing Paper Prototypes
June 11, 2015 72
![Page 73: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/73.jpg)
Examples of testing paper prototypes:
Testing Paper Prototypes
June 11, 2015 73Example 1
![Page 74: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/74.jpg)
zz
/ / /
Testing Paper Prototypes
Create the Tasks
June 11, 2015 74
![Page 75: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/75.jpg)
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
![Page 76: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/76.jpg)
“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
![Page 77: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/77.jpg)
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
![Page 78: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/78.jpg)
zz
/ / /
Testing Paper Prototypes
The People Involved in Testing
June 11, 2015 78
![Page 79: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/79.jpg)
The participant
The People Involved in Testing
June 11, 2015 79
The participant
![Page 80: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/80.jpg)
The participant
The People Involved in Testing
June 11, 2015 80
The facilitator
![Page 81: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/81.jpg)
The participant
The People Involved in Testing
June 11, 2015 81
The computer
![Page 82: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/82.jpg)
Playing both the role of the computer and the facilitator is nearly impossible.
The People Involved in Testing
June 11, 2015 82Flickr: Samuel Mann
![Page 83: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/83.jpg)
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
![Page 84: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/84.jpg)
When you create the prototype, try to keep it simple.
The People Involved in Testing
June 11, 2015 84Flickr: Samuel Mann
![Page 85: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/85.jpg)
Conduct several pilot tests.
The People Involved in Testing
June 11, 2015 85Flickr: Samuel Mann
Flickr: Samuel Mann
![Page 86: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/86.jpg)
zz
/ / /
Testing Paper Prototypes
Conducting the Test
June 11, 2015 86
![Page 87: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/87.jpg)
Introduce the prototype.
• “This is just a crude, initial prototype. Don’t focus on how it looks.”
Conducting the Test
June 11, 2015 87Flickr: Samuel Mann
![Page 88: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/88.jpg)
Introduce the prototype.
• “Not every screen or interaction will be shown.”
Conducting the Test
June 11, 2015 88Flickr: Samuel Mann
![Page 89: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/89.jpg)
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
![Page 90: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/90.jpg)
Introduce the testing process.
• “Think out loud.”
Conducting the Test
June 11, 2015 90
Flickr: Samuel Mann
![Page 91: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/91.jpg)
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
![Page 92: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/92.jpg)
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
![Page 93: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/93.jpg)
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
![Page 94: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/94.jpg)
Examples of testing paper prototypes:
Testing Paper Prototypes
June 11, 2015 94Example 2
![Page 95: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/95.jpg)
zz
/ / /
Exercise:
Creating and Testing a Paper Prototype
Introduction
June 11, 2015 95
![Page 96: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/96.jpg)
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
![Page 97: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/97.jpg)
Divide into groups of two people.
Introduction
June 11, 2015 97
![Page 98: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/98.jpg)
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
![Page 99: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/99.jpg)
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
![Page 100: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/100.jpg)
Wish list on an ecommerce site
Introduction
June 11, 2015 100
![Page 101: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/101.jpg)
Weather site or app
Introduction
June 11, 2015 101
![Page 102: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/102.jpg)
Store Locator
Introduction
June 11, 2015 102
![Page 103: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/103.jpg)
zz
/ / /
Exercise:
Creating and Testing a Paper Prototype
Create the Paper Prototype
June 11, 2015 103
![Page 104: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/104.jpg)
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
![Page 105: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/105.jpg)
zz
/ / /
Exercise:
Creating and Testing a Paper Prototype
Testing the Paper Prototype
June 11, 2015 105
![Page 106: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/106.jpg)
Join with another group.
Testing the Paper Prototype (30 minutes)
June 11, 2015 106
Group 1 Group 2
![Page 107: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/107.jpg)
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
![Page 108: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/108.jpg)
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
![Page 109: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/109.jpg)
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
![Page 110: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/110.jpg)
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
![Page 111: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/111.jpg)
zz
/ / /
Exercise:
Creating and Testing a Paper Prototype
Discussion
June 11, 2015 111
![Page 112: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/112.jpg)
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
![Page 113: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/113.jpg)
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
![Page 114: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/114.jpg)
Questions or other comments?
• Any other questions for me?
• Comments?
Discussion
June 11, 2015 114
![Page 115: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/115.jpg)
zz
Resources for Paper Prototyping
June 11, 2015 115
![Page 116: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/116.jpg)
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
![Page 117: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/117.jpg)
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
![Page 118: Paper Prototyping Workshop](https://reader034.vdocuments.us/reader034/viewer/2022042602/55ca74adbb61eb10658b4573/html5/thumbnails/118.jpg)
June 11, 2015 118
Thank You