Paper Prototyping: IS 403 - Fall 2013

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

Paper Prototyping: IS 403 - Fall 2013

Uploaded by

Copyright:

Available Formats

Paper Prototyping: IS 403 - Fall 2013

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Paper Prototyping: IS 403 - Fall 2013

Uploaded by

Copyright:

Available Formats

Paper Prototyping

IS 403 Fall 2013

But first, scenarios

How scenarios are used

Elaborated Scenarios give more

Mr. and Mrs. Macomb are retired schoolteachers

Back to paper prototyping

Prototype = working model

Common in almost every field of engineering

In HCI prototypes may be virtual or physical

Low fidelity paper prototypes

Task centered walkthrough and

Medium fidelity prototypes

Fine tune interface, screen design

High fidelity prototypes

Limited field testing

Different types of prototypes

Two common types of compromise:

Quickly made representations of interface,

Prototypes that are more finalized than low

Prototypes that look like the final product, build

Horizontal vs. Vertical

Horizontal vs. Vertical

First level of user interface is fully present

Restricted to a subset of the system

Quickly made representations of interface,

Prototypes that are more finalized than low

Prototypes that look like the final product, build

A method of testing a system that does

What the user sees

How to do low fidelity prototyping

You need: a quiet place

What is a good location?

You need: example tasks

What tools do I need?

What is this device?

Index Cards (Example)

Useful Low Fidelity Tools

Explore your local art store for

Make a Low Fidelity Prototype

Fancier Low Fidelity Prototypes

Cut out each of the

These can be used

Paper prototyping activity

Search for class by course name/number

Simulated screen with paper

Cell phone testing

Prototype usability testing

Complete prototyping process

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

You might also like