mobile ux essentials - silicon valley ixda/baychi

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

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?