The Magic of Paper Prototyping

Posted 2 months ago by Nick Babich

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 — when 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.

This article is a quick guide to paper prototyping & testing for digital interfaces.

Advantages and Disadvantages of Paper Prototyping

Before discussing specific tips of paper prototyping, it’s worth saying a few words about advantages and disadvantages of this approach.

Let’s start with advantages:

Now, let’s talk about drawbacks:

When to do paper prototyping

Paper prototyping is excellent for:

Some designers believe that paper prototyping is useful only during the early stages of product design. That’s not true. Paper prototypes are helpful at almost every step of the design project. It’s 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.

11 Practical tips for paper prototyping

1. Have a goal for each prototype

Prior to prototyping, it’s 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.

2. Don’t polish your prototypes

Paper prototyping is not about perfecting your arts & crafts skills; it about finds a solution to a problem as fast as possible. Don’t spend time making sure everything looks perfect or is aligned correctly.

3. Get yourself good tools

When it comes to paper prototyping, there are only two tools that you really need: a pen and paper. But it’s possible to make the process of prototyping more effective by using a few extra tools:

Wooden Paper Tray by promidesign

Graph paper. Image: tripwiremagazine

Templates for iPad. Image: tripwiremagazine

Stencil for iOS. Image: Amazon

Important: Good tools doesn’t mean expensive tools. In fact, it’s recommended using inexpensive pen and papers. Why? Because if you use Moleskin, you might subconsciously focus yourself on polishing your sketches (you don’t want to have ugly sketches in your Moleskin).

4. Use pen, not pencil

When it comes to sketching, many designers stumble on the common pitfall—they 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.

When you start sketching with a pen, it’s a better chance that you’ll finish the sketch. Why? Because pen creates a sense of commitment — it’s impossible to erase a sketch and start over.

5. Draw one sketch per screen

It might be tempting to save space and create a few states of a page/view on the same piece of paper. But it’s better to avoid that temptation. It will be much harder for people to test such prototypes — 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.

6. Prototype for the smaller screen first

If your product will be available for mobile and desktop users, it’s recommended to prototype mobile-first. Because of the limited screen space, you’ll be forced to prioritize content. When you optimize content for mobile, it’ll be much easier to scale up your experience for other viewports.

7. Use colors intentionally

Draw up your prototype in black and white. Use colors intentionally — to highlight a specific element (such as buttons).

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.

8. Create documentation out of the paper prototype

In the Agile environment, designers and developers always don’t 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.

Tip: 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’ll be much easier to recall specific design decisions after a while.

Image: jasonrobb

9. Create a digital copy of your prototype

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.

Tip: 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.

10. Create a digital prototype out of a paper prototype

It’s also possible to use paper sketches as a basis for a low-fidelity digital prototype. There’s an excellent tool called by Marvel that can help you turn any sketch or image into an interactive prototype.

Image: Marvel

11. Create Complex Effects Using Paper

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’s possible to create a scrolling effect on a mobile screen.

Simulate scrolling by pulling a long strip of content through the viewport. Image: Csaba Házi

It’s 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.

Image: Google

3 Practical recommendations for Testing with paper prototypes

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.

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:

1. Facilitator and ‘Human-computer’ roles

If you plan to conduct testing sessions with a paper prototype, you’ll need two roles for each testing session:

Avoid combining the roles of facilitator and ‘human computer.’ It’s a quite common problem when presenter who acts as a ‘human computer’ miss some vital information from test participants.

Image: gfycat

2. Create Context for Testing

When showing someone a paper prototype to test participants, you need to be sure that they understand the context of the design. That’s why it so important to clearly explain the testing scenario and how the paper prototype works.

Here are a few fundamental questions that you need to answer before starting a session:

3. Test with at Least 5 Different Users

Follow standard usability test best practices — test with at least five different users and record the test sessions for further analysis.

Conclusion

Paper prototyping is a great way to create and test new designs quickly. Correctly used, paper prototypes provide maximum learning for minimum effort.

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

Related Posts

During a recent conversation with David Sleight, Design Director at ProPublica, I found myself realizing and saying “we need design that is faster and design that is slower.” Who are we and what is this thing called design? When I say “we,” I mean our whole industry, when I say “our whole industry,” I mean design, and when I say “design,”… Read More →

Five pitfalls that get in the way Today’s pace of change demands that collaboration and processes be sped up to meet the growing expectation of customers and stakeholders. But is this growing crunch on time stifling creativity? It isn’t enough to make decisions, products and services quickly, we must encourage creativity and create an environment to help the business succeed in… Read More →

This month’s post is a compilation of what our product designer at Marvel, Oleg, found inspiring this month in design. Uber When you think ride-sharing and ordering a taxi from your mobile phone, you probably think Uber. Over the last 10 years it’s seen an explosion of growth, amassing over 16,000 employees, 3 million drivers, and 75 million riders –… Read More →