This article is a quick guide to paper prototyping & testing for digital interfaces.<\/p>\n
Advantages and Disadvantages of Paper Prototyping<\/h2>\n
Before discussing specific tips of paper prototyping, it\u2019s worth saying a few words about advantages and disadvantages of this approach.<\/p>\n
Let\u2019s start with advantages:<\/p>\n
- \n
- It\u2019s fun.<\/em> Paper prototyping ought to be fast and fun. If it\u2019s slow and painful, there\u2019s definitely something wrong with your prototyping process.<\/li>\n
- Rapid iteration. <\/em>It takes minutes to create a few different versions of a design.<\/li>\n
- Low cost. <\/em>Paper prototyping is very inexpensive. Basic toolset includes pen and paper. Digital prototyping tools vary in price. But most digital prototyping tools require either a one-time purchase or a subscription.<\/li>\n
- Low commitment.<\/em> No one wants to throw out a digital prototype that took hours to create. It\u2019s much easier to throw out a sketch that takes only 5-minute to create.<\/li>\n
- Eliciting honest feedback.<\/em> An important advantage of paper prototypes is their sketchy look. The prototypes don\u2019t look like you\u2019ve spent a lot of time on them. As a result, people feel more comfortable criticizing sketches rather than polished designs.<\/li>\n
- Team building<\/em>. Since paper prototyping doesn\u2019t require any special skills, anyone can participate in this process. You can easily do paper prototyping as a group activity. People from all kinds of backgrounds can participate in creating paper prototypes.<\/li>\n<\/ul>\n
Now, let\u2019s talk about drawbacks:<\/p>\n
- \n
- Hard to collect feedback.<\/em> Paper prototypes require a great deal of imagination from test participants. It might be tough to collect gut reactions on design \u2014 people will have a hard time imaging how the future state of a product will look like just by looking at the paper.<\/li>\n
- Testing only in person<\/em>. It\u2019s hard to test a paper prototype when participants are widely dispersed geographically.<\/li>\n
- Paper prototyping is an extra step.<\/em> The downside of a paper prototype is that you\u2019ll need to convert it in a digital prototype anyway.<\/li>\n<\/ul>\n
When to do paper prototyping<\/h2>\n
Paper prototyping is excellent for:<\/p>\n
- \n
- Brainstorming sessions (when a team needs to outline the steps in a user flow or explore\/validate a variety of layouts)<\/li>\n
- Proof of concept testing (when a team needs to conduct a Guerrilla testing)<\/li>\n<\/ul>\n
Some designers believe that paper prototyping is useful only during the early stages of product design. That\u2019s not true. Paper prototypes are helpful at almost every step of the design project. It\u2019s possible to use pen and paper when you have a high-fidelity prototype or even a final product but need to explore a few different options really quick.<\/p>\n
11 Practical tips for paper prototyping<\/h2>\n
1. Have a goal for each prototype<\/h2>\n
Prior to prototyping, it\u2019s essential to set a clear goal that you want to achieve with a prototype. Think of a problem you try to solve and create a prototype that will help you solve it.<\/p>\n
2. Don\u2019t polish your prototypes<\/h2>\n
Paper prototyping is not about perfecting your arts & crafts skills; it about finds a solution to a problem as fast as possible. Don\u2019t spend time making sure everything looks perfect or is aligned correctly.<\/p>\n
3. Get yourself good\u00a0tools<\/h2>\n
When it comes to paper prototyping, there are only two tools that you really need: a pen and paper. But it\u2019s possible to make the process of prototyping more effective by using a few extra tools:<\/p>\n
- \n
- Desk paper holder<\/em>. I recommend using three-layer holder \u2014 one layer for a clean paper, one layer for sketches in progress, and one layer for finished work.<\/li>\n<\/ul>\n
![\"Wooden](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/0PtVItwDbBoMRD-sP.jpg\")
<\/a>Wooden Paper Tray by promidesign<\/a><\/p><\/div>\n
<\/p>\n
- \n
- Paper prototyping kits.<\/em> Such kits include pre-made sheets (graph paper) and templates that make paper prototyping easier.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1wpIWb9Tlc3NzbpxeHlr4Sg.jpeg\")
<\/a>Graph paper. Image: tripwiremagazine<\/a><\/p><\/div>\n
<\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1ThtxGK-Wkq1JPJ8HBe-xKA.jpeg\")
<\/a>Templates for iPad. Image: tripwiremagazine<\/a><\/p><\/div>\n
<\/p>\n
- \n
- Stencil<\/em>. Stencils can help you quickly and accurately create buttons and icons.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1l1Yl1-grGQe9Qv8tXb1Cbw.jpeg\")
<\/a>Stencil for iOS. Image:\u00a0Amazon<\/p><\/div>\n
Important:<\/strong> Good tools doesn\u2019t mean expensive tools. In fact, it\u2019s recommended using inexpensive pen and papers. Why? Because if you use Moleskin, you might subconsciously focus yourself on polishing your sketches (you don\u2019t want to have ugly sketches in your Moleskin).<\/p>\n
4. Use pen, not\u00a0pencil<\/h2>\n
When it comes to sketching, many designers stumble on the common pitfall\u2014they start sketching and somewhere in the middle of a process they start to question their ideas. As a result, they abandon some ideas without visualizing them first.<\/p>\n
When you start sketching with a pen, it\u2019s a better chance that you\u2019ll finish the sketch. Why? Because pen creates a sense of commitment \u2014 it\u2019s impossible to erase a sketch and start over.<\/p>\n
5. Draw one sketch per\u00a0screen<\/h2>\n
It might be tempting to save space and create a few states of a page\/view on the same piece of paper. But it\u2019s better to avoid that temptation. It will be much harder for people to test such prototypes \u2014 when you have too many things to show on the sketches, it becomes too cluttered, and test participants will have a hard time trying to understand which group of elements belong to one section.<\/p>\n
6. Prototype for the smaller screen\u00a0first<\/h2>\n
If your product will be available for mobile and desktop users, it\u2019s recommended to prototype mobile-first. Because of the limited screen space, you\u2019ll be forced to prioritize content. When you optimize content for mobile, it\u2019ll be much easier to scale up your experience for other viewports.<\/p>\n
7. Use colors intentionally<\/h2>\n
Draw up your prototype in black and white. Use colors intentionally \u2014 to highlight a specific element (such as buttons).<\/p>\n
Also, as soon as you choose the colors you want to use, try to maintain consistency throughout the paper prototype. For example, all interactive elements should be colored in the same color (e.g. blue is used only for interactive elements). It will help you to reduce cognitive load during usability testing.<\/p>\n
8. Create documentation out of the paper prototype<\/h2>\n
In the Agile environment, designers and developers always don\u2019t have enough time to write proper documentation. Paper prototyping can be a problem solver. Since paper is a tangible document, designers can reuse them in a design process.<\/p>\n
Tip:<\/strong> Take sketches that represent different screens or interactions and add notes. Notes will help you to convey the main idea to other people. Also, it\u2019ll be much easier to recall specific design decisions after a while.<\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1sgSLOIsNJefwbJn2INxrdg.jpeg\")
<\/a>Image: jasonrobb<\/a><\/p><\/div>\n
9. Create a digital copy of your prototype<\/h2>\n
Create a digital copy of your prototype will help you to avoid carrying a pile of paper from meeting to meeting. All you need to do is to take a series of shots using your phone.<\/p>\n
Tip:<\/strong> You can also create an animated GIF with a specific user flow. Simply take photos of sketches that represent a particular flow and create a GIF out of them.<\/p>\n
10. Create a digital prototype out of a paper prototype<\/h2>\n
It\u2019s also possible to use paper sketches as a basis for a low-fidelity digital prototype. There\u2019s an excellent tool called by Marvel<\/a> that can help you turn any sketch or image into an interactive prototype.<\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1huefBOcB7p5zWQ-fV9VQ-A.png\")
<\/a>Image: Marvel<\/a><\/p><\/div>\n
<\/p>\n
11. Create Complex Effects Using\u00a0Paper<\/h2>\n
One of the great things about paper prototypes is the way designers come up with all kinds of creative ways of simulating visual effects or interactions. For example, with a little bit of imagination, it\u2019s possible to create a scrolling effect on a mobile screen.<\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1tIh5eS6vliocHPYTsupWWQ.gif\")
<\/a>Simulate scrolling by pulling a long strip of content through the viewport. Image: Csaba\u00a0H\u00e1zi<\/a><\/p><\/div>\n
It\u2019s also possible to explore a different variety of elevations and shadows. Shadows will give your design a more realistic view, and it provides a much better perspective when you are validating your designs with users or clients.<\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1c-jqWHihFkoitd5_BKzmmQ.png\")
<\/a>Image: Google<\/a><\/p><\/div>\n
<\/p>\n
3 Practical recommendations for Testing with paper prototypes<\/h2>\n
Why we build a prototype in a first place? 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.<\/p>\n
How to conduct testing with a paper prototype is a huge topic by itself that should be covered more extensively. Here I want to share a few basic things that should be taken into account when conducting testing with paper prototypes:<\/p>\n
1. Facilitator and \u2018Human-computer\u2019 roles<\/h2>\n
If you plan to conduct testing sessions with a paper prototype, you\u2019ll need two roles for each testing session:<\/p>\n
- \n
- Facilitator (presenter). A person that instructs test participants and interacts with them.<\/li>\n
- \u2018Human computer.\u2019 This person remains silent during the session and is in charge of changing screens or screen states, whenever the test participant interacts with a prototype. This role is extremely important \u2014 the effectiveness of testing often depends on how good the person playing the computer is at responding to a participant\u2019s actions.<\/li>\n<\/ul>\n
Avoid combining the roles of facilitator and \u2018human computer.\u2019 It\u2019s a quite common problem when presenter who acts as a \u2018human computer\u2019 miss some vital information from test participants.<\/p>\n
<\/p>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/09\/1UBcH7wAHOVgGXsj9CVfOaw.gif\")
<\/a>Image: gfycat<\/a><\/p><\/div>\n
<\/p>\n
2. Create Context for\u00a0Testing<\/h2>\n
When showing someone a paper prototype to test participants, you need to be sure that they understand the context of the design. That\u2019s why it so important to clearly explain the testing scenario and how the paper prototype works.<\/p>\n
Here are a few fundamental questions that you need to answer before starting a session:<\/p>\n
- \n
- Why did you create this prototype?<\/li>\n
- What do you want to achieve with this testing session?<\/li>\n
- What information do you want to receive from test participants?<\/li>\n<\/ul>\n
3. Test with at Least 5 Different Users<\/h2>\n
Follow standard usability test best practices \u2014 test with at least five different users <\/a>and record the test sessions for further analysis.<\/p>\n
Conclusion<\/h2>\n
Paper prototyping is a great way to create and test new designs quickly. Correctly used, paper prototypes provide maximum learning for minimum effort.<\/p>\n
Further reading:<\/h3>\n
- \n
- The Ultimate Guide to Prototyping<\/a><\/li>\n
- How to Run a Design Thinking Workshop for your Kids from Home<\/a><\/li>\n
- How To Test UX Design Early On In Your Process<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
In the world of digital design, we have a lot of different tools that make the process of prototyping really simple. But still pen and paper remain the most useful tools for UX designers. Paper prototyping can be extremely helpful during the early-stage conceptualizing \u2014 when a team needs to explore a variety of different concepts and choose the one… Read More ￫<\/a><\/p>\n","protected":false},"author":165,"featured_media":16045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[496],"tags":[],"class_list":["post-16029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prototyping-design-thoughts"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n
- How to Run a Design Thinking Workshop for your Kids from Home<\/a><\/li>\n
- The Ultimate Guide to Prototyping<\/a><\/li>\n
- Stencil<\/em>. Stencils can help you quickly and accurately create buttons and icons.<\/li>\n<\/ul>\n
- Paper prototyping kits.<\/em> Such kits include pre-made sheets (graph paper) and templates that make paper prototyping easier.<\/li>\n<\/ul>\n
- Desk paper holder<\/em>. I recommend using three-layer holder \u2014 one layer for a clean paper, one layer for sketches in progress, and one layer for finished work.<\/li>\n<\/ul>\n
- Testing only in person<\/em>. It\u2019s hard to test a paper prototype when participants are widely dispersed geographically.<\/li>\n
- Rapid iteration. <\/em>It takes minutes to create a few different versions of a design.<\/li>\n