Mobile UX Essentials - Silicon Valley IxDA/BayChi

Mobile UX EssentialsSilicon Valley IxDA
Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Title

Where do I begin?
Q:
Where do I begin

What can we do with mobile?
Q:
Q:

Where do I begin?
Q:
Where do I begin

Our plan for today…
Our plan for today
Similarities and differences between designing for the PC and mobile

Our plan for today
Three most important attributes of great mobile experiences

Our plan for today
A set of mobile design principles

Our plan for today
A set of mobile design principles
Mobile design activities

Along the way…
Along the way
Watch for slides with this orange label!
Slides Worth Keeping
Design Principles
Design Activities
Shameless Opinion

Okay, let’s get started!
Okay… let’s get started

A
What are the similarities
What are the similarities?
Q:

UX designers know how to work
in a rapidly evolving field
13
Web designers know how to work in a rapidly evolving field

UX designers understand how to create experiences within technical constraints
14
Ability to work within technical constraints

UX designers use similar tools and processes
15
Similar Tools… Similar processes

What are the differences?
A
Q:

A mobile phone is not a computer
17
A mobile phone is not a computer

umm…. duh!
A
Um… duh!

19
Differences in the mobile environment
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

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
21

22
Mobile phones started out as a one-to-one

They evolved
23

Mobile phones evolved from the landline phone
24

26
Smartphone… added

27
Smartphone… added
Opinion!
27

The Rearview Mirror

Hypothesis vs. Agenda
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 presents an opportunity to invent new ways…
Opinion!
Mobile UX presents you with the opportunity to invent new ways for people to interact with information.

31
iPhone
Mobile phones aren’t really phones anymore

Work outside the contours
of your own assumptions

What’s the first step?
A
Q:

36
Shift your perspective and point of view
Step One: Know the medium you’re designing for

37
NO EXCUSES!
Buy a modern mobile device

38
Step Two: Participate in the cultureyou are designing for

39
Images needed
Cultivate mobile “mindfulness”

40
Step Three: Embrace the chaos

“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
Rapid Evolution
41

1
are uniquely mobile
Great Mobile user experiences
steal this slide!
Great Mobile Experiences:
2
are sympathetic to context
3
speak their power

1
are uniquely mobile

Do you remember a time…
Do you remember a time when the web was new?
Q:
A

Do you remember a time…
“We need a web presence!”
!
A

46
Solution: Brochure - online
Brochureware

“we need a web presence”
“We need online commerce!”
!
A

48
Online commerce
What about shipping?

Make it like the world
“Let’s make our site like…”
!
A
A

50
Southwest airlines

What we learned from the web
Lessons Learned from Web
We borrowed broken models. Too focused on tactics.
We confused the solution with the need.
We didn’t focus on what the web could do well.

How do we not do that again?
How do we NOT do that again?
Q:
A
A

steal this slide!
Design PrinciplesUniquely Mobile
Mobile is a unique & different medium- focus on what it can do well.
Technology can guide, but should not be the focus.
Focus on needs instead of tactics and solutions.

Design Principle: Uniquely Mobile Focus on what mobile can do well

vs
56
Identify your assumptions

57
vs

Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus

Design Principle: Uniquely Mobile Need vs. Solution

Research Techniques
INVASIVE
Prototype
Testing
Deprivation
Study
Contextual
interviews
Diary Studies
RESEARCHER
PRESENT
RESEARCHER
NOT PRESENT
Online
Survey
Shadowing
Shop Alongs
Traffic
Studies
LESS INVASIVE
60

Research Techniques
INVASIVE
Prototype
Testing
Deprivation
Study
Use Two Techniques
Contextual
interviews
Diary Studies
RESEARCHER
PRESENT
RESEARCHER
NOT PRESENT
Online
Survey
Shadowing
Shop Alongs
Traffic
Studies
LESS INVASIVE
61

Research Techniques
INVASIVE
Prototype
Testing
Deprivation
Study
Contextual
interviews
Diary Studies
RESEARCHER
PRESENT
RESEARCHER
NOT PRESENT
Online
Survey
Shadowing
Shop Alongs
Traffic
Studies
LESS INVASIVE
62

are uniquely mobile
1
2

Pictures of mobile contexts
What exactly do you mean by mobile “context” ?
Q:
A

Pictures of mobile contexts
A

More pictures of mobile contexts

Social context

Context is complex
Context is complex!
!
A

Context is about understanding human relationships to the people,places and things in the world.
A
Context is about understanding the relationships

70
Context Framework
Context Framework
steal this slide!

71
Context Framework
Context Framework
steal this slide!

72
Relationships Chording
Orchestration and Inflection

73
Peanut butter

74
Google: Facebook
Spatial

75
Temporal
Temporal

Spatial - peanut butter
Social
76

Google: Facebook
Semantic
77

78
Peanut butter in Denver
Peanut butter in Melbourne right now?

The web is good at people and things.
The web is good at semantic relationships.
(and okay at social relationships)
A
Context is about understanding the relationships

Context Framework
Mobile is good at places…
steal this slide!
80

Context Framework
Mobile is good at spatial and temporal relationships.
steal this slide!
81

82
Google maps - PC vs. Mobile

Temporal and spatial relationships are underserved
There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.
83

How do you get that understanding?
How do we get that understanding?
Q:

Design for partial attention and interruption
1
Sympathy to context principles
Design Principles:
Sympathy to Context
steal this slide!
2
Reduce cognitive load and opportunity cost
3
Ideate in the wild

86
Text entry will never be easy

87

Reduce cognitive load and opportunity cost
88

89
Ideate in the wild…

90
Wand in the world
Your Design Challenge!
Sympathy to the mobile context
Activity
Divide into groups
Head to the streets
Ideate in the wild – Create 2-3 concepts based on the needs your team identified

91
“in the wild” ideation
Activity
Go outside and brainstorm ideas

92
“in the wild” ideation
Activity
Sketch your ideas…

Context Framework
steal this slide!
93

Context Framework
steal this slide!
94

are uniquely mobile
1
2
speak their power
3

Speak their power?
Huh?
Q:
A

A light switch
97

Shopping cart
98

Shopping cart
99

We can annotate expectations in the web world
100

Free two-day shipping
Look inside the book
REALLY!Look inside the book
Get it new OR used!
Sell mine
Add to cart
Shipping!
Collectible!
Maybe a kindle!
101

Options in mobile have to be readily apparent
102
Options have to be apparent and intuitive in mobile for people to

How do you make interfaces that speak their power
How do I create mobile interfaces that “speak their power”?
Q:
A

Say good bye to done
steal this slide!
Design Principles:
Interfaces that speak their power
Understand the characteristics of GUI, NUI, OUI interfaces
1
2
Grow ruthless editing skills
3
Say good-bye to done

steal this slide!
105
Wireframe

106
Wireframe
GUI = Metaphorics, containment and place

107
Wireframe
Recognition vs. Recall

108
Wireframe
We’re reaching the edges of what GUI can do

109
Wireframe
It’s not longer “what you see is what you get…”

110
Wireframe
…now it’s “what you do is what you get”

111
Wireframe
Different platforms express characteristics differently

112
Wireframe
steal this slide!

113
Wireframe
Ruthless editing is part of the NUI design process

Say Goodbye to done
114
Wireframe

This should look familiar…
115
Wireframe

116
Wireframe
This should look familiar…
The web has evolved around a task-efficiency model.
Mobile is different.

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?”
“What’s the point?”
TASK
POSSIBILITIES

Tasks are about completion…
121
Tasks are about completion

122
Possibilities are interactions that accrue over time…

… or facilitate exploration…
123

… or facilitate exploration…
124
..or are about SENSING
INTENT!

125
Example -

126
Example -

127
Example -

128
Example -

129
Example -

130
Example -

How do I design for possibilities?
Q:
A

A
132

A
133

A
134

It’s like a card game…
135
It’s like a game of cards

Each card speaks it’s power
136

You win with a good hand
137

Pivoting people through information
Your Design Challenge!
Step 3: Creating a good hand
Activity
138

139

Create a winning hand.
Activity
140

Create a winning hand.
Activity
Stitch cards together to answer the question
Allow people to pivot through information quickly
141

Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
142
Prototype

143
Analogy of cards
Process
Prototype at every stage

144
Analogy of cards
Process
Prototyping “Swirl”

145

146

Paper Prototype example
147

148

High fidelity prototype example

Can users grok it?
Can users grok it?
Does each screen speak it’s power?
Can I simplify this?
Is this intuitive?
Q:
Q:
Q:
Q:
150

Analogy of cards
steal this slide!
Tips for mobile prototyping
Plan for a lot of it!
1
Work at scale and print it out!
2
Get it on the device as soon as you can.
2
151

Analogy of cards
Some info about mobile web/ and app programming:
iPhone Apps = Xcode
1
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
152

Where do I begin?
Where do I begin?
Q:

are uniquely mobile
1
steal this slide!
2
speak their power
3

Everybody starts somewhere
Everybody starts somewhere….

Good luck
Good luck!

Thank you!
Email:
rachel.hinman@nokia.com
The Mobile Frontier
www.rosenfeldmedia.com/books/mobile-design/
Friday, February 18th
http://www.uxhongkong.com/
157

Resources:
MOBILE RESOURCESUltimate 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
RESOURCES

Q?
Q&A: final break

http://smallsurfaces.com	1403
http://www.baychi.org	688
http://www.smallsurfaces.com	456
http://howiechang.com	243
http://blog.i2fly.com	239
http://whos.blogs.ua.sapo.pt	173
http://mobilegui.net	136
http://greatmobileux.com	113
http://www.inventinginteractive.com	97
http://www.dmolsen.com	79
http://lieveld.nl	79
http://thomas-yung.posterous.com	72
http://thenokiareview.com	64
http://getdonovan.com	48
http://paper.li	18
http://innovation-synergy-groups.blogspot.com	17
http://blogs.ua.sapo.pt	16
http://www.felgner.ch	16
http://campusphere.de	14
http://stats.ilicco.com	10
http://ogilvyux.posterous.com	7
http://felgner.ch	7
http://edicolaeuropea.blogspot.com	6
http://posterous.com	6
http://translate.googleusercontent.com	5
http://safe.tumblr.com	5
http://ergonomilk.com	5
https://ymodules.yammer.com	5
http://static.slidesharecdn.com	4
http://www.techgig.com	3
http://us-w1.rockmelt.com	2
http://ame.posterous.com	2
http://uxchat.posterous.com	2
http://zootool.com	1
http://www.google.dk	1
http://www.linkedin.com	1
http://honyaku.yahoofs.jp	1
http://g4e.posterous.com	1
http://www.netvibes.com	1
https://p.yammer.com	1
http://fanyi.youdao.com	1
http://www.slideshare.net	1
http://feeds.feedburner.com	1
http://jdonovan.tumblr.com	1
http://webcache.googleusercontent.com	1
http://storify.com	1
http://innovation-synergy-groups.blogspot.fr	1

Mobile UX Essentials - Silicon Valley IxDA/BayChi

by Rachel Hinman on Jan 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

47 Embeds 4,054

Statistics

Mobile UX Essentials - Silicon Valley IxDA/BayChi — Presentation Transcript