Paper prototyping (part 1) – How to guide

Paper prototyping (part 1) – How to guide

Paper prototyping is a method to quickly test the usability of an interface design with users. Due to its low cost on resources and time, it is possible to rapidly create a paper prototype and gain user insights. Further, due to the simplicity of the paper prototype, users are more willing to give honest feedback (Gerber and Maureen, 2012).

At the end of this article you will know what paper prototyping is, what goals you can reach with it, what resources you need, how to run a paper prototype session, and how to analyze the collected data.

This article is the first of two about paper prototyping. Read the second article to learn in detail how to develop a paper prototype and what pitfalls to avoid.

If you want to jump to the most interesting section, here are all sections:

 

What is paper prototyping?

A paper prototype is the interface of the application or website is on paper. Typically, it is a design in low detail, without colours and images, just the basic sections and elements for interaction. During the study you present the interface on paper to users and let them complete a set of typical tasks. Thereby, users will interact with the paper prototype as they would with an electronic device.

Paper prototype example

Paper prototyping is a method to integrate users into the design process from a very early phase onward. It can be used for:

  1. Early proof of concept
  2. Development of a concept together with users
  3. Comparison of two or more interfaces
  4. Clarification of usability issues identified in a running design and proof of improvements

You can use a paper prototype in any design stage of the product. Starting from an early idea up to a design that is already on the market for which you want to explore different options to increase its usability. Identifying usability problems early on is a better way as changes are still comparable cheap (Heaton, 1992).

Paper prototypes can work as well as interactive prototypes, but there are questions they cannot answer, e.g., time to complete a task and user experience (Bailey, 2005). Keep the limitations in mind to apply this method properly and get the answers you want from the user studies.

What is the outcome?

The outcome of the paper prototyping study depends on its purpose, your research question. For example:

  1. User feedback on how to improve your concept/idea
  2. Feedback about whether one of multiple designs is better to use and more accepted
  3. Usability challenges in an existing design

Dependent on the information you need, you can integrate other methods into the paper prototyping session. For example, I used usability and acceptance questionnaires after a paper prototyping session to obtain a general opinion about the usability / acceptance of the interface: the System Usability Scale (SUS) and User Experience Questionnaire (UEQ). They are very quick to conduct and evaluate. Further, I have used brief semi-structured interviews after a paper prototype session to obtain more detailed feedback on attitudes towards the interface.

What equipment is required?

The required equipment depends on your project constraints: the available time to prepare and run the paper prototype sessions, the available resources (e.g. material). At bare minimum you need a pair of scissors, paper, pencil, participants, and a room or calm space in which you can conduct the study.

Helpful other tools are: markers, copy machine, printer, camera, stencils or software to sketch the interface in, and a second person supporting the study. Dependent on the prototype you need it might also be useful to have cardboard or thicker paper, foam, sticky notes, wood, eraser, glue, and foil.

How to design a paper prototype?

First, formulate your research question. The question should fit into what a paper prototype test can provide you on answers (see What is it?). A prerequisite for the research question is that you have an interface or an idea for an interface of some sort that you want to test and that interface will help people conduct a specific task. For example, in a very simple case you designed a new registration form for a mobile app and want to know if it is usable.

Next, think about the task that you want to help the user with your interface. The task should be something simple that can be conducted within about 5-10min. Otherwise, break down the task into smaller steps. Develop your interface. Start with the start screen and then think about how the interface changes with user input. Make sketches of how the interface changes. Note all interactions a user needs to make to complete the task. Think about alternative interactions, you might need to sketch alternative screens in case the user takes an alternative path of interaction.

You can either sketch on paper or use a program. Keep in mind, your prototype should be as simple as a wireframe. Whereas the interface needs to be simple, remember that when you sketch it should be accurate enough to have a clear readability. Especially when you use hand-writing ensure it is easy readable (my own experience). You could simply ask 2-3 friends to have a brief look on the interface. Avoid using colour. Colour directs attention and lead to bias (like/dislike of the colour). Simply put, colour or images in a paper prototype may lead to questions and comments that do not help to answer your research question.

Stencils help you, e.g., to quickly sketch specific forms such as buttons, in the same format on different places on the interface. In our example, we are looking forward to test a registration form for a mobile app. Therefore, we need a sketch of a mobile phone. If available, use the copy machine/printer to generate a number of papers with a sketch of a mobile phone on it.

Think about what interface elements change and how you want to show the changes in the paper prototype. For example, the registration form might be on one page and the use needs to scroll. You could make two sketches of screens, the first for the initial interface and the second for the interface shown after the scroll. Cut out both sketches from the screens, now you can place them into your paper with the sketch of the mobile phone.

Now its time to practise. Organize the interface elements that will change in during the interaction so that you have quick access. Practice how to operate the paper based computer until you feel confident. Don’t forget to practice alternative paths of interaction if there are any in your prototype. In the end, the paper computer should react quickly to the user’s actions. At best practise with 2-3 of your friends or colleagues. You might also discover that they want to make other interactions as you planned. So you might need to design additional screens.

Before you run a user test prepare how you record data for the analysis – it makes life so much easier. For example, you can use my template here. Type in your research question. Describe the steps of interaction a user needs to make, describe alternatives. Afterwards those ideal interactions can be compared to how users interacted with the prototype and can reveal usability issues.

Also, print out the tasks that you want the participant to do, one for you and one for the participant. This sheet will help you and the participant to focus on the tasks.

Paper prototype test – user reading the current task

How to run a paper prototype user test?

Find 3-6 users. 5 users will enable you to identify about 85% of the usability problems (Nielsen, 2000). Iterate your design and test again with 3-6 users.

A paper prototype session can be conducted alone (I have done it), however, I would recommend two people. One person to operate the paper based computer and the other person to guide the participant through the study and to take notes about the participant’s interactions with the prototype. Remind the participant to verbalize their thoughts about how they interact with the prototype. Use the analysis template to track how the participant interacted with the paper prototype and comments during your studies. Some even recommend to split the role of experiment leader and observer (Mifsud, 2020)

When you run a paper prototyping study by yourself, record the session with a camera and ensure that you can see on video how the participant interacted with the paper prototype. Again, remind the participant to verbalize their thoughts about how they interact with the prototype.

Example 1:

Example 2:

How to analyze the data?

Usability is defined by three criteria: efficiency, effectiveness, and . A major indicator for a usability issue is if the users were not able to complete a task (effectiveness). The interface needs to be improved in that case. So the first thing to record and to consider in your analysis whether a user was able to complete the task, with or without help. Ideally the task should be completed without help. You can record this information in the first sections for each task in the analysis template in the sheet “Analysis” (Template Paper Prototype Usability Evaluation).

Then, we can look into the details. Check every step of interaction if there have been difficulties. For example, if a participant expressed difficulties or if they hesitated a long time etc.. Another indicator might be that the participants tried to click somewhere unexpected (deviation from the ideal path of interaction). Note those things as usability issues and check if they reoccurred across participants. Reoccurence of difficulties in completing a step is a strong indicator for a usability improvement. You can track those steps in the second section for each task in the analysis template in the sheet “Analysis”.

Resources:

Excel template for tracking of the interaction steps and analyses of the paper prototype session: Template Paper Prototype Usability Evaluation or a PDF version PDF Template Paper Prototype Usability Evaluation.

The paper prototyping helper kit with a set of control elements and buttons for print out: https://www.userfocus.co.uk/resources/prototype.html

Wireframe templates for print-out: https://www.tripwiremagazine.com/free-printable-sketching-wireframing-templates/

Wireframe templates for download with an underlying grid for more accurate and clean sketches. The wireframes are available for tablets, mobiles, and browser: https://sneakpeekit.com/

Snyder, Carolyn. (2003) Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces (Interactive Technologies). Morgan Kaufmann.

Case study about Mozilla from the NN/G Nielsen Norman Group: https://www.nngroup.com/articles/mozilla-paper-prototype/

Sources:

Bailey, B. (2005). Paper Prototypes Work as Well as Software Prototypes. https://www.usability.gov/get-involved/blog/2005/06/paper-prototypes-and-software-prototypes.html

Gerber, E. and Maureen, C. (2012). The psychological experience of prototyping. Design studies, 33(1). https://www.sciencedirect.com/science/article/abs/pii/S0142694X11000536

Heaton, N. (1992). What’s wrong with the user interface: how rapid prototyping can help. https://ieeexplore.ieee.org/document/

Mifsud, J. (2020). Paper prototyping as a usability testing technique. https://usabilitygeek.com/paper-prototyping-as-a-usability-testing-technique/

Nielsen, J. (2000). Why you need to test with 5 users. https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Share, if you like it:
Comments are closed.