Chapter 6: Paper and Other Analog Methods

(Open in Flickr)

Image by Christian Krämer, Cultured Code.

Figure 6.1 (Open in Flickr)

Sample paper prototype of the iPhone application, Things.

Paper prototyping is the most versatile method around. Paper is ideal for creating everything from Web interfaces to gestural interactions.

Paper prototyping has been around for decades, gaining popularity primarily in academic institutions and large corporations like IBM, Digital, and Sun in the 1990s. Back then you were likely to get some strange looks if you said you did paper prototyping. My oh my, how times have changed!

Paper is the most common method in use today. In fact, 76 percent of the survey respondents stated they use paper prototyping. Of all the methods I’ve used over the years, paper continues to be one of my favorites. Sure, paper and other analog tools have shortcomings just like any other method. The advantages are so great, however, that it’s silly not to have it in your prototyping toolkit.

In this chapter, we’re going to explore the strengths and challenges of using paper, when to consider paper, what to put in your paper prototyping kit, and a number of techniques for paper prototyping, including AJAX-style simulations.

Strengths

Some of the more obvious strengths of paper prototyping include the following:

• Versatile. Paper is one of the few tools that is equally well suited for prototyping software and physical devices, especially mobile and gestural interactions.
• Fast. Just about any interaction you can dream up can be prototyped in just a few minutes.
• Cheap. There’s no software license costs. You probably already have all the tools you’ll need sitting around your home or office.
• Easy. There’s a near zero barrier to entry. Anyone can do it.
• Manipulate on the fly. What if in the middle of testing your prototype, a participant comes up with a design concept you didn’t think of? No problem. You can edit your paper prototype on the fly and the participant can even help.
• Collaborative. It’s great for participatory design with other team members or usability test participants.
• Not bound by hardware or software limitations. With paper prototyping, unlike other prototyping tools, you’re not bound to prebuilt GUI widgets or interactions. Paper gives you a true blank canvas to explore any interaction you can dream up.
• Anywhere, anytime. Paper prototyping doesn’t require a computer, and can be done anywhere, anytime.

Weaknesses

While one of the most popular methods, and one of my personal favorites, paper prototyping isn’t without its weaknesses, including the following:

• Distributed work. For obvious reasons, it’s hard for geographically distributed teams to work with paper prototypes. Passing paper prototypes back and forth between the U.S. and Ireland, for example, will prove a bit challenging. Screen sharing software like Adobe Acrobat Connect or WebEx makes it easier.
• Imagination required. It’s not a real iPhone, so you’ll need to bring your imagination to the table.
• Visual aesthetics. If you want to evaluate the impact of color of visual aesthetics on the usability and experience, paper probably isn’t the right choice.

Paper Prototyping on the Fly

I was working on a digital voice product for a large telecom client several years ago. We wanted to test some of the design concepts. Since we had an existing set of wireframes, paper prototyping seemed to be the most logical solution.

One of the design concepts was blocking a phone number. Imagine you’re at dinner and you get a call from one of those 866 telemarketing numbers. You’d like to block that number from ever calling you again. We had designed a solution to allow you to sign-in to your digital voice service and add that number to a block list.

We ran the first participant through the scenario and asked him to show us how he might expect to block the number. He did something unexpected, as participants often do, and attempted to right-click on the phone number expecting to see a list of options, including “Block this number.” This wasn’t one of the solutions we had designed. It made total sense, but wasn’t one of the concepts we had even considered. (This was before AJAX hit the scene.)

The person assisting me gave me a look of “What do we do now?” I simply picked up a yellow sticky note, drew a few options on it, and put it on top of the number and asked “Something like this?” The participant smiled and replied, “Yeah. Yeah, just like that.”

The remaining nine participants did the same thing. Paper prototyping allowed us to create an alternate solution in a matter of seconds—something we never could have done with a digital prototype.

Essential Paper Prototyping Kit

Whenever I teach a paper prototyping workshop, I make a kit for every table or group. That kit includes the following:

• Paper. A stack of 8 1/2 × 11 plain white paper. We use these for the base of each design.
• Transparencies. A stack of 8 1/2 × 11 transparency sheets. These are handy for simulating navigation rollovers and the popular Lightbox effect.
• Index cards. Standard 3 × 5 plain cards will do. Index cards are used for a variety of things, like dialog windows and GUI widgets. We typically provide the kind that are lined on one side and blank on the other. The subtle blue lines help when you’re writing dialog messages.
• Post-it notes. I tend to lean toward yellow, but any color will do. Post-its are handy for a number of things like displaying changing states in tiles on the page, highlighting selected items on a screen, or dialog windows.
• Colored pens or markers. I include fine point and broad point markers in the kits. Each kit contains black, blue, red, and green. Most of the sketching is done with the black or blue, error messages in red, and success messages in green.
• Scotch tape or a glue stick. Great for providing a little bit of stick to GUI widgets. When using paper for RIA prototypes, a little bit of glue stick on the back of a tile is a great way to allow participants to move things around or show changes in state, while keeping the other pieces in place.
• Flat dental tape. This is the one magical trick I put into the kits. Flat dental tape is great for simulating animations. In the past, I’ve used it as a way to drag the scrubber of an audio player or pull a strip of photos through a photo gallery.

Tip Use Illustrator or Visio to Create Your GUI Widgets

Use your favorite drawing program to draw the basic structure of your page and GUI widgets. Print out several copies and sketch your prototype ideas on the printouts. This gives your paper prototypes some basic structure, while still providing the flexibility to cut them up or throw them away.

Progressive Paper Prototyping

Okay, this is the fun part of this chapter. This is where you get to see a number of hands-on tricks for creating richer paper prototypes. We’re going to start with something basic, like a form design, and move onto more advanced techniques like simulating AJAX. Let’s start by looking at a number of tips for creating GUI widgets for your paper prototypes. You can download an Illustrator file with sample GUI widgets at http://rosenfeldmedia.com/books/downloads/prototyping/Paper_Prototype_GUI.ai.

Paper Prototyping Basics

Think of your paper prototype as a recipe—you start with a few basic raw ingredients and then combine them to create something really amazing.

Your basic ingredients for any paper prototype are the shell of the prototype and the GUI widgets. These can be hand drawn, as shown in Figure 6.2, or printed like Figure 6.3. Just make sure you have both on and off states for each element.

Figure 6.2 (Open in Flickr)

Hand-drawn application GUI widgets.

Figure 6.3 (Open in Flickr)

Printed application GUI widgets.

Tip Handlebars

Bend the side of your GUI widgets up to form a right-angled handle, as shown in Figure 6.4. This makes it easier to pick them up during testing.

Figure 6.4 (Open in Flickr)

Close-up of handlebar for GUI widgets.

Now that you have most of the elements you need, let’s start with something basic like a registration form and move on from there.

Paper Prototyping a Basic Registration Form

A registration form is pretty common for Web-based applications and ecommerce sites, which makes it a great starting point. Let’s create a registration form that has the following capabilities for your customers:

• Enter first and last name
• Enter email address (used for sign-in and to recover password)
• Enter a password
• Be remembered in the future
• Register
• Sign-in if the visitor is already registered

Figure 6.5 shows the example I’ve created. Looks pretty straightforward, right?

Figure 6.5 (Open in Flickr)

Paper prototype of a basic registration form.

Communicating Changes in State

Reflecting a change in state is one of the key differences between sketches and prototypes. These changes in state can be macro, like an entire screen change, or micro, like selecting a checkbox.

When working with paper prototypes, changes in state can be reflected easily by writing on the prototype. If test participants want to select a checkbox, they just mark it with a pen. This works for selecting the checkbox, but what if they want to deselect it?

Remember those GUI widgets we created earlier? If one of your test participants wants to select the checkbox, just drop a paper selected checkbox on top, like in Figure 6.6. This reflects the change in state and is easy to undo.

Figure 6.6 (Open in Flickr)

Paper prototype with selected checkbox GUI widget in place.

This effect is equally useful for other GUI elements like select menus, radio buttons, and audio controls.

While you could use this effect to show a hover or highlight effect, I prefer something different—a transparency.

Transparencies are one of my favorite little tricks. They’re incredibly flexible. I use them for a number of effects, including hover states for navigation (see Figure 6.7), highlighting input fields that have focus, and overlay effects.

Figure 6.7 (Open in Flickr)

Here I use a transparency to show a selected thumbnail in a photo gallery.

Applying this technique to our registration form, you’ll see how we can simulate something like in-line contextual help. Let’s say you want to show that when a participant selects an input field, that field is highlighted and a little contextual help overlay displays at the right.

To accomplish this effect, we’ll need the following:

• Yellow highlighter and piece of transparency or a piece of colored transparency
• Piece of 3×5 card for the overlay
• Tape or rubber cement

First, cut out a small piece of transparency about the size of your input field. Next, cut out an overlay section for your in-line contextual help. Tape the contextual help bubble to your transparency, and you’ll have something similar to Figure 6.8. Don’t forget to fold one side of the transparency to give yourself a handle.

Figure 6.8 (Open in Flickr)

Highlight selected field and display in-line contextual help.

As the participant moves through the form, you can slide the transparency down, simulating in-line contextual help. For fields that don’t have help, simply use your handle and pick up the transparency. There you have it—in-line contextual help.

Advanced Paper Prototyping Techniques

One of the most common myths of paper prototyping is that you can’t use it to simulate interactivity like an AJAX-style show/hide or scrolling a photo gallery. These are easier than you might think, and they build on some of the basic prototyping techniques I’ve already covered.

One of the most common AJAX-style[1] techniques is show/hide where a user clicks a link to display additional content and then clicks again to hide it. This is probably one of the easiest effects to simulate. All you have to do is fold a piece of paper.

In this example, I’m going to use a voicemail widget I’ve created for a Web-based application. The default state of the widget displays each voicemail with some summary information. If you select the expand button, the area below the selected voicemail expands to show additional information and actions, as shown in Figure 6.9. Selecting the button again collapses it, hiding the additional information.

Figure 6.9 (Open in Flickr)

Expanded state of the widget.

To accomplish a show/hide effect, I’ll start with a printed copy of the widget and make two creases: one above and one below the content I want to show and hide (see Figure 6.10).

Figure 6.10 (Open in Flickr)

Folds created to simulate show/hide effect.

To simulate the effect, I start with the paper folded over, which is the default hidden state of the tile. To simulate the show effect, I unfold the paper, to expand the widget and display the additional content. It’s really that easy.

Beyond Boundaries

At the Interactions ’09 conference in Savannah, I taught a paper prototyping workshop and asked the participants to create a photo gallery carousel. I showed them the Yahoo! User Interface (YUI!) carousel widget as an example. Most of the groups created a pretty standard sliding image gallery, similar to the YUI! carousel (see Figure 6.11).

Figure 6.11 (Open in Flickr)

Basic carousel paper prototype.

There were two groups, however, who created something totally and completely unexpected—shockingly brilliant (see Figure 6.12).

Figure 6.12 (Open in Flickr)

3D carousel paper prototype.

The participants in my workshops never cease to surprise and amaze me. Whether it was due to a misunderstanding, or their vivid imagination, I don’t know, but they had created a 3D carousel—something you would never ever try with HTML.

When working within a particular software program or programming language, we often constrain our ideas to what that environment natively supports. If it supports 2D, we think in terms of 2D. If it doesn’t support it, or if it’s difficult, we are more likely to stick to the native, pre-built, canned solutions and less likely to push, bend, break, and innovate.

Another common simulation is the slide effect. This is useful for simulating a photo gallery, the movement of an audio/video player, the iTunes cover flow effect, or the motion scroll found on the iPhone. This takes a little more work than show/hide, but it is still pretty easy to accomplish.

In this example, we’re going to create a photo gallery. As the user selects a different image by sliding the selector, I can move the photos through the viewing window automatically.

To start, you’ll need to create three elements: a viewing window, a thumbnail selector, and a strip of photos. I’ve created mine in Illustrator, as shown in Figure 6.13.

Figure 6.13 (Open in Flickr)

Components for a sliding photo gallery.

Next, cut a slit at each end of the viewing window. You’ll need to make sure it’s wide enough to fit your photo strip through it. Then slide the strip through the two slits so that it’s viewable in the window with one side sticking out. You should have something that resembles Figure 6.14.

Figure 6.14 (Open in Flickr)

Photo strip slid into the viewing window.

As the participant moves the selector across the thumbnails at the bottom, you can slide the larger photo strip through the window to simulate the effect. For an additional bonus, use a piece of flat dental floss taped to the back of your photo strip to pull the strip back and forth.

Tip Give Your Sliders Some Breaks

When making sliders, fold each end over like you would to create a handle for a GUI widget. Instead of acting like a handle, this folded-over area will catch the edge of the viewing window, acting as a stop and preventing it from pulling all the way through.

I’ve used this technique in usability testing to evaluate automatic versus manual transitions on a screen. I created a similar widget that would rotate featured stories on a home page.

For half the participants, I presented the home page and let them select an item before moving the featured story. During the conversation, I asked if they had any feedback on making this automatic instead of manual, and their responses were rather tame.

For the other half, I presented the home page and after a few seconds automatically moved the featured story by pulling a string. Several of these participants got excited after seeing the effect. They became curious and asked if the real home page would do that.

By showing the actual effect, I was able to obtain richer feedback than I did by just describing it. And I was able to accomplish it with just a few minutes of effort and absolutely zero coding.

Paper Prototyping for Physical Devices

Paper prototyping isn’t limited to software interfaces. In fact, it’s one of the few methods that bridge the gap between software and hardware prototyping. If you’re doing any work in physical devices like handheld, mobile, or even machines like ATMs, you should consider paper.

Since physical devices are more tangible than software interfaces, the value of paper prototyping is even greater. With paper, you can create a physical model of a hardware device like an iPhone, shown in Figure 6.15, or even an ATM or subway ticketing system, shown in Figure 6.16.

Image by Steven Toomey.

Figure 6.15 (Open in Flickr)

iPhone paper prototype. http://www.flickr.com/photos/typeweight/357099407/in/set-72157594476948766/

Figure 6.16 (Open in Flickr)

Subway ticketing paper prototype. http://www.flickr.com/photos/knute/2247602574/

Simulating screen changes on physical devices is fairly easy as well. Just follow the same basic principles I covered earlier for slide effects.

First, create a frame for the viewing window and tape it over the physical device. Next, cut a slit in the top of the viewing area and slide your screens in and out of the viewing area to simulate the screen changes. Once again, no programming is involved.

GUI Magnets

GUI magnets are small, flexible magnets with GUI-elements on them. You can use them for collaborative brainstorming on whiteboards and easily drag-and-drop different magnets to find the best interface prototype. GUI magnets are available online at http://shop.guimagnets.com/.

Also, you might want to check out this book for additional information: Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces by Carolyn Snyder http://paperprototyping.com.

Summary

How’s your paper prototyping confidence? Feel like you could tackle just about anything? Now you can see why I think paper is such a powerful method and tool.

• It’s fast, cheap (basically free), and easy.
• You can use it anywhere and anytime—no computer necessary.
• It’s one of the few tools that’s suitable for collaborative design.

  [1] I use the term AJAX-style here, because purists will argue true AJAX transfers information to and from the server. In many cases an AJAX effect is achieved without actually communicating with the server.