This is a quick guide to paper prototyping & testing for web interfaces, as an early part of the «user centred design» process. It is aimed at any kind of professional that is involved in the process of creating web or other screen interfaces.
Paper prototyping is a discipline that has been around for ages. It has re-gained popularity with the spread of agile design methodologies, inspired by movements such as human or user centred design and design thinking .
These philosophies have one major thing in common according to Don Norman — self-proclaimed advocate of human and user centred design:
«…it is about starting with a good understanding of people and the needs that the design is intended to meet»
What is paper prototyping
Prototyping or especially paper prototyping is a research methodology that helps to visualize and test ideas and concepts in an early stage of a project. This can be done with minimum investment in time and cost or as UX Pin states,
«nothing brings you closer to the functionality of the final product than prototyping»
Building your paper prototypes
Creating paper prototypes is fun, it is a great way to collaborate in a team and anyone can participate. Paper prototyping is an early but NOT THE FIRST method in a user centred design process.
Prior to prototyping, you should have a goal in mind and you should have gained knowledge through other research methodologies.
Let’s make up an example —
You wanna build an application for a pizza delivery service.
Icon source:
http://iconmonstr.com/
The ultimate goal for this service is, that your average customer John, 28, may painlessly and easily place an order with his phone, based on the following criterias:
John wants to order two pizzas. One is spicy salami, the other one he is not sure about yet. John wants to deliver to his work address. And he wants to be able to pay with his credit card.
A main goal, personas, scenarios, user journeys or even storyboards should have been set up before you start prototyping. Based on this knowledge you start drawing interfaces that allow your user to perform this particular task.
As you work through your user journeys, you draw up all single steps, screens and screen elements. They will later end up being laid out in a flow scenario, in which your potential user is going to navigate.
Always apply the KISS principle to this process — Keep it simple stupid.
Where to start
Start with a piece of paper that resembles the shape and dimension of the screen you are designing for. For smaller devices such as phones or watches, you might use an oversized piece of paper as it simplifies drawing.
Chris Nodder with lynda.com suggests that you should make a screen template that’s at least 4 times the surface area of the actual device.
From my personal experience, this is not really necessary. I have done iPhone sized prototypes that have worked just fine. Furthermore, real size prototypes feels closer to the actual device when testing them.
For the main interface of a screen, you might be using an entire sheet of paper. When it comes to drawing single UI elements and controls such as dropdowns, overlays, expandable etc. take some scissors and cut these elements out of another piece of paper or use sticky notes.
These cut out elements will give you agility and flexibility when testing your paper prototype. Don’t forget different screen states such as selected or unselected checkboxes, radio-buttons etc.
Source: http://aaronbrako.com/
Keep working through your scenarios and storyboards and draw up all relevant screens and elements of your prototype in order to show all screens and states of a potential user journey.
Nevertheless and as paper prototyping should be a quick and easy method, you don’t need draw up every single potential screen of the final product.
Jakob Nielsen suggests that you should always have two backup screens ready instead:
Materials for your prototype
There are a lot of tools and materials that can come in handy when paper prototyping. Here is a list of materials that might help your process:
paper whiteboard poster sticky notes sketchbook notebook napkin squared paper print template cards overhead sheet cardboard carton plastic wood pieces plastic pieces scissors markers foam pieces UI stencil paper correction fluid and tape transparency sheet
List via https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/ and https://www.nngroup.com/reports/paper-prototyping-training-video/
Remember: Prototyping ought to be fast, easy and fun. You don’t aim for polished and fancy product. Therefore: Stick to the KISS-metrics and keep it simple stupid.
There are only two things that you really need: A pen and paper. If you want to use more, you certainly can.
Jakob Nielsen has a couple of specific recommendations when it comes to material:
If an interface features forms, use a transparency sheet or correction tape, so you do not need multiple copies of the form. Use well visible and mid-tip pens. Draw up your prototype in black and white. Colors can come in at a later stage of your process.
Testing a paper prototype
The main reason for building prototypes, is that we can test them on real users, get feedback and learn early whether our ideas and concepts work.
It is all about answering the question whether we are doing THE RIGHT THING.
Eliminating occurring issues may save you time in the development of higher fidelity prototypes, the design and of course the development. This is when you are trying TO DO THINGS RIGHT!
Source: Lecture Tom Metcalfe on Experience Prototypes vs. Prototypes, 2016
Correctly conducting user testings is a topic by itself that could be covered more extensively. Ideally designers involved in the project attend or even carry out the testings themselves. If this is not possible you might think of recording the session in order to be able to show the outcome.
Recruiting users
Paper prototype testings, are much like regular testings and obviously require real users.
According to Jakob Nielsen, 5 users are enough to find about 80% of potential issues.
He also suggests that the majority of issues can be eliminated within 3 testing iterations, attended by 5 users per session.
Ideally, you test with your potential or real users.
Finding and recruiting them may be too time-consuming and expensive, though. Therefore you might consider hallway tests. As the name suggests, you are utilizing people in the hallway or a public area to test your prototype on.
Setup
Find a neutral and quiet testing environment with a table and chairs, so that you can fit it all your participants.
Apart from the tester, a session requires at least two more people:
Person number one is the facilitator, that instructs users and interacts with them. Person number two is «the computer». This person doesn’t talk during the session and is in charge of changing screens or screen states, whenever the user interacts with your prototype.
There might be a third person scribing, and other people observing.
Icon source:
http://iconmonstr.com/
Apart from the human resources, you obviously need your prototype screens. Rather than just placing them on a table, have a mockup of your device ready. This may just be a piece of paper, larger than your drawings, and showing a frame printed or drawn onto it. This will be the device where you place your interfaces on.
Source:
http://www.davidfenigstein.com/
When testing a touch device, users touch elements on your prototype in order to interact with them. When testing a desktop website, give your users a pen, which they can use to point at elements. A pen is also useful if the user needs to fill out forms.
Conducting a testing session
Testing sessions need to be well planned and well conducted.
Start off with greeting your users and introduce them to yourself, the computer and other people in the room. Clearly explain the testing scenario and how the paper prototype works. Tell users that you are testing a potential system and not them. Let them know, that they can’t do anything wrong.
Furthermore instruct them to verbally state their thoughts and thinking process, whilst interacting with the prototype. Once the general introduction is done, introduce them to the task.
In order to get them chaty, show hand them the testing script and make them read it out loud. The script consists of the persona the user is playing, the scenario and the task. Make sure that users understand what you expect from them and start the test.
Now that’s the exciting bit! Your user is testing your prototype!
Observe closely, how the they perform, and what kind of reactions and feedbacks you get. Do not interrupt or question. Talk as little as possible. If the users gets stuck, let them find a way out and wait until they questions you. Respond as little as possible — or at least wait until the end of the session — ask open questions instead, such as: «How did you feel», «What did you expect».
As mentioned earlier your prototype might not be intended to cover every single aspect of a final product. Therefore I mentioned two backups:
The «loading screen» and the «under construction screen».
Icon source:
http://iconmonstr.com/
As a computer, always have the «loading screen» ready in case you cannot find the appropriate screen or if you need to make adjustments to a screen.
The «under construction» screen comes in handy, when users leave the desired path and end up somewhere they shouldn’t have ended up in the first place.
This does not only provide an indication that there might be something wrong with your process, but it also gives you the chance to ask the users, why they ended up getting lost.
At the end of the testing session talk to your users and give them the opportunity to state further questions and comments about the process, expectations and feelings during the session.
Conclusion
Paper prototyping or rapid prototyping is an easy and fun way to research and validate the value of your ideas and concepts in an early stage of a project.
This is not only going to save you time and money. It will also save you nerves when dealing with your client later!
There are also critical voices and opinions on paper prototyping, that I haven’t covered. Jake Knapp — author of a book about the Google Ventures design sprint method — considers paper prototyping a waste of time.
Let me know what you think and get in touch if you have questions or comments.
Disclaimer
This article was written in the scope of an assignment within the Digital Experience Design Master Course at Hyper Island, Manchester. The assignment was originally set up as a talking heads tutorial video and has been adapted for this medium post.
Bibliography & sources
Busche, L. (2014) The Skeptic’s guide to low-fidelity Prototyping — smashing magazine. Available at: https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/ (Accessed: 17 March 2016).
Nielsen Norman Group (2016) About Don Norman. Available at: http://www.jnd.org/about.html (Accessed: 18 March 2016).
Norman, D.A. (2013) The design of everyday things: Revised and expanded edition. New York: Basic Books.
Balkissoon, D. (no date) Rapid Prototyping. Available at: http://designresearchtechniques.com/casestudies/rapid-prototyping (Accessed: 17 March 2016).
Cao, J., Zieba, K. and Ellis, M. (2015) The Ultimate Guide to Prototyping. Available at: https://studio.uxpin.com/ebooks/guide-to-prototyping/ .
Cao, J. (2015) How to prototype websites on paper. Available at: http://www.creativebloq.com/ux/how-prototype-websites-paper-31514246 (Accessed: 20 March 2016).
Busche, L. (2014) The Skeptic’s guide to low-fidelity Prototyping — smashing magazine. Available at: https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/ (Accessed: 17 March 2016).
Nodder, C. (2014) Building the prototype. Available at: http://www.lynda.com/Web-Prototyping-tutorials/Building-prototype/161093/171565-4.html (Accessed: 17 March 2016).
Software Tree (2016) White papers — the KISS principles. Available at: http://www.softwaretree.com/v1/KISSPrinciples.html (Accessed: 17 March 2016).
Nielsen Norman Group, Nielsen, J. and Loranger, H. (1998) Paper Prototyping training video | Nielsen Norman Group. Available at: https://www.nngroup.com/reports/paper-prototyping-training-video/ (Accessed: 17 March 2016).
Balkissoon, D. (no date) Rapid Prototyping. Available at: http://designresearchtechniques.com/casestudies/rapid-prototyping (Accessed: 17 March 2016).
Medero, S. (2007) Paper Prototyping — A List Apart Article. Available at: http://alistapart.com/article/paperprototyping (Accessed: 17 March 2016).
Busche, L. (2014) The Skeptic’s guide to low-fidelity Prototyping — smashing magazine. Available at: https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/ (Accessed: 17 March 2016).
Nielsen Norman Group, Nielsen, J. and Loranger, H. (1998) Paper Prototyping training video | Nielsen Norman Group. Available at: https://www.nngroup.com/reports/paper-prototyping-training-video/ (Accessed: 17 March 2016).
Metcalfe, T. (2016) Workshop: Physical Prototyping 11 February.
Balkissoon, D. (no date) Rapid Prototyping. Available at: http://designresearchtechniques.com/casestudies/rapid-prototyping (Accessed: 17 March 2016).
USAJOBS Team (2014) 10 tips for better hallway usability testing. Available at: http://www.digitalgov.gov/2014/02/19/10-tips-for-better-hallway-usability-testing/ (Accessed: 17 March 2016).
Nielsen Norman Group, Nielsen, J. and Loranger, H. (1998) Paper Prototyping training video | Nielsen Norman Group. Available at: https://www.nngroup.com/reports/paper-prototyping-training-video/ (Accessed: 17 March 2016).
Nielsen, J. (2000) Why you only need to test with 5 users. Available at: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ (Accessed: 21 March 2016).
USAJOBS Team (2014) 10 tips for better hallway usability testing. Available at: http://www.digitalgov.gov/2014/02/19/10-tips-for-better-hallway-usability-testing/ (Accessed: 17 March 2016).
Busche, L. (2014) The Skeptic’s guide to low-fidelity Prototyping — smashing magazine. Available at: https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/ (Accessed: 17 March 2016).
Nielsen Norman Group, Nielsen, J. and Loranger, H. (1998) Paper Prototyping training video | Nielsen Norman Group. Available at: https://www.nngroup.com/reports/paper-prototyping-training-video/ (Accessed: 17 March 2016).
Knapp, J. (2014) Paper prototyping is a waste of time — Design on paper but always test with a screen. Available at: https://library.gv.com/paper-prototyping-is-a-waste-of-time-353076395187#.2svlh4vf5 (Accessed: 17 March 2016).
