Paper Prototyping

IS 403 Fall 2013

Admin
TODAY: Paper prototyping
Thursday: HTML programming in ENGR
104A (not here)
Making up participation
Project ideas?
2

But first, scenarios

Scenarios
A descriptive story about a use of your
design
Designed to capture

Users goals
Users steps
Environmental context

How scenarios are used

Create during design process, keep
throughout
Help balance design decisions
Typical projects may have 5 to 500
scenarios
5

Example scenarios
From http://www.usability.gov/how-to-andtools/methods/scenarios.html

Elaborated Scenarios give more

user story details. These details
give the Web team a deeper
understanding of the users and
users characteristics that may
help or hinder site interaction.
Knowing this information, the team
is more likely to develop content,
functionality, and site behavior that
users find comfortable and easy to
work with.

Mr. and Mrs. Macomb are retired schoolteachers

who are now in their 70s. Their Social Security
checks are an important part of their income.
They've just sold their big house and moved to a small
apartment. They know that one of the many chores
they need to do now is tell the Social Security
Administration that they have moved. They don't know
where the nearest Social Security office is and it's
getting harder for them to do a lot of walking or driving.
If it is easy and safe enough, they would like to use the
computer to notify the Social Security Administration of
their move. However, they are somewhat nervous
about doing a task like this by computer. They
never used computers in their jobs. However, their son,
Steve, gave them a computer last year, set it up for
them, and showed them how to use email and go to
websites. They have never been to the Social
Security Administration's website, so they don't 9

Back to paper prototyping

Why?
How to do it
Clever examples

10

What is a prototype?

Prototype = working model

Full-size or to scale
Fully or partially functioning
Limited representation of an idea

Common in almost every field of engineering

design
Airplanes, chemical structures, architecture

In HCI prototypes may be virtual or physical

Prototype Examples
A series of screen sketches (paper)
A storyboard, cartoon-like series of scenes illustrating key
points of a scenario
A PowerPoint Slide show
A video simulating the use of a system
A piece of software with limited functionality written in the
target language or in another language
An electronic mock-up (hardware)
A cardboard mock-up

Why prototype?

13

Why Prototype?
To identify user interface and functional requirements
Almost impossible to specify in advance
Cant always get things right the first time

Why Prototype?
Reveals problems/prevents
mistakes
Building artifacts immediately
leads to costly errors
We did not have to consider
the stove, cup holder, or door
to see the design flaws, we
only considered pictures of
them

Why Prototype?
Enables quick evaluation and feedback
throughout design process
Fosters discussion, reflection and innovative ideas
(from designers and users): concrete artifact
Keeps design focused on users
Cheap, easy way to test designs with users
Help choose between design alternatives (risky/critical
features, go/no-go decisions)
Help answer specific questions
Users enjoy prototyping and feel involved
Provides continuous feedback on the current design
situation

Prototyping: When/How?
Early Design
Brainstorm different representations
Choose a representation
Rough out interface Style

Low fidelity paper prototypes

Task centered walkthrough and

redesign

Medium fidelity prototypes

Fine tune interface, screen design

Heuristic evaluation and redesign
Usability testing and redesign

High fidelity prototypes

Limited field testing

Alpha/Beta tests

Working Systems

Late Design

Different types of prototypes

Fidelity: High vs. low
Scope: Horizontal vs. vertical
Materials: Paper, PowerPoint, screen

Prototype Compromises
All prototypes involve compromises
Identify the compromises being made
Examples of compromises in software-based
prototyping:
Slow reaction time
Limited functionality
Use placeholder images: clipart, stock icons
Simulate data or input

Two common types of compromise:

horizontal and vertical

Fidelity in Prototyping
Low Fidelity

Quickly made representations of interface,

interaction is imagined

Medium Fidelity

Prototypes that are more finalized than low

fidelity, simulate interaction

High Fidelity

Prototypes that look like the final product, build

interaction elements
Will cover in a future lecture.

Horizontal vs. Vertical

Horizontal
thin prototype

Vertical
thick prototype

Horizontal vs. Vertical

Horizontal Designs

First level of user interface is fully present

No, or limited, functionality (but looks complete)
Fast implementation
Full extent of interface can be tested, but not in a real-use
context
Often does not capture the interaction feel

Vertical Designs

Restricted to a subset of the system

This subset offers the interface and functionality
Can undertake realistic testing

Fidelity
Designers create prototypes at multiple
levels of detail, or Fidelity
Example: Web sites are iteratively refined
at all levels of detail
Site Maps

Low

Storyboards

Fidelity

Schematics

Mock-ups

High

Fidelity Example

Fidelity in Prototyping
Low Fidelity

Quickly made representations of interface,

interaction is imagined

Medium Fidelity

Prototypes that are more finalized than low

fidelity, simulate interaction

High Fidelity

Prototypes that look like the final product, build

interaction elements
Will cover in a future lecture.

Wizard of Oz

A method of testing a system that does

not exist yet
Example: a system that transcribes text.

What the user sees

The Wizard

How to do low fidelity prototyping

You need: 3 people

1 participant
1 computer
Someone to take notes (observer)

You need: a quiet place

What is a good location?

You need: example tasks

What are good tasks?

27

What tools do I need?

Suggestions?

What is this device?

Index Cards
Index cards (3x5) a great size!
Each card represents one screen or one
element of a task
Great for software prototypes with multiple
screens
Website design
Mobile devices
Windows of software

Index Cards (Example)

Include enough detail for users to interact
with the prototype

Useful Low Fidelity Tools

Large, heavy, white paper
Index cards
Tape, stick glue, correction tape
Pens & markers (many colors
and sizes)
Large sheet of foam core,
poster board, butcher paper
Scissors, X-acto knives
Band-aids

Explore your local art store for

supplies!

Make a Low Fidelity Prototype

Once you like your layout,
you can focus on details
of the design
example data values,
menu content, buttons,
labels, etc
More specific layout of
interface objects
You can even annotate
your paper prototype!

Fancier Low Fidelity Prototypes

Once the details are
ironed out, you can
create your interface
toolkit

Cut out each of the

components
(windows,dialogs,menus,
etc) into its own window

These can be used

to dynamically
simulate the entire
interface following a
storyboard, or flow.

Storyboarding

Paper prototyping activity

Lets make: a mobile app for browsing
courses at UMBC, viewing reviews, adding
reviews
Tasks:

Search for class by course name/number

Browse reviews for a class
Add a review for a class
36

Prototyping Examples
Pieces of paper

http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related

Simulated screen with paper

http://www.youtube.com/watch?v=oITeUEjrY3Q&feature=related

Cell phone testing

http://www.youtube.com/watch?v=Bq1rkVTZLtU&feature=related

Prototype usability testing

http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=related

Complete prototyping process

http://www.youtube.com/watch?v=5Ch3VsautWQ

Kids game design (what not to do)http://www.youtube.com/watch?v

=L3yl9vaJuFE&feature=related