Paper prototyping is a method to quickly test the usability of an interface design with users. The interface is a sketch on paper or a very simple wireframe. At the end of this article you know how to design a paper prototype with different materials and how to create different interactions on paper. This guide should also help you to avoid some of the pitfalls.

This article is the second about paper prototyping. Learn about how to plan and conduct a paper prototyping user test from design to data analysis in the first part.

Paper prototype use-cases

Before I start talking about the design a brief reminder about applications of paper prototypes. Paper prototyping integrates users in the design process and helps you to with the following tasks:

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

Paper prototyping is particularly good to test the information architecture and interaction concept early on.

General paper prototype do’s and don’ts

There are questions which it cannot answer such as user experience and time to complete a task. Both would require an implemented prototype with realistic response time. Other things to consider:

1. Refrain from testing a whole “application” or “website”. Select one task or a set of typical tasks that are conducted with your interface. Design the interface for those tasks. (Brown, 2020)
2. Don’t assume one line of interaction. Once you have sketched your interface, think about what alternative interactions users might try or could alternatively make to complete the task. Design a reaction for those interactions in your paper computer.
3. Ensure clear labels. Particularly if you hand write your interface let someone independent (can be a friend) read over it to ensure it is clearly usable.
4. Practise the paper based computer to ensure it runs smoothly. A helpful step in the design is reducing the number of small parts in the paper prototype design. Paper prototypes with too many small parts are cumbersome to manage.
5. Friends, family, or experts can surely provide valuable feedback, but prefer to find participants for your test that would be users of your product. It is important to invite the users of the product that you are designing. Your users have a specific background, skills, and knowledge and can deliver valuable insights on how your interface aids them in completing their task (Maguire, 2001)

Plan the interaction process

Write down the task you want to use in the user test and divide it into steps. Sketch an interface for each step. Keep the interface sketch simple (at least for the first user test round). Simple means a wireframe without colour and pictures, see in the Inspirationfeed (2020).

A simplistic paper prototype is called low-fidelity and a more detailed prototype is called high-fidelity. A simple paper prototype is quick and inexpensive and facilitates created feedback from users. High-fidelity prototypes move towards a finial product and proved assurance that the product is easy to use while it is developed. Dam and Siang (2020) compare both types of prototypes.

You can improve your design over several paper prototyping rounds, each with a set of 3-6 users. The paper prototype design can get more detailed with each round, up to an interactive prototype.

This is a good video to learn about how to design a paper prototype.

Some paper prototypes you find online are quite advanced. E.g. a cardboard frame of a laptop or mobile phone. Whereas it is nice and makes the prototype more robust it is not necessary. If you do not feel confident to sketch a paper prototype on paper you can get a set of shapes for MS Visio or use one of the tools in the link below.

Resources

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/

A list of software that you can use to make wireframes (if you do not have MS Visio). The websites include a couple of open-source tools that you can use for free, but note that I have not tried any of them and cannot say anything about their quality.

https://blog.capterra.com/free-and-open-source-wireframe-tools/

https://dzone.com/articles/27-open-source-web-ui-mockup-tools

Sources

Brown, M. (2020). How to Do a Paper Prototype Test in 7 Steps: The quick, easy, and dirt cheap way. https://www.akendi.com/blog/how-to-do-a-paper-prototype-test-in-7-steps-the-quick-easy-and-dirt-cheap-way/

Dam R.F. and Siang T.Y. (2019). Stage 4 in the Design Thinking Process: Prototype. https://www.interaction-design.org/literature/article/stage-4-in-the-design-thinking-process-prototype

Inspirationfeed (2020). 25 Examples of Wireframes and Mockups Sketches. https://inspirationfeed.com/25-examples-of-wireframes-and-mockups-sketches/

Maguire, M. (2001). Methods to Support Human-Centred Design. International Journal of Human-Computer Studies, 55(4), 587-634. doi: 10.1006/ijhc.2001.0503