Paper prototyping: A primer

Credit: Flickr user Samuel Mann

Credit: Flickr user Samuel Mann

Many great designs, products, websites and projects begin with paper.

And your ideas should begin with paper too.

Yes, it’s nice to start building a website or multimedia project and just see where it goes, but starting with rapid prototyping can help weed out bad ideas or help improve good ideas that are hampered by poor implementation. With paper prototyping, a rapid prototyping tool, anyone can make a prototype of an interactive design.

If a project can’t survive the paper prototyping stage, it almost assuredly would not be a good product once built. Paper prototyping saves money and time. And paper prototyping, as opposed to just making static mockups with paper or Photoshop, allows real users to test your website long before you get to the Photoshop and eventual programming stages.

Paper prototyping is also a way that non-designers and non-technical people can be involved in the design and development process. A lot of people have great ideas, but they can’t build the final product. But not everyone needs to be able to build the final product.

Bringing more people into the design and development process leads to better products. Innovation should not be the province of a small group of people, and paper prototyping can help democratize design, development and R&D.

A little background: Paper prototyping is a popular tool in the human-computer interaction field and became popular when major tech companies began adopting the technique. Now it is a tool you see throughout companies of all different sizes.

Paper prototyping is a user-centered design method. User-centered design involves users in the design process and can help lead to products that users prefer. User-centered design, however, is not about asking users what they want and expecting them to be designers, but rather it is about involving them in the design process and getting feedback.

Henry Ford is quoted as saying, probably apocryphally, “If I had asked people what they wanted, they would have said faster horses.” People at that time didn’t know they wanted an automobile; they just knew they wanted faster and easier ways to get around.

That’s the essence of user-centered design and usability testing. We observe people using our designs, interview them, give them surveys and use our expertise to figure out designs that meet those needs. We’re not asking people to design their own products.

Fast, cheap and early user testing

You can never do enough user testing, and user testing gets more expensive the later in the design and development process. User testing is best done throughout the entire design and development process, but you should get started early. Getting users in early can help avoid major mistakes that take a lot of time and money to fix later. Or, worse, major mistakes that never get fixed that mar a product forever.

Wait until your new website is built to test it with users? User testing will take time and cost a lot of money and it may be difficult to make substantive changes. If you wait that long you may build in serious usability issues that may never get fixed.

Imagine you spent months building a new website and you are already over budget once the website launches. You didn’t do any user testing before it launched. Well, where is the money going to come from to make fixes to the website? Building in user testing from the beginning will save you money and ensure that major mistakes are avoided. Start with paper prototyping.

Conducting user testing with paper costs very little money and can lead to changes that make the final product much better. Need to totally rethink your website navigation system? It’s a lot easier to do that with paper than with a live website with complex code to rework.

The biggest thing you are testing with a paper prototype is interaction design. What happens when a user clicks on that button on your website? How does a user find and buy a book on your online bookstore? How does a person sign up for your newsletter?

Wait, how can paper simulate interaction design?

How do you simulate the experience of using a website with paper? There is no keyboard, mouse or trackpad. One of the designers of a paper prototype serves as the computer and responds to user taps. Below you’ll see some videos where people are acting as the computer during a paper prototype usability test.

A user taps a link with her finger, and computer person places a new piece of paper to simulate navigating to a new part of the website. This can also be used to simulate JavaScript popovers.

The video below shows a paper prototype for a blood testing kiosk. Paper prototyping doesn’t just have to be used for websites and multimedia features, but that is the way most of you will end up using paper prototyping. The test below shows how several people used this prototype and includes an interview portion at the end with users about their experiences.

I like that the testers even gave the test takers a credit card to use to further make this prototype seem realistic. You’ll notice that several users were tested for this prototype, and it’s highly recommended that designers test their prototypes with several potential users. How many tests is enough?

If the first usability test with a user shows a show-stopping bug, stop testing and fix that with your paper prototype first.  There is no sense in testing an obviously broken design again. But let’s say your prototype generally works and you’re looking for ways to improve and iterate your design. I’d go with at least three users.

You might be thinking, why not 10, 20 or more? This should not be the only time you are testing your design. You’ll want to save some of those users for future iterations of your prototype, especially as you work your way up to medium and high fidelity prototypes. If you have a large pool of testers for every phase of your design, going with 5-10 each time would most likely be more illuminating.

This video shows the most impressive paper prototype I have ever seen. It’s a paper prototype for Hanmail.net, a Web mail service. Paper can simulate fairly complex user interfaces and interaction methods.

The photo below is a high-fidelity prototype of a mobile news site that I built with HTML, CSS and JavaScript. It started off as a sketch and went on to higher fidelity prototypes along the way. I user tested each step along the way from paper to the high-fidelity prototype. Because of the user testing I’ve done along the way, I feel confident that if it were to launch as a product, it wouldn’t have major usability issues.

That doesn’t mean I wouldn’t need to do additional usability testing, but rather my testing could be focused on improving an already solid design, rather than fixing a troubled one.

prototype

 The (basic) tools of paper prototyping

  • White printer paper
  • Pens
  • Markers
  • Glue sticks
  • Clear tape
  • Construction paper
  • Post-it notes (various sizes can be handy, but not required)
  • Tab dividers (make excellent navigation elements)
  • Scissors

These are just the basic tools. You can also print graphics and other interface objects off with a computer, but that isn’t necessary. You can use physical objects as well to help mockup elements.

A lot of people don’t recommend using rulers. I’m not dogmatic about this, but it’s important to keep in mind that you’re not trying for perfection here. You don’t want to slow yourself down by trying to make every line straight. It’s more important to spend your time getting feedback from users than it is to make a low-fidelity design look a little better.

Eventually your design will become higher fidelity, and that’s the appropriate time to care more about making sure the visual aspects look as good as possible.

How to conduct a usability test with a paper prototype

  • Find users —These should not be other people working on the project. People with as little knowledge as possible about your design and work will provide the best feedback.
  • Assign a person to be the computer — If you built the design entirely yourself, you’re the computer that the person interacts with. You’ll want to grab a friend to record the testing sessions so you can watch them later. If you have a team, assign one person to make your prototype respond to user inputs.
  • Record the test — Recording a test is recommended. This doesn’t replace observing the test, as you’ll see below, but there are several reasons to record a usability test. You can refer back to it later, you can show people who didn’t observe the test how it went. If you’re trying to convince someone that a design needs to be changed, showing them a video of users struggling with a design is a great place to start.
  • Conduct the test — Explain what users are supposed to do. Give clear tasks and scenarios. Let’s say we were testing Amazon.com. Here is a scenario you could give a user: “You are a big fantasy book fan. You just heard a new illustrated edition of The Hobbit came out in October 2013. Find the book, put it in your shopping cart and buy it.”
  • Think aloud  Have users think aloud while going through your test by speaking what they are doing and thinking. Are they confused? Why are they clicking on this? What do they expect to happen when they do that? This will help you understand what they are thinking while they use your prototype. It will also help you formulate questions to ask them when they are done.
  • Observe — Even though you are asking users to think aloud, they may not say everything you need to know. Users may be struggling with a site but still tell you they think it is relatively easy to use. This can be because users want to appease you or because they don’t want to appear to not be able to work a website. Regardless, observe what is happening. You’ll learn a lot by seeing how well users can complete various tasks with your prototype. Remember, you’re testing your design, not the user. I always make this clear to users.
  • Debrief — Ask users what they thought of the prototype, what they thought went well, what they thought didn’t go well, how they felt using your prototype, etc. If you noticed a user struggling with part of the prototype, specifically ask them about that.
  • Create a list of issues to fix — Based on the feedback that you got from users and what you observed while watching users, create a list of issues to fix. If there are a lot of issues, you may want to modify or create a new paper prototype. If it went fairly smoothly, it’s time to create a higher-fidelity prototype and get additional user feedback later.

Testing early and often saves money and time. Don’t let anyone tell you otherwise.

More resources and videos