Earlier we looked at sketching and saw it as a useful way to “think out loud” visually while also using it to describe user emotions in a stick-figure-level vocabulary. Later in the design process as the details of the interaction are beginning to be planned, sketching is useful for creating quick prototypes that allow rapid evaluation or can even be used for usability testing where users help test key paths in an app.

These paper prototypes are easy to create by sketching a screen of an app or website in enough detail so people can see the interactive elements in the sketch. When enough screens are sketched in this way, the paper prototype can be interacted with because selecting one element on one page can lead to the screen changing to show the next piece of paper like in this video.

A great example of a paper prototype

Another thing to note from this video is that sometimes the sketch doesn’t occupy the entire screen. It’s often a smaller piece of paper overlaid on the background of the previous, larger screen. Some pieces also unfold to mimic accordion elements and dropdowns, too.

There’s not much to making paper prototypes except drawing a lot of different pieces of an interface and then keeping all the pieces together to know which one comes next when an element is selected. The advantages of paper prototypes are

  1. They are quick and easy and cheap to create
  2. They allow for usability testing and rapid redesigns
  3. They are low-fidelity enough that people will feel free to critique them and not mistake them for a finished product (because they’re made of paper, duh)

Here’s another example showing that the approach works for mobile apps, too.

The minimum tools required are pen and paper, but a better toolset is

  • pens and/or pencils
  • paper
  • scissors
  • post it notes

Post it notes are great because they can represent pop-ups and other small features and quickly added to and removed from the “screen”. Another good practice with paper prototyping that comes in handy when your app has a common background or is based around a template shared by many screens is to make the big background once and then make smaller pieces of paper that contain the elements that change.

This is really all there is to paper prototyping. If you would like more info, there are many other neat videos on YouTube. Carolyn Snyder wrote the book on it, and it’s called Paper prototyping : the fast and easy way to design and refine user interfaces. You can read it through the IU library if you’d like.

Usability Testing

Once the paper prototype is ready, it can be used to carry out usability testing. This testing is often called user testing, but usability testing is preferred because the usability of the app and not the user is the thing being tested. The user is just helping with the testing. There are three simple methods of usability testing:

  1. The traditional method
  2. The think-aloud method
  3. Cooperative evaluation

For any method, the test is prefaced by the designer describing the purpose of the app to the user. Most usability testing involves the completion of one or more tasks, so the tasks are also described. How to complete the tasks and how to use the app are not described. The purpose of the test is to see if the user can discover how to do so. Give the user background about what they are doing but not how they are to do it!

At this point the methods differ. In the traditional method, the user attempts to complete the task(s) but doesn’t say anything except to indicate their actions (“I’m selecting that image”, “I typed Kevin in the box”, “I chose Yes”, etc.). In the think-aloud method, the user is also asked to describe their thought process (mental model) as they complete the task(s). In cooperative evaluation, the user and designer interact and talk over how to accomplish the tasks. In the first two methods, the designer doesn’t have to say too much, and the designer definitely doesn’t tell the user how to complete the task(s). With either method, the designer or another team member should take notes and/or record the testing to refer back to if any usability problems or other issues are encountered.

After the test has finished, a “post-task walkthrough” occurs so the designer can ask any questions and so the user can provide any additional information. Below are some examples of usability tests with paper prototypes.