mobile ux essentials

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!

Thank you!

Email:rachel.hinman@nokia.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?