Paper Prototyping in UX Design

At the beginning of a design project, you might start with storyboards that show the overall interaction. As you continue, you may get to paper prototypes, then build something that's a pixel level digital mock-up, wireframes, then get to something interactive. And finally, over time you may add in the database and get it ready to launch.

UX designers have long promoted paper prototyping as the ideal way to quickly create and test new designs at an extremely low cost. In comparison to digital prototyping, creating paper prototypes is much quicker, easier, requires no technical skills, makes iteration easier, and focuses less on design perfection. Plus, participants feel more comfortable criticizing sketches rather than polished designs. But, in my opinion, this technique is not very popular by designers despite its potential is huge and can bring a valuable contribution in creating a high-quality user experience.

What is Paper prototyping?

The process that helps designers in designing and testing user interfaces. It is throwaway prototyping and involves creating rough, even hand-sketched, drawings of an interface to use as prototypes. While paper prototyping seems simple, this method of usability testing can provide useful feedback to aid the design of easier to use products.

Why does paper prototypes matter in UX?

Paper prototyping saves time and money since it enables developers to test product interfaces before they write code or begin development. This also allows for easy and inexpensive modification to existing designs which makes this method useful in the early phases of design. The beauty of paper is that it’s also collaborative, allowing you to design as a team, collectively. Lastly, another benefit is that users feel more comfortable being critical of the mock-up because it doesn't have a polished look.

The more you draw, the more you improve your thinking and communication skills.

When there is no need for paper prototypes?

In the initial stages, making some quick sketches and getting some initial feedback is always a good idea. But there are also some cons, especially when it comes to testing them with users. Your paper prototype often can’t give you functional feedback because your participant will have to imagine the design’s interactions. You’ll never build things like overlays and screen transitions accurately with paper, no matter how much time you spend on it. Your paper prototype will always be a bit abstract. Abstract drawings do not give you the same level of information you would get from a more realistic one.

What is prototyping?

Prototyping is an experimental process where design teams implement ideas into tangible forms from paper to digital. Teams build prototypes of varying degrees of fidelity to capture design concepts and test on users. With prototypes, you can refine and validate your designs so your brand can release the right products. If you are interested in prototyping and would like to learn more, I would love you to read this other article on my blog.

Pros and Cons of Paper Prototyping

Below the strengths of paper prototyping:

• Cheap, paper is inexpensive.

• Universal, everyone in the team can make quick sketches of ideas.

• Team-building, as below, everyone can be involved and that can strengthen the team spirit.

• Honest feedback, people feel more comfortable being critical of the paper prototype because it doesn't have a polished look

Below the limitations of paper prototyping:

• Lack of realism, your drawing can’t wholly mimic an interactive design. Also, users’ gut reactions will differ compared with the finished product.

• Accessibility issues, you can’t always translate users’ constraints onto paper, especially regarding accessibility. Users can’t get a real feel of the product

• Lack of user control, without an interactive design, users must give blow-by-blow accounts of their actions and thoughts.

• Extra work, in a way or another you’ll end up making digital prototypes, anyway. Therefore, paper prototypes may become just extra work.

Photo by Amélie Mourichon on Unsplash

Remarkable reasons for prototyping

Successful design results from a series of conversations with materials. It's not the artifact, it's feedback iteration. You build some prototypes, evaluate them, and then use what you've learned to drive the next design.

Often people think about prototypes as just being a quick version of the real thing. And in many ways that's true, but different prototypes help you figure out different things. It's important to have a goal. A classic novice mistake with prototyping is that you'll start out with one idea and refine, refine, refine, refine, then be done.

If you're using prototyping well, you'll explore multiple alternatives. At each stage in your prototyping process, you've got a question. And then from there, you'll have new prototypes with new questions. Because prototypes are questions, what matters is the quality and quantity of the information that you get back. So as you go in time with your prototypes, you can think about how much are you learning, as a function of time

The advantages of prototyping:

• Giving all stakeholders a clear picture of the potential benefits, risks, and costs associated with where a prototype might lead.

• Adapting to changes early—thereby avoiding commitment to a single, falsely-ideal version, getting stuck on local maxima of UX, and later incurring heavy costs due to oversights.

• Show the prototype to your users so they can give you their feedback to help pinpoint which elements/variants work best.

• Have a tool to experiment with associated parts of the users’ needs and problems—therefore, you can get insights into less-obvious areas of the users’ world.

• Provide a sense of ownership to all concerned stakeholders—therefore fostering emotional investment in the product’s ultimate success.

• Improve time-to-market by minimizing the number of errors to correct before product release. When user expectations from the product are established, UX designers move to the design phase. An effective design phase is both highly collaborative (it requires input from all team players involved in product development) and iterative (meaning that it cycles back upon itself to validate ideas and assumptions). Prototypes are often used in the final, testing phase in a Design Thinking process in order to determine how users behave with the prototype, to reveal new solutions to problems, or to find out whether or not the implemented solutions have been successful.

Low-Fidelity vs. High-Fidelity Prototyping

Fidelity refers to the level of detail and functionality you include in your prototype. Usually, this will depend on your product’s development stage. The level of fidelity you choose should be appropriate for presenting to users in user testing so they can give focused feedback. Consider the differences:

• Low-fidelity prototyping involves the use of basic models or examples of the product being tested. For example, the model might be incomplete and utilize just a few of the features that will be available in the final design, or it might be constructed using materials not intended for the finished article, such as wood, paper, or metal for a plastic product.

• High-fidelity prototypes look and operate closer to the finished product. For example, a 3D plastic model with movable parts (allowing users to manipulate and interact with a device in the same manner as the final design) is high-fi in comparison to, say, a wooden block. Likewise, an early version of a software system developed using a design program such as Sketch or Adobe Illustrator is high-fi in comparison to a paper prototype.

Low-fidelity

Example: Paper prototypes

Pros: Fast and cheap; easy to make changes and test new iterations; allow a quick overall view of the product; encourage design thinking since prototypes are visibly not finalized.

Cons: Lack of realism, so users might have a hard time giving feedback; maybe too basic to reflect the user experience of the finished product; can oversimplify complex issues; lack of interactivity deprives users of direct control.

High-fidelity

Example: Digital prototypes created on software.

Pros: Engagement; testing will yield more accurate, more applicable results; versions closest to the final product enable you to predict how users will take to it in the marketplace.

Cons: Longer/costlier to create; users are more likely to comment on superficial details than on content; after hours of work, you the designer are likely to dislike the idea of making changes; users may mistake the prototype for the finished product and form biases.

Some designers split high-fidelity prototyping into:

Mid-fidelity - Prototypes have basic digital interactivity or be slick wireframes

High-fidelity - Prototypes far closer to the final version.

Overall, you should always commit to prototyping with the users’ needs in mind, particularly with an eye for user flow.

Creating and Comparing Alternatives

Let your users compare alternatives, create multiple prototypes, each with a change in a variable so that your users can compare prototypes and tell you which they prefer (and which they don’t). Users often find it easier to elucidate what they like and dislike about prototypes when they can compare, rather than if there was only one to interact with.

It’s important to show, as opposed to telling. Let your users experience the prototype. Avoid over-explaining how your prototype works, or how it is supposed to solve your user’s problems. Let the users’ experience in using the prototype speak for itself, and observe their reactions. When users are exploring and using the prototype, ask them to tell you what they’re thinking. Observe how your users use — either “correctly” or “incorrectly” — your prototype, and try to resist the urge to correct them when they misinterpret how it’s supposed to be used. Always follow up with questions, even if you think you know what the user means.

Photo by Alvaro Reyes on Unsplash

Wizard of Oz Prototyping

In the field of human-computer interaction, the Wizard of Oz (abbr. WoZ) technique is a research experiment used to test a concept/prototype that may not exist yet but appears to be functional because someone is controlling it behind-the-scenes.

How does it work?

The UX Researcher is in one room with a participant who’s interacting with the prototype and in another room, another member of the UX research team is controlling the prototype’s responses. No actual code is involved—just a “man behind the curtain” pulling the levers like the WoZ. In fact, The term Wizard of Oz is clearly inspired by the scene in the movie The Wizard of Oz in which Toto the dog pulls back a curtain to reveal that the wizard is actually a man who is flipping switches and pulling levers.

This method is often used in agile software development and lean programming to improve how business rules are implemented in software. after each interaction, anecdotal feedback and data are gathered and analyzed to help improve the next round of development. The test-and-learn cycle is repeated until development is concluded.

Why does The WoZ matter in UX?

This methodology has a flexible approach that allows concepts to be tested and modified without having to worry about potentially tiresome code changes, breaks in a daily testing schedule, or full development costs. Some of the advantages can be that creating multiple variations is easy, the process is fast (faster) and thus, cheaper and prototypes are more iterative and realistic than paper ones. Moreover, the WoZ methodology places the user at the center of the development process.

What are the disadvantages?

Simulations may misrepresent otherwise imperfect tech. May simulate technologies that do not exist (and may never). Wizards require training and can be inconsistent, it can be exhausting and some features are difficult/impossible to simulate effectively.

Photo by Christina @ wocintechchat.com on Unsplash