{"id":786,"date":"2018-09-26T01:21:30","date_gmt":"2018-09-26T01:21:30","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=786"},"modified":"2018-09-16T01:25:53","modified_gmt":"2018-09-16T01:25:53","slug":"the-magic-of-paper-prototyping","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2018\/09\/26\/the-magic-of-paper-prototyping\/","title":{"rendered":"The Magic of Paper Prototyping"},"content":{"rendered":"<h2 id=\"748f\" class=\"graf graf--h4 graf-after--h3 graf--subtitle\">by\u00a0<a class=\"markup--anchor markup--h4-anchor\" href=\"http:\/\/babich.biz\/\" target=\"_blank\" rel=\"noopener\" data-href=\"http:\/\/babich.biz\">Nick\u00a0Babich<\/a><\/h2>\n<p id=\"244d\" class=\"graf graf--p graf-after--h4\">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.<\/p>\n<p id=\"40d0\" class=\"graf graf--p graf-after--p\">Paper prototyping can be extremely helpful during the early-stage conceptualizing\u200a\u2014\u200awhen a team needs to explore a variety of different concepts and choose the one that will be used. The paper prototype allows quickly visualize and test various ideas.<\/p>\n<p id=\"27e2\" class=\"graf graf--p graf-after--p\">This article is a quick guide to paper prototyping &amp; testing for digital interfaces.<\/p>\n<h3 id=\"6e8b\" class=\"graf graf--h3 graf-after--p\">Advantages and Disadvantages of Paper Prototyping<\/h3>\n<p id=\"0300\" class=\"graf graf--p graf-after--h3\">Before discussing specific tips of paper prototyping, it\u2019s worth saying a few words about advantages and disadvantages of this approach.<\/p>\n<p id=\"77e1\" class=\"graf graf--p graf-after--p\">Let\u2019s start with advantages:<\/p>\n<ul class=\"postList\">\n<li id=\"e36c\" class=\"graf graf--li graf-after--p\"><em class=\"markup--em markup--li-em\">It\u2019s fun.<\/em>\u00a0Paper prototyping ought to be fast and fun. If it\u2019s slow and painful, there\u2019s definitely something wrong with your prototyping process.<\/li>\n<li id=\"975c\" class=\"graf graf--li graf-after--li\"><em class=\"markup--em markup--li-em\">Rapid iteration.\u00a0<\/em>It takes minutes to create a few different versions of a design.<\/li>\n<li id=\"0584\" class=\"graf graf--li graf-after--li\"><em class=\"markup--em markup--li-em\">Low cost.\u00a0<\/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<li id=\"3aa0\" class=\"graf graf--li graf-after--li\"><em class=\"markup--em markup--li-em\">Low commitment.<\/em>\u00a0No 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<li id=\"a87b\" class=\"graf graf--li graf-after--li\"><em class=\"markup--em markup--li-em\">Eliciting honest feedback.<\/em>\u00a0An important advantage of paper prototypes is their sketchy look.\u00a0<span class=\"markup--quote markup--li-quote is-other\" data-creator-ids=\"anon\">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.<\/span><\/li>\n<li id=\"3e88\" class=\"graf graf--li graf-after--li\"><em class=\"markup--em markup--li-em\">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<p id=\"cb85\" class=\"graf graf--p graf-after--li\">Now, let\u2019s talk about drawbacks:<\/p>\n<ul class=\"postList\">\n<li id=\"e8fd\" class=\"graf graf--li graf-after--p\"><em class=\"markup--em markup--li-em\">Hard to collect feedback.<\/em>\u00a0Paper prototypes require a great deal of imagination from test participants. It might be tough to collect gut reactions on design\u200a\u2014\u200apeople will have a hard time imaging how the future state of a product will look like just by looking at the paper.<\/li>\n<li id=\"7c7b\" class=\"graf graf--li graf-after--li\"><em class=\"markup--em markup--li-em\">Testing only in person<\/em>. It\u2019s hard to test a paper prototype when participants are widely dispersed geographically.<\/li>\n<li id=\"0068\" class=\"graf graf--li graf-after--li\"><em class=\"markup--em markup--li-em\">Paper prototyping is an extra step.<\/em>\u00a0The downside of a paper prototype is that you\u2019ll need to convert it in a digital prototype anyway.<\/li>\n<\/ul>\n<h3 id=\"e949\" class=\"graf graf--h3 graf-after--li\">When to do paper prototyping<\/h3>\n<p id=\"fced\" class=\"graf graf--p graf-after--h3\">Paper prototyping is excellent for:<\/p>\n<ul class=\"postList\">\n<li id=\"ea7a\" class=\"graf graf--li graf-after--p\">Brainstorming sessions (when a team needs to outline the steps in a user flow or explore\/validate a variety of layouts)<\/li>\n<li id=\"de9e\" class=\"graf graf--li graf-after--li\">Proof of concept testing (when a team needs to conduct a Guerrilla testing)<\/li>\n<\/ul>\n<p id=\"860d\" class=\"graf graf--p graf-after--li\">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<h3 id=\"5e22\" class=\"graf graf--h3 graf-after--p\">11 Practical tips for paper prototyping<\/h3>\n<h4 id=\"37a0\" class=\"graf graf--h4 graf-after--h3\">1. Have a goal for each prototype<\/h4>\n<p id=\"8acb\" class=\"graf graf--p graf-after--h4\">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<h4 id=\"4395\" class=\"graf graf--h4 graf-after--p\">2. Don\u2019t polish your prototypes<\/h4>\n<p id=\"8648\" class=\"graf graf--p graf-after--h4\">Paper prototyping is not about perfecting your arts &amp; 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<h4 id=\"e92a\" class=\"graf graf--h4 graf-after--p\">3. Get yourself good\u00a0tools<\/h4>\n<p id=\"2247\" class=\"graf graf--p graf-after--h4\">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<ul class=\"postList\">\n<li id=\"af6a\" class=\"graf graf--li graf-after--p\"><em class=\"markup--em markup--li-em\">Desk paper holder<\/em>. I recommend using three-layer holder\u200a\u2014\u200aone layer for a clean paper, one layer for sketches in progress, and one layer for finished work.<\/li>\n<\/ul>\n<figure id=\"218c\" class=\"graf graf--figure graf-after--li\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"0*PtVItwDbBoMRD-sP.jpg\" data-width=\"1400\" data-height=\"933\" data-action=\"zoom\" data-action-value=\"0*PtVItwDbBoMRD-sP.jpg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"50\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/0*PtVItwDbBoMRD-sP.jpg\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/0*PtVItwDbBoMRD-sP.jpg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Wooden Paper Tray by\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/promidesign.com\/?attachment_id=3722\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"http:\/\/promidesign.com\/?attachment_id=3722\">promidesign<\/a><\/figcaption><\/figure>\n<ul class=\"postList\">\n<li id=\"4e2c\" class=\"graf graf--li graf-after--figure\"><em class=\"markup--em markup--li-em\">Paper prototyping kits.<\/em>\u00a0Such kits include pre-made sheets (graph paper) and templates that make paper prototyping easier.<\/li>\n<\/ul>\n<figure id=\"3b12\" class=\"graf graf--figure graf-after--li\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*wpIWb9Tlc3NzbpxeHlr4Sg.jpeg\" data-width=\"1024\" data-height=\"597\" data-action=\"zoom\" data-action-value=\"1*wpIWb9Tlc3NzbpxeHlr4Sg.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"42\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*wpIWb9Tlc3NzbpxeHlr4Sg.jpeg\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*wpIWb9Tlc3NzbpxeHlr4Sg.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Graph paper. Image:\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/www.tripwiremagazine.com\/free-printable-sketching-wireframing-templates\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"http:\/\/www.tripwiremagazine.com\/free-printable-sketching-wireframing-templates\/\">tripwiremagazine<\/a><\/figcaption><\/figure>\n<figure id=\"f530\" class=\"graf graf--figure graf-after--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*ThtxGK-Wkq1JPJ8HBe-xKA.jpeg\" data-width=\"1024\" data-height=\"718\" data-action=\"zoom\" data-action-value=\"1*ThtxGK-Wkq1JPJ8HBe-xKA.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"52\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ThtxGK-Wkq1JPJ8HBe-xKA.jpeg\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ThtxGK-Wkq1JPJ8HBe-xKA.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Templates for iPad. Image:\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/www.tripwiremagazine.com\/free-printable-sketching-wireframing-templates\/\" target=\"_blank\" rel=\"nofollow noopener noopener\" data-href=\"http:\/\/www.tripwiremagazine.com\/free-printable-sketching-wireframing-templates\/\">tripwiremagazine<\/a><\/figcaption><\/figure>\n<ul class=\"postList\">\n<li id=\"3283\" class=\"graf graf--li graf-after--figure\"><em class=\"markup--em markup--li-em\">Stencil<\/em>. Stencils can help you quickly and accurately create buttons and icons.<\/li>\n<\/ul>\n<figure id=\"0192\" class=\"graf graf--figure graf-after--li\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*l1Yl1-grGQe9Qv8tXb1Cbw.jpeg\" data-width=\"1000\" data-height=\"1000\" data-action=\"zoom\" data-action-value=\"1*l1Yl1-grGQe9Qv8tXb1Cbw.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*l1Yl1-grGQe9Qv8tXb1Cbw.jpeg\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*l1Yl1-grGQe9Qv8tXb1Cbw.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Stencil for iOS. Image:\u00a0Amazon<\/figcaption><\/figure>\n<p id=\"5f3e\" class=\"graf graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">Important:<\/strong>\u00a0Good 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<h4 id=\"1b80\" class=\"graf graf--h4 graf-after--p\">4. Use pen, not\u00a0pencil<\/h4>\n<p id=\"0bbf\" class=\"graf graf--p graf-after--h4\">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<p id=\"990b\" class=\"graf graf--p graf-after--p\">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\u200a\u2014\u200ait\u2019s impossible to erase a sketch and start over.<\/p>\n<h4 id=\"43f1\" class=\"graf graf--h4 graf-after--p\">5. Draw one sketch per\u00a0screen<\/h4>\n<p id=\"17e4\" class=\"graf graf--p graf-after--h4\">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\u200a\u2014\u200awhen 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<h4 id=\"216e\" class=\"graf graf--h4 graf-after--p\">6. Prototype for the smaller screen\u00a0first<\/h4>\n<p id=\"7cf5\" class=\"graf graf--p graf-after--h4\">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<h4 id=\"86ea\" class=\"graf graf--h4 graf-after--p\">7. Use colors intentionally<\/h4>\n<p id=\"a7be\" class=\"graf graf--p graf-after--h4\">Draw up your prototype in black and white. Use colors intentionally\u200a\u2014\u200ato highlight a specific element (such as buttons).<\/p>\n<p id=\"d842\" class=\"graf graf--p graf-after--p\">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<h4 id=\"9d9f\" class=\"graf graf--h4 graf-after--p\">8. Create documentation out of the paper prototype<\/h4>\n<p id=\"3bd5\" class=\"graf graf--p graf-after--h4\">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<p id=\"863c\" class=\"graf graf--p graf-after--p\"><strong class=\"markup--strong markup--p-strong\">Tip:<\/strong>\u00a0Take 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<figure id=\"af5d\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*sgSLOIsNJefwbJn2INxrdg.jpeg\" data-width=\"854\" data-height=\"634\" data-action=\"zoom\" data-action-value=\"1*sgSLOIsNJefwbJn2INxrdg.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"55\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*sgSLOIsNJefwbJn2INxrdg.jpeg\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*sgSLOIsNJefwbJn2INxrdg.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Image:\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/jasonrobb.com\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"http:\/\/jasonrobb.com\">jasonrobb<\/a><\/figcaption><\/figure>\n<h4 id=\"b4bb\" class=\"graf graf--h4 graf-after--figure\">9. Create a digital copy of your prototype<\/h4>\n<p id=\"7fc8\" class=\"graf graf--p graf-after--h4\">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<p id=\"1f0d\" class=\"graf graf--p graf-after--p\"><strong class=\"markup--strong markup--p-strong\">Tip:<\/strong>\u00a0You 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<h4 id=\"30b7\" class=\"graf graf--h4 graf-after--p\">10. Create a digital prototype out of a paper prototype<\/h4>\n<p id=\"d41d\" class=\"graf graf--p graf-after--h4\">It\u2019s also possible to use paper sketches as a basis for a low-fidelity digital prototype. There\u2019s an excellent tool called\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/marvelapp.com\/pop\/\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/marvelapp.com\/pop\/\">POP by Marvel<\/a>\u00a0that can help you turn any sketch or image into an interactive prototype.<\/p>\n<figure id=\"941d\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*huefBOcB7p5zWQ-fV9VQ-A.png\" data-width=\"714\" data-height=\"637\" data-action=\"zoom\" data-action-value=\"1*huefBOcB7p5zWQ-fV9VQ-A.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"65\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*huefBOcB7p5zWQ-fV9VQ-A.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*huefBOcB7p5zWQ-fV9VQ-A.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Image: Marvel<\/figcaption><\/figure>\n<h4 id=\"10c9\" class=\"graf graf--h4 graf-after--figure\">11. Create Complex Effects Using\u00a0Paper<\/h4>\n<p id=\"7be5\" class=\"graf graf--p graf-after--h4\">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<figure id=\"7939\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded\" data-image-id=\"1*tIh5eS6vliocHPYTsupWWQ.gif\" data-width=\"400\" data-height=\"300\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"55\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*tIh5eS6vliocHPYTsupWWQ.gif\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*tIh5eS6vliocHPYTsupWWQ.gif\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Simulate scrolling by pulling a long strip of content through the viewport. Image:\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/dribbble.com\/hazicsaba\" target=\"_blank\" rel=\"contact noopener\" data-href=\"https:\/\/dribbble.com\/hazicsaba\">Csaba\u00a0H\u00e1zi<\/a><\/figcaption><\/figure>\n<p id=\"004a\" class=\"graf graf--p graf-after--figure\">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<figure id=\"4aeb\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded\" data-image-id=\"1*c-jqWHihFkoitd5_BKzmmQ.png\" data-width=\"1366\" data-height=\"677\" data-action=\"zoom\" data-action-value=\"1*c-jqWHihFkoitd5_BKzmmQ.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"35\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*c-jqWHihFkoitd5_BKzmmQ.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*c-jqWHihFkoitd5_BKzmmQ.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Image:\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/www.youtube.com\/watch?v=JMjozqJS44M\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/www.youtube.com\/watch?v=JMjozqJS44M\">Google<\/a><\/figcaption><\/figure>\n<h3 id=\"e58e\" class=\"graf graf--h3 graf-after--figure\">3 Practical recommendations for Testing with paper prototypes<\/h3>\n<p id=\"2051\" class=\"graf graf--p graf-after--h3\">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<p id=\"0357\" class=\"graf graf--p graf-after--p\">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<h4 id=\"992e\" class=\"graf graf--h4 graf-after--p\">1. Facilitator and \u2018Human-computer\u2019 roles<\/h4>\n<p id=\"1c74\" class=\"graf graf--p graf-after--h4\">If you plan to conduct testing sessions with a paper prototype, you\u2019ll need two roles for each testing session:<\/p>\n<ul class=\"postList\">\n<li id=\"13dc\" class=\"graf graf--li graf-after--p\">Facilitator (presenter). A person that instructs test participants and interacts with them.<\/li>\n<li id=\"1d2c\" class=\"graf graf--li graf--startsWithSingleQuote graf-after--li\">\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\u200a\u2014\u200athe 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<p id=\"142d\" class=\"graf graf--p graf-after--li\">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<figure id=\"5933\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded\" data-image-id=\"1*UBcH7wAHOVgGXsj9CVfOaw.gif\" data-width=\"408\" data-height=\"229\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"40\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*UBcH7wAHOVgGXsj9CVfOaw.gif\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*UBcH7wAHOVgGXsj9CVfOaw.gif\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Image:\u00a0<a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/gfycat.com\/gifs\/detail\/GargantuanSoftHornet\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/gfycat.com\/gifs\/detail\/GargantuanSoftHornet\">gfycat<\/a><\/figcaption><\/figure>\n<h4 id=\"4445\" class=\"graf graf--h4 graf-after--figure\">2. Create Context for\u00a0Testing<\/h4>\n<p id=\"1f2a\" class=\"graf graf--p graf-after--h4\">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<p id=\"7f7b\" class=\"graf graf--p graf-after--p\">Here are a few fundamental questions that you need to answer before starting a session:<\/p>\n<ul class=\"postList\">\n<li id=\"9be5\" class=\"graf graf--li graf-after--p\">Why did you create this prototype?<\/li>\n<li id=\"ce42\" class=\"graf graf--li graf-after--li\">What do you want to achieve with this testing session?<\/li>\n<li id=\"9301\" class=\"graf graf--li graf-after--li\">What information do you want to receive from test participants?<\/li>\n<\/ul>\n<h4 id=\"d783\" class=\"graf graf--h4 graf-after--li\">3. Test with at Least 5 Different Users<\/h4>\n<p id=\"1071\" class=\"graf graf--p graf-after--h4\">Follow standard usability test best practices\u200a\u2014\u200atest with at least\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.nngroup.com\/articles\/why-you-only-need-to-test-with-5-users\/\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/www.nngroup.com\/articles\/why-you-only-need-to-test-with-5-users\/\">five different users\u00a0<\/a>and record the test sessions for further analysis.<\/p>\n<h3 id=\"61eb\" class=\"graf graf--h3 graf-after--p\">Conclusion<\/h3>\n<p id=\"4d54\" class=\"graf graf--p graf-after--h3\">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<p id=\"2d36\" class=\"graf graf--p graf-after--p\"><strong class=\"markup--strong markup--p-strong\">Do you have more tips for paper prototyping? Share your thoughts in comments!<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Source:\u00a0<a href=\"https:\/\/uxplanet.org\/the-magic-of-paper-prototyping-51693eac6bc3\"><strong>https:\/\/uxplanet.org\/the-magic-of-paper-prototyping-51693eac6bc3<\/strong><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Written by<\/p>\n<div class=\"u-tableCell\">\n<div class=\"u-relative u-inlineBlock u-flex0\">\n<p><img decoding=\"async\" class=\"avatar-image avatar-image--small alignleft\" src=\"https:\/\/cdn-images-1.medium.com\/fit\/c\/60\/60\/1*ftnOlIAh5nolCvvrhc44-Q.png\" alt=\"Go to the profile of Nick Babich\" \/><\/p>\n<div class=\"avatar-halo u-absolute u-textColorGreenNormal svgIcon\"><a class=\"link link--primary u-accentColor--hoverTextNormal\" dir=\"auto\" style=\"font-family: inherit; font-size: 24.5px; font-weight: bold;\" title=\"Go to the profile of Nick Babich\" href=\"https:\/\/uxplanet.org\/@101\" rel=\"author cc:attributionUrl\" aria-label=\"Go to the profile of Nick Babich\" data-user-id=\"bcab753a4d4e\" data-collection-slug=\"ux-planet\">Nick Babich<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"u-tableCell u-verticalAlignMiddle u-breakWord u-paddingLeft15\">\n<div class=\"ui-caption u-textColorGreenNormal u-fontSize13 u-tintSpectrum u-accentColor--textNormal u-marginBottom7\">Medium member since Apr 2017<\/div>\n<p class=\"ui-body u-fontSize14 u-lineHeightBaseSans u-textColorDark u-marginBottom4\">Editor-in-chief of UX Planet (<a href=\"https:\/\/uxplanet.org\/\" rel=\"nofollow\">https:\/\/uxplanet.org<\/a>).\u00a0<a href=\"http:\/\/babich.biz\/\" rel=\"nofollow\">http:\/\/babich.biz<\/a><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"u-tableCell \"><a class=\"link u-baseColor--link avatar avatar--roundedRectangle\" title=\"Go to UX Planet\" href=\"https:\/\/uxplanet.org\/?source=footer_card\" aria-label=\"Go to UX Planet\" data-action-source=\"footer_card\" data-collection-slug=\"ux-planet\"><img decoding=\"async\" class=\"avatar-image u-size60x60 alignleft\" src=\"https:\/\/cdn-images-1.medium.com\/fit\/c\/60\/60\/1*A0FnBy5FBoVQC02SZXLXPg.png\" alt=\"UX Planet\" \/><\/a><\/div>\n<div class=\"u-tableCell u-verticalAlignMiddle u-breakWord u-paddingLeft15\">\n<h3 class=\"ui-h3 u-fontSize18 u-lineHeightTighter u-marginBottom4\"><a class=\"link link--primary u-accentColor--hoverTextNormal\" href=\"https:\/\/uxplanet.org\/?source=footer_card\" rel=\"collection\" data-action-source=\"footer_card\" data-collection-slug=\"ux-planet\">UX Planet<\/a><\/h3>\n<p class=\"ui-body u-fontSize14 u-lineHeightBaseSans u-textColorDark u-marginBottom4\">UX Planet is a one-stop resource for everything related to user experience.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>by\u00a0Nick\u00a0Babich In the world of digital design, we have a lot of different tools that make the process of prototyping [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[12,50,119,107,47,29,123,122],"tags":[],"class_list":["post-786","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloghassler-ec","category-css","category-html","category-linux","category-medium","category-programacion","category-ux","category-ux-planet"],"_links":{"self":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/comments?post=786"}],"version-history":[{"count":2,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/786\/revisions"}],"predecessor-version":[{"id":790,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/786\/revisions\/790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media\/788"}],"wp:attachment":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media?parent=786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/categories?post=786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/tags?post=786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}