mobile ux essentials
DESCRIPTION
Slides from Mobile UX Essentials workshop at UX Australia, 2010TRANSCRIPT
Rachel HinmanSenior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Mobile UX EssentialsUX Australia 2010
2004
Q: Where do I begin?
Q:
What can we do with mobile?
Q:
Q: Where do I begin?
Our plan for today…Similarities and
differences between designing for web and mobile
Our plan for today…Similarities and
differences between designing for web and mobileThree most important attributes of great mobile experiences
Our plan for today…Similarities and
differences between designing for web and mobileThree most important attributes of great mobile experiencesA set of mobile design principles
Our plan for today…Similarities and
differences between designing for web and mobileThree most important attributes of great mobile experiencesA set of mobile design principlesThree mobile design activities
Along the way…
Slides Worth Keeping
Shameless Opinion
Design Activities
Design Principles
Watch for slides with
this orange label!
Okay, let’s get started!
A
What are the similarities?
Q:
UX designers know how to work in a rapidly evolving field
13
UX designers understand how to create experiences within
technical constraints14
UX designers use similar
tools and processes15
AQ: What are the
differences?
A mobile phone is not a computer
17
A umm…. duh!
19
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
20
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
21
Highly variable context and environment
Small screen size and limited text input UI takes up the entire screen
Difficult to multi-task and easy to get lost
22
23
24
26
2727
Opinion!
The Rearview Mirror
Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical
and social constraints, our cognitive habits often get in the
way.
Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a
rear-view mirror. We march backwards into the future.”
Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical
and social constraints, our cognitive habits often get in the
way.
Marshall McLuhan called it “the rear-view mirror effect,”
noting that “We see the world through a rear-view mirror. We march backwards
into the future.”
30
Mobile presents an opportunity to invent new ways for users to interact with information.
Opinion!
31
Mobile phones aren’t really phones anymore
AQ: What’s the first
step?
39
Step One: Know the medium you’re designing for
40
NO EXCUSES!
Buy a modern mobile device
41
Mobile Culture Indoctrination
42
Mobile Culture Indoctrination
43
Images needed
Step Two: Observe the culture you’re designing for
44
Step Three: Brace yourself for a fast and
exciting ride
45
Rapid Evolution
“The rapid development of cell phones is killing early cell phones much faster than it's killing any of the early, older legacy technologies.
I think that is a real principle... something you have to understand if you're going to be in this line of work. It's very romantic. It's very fast moving.
You are building dead lumps of plastic. When people come out and they show you an iPhone, or an Android... they are showing you larval versions of something much more sophisticated.
The world you are building right now is the ground floor for something much larger -- and the soil beneath that ground floor is violently unstable.”
-- Mobile Monday Amsterdam – November 2008
are uniquely mobile
1
Great Mobile Experiences:
are sympathetic to context
2
speak their power3
steal this slide!
are uniquely mobile
1
Great Mobile Experiences:
ADo you remember a time when the web was new?
Q:
A“We need a web presence!”
!
50
Brochureware
A“We need online commerce!”
!
52
What about shipping?
AA“Let’s make our site like…”
!
54
We confused the solution with the need.
Lessons Learned from Web
We borrowed broken models. Too focused on tactics.
We didn’t focus on what the web could do well.
AAHow do we NOT do that again?
Q:
Technology can guide, but should not be the focus.
Focus on needs instead of tactics and solutions.
Design PrinciplesUniquely Mobile
Mobile is a unique & different medium - focus on what it can do well.
steal this slide!
Design Principle: Uniquely Mobile
Focus on what mobile can do well
Design Principle: Uniquely Mobile
Technology can help guide, but should not be the focus
Design Principle: Uniquely Mobile
Need vs. Solution
61
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
62
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
Use Two Techniques
63
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
64
Your Design Challenge!Step 1: Identifying Mobile Needs
Activity
1. Divide into groups2. Read your design
challenge3. Develop a list of
mobile needs4. Identify top 3-5
mobile needs
20 Minutes
are uniquely mobile
1
Great Mobile Experiences:
are sympathetic to context
2
AWhat exactly do you mean by mobile “context” ?
Q:
A
AContext is complex!!
A
Context is about understanding human relationships to the people, places and things in the world.
72
Context Frameworksteal this slide!
73
Context Frameworksteal this slide!
74
Orchestration and Inflection
75
76
Spatial
77
Temporal
78
Social
79
Semantic
80
Peanut butter in Melbourne right now?
A
The web is good at people and things.
The web is good at semantic relationships.(and okay at social
relationships)
82
Mobile is good at places…
steal this slide!
83
steal this slide!Mobile is good at spatial and temporal relationships.
84
There are currently not many technologiesthat help us understand place, and temporal and spatial relationships. 85
How do we get that understanding?
Q:
Design for partial attention and interruption
1
Design Principles:Sympathy to Context
Reduce cognitive load and opportunity cost
2
steal this slide!
Ideate in the wild3
88
Design for partial attention and interruption
89
Design for partial attention and interruption
90
Opportunity cost
91
Ideate in the wild…
92
ActivityYour Design Challenge!Step 2: Sympathy to the mobile context1. Divide into groups
2. Head to the streets
3. Ideate in the wild – Create 2-3 concepts based on the needs your team identified
20-30 Minutes
93
Activity
Go outside and brainstorm ideas
94
Activity20-30 Minutes
95
Mobile is good at places…
steal this slide!
96
Mobile is good at places…
steal this slide!
are uniquely mobile
1
Great Mobile Experiences:
are sympathetic to context
2
speak their power3
AHuh?Q
:
99
100
101
We can annotate expectations in the web world
102
We can annotate expectations in the web world
103
Add to cart
Free two-day shipping
Shipping!
Collectible!
Maybe a kindle!
Look inside the book
REALLY!Look inside the book
Get it new OR used!
Sell mine
Options in mobile have to be readily apparent
104
AHow do I create mobile interfaces that “speak their power”?
Q:
Understand the characteristics of GUI, NUI, OUI interfaces
1
Design Principles:Interfaces that speak their power
steal this slide!
Grow ruthless editing skills
2
Say good-bye to done3
107
steal this slide!
108
We’re reaching the edges of what GUI can do
109
It’s not longer “what you see it what you get…”
110
…now it’s “what you do is what you get”
111
Different platforms express characteristics differently
112
steal this slide!
113
Ruthless editing is part of the NUI design process
114
Say Goodbye do done
115
This should look familiar…
116
This should look familiar…
The web has evolved around a
task-efficiency model.
Mobile is different.
117
Mobile is different….
118
Mobile is different….
119
Mobile is different….
Mobile is about pivoting people through information
quickly.
It’s about exposing possibilities.
“What’s the point?”
“What can happen?”
TASK POSSIBILITIES
121
Tasks are about completion…
122
Tasks are about completion…
Possibilities are interactions that accrue over time…
… or facilitate
exploration… 123
Tasks are about completion…
Possibilities are interactions that accrue over time…
… or facilitate
exploration… 124
Tasks are about completion…
Possibilities are interactions that accrue over time…
..or are about SENSING
INTENT!
125
126
127
128
129
130
AHow do I design for possibilities?
Q:
A
132
A
133
A
134
It’s like a card game…
135
Each card speaks it’s power
136
You win with a good hand
137
138
ActivityYour Design Challenge!Step 3: Creating a good hand
139
140
ActivityCreate a winning hand.
141
ActivityCreate a winning hand.
Allow people to pivot through information quickly
Stitch cards together to answer the question
142
PrototypePrototypePrototypePrototypePrototypePrototype
143
Prototype at every stage
Process
144
Prototyping “Swirl”Process
145
146
147
148
150
Can users grok it?
Does each screen speak it’s power?
Can I simplify this?
Is this intuitive?
Q:
Q:
Q:
Q:
151
Plan for a lot of it!
1
Tips for mobile prototyping
steal this slide!
Work at scale and print it out!
2
Get it on the device as soon as you can.
2
152
iPhone Apps = Xcode1
Some info about mobile web/ and app programming:
Android Apps = Java (managed code) 2
Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps by Brian Fling
Q: Where do I begin?
are uniquely mobile
1
Great Mobile Experiences:
are sympathetic to context
2
speak their power3
steal this slide!
Everybody starts somewhere….
Good luck!
Resources:
MOBILE RESOURCES
Ultimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413
mooTools http://mootools.netiUI iPhone navigation (javascript):http://code.google.com/p/iui/
jQuery (javascript):http://jquery.com/
TweenMax (actionscript):http://blog.greensock.com/tweenmaxas3/
Bruce Sterling speaks on the future of mobilehttp://tinyurl.com/6m7kwc
Q?