STEP 5A IN UX DESIGN: PAPER PROTOTYPING

“Prototype, then polish. Get it working before you optimize it.”

                                                                                                                     –    Eric S. Raymond

Prototyping is the first step of bringing your idea to reality, and paper prototyping lies before that step.

Carolyn Snyder, the author of Paper Prototyping, defines Paper Prototyping as:

Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person “playing computer”, who doesn’t explain how the interface is intended to work.

A paper prototype is a way to put together all your design elements on a piece of paper.

BENEFITS OF PAPER PROTOTYPE?

Paper prototyping is a stage that might be tempting to skip. But it’s an Asymmetric Bet. Meaning, the initial investment is far less than the potential returns. 

Some benefits are:

• Fast, cheap, and easy to build.
• Easy to iterate.
• Allows early usability testing.
• Motivates users to give feedback since it looks like a throwaway prototype.
• Can be made by anyone.
• Extremely useful in case of new solutions to existing problems.
• Doesn’t need you to fixate on details of the interface like the button is too large/small, etc.
• Highly collaborative.

WHERE IN THE USER CENTRIC DESIGN PROCESS?

BUILDING A PROTOTYPE:

Building a paper prototype is easier if the scenarios and storyboards are well thought out and iterated. 

Create interface elements for every scene of the scenario that describes an interaction between the user and the design.

TIPS:

• The interface elements described in scenarios will be laid out on the screen as they appear in the scenario.
• Breaks in scenarios mean breaks in screens.
• Do not add more elements to the design. If you have previously agreed that user interaction is well depicted in scenarios, any addition is likely to be surplus to the necessary requirements.
• Paper prototypes are useful in case of novel solutions. They are not necessary if you are revisiting an existing solution.

MAKING A PAPER PROTOTYPE 

• Use a large piece of paper to create a screen template.
• Use cut-outs of paper to form the onscreen controls.
• Design for mobile devices first – it’s easier to scale up to a PC application.
• Use lots of paper.
• You will be hand creating everything – controls, text, buttons, etc. Make sure everything is legible.
• All preexisting controls on a mobile device should also be visible on this prototype. For example, the home button in case of Apple phones. This will better test user interaction.
• Make it as realistic as possible.
• Only build what you need. Do not bloat the interface.
• Understand that texts are also an element of the design. Make sure you use texts that you intend to use in the final design. This will help you understand user interaction in a better way at a much earlier stage.
• Use separate pieces of paper for each interface element. This will help you rearrange them quickly.
• Don’t be restricted by the size of the paper used as a screen template. Screens in real life are often scrollable. Make sure you have more information beyond the edge of the screen.
• After the creation of the paper, the prototype goes through the entire process. Check whether the prototype supports the scenario and storyboard.
• After you have tested the prototype, ask someone who is unfamiliar with the process to perform a task on the prototype. Observe. 
• If they successfully complete the task from beginning to end – you’ll know your prototype is ready. If they fail – you’ve gathered feedback on what needs to improve.

SOME MORE TIPS: 

• Decide whether the background should be representing an operating system or just an application. 
• If you are just testing an application – its main window will be your background. 
• If you want to test multiple applications, start with testing the underlying operating system.
• For a web browser, you only need the most common browser buttons – Back, Forward, Home, Print, and Search.

“We used a paper-only interface back when we were still in the early stages of designing a browser/phone combination. We wanted to understand what tasks worked well in this type of interface, and to determine the appropriate set of buttons that would work for both navigation and phone functions. It would have been premature to worry about screen size too much while we were still in the exploratory phase.”

Timo Jokela, Nokia (formerly)

USABILITY TESTING:

Paper Prototype appears like a throwaway design. This gives an indication to the user that we haven’t finished designing anything yet.  It’s easier for them to explore, give feedback, and comments. They are motivated to ask questions and explore the design.

• Involve representative users for usability testing.
• Define the goals of testing – what do you intend to learn?
• Set specific and realistic tasks.
• Value the time of the participants. Pay them if possible. The more value you give the more value you get.
• Have a person act as a facilitator and another as a computer. 
• The facilitator observes the user’s actions and answers the user questions. 
• The person acting as a computer is not allowed to speak. The only job he has is to put/change/create screens as the user interaction flows.
• A single usability test might run for 1 or 2 hours. Be patient.
• Test each prototype with 5 users. Note down your observations. Iterate. Test again.

A paper prototype helps you to know whether your interface has all the necessary elements to perform tasks and eliminate user pain points.

Remember, you are not testing performance, but usability.

Build a paper prototype for novel solutions

Find conceptual issues during usability testing

Find fixes for as many issues as possible

Iterate

Test

Keep doing until representative users are satisfied.

This article is a part of a series of articles in UX designing. You can check out other blog posts of this series.