Paper Prototyping

1
Paper Prototyping

• INF385G Topic Discussion
• Huang, S. C.

2
Contents

• Introduction
• Methods, Tips, Things to know
• My experience
• In-class Exercise
• Conclusion

3
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.

4
Examples
5
Why Use Paper Prototyping?

• Jakob Nielsens recommendation
• Simple and Immense
• Save Money
• A method lives longer than you think

6
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!)

7
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!

8
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.

9
How and What to do

• Signs of using paper prototyping
• Stages of planning
• Run the test
• Executive Overview

10
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 youre
  unsure about.

11
Six Signs Part II

• Sign 4 Youre changing the way that the users
  perform a task.
• Sign 5 The concepts or terminology are new to
  the users.
• Sign 6 Youre feeling uncreative.

12
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.

13
Four Stages Part II

• Stage 3 Screen Design
• for initial design of each individual screen.
• Stage 4 Screen Testing
• to refine the screen layout.

14
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.

15
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

16
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 didnt want.
• Its fun!

17
In-class Exercise

• Objectives prototype a layout design of a cell
  phones 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.

18
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.

19
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

20
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.

21
Questions?

• Thank you.

22
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/sixS
  igns.html
• Using Paper Prototypes to Manage Risk