Paper Prototyping: A Cutout Kit

Paper prototyping is a fast and cheap way to test designs early in the design process, when it’s easy to make changes to the experience. However, paper prototyping is often overlooked in real design projects even though it has such a potential for discovering fundamental design problems and quick solutions for them.

But first, what is paper prototyping? Paper prototyping is the process of sketching out potential concepts, flows or ideas on paper and testing those sketches with users.

The idea is that, before you invest in a sophisticated digital prototype, you simply sketch your ideas on a piece of paper and run a quick usability test on them. Like any user-testing session, testing with paper prototypes involves a facilitator and a participant; additionally, it can also involve a special dedicated helper who plays the role of the “computer” (or other device such as a smartphone) and reacts to user actions by moving through the different prototype screens. (See 40-minute video that demonstrates this testing process.)

Paper prototypes can be quickly sketched by hand or drawn using your preferred prototyping software and then printed out. Consider starting with a hand-drawn prototype; once you have a good idea of the elements that your design will include, you can capture it digitally and further refine it.

This article provides you with a kit for creating your own paper prototypes.

The Prototyping Kit: What’s Included

Let’s look at what is included in our paper-prototyping kit:

• A cutout of a phone and of a browser: This cutout is intended to frame the different prototype screens. Print the cutout on paper slightly larger than US letter or A4 (for example, US tabloid), so that you can use letter or A4-sized paper for your screens. If you don’t have larger paper, then resize your screens to be slightly smaller than this frame. Tip: If you are testing mobile designs and want the participant to hold the “phone,” print this cutout on heavy cardstock (or glue it to cardstock after printing it).
• Underconstruction page: This page is meant to replace those pages for which you did not create a prototype in your premade collection of screens; it lets the participant know that a particular page is out of scope for the test.
• Loading indicator: This page should be used when you need extra time to find a specific screen. It helps keep the participant in the experience.
• Blank paper: If you notice obvious usability problems while testing, use this blank paper for on-the-fly changes or for creating new screens between sessions.

Tips for Testing with Paper-Prototypes

Before the Test

Make sure that the person playing the computer is familiar with the screens and their intended order before starting the test, to prevent excessive wait time between the participant’s action and the “computer’s” response.

Be consistent with the fidelity of your screens. If you show a few high-fidelity cutouts among grayscale, low-fidelity pages, participants will focus on those brightly colored, full-detailed areas and you may get inadequate feedback for the low-fidelity screens.

During the Test: Simulating Various Design Aspects and Elements

• Scrolling.It is important to capture scrolling especially when testing mobile prototypes, because mobile pages that are too long tend to lead to usability issues. To simulate scrolling, use a long sheet of paper (or tape several pieces together) to draw all the screens that belong to the same page. Have the participant pull the paper up or down (or left or right for horizontal scrolling).

• Dropdowns.To simulate dropdowns lay a small piece of paper with the selections on top of the screen.

• Overlays. Have the overlay content on its own sheet of paper. The computer will then lay it out on top of the screen for the participant to see.

Testing the Prototype

Standard best practices for usability testing apply when testing your paper prototype. If a usability problem keeps coming up during testing, use the blank pieces of paper to create new screens between testing sessions. Quick, iterative design changes can uncover a design solution quickly.

Conclusion

Paper prototyping is a valuable technique that allows you to test and improve on your early designs easily and quickly. The attached kit can get you started.

Learn more with our 40 minute training video, Paper Prototyping: A How-To Video.

Free Downloads

• Paper Prototyping Cutout Kit A4 (PDF)
• Paper Prototyping Cutout Kit Letter (PDF)