Paper prototyping methods

Summary

Paper prototypes or other mockups are used clarify requirements and enable draft interaction designs and screen designs to be very rapidly simulated and tested.

Benefits

Potential usability problems can be detected at a very early stage in the design process before any code has been written.
Communication between designers and users is promoted.
Paper prototypes are quick to build / refine, thus enabling rapid design iterations.
Only minimal resources and materials are required.

Method

Planning

Arrange a workshop attended by:

user(s)
developer(s)

You will also need a facilitator and a person to record the issues raised during the meeting.

Four stages of paper prototyping may be required:

concept design: to explore different metaphors and design strategies
interaction design: to organise the structure of screens or pages
screen design: for initial design of each individual screen
screen testing: to refine the screen layout

1. Concept design

Sit round a table and sketch out possible approaches in a brainstorming environment.
Evaluate the extent to which each approach meets the usability requirements and objectives agreed in the stakeholder meeting

2. Interaction design

Use affinity diagramming to structure the user interface:

Write the name of each suggested screen, page or activity on a post-it-note.
Put each post-it-note on the wall close to related notes.
Group the post-it-notes in clusters that are meaningful to users.
Consolidate duplicates.
Give a name to each cluster.
Document the sequence in which user tasks will make use of each set of post-it-notes
Review how the screens/pages can be organised to simplify user tasks,

3. Screen design

Sit round a table and sketch out design ideas in a brainstorming environment.
Use this as a basis for rough sketches of each screen.
If the links between screens have not been finalised, pin each screen on the wall as for Interaction Design above,
Ask the user to carry out a realistic task (based on the context of use and scenarios)
As the user selects options on each screen, the developer explains what happens, and either points to the next screen or presents the next screen to the user (without giving any hints).

4. Screen testing

Use a drawing package or prototyping tool to produce a rough design for each screen.
If the links between screens have not been finalised, pin each screen on the wall as for Interaction Design above.
Ask the user to carry out a realistic task (based on the context of use and scenarios).
As the user selects options on each screen, the developer explains what happens, and either points to the next screen or presents the next screen to the user (without giving any hints).
To test more detailed interaction, prepare pieces of paper with menus, scroll boxes, dialogue boxes, etc., and present these to the user. The user simulates pointing and clicking using a pencil, and simulates typing by writing on paper.

Detailed design should adhere to a GUI or web style guide.

More information

More information on paper prototyping can be found in the INUSE Handbook

Variations

If the necessary skills are available, the design can be evaluated and improved by expert evaluation. This can complement prototyping, or use methods which replace users by usability experts if it is impossible to gain access to users.

Next steps

Ensure that detailed design adheres to a style guide.

Case studies

Background reading

Hix, D and Hartso, H R. Developing User Interfaces

Dumas, JS, and Redish, Janice, A. (1999) Practical Guide to Usability Testing, Intellect Books.

Rubin, Jeffrey (1994) Handbook of Usability Testing. John Wiley and Sons, New York, NY

Snyder, Carolyn, Using Paper Prototypes to Manage Risk, October 1996, Software Design and Publisher Magazine