More Related Content Similar to User Experience Design & Paper Prototyping (20) More from Ilona Posner (6) User Experience Design & Paper Prototyping1. User
Experience
Design
&
Paper
Prototyping
ILONA
POSNER
User
Experience
&
Usability
Consultant
www.ilonaposner.com
Mobile
Accelerator
Program
(MAP)
Mobile
Experience
InnovaJon
Centre
(MEIC)
OCADU,
Toronto,
ON
February
14,
2013
ILONA
POSNER
©
2013
1
2. Bio
-‐
ILONA
POSNER
User
Experience
&
Usability
Consultant
• Industries:
Telecom,
Financial,
Web,
Mobile,
SoTware,
Hardware,
Healthcare,
TransportaJon,
EducaJon
• Clients:
AMD,
Autodesk,
Apple,
Bell,
CIBC,
DB,
MicrosoT,
Pitney
Bowes,
LA
Metro
Transit
Authority,
Human
Factors
InternaJonal,
NaJonal
Research
Council
of
Canada,
Canada
Health
Infoway,
CIBC,
RBC,
ScoJa,
TD,
Visa,
&
Yahoo!
• Teaching:
University
of
Toronto,
Canadian
Film
Centre,
OCADU,
Professional
Development
Courses
• Research:
University
of
Toronto,
Computer
Science,
Human
Computer
InteracJon,
Dynamic
Graphics
Project
• Educa=on:
M.Sc.
&
B.Sc.
Computer
Science,
U.
of
Toronto
ILONA
POSNER
©
2013
2
3. Points
of
View
“A
point
of
view
is
worth
80
points
of
IQ.”
-‐
Alan
Kay
“You
are
NOT
the
User!”
ILONA
POSNER
©
2013
3
Source
www.openmuseum.org/objet/show/1835
4. Keyhole
Impact
“I
am
NOT
the
User!”
ILONA
POSNER
©
2013
4
Source
hfp://s125.beta.photobucket.com/user/alongway99/media/Halloween%20AnimaJons/Scary%20Eye%20AnimaJons/EyeLooksKeyhole.gif.html?sort=4&o=47
5. History
of
User
Experience
• Human
Factors
&
Ergonomics
• Human
Computer
InteracJon
• Usability
• User
Experience
ILONA
POSNER
©
2013
5
10. Human
Impact
of
Technology
Human Impact
Devices
ApplicaJons
Input
forms
Features
InformaJon
Time
of
use
Dependence
Interdependence
Sociability
Environmental
impact
Human Capacities
ILONA
POSNER
©
2013
10
11. What
is
User
Experience?
Interna=onal
Standards
Organiza=on
• ISO
defines
user
experience
as
"a
person's
percep=ons
and
responses
that
result
from
the
use
or
an=cipated
use
of
a
product,
system
or
service".
So,
user
experience
is
subjec=ve
and
focuses
on
the
use.
• The
addiJonal
notes
for
the
ISO
definiJon
explain
that
user
experience
includes
all
the
users'
emo=ons,
beliefs,
preferences,
percep=ons,
physical
and
psychological
responses,
behaviors
and
accomplishments
that
occur
before,
during
and
aMer
use.
The
notes
also
list
the
three
factors
that
influence
user
experience:
system,
user
and
the
context
of
use.
• Note
3
of
the
standard
hints
that
usability
addresses
aspects
of
user
experience,
e.g.
"usability
criteria
can
be
used
to
assess
aspects
of
user
experience".
Unfortunately,
the
standard
does
not
go
further
in
clarifying
the
relaJon
between
user
experience
and
usability.
Clearly,
the
two
are
overlapping
concepts,
with
usability
including
pragma=c
aspects
(geNng
a
task
done)
and
user
experience
focusing
on
users’
feelings
stemming
both
from
pragma=c
and
hedonic
aspects
of
the
system.
ISO
FDIS
9241-‐210:2009.
Ergonomics
of
human
system
interacJon
-‐
Part
210:
Human-‐centered
design
for
interacJve
systems
(formerly
known
as
13407).
InternaJonal
OrganizaJon
for
StandardizaJon
(ISO).
Switzerland.
hfp://en.wikipedia.org/wiki/User_experience
ILONA
POSNER
©
2013
11
12. User
Experience
Everything
that
the
user
sees,
hears,
&
touches!
Share
Customize
ILONA
POSNER
©
2013
12
17. Buying
Pop
with
a
Cell
Phone
IDEO
researchers
test
i-‐mode
leading
edge
mobile
services
plavorm,
2003
Bill
Moggridge,
Designing
InteracJons,
February
2,
2007
lecture
by
Bill
Moggridge
for
the
Stanford
University
Human
Computer
InteracJon
Seminar
(CS
547).
hfp://www.youtube.com/watch?v=kVkQYvN4_HA
ILONA
POSNER
©
2013
17
18. User
Experience
Example
…
hfp://www.switched.com/2010/12/28/aol-‐free-‐trial-‐cds-‐cost-‐300-‐million/
ILONA
POSNER
©
2013
18
20. Cost
of
UX
Problem
• Bush
won
by
537
of
5.8
million
votes
• Buchanan
5x
>
votes
in
Palm
Beach
• 19,120
ballots
registered
2
votes,
20,000
disqualified
ballots
• Law
suit
claimed:
“Ballots
were
decepJve,
misleading,
and
confusing.”
• Results
delayed
37
days!
Nov
7
-‐
Dec
13
hfp://costofwar.com/
ILONA
POSNER
©
2013
20
23. Research
Focus
Problem
Space
-‐ Environment
-‐ Market
-‐ LegislaJon
Users
Business
Users
-‐ Goals,
Needs
-‐ AcJviJes,
Tasks
-‐ Vision
&
Goals
-‐ Requirements
-‐ Requirements
-‐ CompeJJon
Business
?
Technology
Technology -‐ Constraints
-‐ Requirements
ILONA
POSNER
©
2013
23
25. $300
Million
Bufon
eCommerce
website
changed
one
bufon
label
✗
REGISTER
CONTINUE
✓
+
45%
sales
up
aTer
renaming
of
bufon
&
removal
of
forced
registraJon
+
$300
Million/year
revenue
Source:
www.uie.com/ar,cles/three_hund_million_bu(on
ILONA
POSNER
©
2013
25
26. $12
Million
–
OpJonal
Field
• Expedia.com
makes
$12
Million
profit,
aTer
removing
opJonal
field
“Company”
from
online
purchase
form
• Prior,
customers
who
clicked
the
Buy
Now
did
not
complete
transacJons…
Source:
hfp://www.silicon.com/management/sales-‐and-‐markeJng/2010/11/01/
expedia-‐
on-‐how-‐one-‐extra-‐data-‐field-‐can-‐cost-‐12m-‐39746554/
ILONA
POSNER
©
2013
26
29. Five
D’s
of
User
Experience
Design
Discover
Deploy
Define
Develop
Design
ILONA
POSNER
©
2013
29
30. Five
D’s
of
DISCOVER DEFINE DESIGN DEVELOP DEPLOY
!"#$%&##'
Business stakeholder interviews Business objectives Review concepts & designs often
Business goals, mission, vision Market Positioning Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics
Concept Success metrics Future features list
UX
Design
Product SWOT Analysis
Marketing Mix(four P's)
Market Positioning
Market Segmentation
Demographic Research
Design Guidelines / Standards?
()*+",-'
Product reports & surveys Concept prototype/video Review concepts & designs often
Critical incident analysis Project definition/Concept Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics
Weblogs & analytics Deliverables defined Future features list
Competitive Analysis Use cases
Quantitative Research Initial design exploration
Qualitative Research Visualization
Expert heuristic evaluation Flowchart (tasks)
Design research Success metrics
-&,.%*/*01'
Current technology used Technical requirements !"#$%&'()*+,+-.&-#(/$0&(#((+1$( DEVELOP with input from UX SUPPORT deployed product
Limitation of old technology Success metrics 2#3+#4&51$5#6-(&7&%#(+0$(&18#$ !"#$%&'()*+,+-.&-#(/$0&(#((+1$(
Opportunities for new tech
Research tech constraints
2$#"3/'+&#$0%
Brand & Design Guidelines Develop Strategy, explore look & Design Direction, agree on chosen Style Guide - Pixel placements
feel direction definition
Frames of reference, analagous Generate Initial Ideas, style frames, Iterations of Hi-Fidelity Designs Graphic Production - Icons,
examples initial concepts, mock-ups before user testing graphics, page elements
Future Design Direction Developer Toolkit - Examples,
sample code, wiki
THESE ABOVE MAY NEED TO
HAPPEN SOONER!?!?
"#&)'&4(&)$&%,&'5'"#3!$/$-1
Business stakeholder interviews Concept prototype/video
Call centre reports User stories Brainstorm concepts & metaphors Work closely with development User Surveys
User community feedback User profiles Modules requirements & designs Beware: Last minute design changes Monitor social networks & user
done without UX Input communities
Field studies Usability goals & objectives Screen flow, functions, fields Field studies of actual use
User surveys User performance requirements Navigation/site map
User interviews User experience goals Review early design concepts Conduct heuristic evaluations of Usage metrics, & performance
(including graphic treatment) evolving product measurements
Expert heuristic evaluation Persona's Prototypes Low-Fidelity (multiples) Usability test evolving product as Future features list
soon as possible
Usability testing current product Storyboarding Wireframes Low-Fidelity Confirm success metrics and
(multiples) objectives are being met
Design research User scenarios Usability Test Low-Fidelity
Prototypes & Wireframes
Task Analysis Prototypes High-Fidelity (includes Final Usability Testing before
graphic treatment) Deployement
Competitive Analysis Success metrics Detailed Designs
Quantitative Research Usability Test Designs & High-Fi Project Process Debrief & Lessons
Prototypes Learned
Qualitative Research Update Design Guidelines
Task Analysis Update detailed designs & functional
specifications for development
User Goal Analysis Document Design Rationale
Update Design Guidelines/Standards
ILONA
POSNER
©
2013
Five
D’s
of
UX
Design
–
Discover,
Define,
Design,
Develop,
Deploy
ILONA
POSNER
© 2013
30
33. Samsung
vs
iPhone
Comparison
-‐
Memo
ILONA
POSNER
©
2013
Samsung,
RelaJve
EvaluaJon
Report
on
S1,
iPhone,
Product
Engineering
Team,
SW
VefiricaJon
Group
March
2,
2010
33
PlainJff’s
Exhibit
No.
44,
United
States
District
Court,
Northern
District
of
California,
Apple
Inc.
v.
Samsung
Elecs.
38. 360
Degree
View
of
Customer
• Call
centre
• Field
Studies
• Customer
support
emails
• Interviews
• User
forums
• Surveys
• AnalyJcs
• Diary
studies
• Web
logs
• Focus
groups
• 3rd
party
review
sites
• Card
sorJng
• Usability
tesJng
Lean
UX
-‐
Applying
Lean
Principles
to
Improve
User
Experience,
Jeff
Gothelf
&
Josh
Seiden,
2013
ILONA
POSNER
©
2013
38
39. User
Research
ObservaJons
Interviews
QuesJonnaires
ILONA
POSNER
©
2013
39
40. Example:
Research
QuesJon
Research
QuesJon:
What
is
the
weather?
How
would
you
conduct
this
research?
List
several
different
ways
you
could
try
to
answer
this
quesJon?
ILONA
POSNER
©
2013
40
45. Field
Studies
✗
I would use a
drop-down menu
rather than using
I find it difficult to
keep track of my
knitting patterns.
✓
check boxes.
ILONA
POSNER
©
2013
45
47. Wells
Fargo
Mobile
Research
Answerlab.com
&
Wells
Fargo
Research
PresentaJon,
UPA
2011
ILONA
POSNER
©
2013
47
48. Users’
Profiles
• Demographics
– Age,
gender,
family,
educaJon,
job,
HHI,
technology,
geography,
language,
culture,
preferences,
etc…
• Behavior
paferns
– Where,
when,
how,
why
ILONA
POSNER
©
2013
48
49. Personas
Persona
A
hypotheJcal
user
archetype
used
throughout
design
How
Compiled
from
ethnographic
interviews
with
real
people
Defined
by
goals,
moJvaJons,
behaviors,
of
real
target
users
Why
Designing
for
archetype
can
saJsfy
bigger
user
group
Helps
focus
on
users
&
context,
assist
in
decision-‐
making
&
communicaJon
www.cooper.com/newslefers/2002_02
ILONA
POSNER
©
2013
49
50. Persona
Types
Primary
If
the
design
fails
for
the
primary
persona
then
the
product
is
a
failure
Secondary
An,
• Examples:
– Extreme
Ed,
CauJous
Carl,
Businessman
Brad,
Mobile
Mike,
Mainstream
Mary
ILONA
POSNER
©
2013
50
51. Build
-‐
Prototypes
Early
Design
Late
Design
Development
Costs
of
Making
Changes:
$1
$10
$100
ILONA
POSNER
©
2013
51
53. Physical
Device
hfp://www.sketchingtomorrow.com/wp-‐content/uploads/2010/06/cardboard.jpg
ILONA
POSNER
©
2013
53
54. InteracJve
Paper
Prototype
hfp://graphics.csail.mit.edu/classes/6.893/F03/PaperPrototypePhotos/pic2_0018.JPG
ILONA
POSNER
©
2013
54
56. Mobile
Phone
Paper
Prototypes
www.liliamanguy.com/iBuyRight_webdocs/
www.nngroup.com/reports/prototyping/tesJng_handheld.jpg
ILONA
POSNER
©
2013
56
57. Paper
in
Screen
Prototype
hfp://uxmag.com/arJcles/paper-‐in-‐screen-‐prototyping
ILONA
POSNER
©
2013
57
58. Paper
Prototyping
“Without paper prototyping these decisions would likely have
taken 6 to 12 months longer.”
“85% of usability practitioners find Paper Prototyping useful &
essential.”
“Any mid-sized design project will probably get an ROI of several
thousand percent from following the advice in this book.”
Jakob Nielsen
www.paperprototyping.com
©
ILONA
POSNER,
2011
58
60. Usability
TesJng
–
Kids
Using
Rotary
Phone
hfp://youtu.be/j6ArmonNCi8
ILONA
POSNER
©
2013
60
62. Lean
UX
Declare
AssumpJons
Create
Minimal
Viable
Product
(MVP)
Run
an
Experiment
(GOOB)
Feedback
&
Research
(Pivot)
Lean
UX
-‐
Applying
Lean
Principles
to
Improve
User
Experience,
Jeff
Gothelf
&
Josh
Seiden,
2013
ILONA
POSNER
©
2013
62
63. Wizard
of
Oz
Technique
ParJcipants’
Roles
• User(s)
• Facilitator
• Computer
• Observer(s)
ILONA
POSNER
©
2013
63
64. User
Test
Product
Demo
ILONA
POSNER
©
2013
64
65. Usability
TesJng
of
Paper
Prototypes
“Debugging
before
wriJng
any
code!”
Layout
Workflow
Terminology
Requirements
Content
Help
ILONA
POSNER
©
2013
65
66. All
Technology
is
User
Tested!
The
only
ques=ons
are:
When?
By
Whom?
At
What
Cost!?
ILONA
POSNER
©
2012
013
66