Illustrations by Jason Robb
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 1
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 2
MyCokeRewards.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 3
MyCokeRewards.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 4
FOX.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 5
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 6
MikePanetta.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 7
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 8
LCBT.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 9
Marriott.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 10
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 11
United
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 12
United.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 13
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 14
MyCokeRewards.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 15
MyCokeRewards.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 16
VerizonWireless.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 17
AT&T.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 18
Apple.com/iPhone
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 19
AirCanada.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 20
AirCanada.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 21
AirCanada.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 22
Boston.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 23
NYTimes.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 24
Sturgeon’s Law
90% of everything is crapAre your designs in the other 10%?
Are you considering the user’s perspective?
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 25
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 26
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 27
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 28
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 29
Altavista
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 30
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 31
Accuweather
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 32
Umbrella Today
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 33
Umbrella Today
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 34
Air Canada
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 35
Air CanadaAir Canada
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 36
AirCanada.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 37
BART.gov
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 38
Amazon.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 39
Amazon.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 40
Amazon.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 41
BestBuy.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 42
BestBuy.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 43
BestBuy.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 44
Market Maturity
The features stage focuses on adding more into the design
The experience stage focuses on removing all but the essentials from the design
Is your market currently focused on technology, features, or experience?
Shifting from features to experience is the hardest thing an organization can do — and most fail
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 45
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 46
Six Flags: Mike Kazarnowicz, Joe Rollerfan (Flickr)
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 47
Disney World, Joe Penniston (Flickr)
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 48
Joanna8555 (Flickr)
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 49
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 50
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 51
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 52
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 53
Groupon
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 54
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 55
Grocon
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 56
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 57
Activities vs. Experience
Activities are discrete touchpoints with the users
Experience fills in the gaps
Mobile more often lives within the gaps
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 58
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 59
Investment
Delight
Use
r S
ati
sfa
cti
on
Frustration
Noriaka Kano
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 60
Shazam
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 61
Shazam
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 62
LimoRes
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 63
LimoRes
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 64
LimoRes
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 65
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 66
Neutral Satisfaction
Use
r Sa
tisfa
ctio
n
Delight
Frustration
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 67
My CokeRewards
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 68
MyCokeRewards.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 69
MyCokeRewards.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 70
MyCokeRewards.com
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 71
Site
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 72
Investment
Delight
Use
r Sa
tisfa
ctio
n
Frustration
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 73
Kano’s Model
Three vectors: Performance payoff, basic expectations, and excitement generators
Have to meet basic expectations before excitement generators will work
Over time, excitement generators become basic expectations
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 74
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 75
Copy Writing
Information Architecture
Design Process Management
User Research Practices
Interaction Design
Information Design
Visual Design
Editing &Curating
Ethnography
Domain Knowledge
Business Knowledge
Analytics
Marketing
Technology
ROI
Social Networks Use Cases
Agile Methods
Storytelling
Critiquing
Sketching
Presenting
Facilitating
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 76
The Three Questions
Vision: “Can everyone on the team describe the experience of using your design five years from now?”
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 77
A flag in the sand…
…that everyone marches towards.
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 78
Easily moved when things change.
Everyone continues to march toward it.
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 79
The Three Questions
Vision: “Can everyone on the team describe the experience of using your design five years from now?”
Feedback: “In the last six weeks, have you spent more than two hours watching someone use your or a competitor’s design?”
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 80
Methods of Feedback
Usability TestingFive second testsTrade show/Cafe testingRemote usability tests
Field Studies
Customer SupportUser forums
Using it yourself (for self-designers)
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 81
The Three Questions
Vision: “Can everyone on the team describe the experience of using your design five years from now?”
Feedback: “In the last six weeks, have you spent more than two hours watching someone use your or a competitor’s design?”
Culture: “In the last six weeks, have you rewarded a team member for creating a major design failure?”
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 82
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 83
The Eye of the Perfect Storm
Invest to avoid Sturgeon’s Law
Focus on experience over technology and features
Fill in the gaps between the activities
Ensure you meet basic needs while you search for delighters
Build in a feedback process
Create your experience vision
Celebrate learning from taking risks
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 84
Free for Webvision Attendees
BillScott
HaganRivers
BrandonSchauer
KimGoodwin
LukeWroblewski
Greg & StephanieRewis
StevePortigal
Kevin Hoffman
UI16 On Demand VideosMobile Input
UX Leadership
Being Creative with CSS3
Multi-device Design Patterns
UIConf.com/giveaway
Mobile & UX - In the Eye of the Perfect Storm User Interface Engineering - www.uie.com
© Copyright 2012, User Interface Engineering. All Rights Reserved. 85
Top Related