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

More Related Content

What's hot

The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?
The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?
The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?
Koray Tugberk GUBUR
 

What's hot (20)

Crawling, indexation & the impact on performance | Brighton SEO
Crawling, indexation & the impact on performance | Brighton SEOCrawling, indexation & the impact on performance | Brighton SEO
Crawling, indexation & the impact on performance | Brighton SEO
 
Project Restart 2023: Petr Pacher - Jak ve firmě úspěšně aplikovat „Učící se ...
Project Restart 2023: Petr Pacher - Jak ve firmě úspěšně aplikovat „Učící se ...Project Restart 2023: Petr Pacher - Jak ve firmě úspěšně aplikovat „Učící se ...
Project Restart 2023: Petr Pacher - Jak ve firmě úspěšně aplikovat „Učící se ...
 
Value Based Bidding | (Im)Proving the Value of Google Ads | BrightonSEO Searc...
Value Based Bidding | (Im)Proving the Value of Google Ads | BrightonSEO Searc...Value Based Bidding | (Im)Proving the Value of Google Ads | BrightonSEO Searc...
Value Based Bidding | (Im)Proving the Value of Google Ads | BrightonSEO Searc...
 
chatgpt dalle.pptx
chatgpt dalle.pptxchatgpt dalle.pptx
chatgpt dalle.pptx
 
Awesome Prompts Naveed
Awesome Prompts NaveedAwesome Prompts Naveed
Awesome Prompts Naveed
 
The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?
The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?
The Reason Behind Semantic SEO: Why does Google Avoid the Word PageRank?
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
 
Project Restart 2023: Michael Koch - Keynote: Projekt s názvem schůzka
Project Restart 2023: Michael Koch - Keynote: Projekt s názvem schůzkaProject Restart 2023: Michael Koch - Keynote: Projekt s názvem schůzka
Project Restart 2023: Michael Koch - Keynote: Projekt s názvem schůzka
 
URL Funnel Optimisation: How to get budget for SEO - Michal Magdziarz, CEO, D...
URL Funnel Optimisation: How to get budget for SEO - Michal Magdziarz, CEO, D...URL Funnel Optimisation: How to get budget for SEO - Michal Magdziarz, CEO, D...
URL Funnel Optimisation: How to get budget for SEO - Michal Magdziarz, CEO, D...
 
Project Restart 2023: Michal Musil - Psychologie vyjednávání aneb jak se přip...
Project Restart 2023: Michal Musil - Psychologie vyjednávání aneb jak se přip...Project Restart 2023: Michal Musil - Psychologie vyjednávání aneb jak se přip...
Project Restart 2023: Michal Musil - Psychologie vyjednávání aneb jak se přip...
 
Project Restart 2023: Jirka Bachel - Jak zrychlit softwarový vývoj a validaci...
Project Restart 2023: Jirka Bachel - Jak zrychlit softwarový vývoj a validaci...Project Restart 2023: Jirka Bachel - Jak zrychlit softwarový vývoj a validaci...
Project Restart 2023: Jirka Bachel - Jak zrychlit softwarový vývoj a validaci...
 
Pitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersPitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to others
 
Email Anatomy: How to Get Top Tier Links
Email Anatomy: How to Get Top Tier LinksEmail Anatomy: How to Get Top Tier Links
Email Anatomy: How to Get Top Tier Links
 
AI Restart 2024: José Kadlec - Megapraktické využití AI v LinkedIn brandingu
AI Restart 2024: José Kadlec - Megapraktické využití AI v LinkedIn brandinguAI Restart 2024: José Kadlec - Megapraktické využití AI v LinkedIn brandingu
AI Restart 2024: José Kadlec - Megapraktické využití AI v LinkedIn brandingu
 
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODay
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODayIdentificando oportunidades SEO para mejorar resultados rápidamente #SEODay
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODay
 
Strong but wrong
Strong but wrongStrong but wrong
Strong but wrong
 
Google E-E-A-T - Learn It, Live It, Love It.pptx
Google E-E-A-T - Learn It, Live It, Love It.pptxGoogle E-E-A-T - Learn It, Live It, Love It.pptx
Google E-E-A-T - Learn It, Live It, Love It.pptx
 
How to Develop International SEO Audits for Success #IntSS
How to Develop International SEO Audits for Success #IntSSHow to Develop International SEO Audits for Success #IntSS
How to Develop International SEO Audits for Success #IntSS
 
Scaling Knowledge Graph Architectures with AI
Scaling Knowledge Graph Architectures with AIScaling Knowledge Graph Architectures with AI
Scaling Knowledge Graph Architectures with AI
 
Eficiência e eficácia no Discovery
Eficiência e eficácia no DiscoveryEficiência e eficácia no Discovery
Eficiência e eficácia no Discovery
 

Viewers also liked

Protype and test
Protype and testProtype and test
Protype and test
roystonf
 

Viewers also liked (20)

Prototyping
PrototypingPrototyping
Prototyping
 
An agile approach to iPhone design: Paper prototyping + user testing
An agile approach to iPhone design:  Paper prototyping + user testingAn agile approach to iPhone design:  Paper prototyping + user testing
An agile approach to iPhone design: Paper prototyping + user testing
 
Paper Prototyping
Paper PrototypingPaper Prototyping
Paper Prototyping
 
Basics of Paper Writing and Publishing in TEL (JTEL 2013)
Basics of Paper Writing and Publishing in TEL (JTEL 2013)Basics of Paper Writing and Publishing in TEL (JTEL 2013)
Basics of Paper Writing and Publishing in TEL (JTEL 2013)
 
Introduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, HowIntroduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, How
 
APA Workshop: Writing a Research Paper
APA Workshop: Writing a Research PaperAPA Workshop: Writing a Research Paper
APA Workshop: Writing a Research Paper
 
Let’s sketch!! Paper prototype
Let’s sketch!! Paper prototypeLet’s sketch!! Paper prototype
Let’s sketch!! Paper prototype
 
Ejemplo de paper prototyping
Ejemplo de paper prototypingEjemplo de paper prototyping
Ejemplo de paper prototyping
 
IFI7159 M4
IFI7159 M4IFI7159 M4
IFI7159 M4
 
Basics of research paper publishing
Basics of research paper publishingBasics of research paper publishing
Basics of research paper publishing
 
Low Fidelity Prototyping with Paper
Low Fidelity Prototyping with PaperLow Fidelity Prototyping with Paper
Low Fidelity Prototyping with Paper
 
Paper Prototyping
Paper PrototypingPaper Prototyping
Paper Prototyping
 
Rapid Prototyping Paper
Rapid Prototyping PaperRapid Prototyping Paper
Rapid Prototyping Paper
 
Paper Prototyping
Paper Prototyping Paper Prototyping
Paper Prototyping
 
Prototypes & test
Prototypes & testPrototypes & test
Prototypes & test
 
Protype and test
Protype and testProtype and test
Protype and test
 
Why Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design ThinkingWhy Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design Thinking
 
Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16
 
Protype and test
Protype and testProtype and test
Protype and test
 
TWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypesTWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypes
 

Similar to Paper Prototyping Workshop

Similar to Paper Prototyping Workshop (20)

User Research in the Wild
User Research in the WildUser Research in the Wild
User Research in the Wild
 
User Research in the Wild
User Research in the WildUser Research in the Wild
User Research in the Wild
 
Prototyping: 4 Strategic Factors for Design Teams
Prototyping: 4 Strategic Factors for Design TeamsPrototyping: 4 Strategic Factors for Design Teams
Prototyping: 4 Strategic Factors for Design Teams
 
A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...
A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...
A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...
 
Change your tools and your culture
Change your tools and your cultureChange your tools and your culture
Change your tools and your culture
 
Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014
 
UX Bootcamp - August 2016
UX Bootcamp - August 2016UX Bootcamp - August 2016
UX Bootcamp - August 2016
 
March 18 NISO Two Part Webinar: Is Granularity the Next Discovery Frontier? P...
March 18 NISO Two Part Webinar: Is Granularity the Next Discovery Frontier? P...March 18 NISO Two Part Webinar: Is Granularity the Next Discovery Frontier? P...
March 18 NISO Two Part Webinar: Is Granularity the Next Discovery Frontier? P...
 
Putting Personas to Work: Getting personas adopted throughout your organization
Putting Personas to Work: Getting personas adopted throughout your organizationPutting Personas to Work: Getting personas adopted throughout your organization
Putting Personas to Work: Getting personas adopted throughout your organization
 
Putting Personas to Work
Putting Personas to WorkPutting Personas to Work
Putting Personas to Work
 
User Review Analysis: Extracting Design Aspects from Big Data
User Review Analysis: Extracting Design Aspects from Big DataUser Review Analysis: Extracting Design Aspects from Big Data
User Review Analysis: Extracting Design Aspects from Big Data
 
Talk to PS SIG CHI on Agile user research
Talk to PS SIG CHI on Agile user researchTalk to PS SIG CHI on Agile user research
Talk to PS SIG CHI on Agile user research
 
Ux at imperial
Ux at imperialUx at imperial
Ux at imperial
 
Selling UX in Your Organization - Stir Trek 2012
Selling UX in Your Organization - Stir Trek 2012Selling UX in Your Organization - Stir Trek 2012
Selling UX in Your Organization - Stir Trek 2012
 
Designing the User Experience - UCCSC 2013
Designing the User Experience - UCCSC 2013Designing the User Experience - UCCSC 2013
Designing the User Experience - UCCSC 2013
 
Data visualization workshop
Data visualization workshopData visualization workshop
Data visualization workshop
 
Data Visualization Workshop at GHME
Data Visualization Workshop at GHMEData Visualization Workshop at GHME
Data Visualization Workshop at GHME
 
CUTGroup Presentation for Social Enterprise Class at Northwestern University
CUTGroup Presentation for Social Enterprise Class at Northwestern UniversityCUTGroup Presentation for Social Enterprise Class at Northwestern University
CUTGroup Presentation for Social Enterprise Class at Northwestern University
 
Introduction to Online Creative Collaboration
Introduction to Online Creative CollaborationIntroduction to Online Creative Collaboration
Introduction to Online Creative Collaboration
 
Contextual inquiry
Contextual inquiryContextual inquiry
Contextual inquiry
 

Recently uploaded

NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
mikehavy0
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
Amil baba
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
ykucop
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
Sarbjit Bahga
 

Recently uploaded (20)

NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets Durability
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 

Paper Prototyping Workshop

  • 1. Paper Prototyping Jim Ross Senior UX Architect, Infragistics jross@infragistics.com @anotheruxguy Flickr: CannedTuna Paper Prototyping
  • 2. Paper Prototyping Jim Ross Senior UX Architect, Infragistics jross@infragistics.com @anotheruxguy
  • 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
  • 32. For screens • Paper • Cardboard/card stock Gather the Materials June 11, 2015 32
  • 33. Cutting tools • Scissors • X-Acto knife Gather the Materials June 11, 2015 33 Flickr: Hsin-Cheng Lin
  • 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
  • 45. Prototyping element kit Create the Prototype June 11, 2015 45http://www.userfocus.co.uk/resources/prototype.html
  • 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
  • 48. Create screens. Create the Prototype June 11, 2015 48Flickr: Toms Baugis
  • 49. Create states. Create the Prototype June 11, 2015 49Flickr: d_jan
  • 50. Menus Create the Prototype June 11, 2015 50 Flickr: Samuel Mann
  • 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. Dialog windows, tooltips, etc. Create the Prototype June 11, 2015 52 Flickr: Rob Enslin
  • 53. Flickr: Squidsoup.org Movable elements Create the Prototype June 11, 2015 53Flickr: Yandle
  • 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
  • 64. Scrolling Create the Prototype June 11, 2015 64 Flickr: Liza Berseneva
  • 65. Scrolling Create the Prototype June 11, 2015 65 Flickr: Samuel Mann
  • 67. Side scrolling menus Create the Prototype June 11, 2015 67Flickr: Rob Enslin
  • 68. Slider Create the Prototype June 11, 2015 68 Flickr: Samuel Mann
  • 69. Updating value Create the Prototype June 11, 2015 69 Flickr: Samuel Mann
  • 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
  • 79. The participant The People Involved in Testing June 11, 2015 79 The participant
  • 80. The participant The People Involved in Testing June 11, 2015 80 The facilitator
  • 81. The participant The People Involved in Testing June 11, 2015 81 The computer
  • 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
  • 95. z z / / / Exercise: Creating and Testing a Paper Prototype Introduction June 11, 2015 95
  • 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. Divide into groups of two people. Introduction June 11, 2015 97
  • 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
  • 101. Weather site or app Introduction June 11, 2015 101
  • 103. z z / / / Exercise: Creating and Testing a Paper Prototype Create the Paper Prototype June 11, 2015 103
  • 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. z z / / / Exercise: Creating and Testing a Paper Prototype Testing the Paper Prototype June 11, 2015 105
  • 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
  • 111. z z / / / Exercise: Creating and Testing a Paper Prototype Discussion June 11, 2015 111
  • 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
  • 115. z z Resources for Paper Prototyping June 11, 2015 115
  • 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
  • 118. June 11, 2015 118 Thank You