Paper prototyping
TDDD58 - Interaction design project
Tim Overkamp
Interaction and Service Design research group
Linköping University
Intro
TU Delft
LiU
What is paper
prototyping?
πρωτότυπον
Primitive form
πρῶτος
τύπος
First
Impression
"Paper prototyping is a variation of usability
testing where representative users perform
realistic tasks by interaction 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"
Snyder, 2003
"Paper prototyping is a variation of usability
testing where representative users perform
realistic tasks by interaction 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"
Snyder, 2003
Image prototype Minnesmark
Computer paper prototype
When use paper
prototyping?
General
concept
Understandability
Navigation
e.g. Arvola, 2014
Analysis
Ideation
Concept level
Detailed design
Analysis
Ideation
Concept level
Ideation
Concept level
Detailed design
c
de
Analysis
Ideation
cis
io n
Concept level
ts
s
o
st
ha
c
f
o
ti
nfl
n
a
h
ue
nc
s
e
g
ec
os
ts
Detailed design
Broad
Deep
T-shaped
Why (paper)
prototyping?
Better feedback
Fast and cheap
Low-tech tools and materials
Supports collaboration
More iterations, more alternatives
Feedback on the right level
e.g. Snyder, 2003
Fast
Cheap
e.g. Snyder, 2003
Low-tech materials
e.g. Snyder, 2003
More people can join and meet as equals
e.g. Bødker & Grønbæk, 1991
More iterations
e.g. Snyder, 2003
More alternatives
e.g. Snyder, 2003
So you use paper prototypes because…
…then you get feedback on the right level, of
general concept, understandability and navigation.
…they can be made quickly, so you can do more
iterations.
…they are cheap to make, so you can create more
alternatives, test instead of speculate.
…the low-tech material and basic skills needed
allow to create them collaboratively.
How to make
paper
prototypes?
e.g. Warfel, 2009; Snyder, 2003
e.g. Warfel, 2009; Snyder, 2003
Make your own
paper prototype
Interface for payment terminal in a store
where you can pay with debit/credit card
Design the screens that are needed during
the transaction:
1. Give instructions to the customer; what
should s/he do?
2. Give feedback during the process; what is
going on, what has been completed?
Put each screen on a new piece of paper.
Now give the person next to you the task to
make a payment using your interface.
Login
Name
Dialog Box Title
Password
Cancel
30s, any OS
OK
3 min, iOS 6
“Those who produced early sketches on paper
were more satisfied with the final design”
Black, 1990
Snyder, 2003
adapted from Snyder, 2003
Adapted from Snyder, 2003
Snyder, 2003
Other ways of
prototyping
interfaces
Fidelity
Working
prototypes
Clickable
prototypes
Paper
prototypes
Progress in project
Prototype On Paper software
Clickable prototypes
Thank you.
Formative usability testing
TDDD58 - Interaction design project
Tim Overkamp
Interaction and Service Design research group
Linköping University
1
2
3
!
Usability
issues
Missing
requirements
Preferred
alternatives
Priorities
Beyond
the UI
e.g. Snyder, 2003
user
"computer"
facilitator
observers
e.g. Snyder, 2003
Observer
Computer
Observer
Observer
User
Facilitator
Prepare
The prototype, the team, the user
Introduce
The nature and background of the test
Test
User performs tasks using the prototype
of the user interface design
Interview
Follow-up questions from the test,
Additional questions about the
perception of the interface design
Task design
A good task…
…is based on goal that matters to the chosen user profile.
…covers questions important to the success of the product.
…has an appropriate scope.
…has a finite and predictable set of solutions.
…has a clear end point that the user can recognise.
…elicits action, not just opinion.
…does not contain hints for the user
Develop a possible task for your own
formative evaluation.
Write what you want to evaluate about
the interface (concept, navigation, etc.)
Write a task that could help you to get
feedback on this aspect.
For instance:
We want to evaluate whether people can
create a new calendar item (navigation).
Task: “You come across an event that you
find interesting and want to attend. How
would you store the details of this event?”
Some other pointers
Tasks on paper
Easy to hard
No (dis)agreeing or explaining
No confirmation
U
Thinking aloud
U
F
Talking with users
U
Co-discovery
U
!
Observations
Inferences
Opinions
“This is really clear”
-participant 10-
“This is really clear”
-participant 10TO: user comments the way in
which selected pictures are
highlighted in the photo album
Work as a group
Pooling observations
Recognising patterns
Choosing optimal solutions
No time-consuming communication
What it will likely find
Concepts and Terminology
Navigation, work flow, task flow
Content
Requirement/functionality
Screen layout
What it will not find
Small changes
Keyboard and mouse
Size of controls
Response time
Long term use in real life
Arvola, M. (2014) Interaktionsdesign och UX - s. 131-134
www.paperprototyping.com
Snyder, C., (2003) Paper prototyping - the fast and easy way to design and refine user interfaces
Retting, M., (1994) Prototyping for Tiny Fingers
Hix, D. and Hartson, R., (1993) Developing User interfaces: Ensuring Usability through Product and Process
Buxton, B., (2007) Sketching User Experiences
Greenberg, S. et al. (2011) Sketching User Experiences: the workbook
Paper Prototyping - Shawn Medero - A List Apart
Paper Prototyping: Getting User Data Before You Code - Jakob Nielsen
10 Effective Video Examples of Paper Prototyping - Paul Andrew - Speckyboy.com
7 myths about paper prototyping // Paper prototype helper kit
David Travis - userfocus.co.uk
https://www.youtube.com/watch?v=GrV2SZuRPv0
https://www.youtube.com/watch?v=_g4GGtJ8NCY
https://www.youtube.com/watch?v=9wQkLthhHKA
https://www.youtube.com/watch?v=Bq1rkVTZLtU
Tack!
Tim Overkamp
tim.overkamp@liu.se