Paper Prototyping: The fast and easy way to design and refine user interface
www.paperprototyping.com
 
 

Here are links to various paper prototyping supplies on Staples.com and OfficeDepot.com. (Disclaimer: I am providing these links as a convenience.  I make no guarantees about these items or whether they are available. I have no financial interest in these companies.)

Item/ Amount needed

Links to items

Usage/Notes

White lightweight posterboard or heavy paper, 11x14 or larger;

2-3 pieces

Staples: 11x14

Office Depot: 22x28 (cut it in quarters)

Fixed background upon which the paper prototype elements are placed. Use a size that's larger than 8.5x11 paper - prototypes are usually somewhat larger than life size.

Unlined index cards (5x8 and 4x6);

Pack of 100

Staples: 5x8, 4x6

Office Depot: 5x8, 4x6     

Prototype pieces: dialog boxes, pop-up messages, drop-down menus, etc. Regular paper is OK, but card stock is sturdier and holds up better under repeated use.

Fine-point markers;

1 set

Staples

Office Depot

Used for hand-drawing the prototype. You want something with a thick enough line so you draw a bit larger than life size - this helps observers to see. Sharpie pens are about right. I use sets of inexpensive colored art markers because I think they encourage creativity, but color usually isn't necessary.

Blank write-on transparency (overheads);

3 pieces

Staples

Office Depot

Placed over the prototype, it allows the user to "type" (handwrite) data without altering the prototype. I use transparency when there are more than a half dozen fields to complete, otherwise I use removable tape. If you're testing in a lab with an overhead camera, transparency can cause glare — use copies of the paper forms instead.

Wet-erase transparency pen;

1 or 2

Staples

Office Depot

For writing "typed" input on a piece of transparency laid on top of the prototype. Use damp paper towel or cotton swabs as an "eraser." (Permanent pens work too, but you'll use more sheets of transparency.)

Highlighter;

1 or 2

Staples

Office Depot

Used with transparency and removable tape for making a highlight of the currently selected item. Light colored translucent plastic of some kind would be even better.

Scissors;

1 pair

Staples

Office Depot

Sometimes it's helpful to cut screen shots into pieces, if only part of the interface changes at a time.

Transparent tape;

1 roll

Staples

Office Depot

For attaching prototype pieces permanently, such as creating a dialog box out of two index cards. For less permanent attachment, use removable glue. A matte finish reduces glare, although this usually isn't a problem unless you're videotaping.

Restickable glue;

1 stick

Staples

Office Depot

Like the glue on sticky notes, it keeps elements of the prototype in place until you're ready to move them. Useful if you have a prototype with many separate elements that change individually, such as a web site that uses frames.

Removable tape (Post-It brand), varying widths;

1 roll each size        

Staples: 2-line, 6-line

Office Depot: 2-line, 6-line

Use the 2-line width for edit fields (especially if the data appears elsewhere in the interface), small amounts of text that change, status line messages, and list elements. The larger size is good for grayed buttons and quick fixes to the prototype.

Correction fluid (e.g., White-out);

1 bottle

Staples

Office Depot

For small changes to the prototype, such as wording. You have to let correction fluid dry before you can write on it. In a usability test, I prefer to use removable tape to make quick fixes.

Image of book

Get Paper Prototyping today!

Amazon

Morgan Kaufmann