How To Use Paper Prototyping For Your App

We designers and researchers have a lot of prototyping tools at our disposal. We can create static mockups, interactive wireframes, and even coded, almost real high-fidelity prototypes to iterate and improve our products. Of these methods, the paper prototype is the handiest because it requires nothing except for a pen or pencil and a piece of paper to draw on.

With paper prototypes, you can quickly and effectively work with the digital interface design. These prototypes take many forms, from early-stage throwaway concepts to complex UX flows. Use them to get a clearer picture of your ideas, communicate your ideas to others, and rapidly get feedback.

Types of paper prototypes

In our team, we use several kinds of paper prototypes. All of them are very low on detail, but each one has a different focus. We find that they’re useful for collaboration when we’re creating an initial set of assumptions about the interface.

Screen mockups

These show the layout of individual screens. In early stages, our team quickly brainstorms ideas about different screens in an application, sometimes right in a meeting with a client, to ensure that everyone is on the same page about what we want to achieve.

User flow diagrams

These contain little to no details about individual screens; instead, they reveal the big picture idea. This kind of diagram shows all screens in the application, illustrating how the user moves through them to complete a task. They’re extremely useful in helping you spot inconsistencies or complications in user experience.

User testing cards

These are used for the rare cases when we need to perform user testing at a very early stage. Basically, user testing cards are a more refined version of regular screen mockups, drawn on templates of browser windows or smartphones. These cards are comprehensive and allow us to gather feedback from users about the interface.

Why should you use paper prototypes?

In short, because they’re quick to make and cost you nothing. Doesn’t matter if you can’t draw! If your initial sketches are ugly, don’t sweat it. They’re supposed to be quick and easy, not slow and hard. And even if you’re not going to show your sketches to anyone, ever, spend some time brainstorming ideas about how your application should work.

The best thing about making mistakes in paper prototypes? You can just throw them away and you won’t feel sorry. If you ever abandoned a design that you spent 10 hours on, you’ll see the difference. If you don’t, then you were probably paying someone just to realize that they got your idea all wrong. With paper prototypes, you won’t have this problem.

And if you don’t feel attached to these hand-drawn screens, why should others? You can expect sincere feedback from the people you show them to. They won’t tell you that your idea or user flow works just to encourage you and make you feel good. They’ll tell you the hard truth, giving you valuable tips on how to improve your interface or your idea. Just be prepared for criticism.

Problems with paper prototypes

The main advantage of paper prototypes is also their main drawback. While they’re quick and easy to create, they also run the risk of being hard to understand. Someone experienced would know that a square is a text field and that an oval shape is a button, but lay people might not be able to recognize common UI elements in a drawing. Sure, you can make your prototypes more detailed. But that would defeat their purpose.

Another problem with paper prototypes is that they’re hard to keep track of and share with all interested parties. Inevitably, you’ll have to turn them into digital versions to be able to share them with remote team members or stakeholders who are traveling. When you have a lot of screens, managing the files and sending them back and forth can turn into a cumbersome exercise.

And if you want to use prototypes for user testing, you have to arrange in-person meetings to show them. You can try mailing the screen drawings and then discussing them by phone, but I doubt that approach will yield decent results.

Paper prototyping tools

While you don’t need anything more than a paper and pen to start creating your prototype, there’s a wide range of tools that will make your work look spiffy.

Paper

To create clean layouts with carefully selected margins and spacing, buy dotted paper. Dots are barely visible on paper, acting as guides for your drawing without interfering with actual designs. You can also download printable grids and create your own dotted paper.

Stencils

Stencils allow you to quickly add common UI elements to your sketches, creating a professional-looking prototype. You can buy stencils for different types of interfaces and with various sets of elements — icons, buttons, and various OS controls.

Pens and pencils

A good pen can make or break your prototype. Use the instrument that you like the most, but make sure it’s not leaving any marks on the page if you want your sketches to look presentable.

Testing with paper prototypes

User testing is something you can do even with early-stage pen-and-paper prototypes, if they’re clean and professional and users can understand them. That’s where dotted paper and stencils come in handy.

The only way to perform these tests is in person. You have to facilitate the process, guiding people through the interface, telling them what will happen if they perform a certain action. In-person testing is a great way to learn what users find confusing and what they have questions about.

During these tests, you need to focus on how users react to the screens you show them. What do they expect to happen when they perform certain actions? Sometimes, you’ll find that users don’t understand what they see on the screen, or they’re unclear about what they should do next. Let them express themselves freely, and don’t describe everything to them in a hurry or rush to switch screens.

How To Use Paper Prototyping For Your App was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.