mobile ux essentials - silicon valley ixda/baychi
DESCRIPTION
Recent innovations are causing an inflection point in the mobile UX landscape, providing the opportunity to invent new and more human ways for people to interact with information. But where do designers who are steeped in the static desktop-computing paradigm begin? The purpose of this talk is to help UX designers and other UX professionals answer that very question. I'll share the three most important mobile design principles to consider when creating a mobile user experience, some mobile design exercises, and mobile prototyping tips.TRANSCRIPT
Rachel HinmanSenior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Mobile UX EssentialsSilicon Valley IxDA
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 the PC and mobile
Our plan for today…Similarities and
differences between designing for the PC and mobileThree most important attributes of great mobile experiences
Our plan for today…Similarities and
differences between designing for the PC and mobileThree most important attributes of great mobile experiencesA set of mobile design principles
Our plan for today…Similarities and
differences between designing for the PC and mobileThree most important attributes of great mobile experiencesA set of mobile design principlesMobile 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 we are free to experiment and 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 UX presents you with the opportunity to invent new ways for people to interact with information.
Opinion!
31
Mobile phones aren’t really phones anymore
Work outside the contours of your own assumptions
AQ: What’s the first
step?
36
Step One: Know the medium you’re designing for
37
NO EXCUSES!
Buy a modern mobile device
38
Step Two: Participate in the culture
you are designing for
39
Images needed
Cultivate mobile “mindfulness”
40
Step Three: Embrace the chaos
41
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!”
!
46
Brochureware
A“We need online commerce!”
!
48
What about shipping?
AA“Let’s make our site like…”
!
50
We confused the solution with the need.
Lessons Learned from WebWe 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
Focus on what mobile can do well
56
vs
57
vs
Design Principle: Uniquely Mobile
Technology can help guide, but should not be the focus
Design Principle: Uniquely Mobile
Need vs. Solution
60
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
61
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
Use Two Techniques
62
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
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.
70
Context Framework steal this slide!
71
Context Framework steal this slide!
72
Orchestration and Inflection
73
74
Spatial
75
Temporal
76
Social
77
Semantic
78
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)
80
Mobile is good at places…
steal this slide!
81
steal this slide!Mobile is good at spatial and temporal relationships.
82
There are currently not many technologiesthat help us understand place, and temporal and spatial relationships. 83
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
86
Design for partial attention and interruption
87
Design for partial attention and interruption
88
Reduce cognitive load and opportunity cost
89
Ideate in the wild…
90
ActivityYour Design Challenge!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
91
Activity
Go outside and brainstorm ideas
92
ActivitySketch your ideas…
93
Mobile is good at places…
steal this slide!
94
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
:
97
98
99
We can annotate expectations in the web world
100
We can annotate expectations in the web world
101
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 apparent102
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
105
steal this slide!
106
GUI = Metaphorics, containment and place
107
Recognition vs. Recall
108
We’re reaching the edges of what GUI can do
109
It’s not longer “what you see is 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 to 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 power136
You win with a good hand137
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!
157
Thank you!Email:[email protected]
The Mobile Frontierwww.rosenfeldmedia.com/books/mobile-
design/
Friday, February 18th
http://www.uxhongkong.com/
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?