Sure, it's low-tech, but this usability testing method can
help you sidestep problems before you write your code
Wouldn't it be great to find out what users (and marketing)
want before you start coding? Paper prototyping lets you do
just that. While it may seem counterintuitive to test an
interface without using a computer, paper prototyping lets
you get maximum feedback for minimum effort. After a few
usability tests with a paper prototype, you'll have
confidence that you're implementing the right thing.
What paper prototyping is
Paper prototyping is a method of usability testing that
is useful for Web sites, Web applications, and conventional
software. Here's how it works:
- You first decide on the tasks that you'd like the user
- Next, you make screen shots and/or hand-sketched drafts
of the windows, menus, dialog boxes, pages, popup messages,
etc. that are needed to perform those tasks.
- Then you conduct a usability test by having one or two
developers play the role of "computer," manipulating the
pieces of paper to simulate how the interface would behave.
Users are given realistic tasks to perform by interacting
directly with the prototype -- they "click" by touching
the prototype buttons or links and "type" by writing
their data in the prototype's edit fields.
(Using transparency or removable tape prevents the
prototype from being written on directly.)
A facilitator (usually someone trained in usability) conducts
the session while other members of the development team
observe and take notes. The computer does not
explain how the interface is supposed to work, but merely
simulates what the interface would do. In this manner,
you can identify which parts of the interface are
self-explanatory and which parts are confusing. Because the
prototype is all on paper, you can modify it very easily
to fix the problems you find.
Figure 1. A paper prototype of the File Setup
dialog from Microsoft Word
Figure 1 illustrates how various GUI widgets can be
prototyped. This example shows the File Setup dialog
from Microsoft Word. (In a usability test, this component
would be placed on top of a prototype of the Word
application rather than being shown by itself.)
- Each tab is on a separate piece of paper so it can be
moved to the front if the user selects it.
- The drop-down list for paper size is written on a
separate piece of paper and is shown if the user
touches the drop-down arrow.
- The radio button is simulated using removable tape.
- The preview components (shown in red for purposes of
this illustration) are tacked on with restickable glue
so they can be changed if the user selects Landscape.
(See Resources for more
information on where to get removable tape and restickable glue.)
Figure 2. The shopping cart page from an e-commerce site
Figure 2 shows how removable tape allows users to place any
combination of items in the shopping cart. The
computer can update the shipping cost and total
accordingly by wiping them off the transparency with a damp
paper towel and rewriting them. (It's not considered cheating
for the computer to use a calculator!)
How good should the prototype be?
You can use screen shots of an existing design if you happen
to have them, but it's also fine to hand-sketch them,
especially when you're in the early stages of design. And
as Figure 3 shows, sometimes hand-drawn elements are actually
more readable than screen shots that use a dark background color.
Figure 3. Hand-drawn versions of browser buttons compared to a grayscale screen shot
You can also mix and match screen shots and hand-drawn
components. The prototype only needs to be good enough for
you to get answers to the questions you're most concerned
about. Thus, most paper prototypes don't need:
- Straight lines or typed text. If the user can't
read something, it's OK to tell them what it says.
(But if the user doesn't understand a term, don't explain
it -- change it.)
- Images or icons. Use words instead. For example,
for the company logo, you can just draw a box around the
words "company logo. If images are part of the
content (a product catalo