Paper Prototyping 101

Summary

This video explains how to effectively use paper prototypes for testing design ideas quickly and gathering user feedback. It covers testing layout, information architecture, task flows, and interaction design. The process involves creating hand-drawn or low-fidelity wireframes on paper, using a focus area for the test, and having a facilitator and a 'computer' person to handle screen changes. The video emphasizes rapid iteration, allowing for quick design adjustments between tests. Paper prototypes are highlighted as an affordable, flexible tool for early-stage design and experimentation.

Takeaways

• 📝 Paper prototypes allow quick testing and feedback on design ideas.
• 📐 Layout, information architecture, content structure, task flows, and interaction design can all be tested with paper prototypes.
• 📄 Gather basic supplies like the paper prototype, tape to mark focus areas, and extra paper for quick iterations.
• 🎨 Each screen in the prototype should be on its own piece of paper, and both hand-drawn sketches or low-fidelity digital wireframes work.
• ⏳ Include a loading indicator, such as an overlay or separate screen, for times when switching screens takes longer.
• 🚧 Add an 'under construction' page for any non-existent links or pages in the prototype.
• ✅ Provide the user with a written or printed list of tasks to stay focused during testing.
• 📱 Use tape to block out a focus area or a cut-out of a device frame to simulate a phone or browser window.
• 👥 Testing requires two people: one facilitator and one person to act as the 'computer' who switches screens as the user navigates.
• ✏️ During testing, draw new designs on blank paper if usability issues arise, and use paper prototypes as documentation for future iterations.

Q & A

What is the purpose of using paper prototypes in design?

The purpose of using paper prototypes is to quickly test an idea and gather feedback. It allows for fast iterations and improvements based on user feedback before investing in higher fidelity designs.

What kinds of elements can be tested with paper prototypes?

Paper prototypes can be used to test layout, information architecture, content, structure, task flows, and interaction design. This allows designers to ensure usability and refine the design early on.

What materials are needed to run a paper prototype test?

Materials needed include the paper prototype itself, tape to create a focus area, extra paper for iterations, and possibly hand-drawn sketches or low-fidelity wireframes. A list of tasks for the user and someone to facilitate the test are also required.

Why is it recommended to include a loading indicator in a paper prototype?

A loading indicator is recommended so that if it takes longer than expected to find a specific screen, the user remains immersed in the experience. It simulates the waiting experience in real digital interactions.

What is the purpose of including an 'under construction' page in a paper prototype?

An 'under construction' page is included in case the user tries to navigate to a section that isn’t represented in the prototype. This keeps the testing process smooth by avoiding confusion when certain screens aren’t available.

What role does the facilitator play during a paper prototype test?

The facilitator is responsible for giving the user tasks to complete during the test. They guide the user through the testing process while observing how the user interacts with the prototype.

Why is there a need for a second person acting as the 'computer' in a paper prototype test?

The second person, acting as the 'computer,' ensures that the appropriate screens are shown to the user as they navigate through the prototype. This simulates how a real interface would behave and helps to maintain the flow of the test.

How should usability issues be handled during a paper prototype test?

If usability issues become apparent during the test, the facilitator can use blank paper to sketch improvements between tests. This allows for rapid iteration and improvement of the design.

What happens to the paper prototypes after testing is complete?

After testing, the paper prototypes can serve as documentation or notes for future design iterations. They become a valuable reference for how the design evolved based on feedback.

What are the advantages of paper prototyping in the early stages of design?

Paper prototyping is inexpensive, allows for rapid iteration, and encourages collaboration. It’s an excellent tool for experimenting with new ideas and refining them before moving on to higher-fidelity designs.

Outlines

00:00

📄 Quick Feedback with Paper Prototypes

Paper prototypes allow for fast testing and feedback collection. They help assess if a layout makes sense to users, and adjustments can be made quickly when issues arise. Beyond layout, paper prototypes are effective for testing various aspects such as information architecture, content structure, task flows, and interaction design.

📋 Preparing for Paper Prototype Testing

To run a paper prototype test, gather essential supplies like the prototype screens, tape to define the test area, and extra paper for quick iterations. Each screen should be represented by a single sheet of paper. Hand-drawn sketches are ideal, but low-fidelity digital wireframes are also suitable.

⏳ Handling Delays with Loading Indicators

Including a loading indicator, whether an overlay or a full sheet of paper, ensures that users stay engaged in the test even if a screen takes longer to find. This prevents breaking the immersion of the testing experience. It’s also helpful to have an 'under construction' page for any screens that are not represented in the prototype.

📝 Keeping Users on Task

To help users stay focused during the test, provide them with a printed or written list of tasks to refer to while navigating through the prototype. Additionally, use tape to block out a focus area or create a cut-out of a phone or browser shape to maintain a single area for testing.

👥 Roles in Paper Prototype Testing

Two people are typically needed to run a paper prototype test: a facilitator and a ‘computer’. The facilitator gives users tasks, while the computer places the appropriate screens in front of the user as they navigate. The computer should practice beforehand to ensure familiarity with the screens.

🛠 Iterating During Testing

During the test, apply standard usability testing practices. If major usability issues emerge, use blank paper to sketch out improved designs between tests. This iterative process allows for quick adjustments based on user feedback.

📝 Documentation and Future Iterations

Once testing is complete, the paper prototypes can serve as documentation or notes for future iterations. Paper prototyping is an excellent tool for early design stages because it’s cost-effective, supports rapid iteration, and allows anyone to contribute ideas to the design process.

Keywords

💡Paper Prototypes

Paper prototypes are physical, hand-drawn or low-fidelity representations of a user interface, created using paper. In the context of the video, they are used to test ideas quickly and affordably. The simplicity of paper prototypes allows for rapid changes during the testing process, making them ideal for the early stages of design where feedback is critical.

💡Layout

Layout refers to the arrangement of elements on a user interface, such as buttons, text, and images. The video emphasizes testing whether a layout makes sense to users through paper prototypes. This helps designers ensure that the placement and organization of information are intuitive and user-friendly before moving on to more complex designs.

💡Information Architecture

Information architecture is the structure and organization of information within a system or website. In the video, paper prototypes are used to test how well users understand and navigate through this structure. By evaluating information architecture early, designers can ensure that users can find content easily and that the flow of information is logical.

💡Task Flows

Task flows represent the steps a user takes to complete a specific action within a system. In paper prototype testing, task flows are examined to see if they make sense to users and whether they can accomplish their goals efficiently. Testing task flows early helps identify any confusion or inefficiencies in the design.

💡Interaction Design

Interaction design focuses on how users interact with the interface and includes elements such as buttons, links, and navigation. Paper prototypes allow designers to test these interactions in a simple way before adding more complex functionalities. The video highlights testing interactions to ensure they are intuitive for users and lead to the desired outcomes.

💡Loading Indicator

A loading indicator is a visual cue, such as a spinner or progress bar, that tells users the system is processing something. In paper prototyping, the video suggests using an entire sheet of paper as a loading indicator to simulate delays when switching screens. This keeps users engaged and simulates real-world scenarios of waiting for a response from the system.

💡Under Construction Page

An under construction page is a placeholder for a feature or page that is not yet complete. In the video, designers are advised to include this in their paper prototypes to prevent confusion if a user clicks on an unavailable screen. It helps maintain the flow of the test by informing the user that a particular area of the prototype is not ready yet.

💡Usability Testing

Usability testing involves evaluating how easily users can interact with a product or design. The video discusses applying standard usability testing practices when running tests on paper prototypes. This includes observing users as they complete tasks and identifying any challenges they encounter, which can be used to improve the design.

💡Rapid Iteration

Rapid iteration refers to quickly making changes and improvements to a design based on user feedback. In the context of paper prototypes, it is easy to redraw or adjust screens in response to issues identified during testing. This allows for fast experimentation with new ideas and continuous refinement of the design.

💡Facilitator

A facilitator is a person who guides the user through the testing process, giving them tasks to complete while interacting with the prototype. In the video, the facilitator plays a crucial role in ensuring the user focuses on the task and providing instructions. The facilitator does not interfere with the user's experience but observes and takes notes for future improvements.

Highlights

Using paper prototypes is a great way to test an idea and get feedback quickly.

Paper prototypes help test layouts, information architecture, content structure, task flows, and interaction design.

Gather supplies: a paper prototype, tape for creating focus areas, and extra paper for iterations.

A paper prototype consists of hand-drawn sketches or low-fidelity digital wireframes, whichever is easier to iterate.

Include loading indicators in your paper prototype to maintain user engagement if it takes longer to find a screen.

Include an 'under construction' page for when users click on a link not represented in your prototype.

Provide a printed or written list of tasks for users to follow during the test to keep them focused.

Create a focus area for the prototype using tape or a cut-out shape of a phone or browser.

Designate one person as the facilitator to guide the user, while another person plays the role of the 'computer' to manage the screens.

The person acting as the 'computer' should rehearse to ensure familiarity with the screens before testing.

If usability issues arise, use blank paper to quickly sketch an improved design between tests.

Once testing is complete, use the paper prototypes as documentation or notes for future design iterations.

Paper prototyping is ideal for the early stages of design and experimenting with new ideas.

Paper prototyping is inexpensive, allows for rapid iteration, and encourages team collaboration.

Paper prototypes maintain user focus and are easy to modify based on feedback gathered during usability testing.

Transcripts

Using paper prototypes is a great way to test an idea and get feedback quickly.

You can test whether a layout makes sense to users and make changes quickly if they run into issues.

In addition to layout, you can also test information architecture, content, structure, task flows,

and interaction design.

Let’s run through how to run a test using paper prototypes.

First, you’ll want to gather your supplies: your paper prototype, tape to create a focus

area, and extra paper for iterations.

Your paper prototype should be a collection of screens, one sheet of paper for each screen.

I prefer to use hand-drawn sketches, but you can also use low-fidelity digital wireframes

if you’re more comfortable; whichever is easiest to iterate.

In your collection of screens, you’ll want to include some type of loading indicator,

whether it’s an overlay or an entire sheet of paper.

This will be used when it’s taking longer than expected to find a screen in your stack

so it doesn’t take the user out of the experience.

You may also want to include an under construction page in the event a user clicks on a link

for a page that isn’t represented in your collection of screens.

To keep the user focused on the prototype and tasks, you may also want a printed or

written list of tasks for the user to refer to while going through the test.

A focus area for the screens can be blocked out on the table with tape or you can cut

out a shape of a phone or browser to maintain a single area for the test.

The last thing you need is another person to help with the test.

One person should be designated as the facilitator giving the user tasks and another person will

act as the computer, making sure the appropriate screens are in front of the user as they navigate

through the prototype.

The person playing the role of the computer should rehearse to make sure she’s familiar

with the screens before testing.

Once you start the testing, standard usability testing best practices still apply.

If you start to see obvious usability issues while testing, use your blank paper to draw

out an improved design in between tests.

Once your tests are complete, your paper prototypes can become documentation or notes for future

iterations of the design.

Paper prototyping is great for early stages of design and experimenting with new ideas.

It’s inexpensive, allows for rapid iteration, and anyone can contribute to the design.