Paper Prototyping
INF385G: Topic Discussion
Huang, S. C.
Contents
 Introduction
 Methods, Tips, Things to know
 My experience
 In-class Exercise
 Conclusion
What is Paper Prototyping?
 Paper: materials of paper-and-pencil alike.
 Prototyping: The design and evaluation of the
concept.
 “Paper prototyping is a variation of usability
testing where representative users perform
real tasks by interacting with a paper version
of the interface.
Examples:
Why Use Paper Prototyping?
Jakob Nielsen’s recommendation
 Simple and Immense
 Save Money
 A method lives longer than you think
Words from Professionals
User Interface Engineering:
 Still the “Simplest”
 A Team-Building Tool
 A Design and Testing Tool
 A Communication Tool
 Facilitates Regular Testing (valuable long-
term benefit!)
Words from the Book Author:
Carolyn Snyder:
 Fast mockup – no coding required
 Finds problems, including serious ones
 Refines design base on user feedback before
implementation (Risk Management!)
 Team and communication tool
 Encourages creativity!
Benefits Summary
 Quick to build/refine, thus enabling rapid
design interactions.
 Requires minimal resources and materials.
 Detects usability problems at a very early
stage before implementation.
 Promotes communication between
stakeholders.
How and What to do
 Signs of using paper prototyping
 Stages of planning
 Run the test
 Executive Overview
“Six Signs”
 Sign 1: There are many different ideas about
the design.
 Sign 2: You find yourself depending a
particular design.
 Sign 3: There are parts of the design you’re
unsure about.
“Six Signs” Part II
 Sign 4: You’re changing the way that the
users perform a task.
 Sign 5: The concepts or terminology are new
to the users.
 Sign 6: You’re feeling uncreative.
“Four Stages”
 Stage 1: Concept Design
– to explore different metaphors and design
strategies.
 Stage 2: Interaction Design
– to organize the structure of screen or pages.
“Four Stages” Part II
 Stage 3: Screen Design
– for initial design of each individual screen.
 Stage 4: Screen Testing
– to refine the screen layout.
How to Test a Paper Prototype
 Standard Usability
Evaluation Procedure.
 People you need: real
users, the “computer”,
the facilitator, the
observer, and usability
consultants.
 Laboratory settings.
Executive Overview
 Kickoff meeting
 User recruitment
 Task design
 Prototype creation and walkthroughs
 Usability testing and iterative refinement
 Prioritizing issues and action plan
 Communication of results
My Experience
Paper Prototyping of Menu Design Theories
on a Small Screen Device
 Mockup design was fast and flexible.
 Data of path-finding behavior was visible.
 Excluded variables we didn’t want.
 It’s fun!
In-class Exercise
 Objectives: prototype a layout design of a cell
phone’s home menu.
 Menu items to be included: indicators of
signal, ringing style, and battery life; date and
time; up to 9 options that users perform
frequently.
 The menu design should be functional with
your panel layout.
In-class Exercise Part II
 Describe a user task to be perform on this
paper version of your design.
 Test it with the person next to you.
 *Ideas and comments are welcome.*
Conclusion
Findings that make paper prototyping
valuable:
 Usability issues
 Missing (or mis-specified) functional
requirements
 Preference for one design alternatives
 Priorities
 Issues outside the user interfaces
Again, Benefits Summary
 Quick to build/refine, thus enabling rapid
design interactions.
 Requires minimal resources and materials.
 Detects usability problems at a very early
stage before implementation.
 Promotes communication between
stakeholders.
Questions?
Thank you.
References







Five Paper Prototyping Tips
Matthew Klee, 03/01/2000
http://www.uie.com/articles/prototyping_tips/
Paper Prototypes: Still Our Favorite
Tara Scanlon, 05/01/1998
http://www.uie.com/articles/paper_prototyping/
Paper Prototyping: Getting User Data Before You Code
Jakob Nielsen, April 14, 2003:
http://www.useit.com/alertbox/20030414.html
Paper prototyping
Usability Net
http://www.usabilitynet.org/tools/prototyping.htm
Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces
Carolyn Snyder
http://www.paperprototyping.com/
Six Signs That You Should Use Paper Prototyping
Carolyn Snyder 12/23/2003
http://today.java.net/pub/a/today/2003/12/23/sixSigns.html
Using Paper Prototypes to Manage Risk
Carolyn Snyder
http://www.uie.com/articles/prototyping_risk/