Paper Prototyping

CONFIDENTIAL

1

Paper Prototyping

-- Devesh Jagatram

Paper Prototyping (by Devesh Jagatram)2

What is a Prototype?

A working model created to demonstrate crucial aspects of a system without creating a fully detailed system. Adding details and content incrementally to advancing stages of prototypes is one process for creating successful systems.

In Software Industry these refer to application systems and interfaces.


Software Prototypes

Lo Fidelity Prototypes

Wireframes / Storyboards

Paper Prototypes

Powerpoint / Visio Screen Designs

Hi Fidelity Prototypes

Visual Compositions

HTML Screens


Paper Prototype

In its broadest sense, paper prototyping can be considered a method of brainstorming, designing, creating, testing, and communicating user interfaces.

Paper prototyping is a widely used method in the User Centered Design process, a process that helps developers to create a software that meets the user's expectations and needs—here especially for designing and testing user interfaces. It is a Throwaway Prototyping and involves creating rough, even hand sketched, drawings of an interface to use as prototypes, or models, of a design. -- wikipedia

It is mostly used for Testing design ideas with users in early stages of design and is typically defined 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.


Evolution of Paper Prototyping

Prototyping (Traditional Methods) > Paper prototypes

>


Evolution of Paper Prototyping

It is a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation

It is Platform independent

It is a team exercise (Joint Application Development)


Applications of Paper Prototypes

Brainstorming amongst Design team

Brainstorming with Development/Implementation team

Brainstorming with Users

Usability Testing (formative)

Design Testing (formative)

Information Architecture Testing (formative)


Stages of paper prototypes

There are 2 stages at which paper prototypes are used and the kind of prototype made depends on these stages.

Conceptualization Phase (mainly static screens to explore different concepts)

Testing Phase (with separate widgets and detailed screen flows to narrate certain task and all its alternatives)


Common Concerns

I’m proficient with HTML. I can create a working prototype fairly quickly. Why would I want to use paper prototyping?

How can I use paper mockups to test new technology? Trying to mimic Macromedia Flash using paper mockups sounds like a nightmare—and how would we create rollovers?

Our product has been up and running for a while. Why go back and create mockups to test an existing product?

I have several elements getting repeated over many screens. If I use paper prototypes, I will need to draw them again & again for all screens. In HTMLs I can use same templates.

Validity ("Does it find real problems?")

Professionalism ("What will others think of it ... and us?")

Development resources ("Do we really have time to do this? Is it just extra work?")


How good should Paper Prototypes be?

The prototype only needs to be good enough for you to get answers to the questions you're most concerned about.

It's fine if the prototype looks a bit messy. Don't spend time making the prototype look neat before you test it -- if it's legible, it's good enough.

Paper prototypes don't need:

Straight lines or typed text

Images or icons (Use words instead)

Color

Consistent sizing of components


Techniques of Paper prototyping

Traditional Paper Prototyping

Paper based hand-sketched prototypes

Electronic Paper Prototyping

Powerpoint (Using Widgets)

Visio (Stencils)

Denim

Other electronic prototyping tools


Checklist of Things needed for Paper Prototyping

Paper

Pencils / Pens

Eraser

Paper Cutter

Gluestick

Additional Materials for Formative Testing

Transparencies

Mount board

Post It Notes

Transparency Markers

Cardboards for Screen / Device mockup


Sample Paper prototypes (Conceptualization)






Sample Paper prototypes (Formative Testing)


Sample Paper prototypes (Formative Testing)


THANK YOU!

Paper Prototyping

Design

paper mockups

paper version

throwaway prototyping

stages of prototypes

devesh jagatram confidential

testing design ideas

design team brainstorming

testing user interfaces