Mobile User Experience

What Web Designers Need to Know

Rachel Hinman

I used to be a web designer.

Q:

How can we streamline the checkout process? How can we get community on our site?

Q:

Q:

What can we do with mobile?

How can we streamline the checkout process

Q:

How can we streamline the checkout process? How can we get community on our site?

Q:

Q:

What can we do with mobile?

How can we streamline the checkout process

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 mobile Three most important attributes of great mobile experiences

Our plan for today

Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles

Our plan for today

Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles Three mobile design activities

Along the way

Slides Worth Keeping Design Principles Design Activities

Shameless Opinion

Okay, lets get started!

A Q:

What are the similarities?

Web designers know how to work in a rapidly evolving field

13

Web designers understand how to create experiences within technical constraints

14

Web designers use similar tools and processes

15

Q: A

What are the differences?

A mobile phone is not a computer

17

umm. duh!

Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input

19

Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input

20

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

23

24

25

26 26

Mobile phones arent really phones anymore

27

Mobile presents an opportunity to invent new ways for users to interact with information.

28

Expert to Explorer
29

Understand your assumptions

30

Great Mobile Experiences: 1 are uniquely mobile

2 are sympathetic to context

3 speak their power

Great Mobile Experiences: 1 are uniquely mobile

Q: A

Do you remember a time when the web was new?

! A

We need a web presence!

Brochureware
35

! A

We need online commerce!

What about shipping?

37

! A

Lets make our site like

39

Lessons Learned from Web

We borrowed broken models. Too focused on tactics. We confused the solution with the need.

We didnt focus on what the web could do well.

Q: A

How do we NOT do that again?

Design Principles:
Uniquely Mobile
Mobile is a different medium - focus on what it can do well.
Focus on needs instead of tactics and solutions.

Dont get hung up on heuristics and technology - they change rapidly.

Three tips for creating uniquely mobile experiences

Identify your assumptions upfront. Unpack your computer baggage.

2 3

Identify the difference between needs and solutions.

Focus on what makes mobile unique.

Unpack your computer and mobile baggage

44

What are the needs?

What need does this information fill? Frame it as a question from the perspective of a user.

45

What are the needs?

What need does this information fill? Frame it as a question from the perspective of a user.

Public Transport? What neighborhood is this place in? I wonder if this restaurant is popular?
46

What are the needs?

47

The web was not a direct translation

mobile wont be either.

Great Mobile Experiences: 1 are uniquely mobile

2 are sympathetic to context

Q: A

What exactly do you mean by mobile context ?

! A

Context is complex!

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

Context Framework

57

Context Framework

58

Orchestration and Inflection

59

QuickTime and a TIFF (LZW) decompresso r are neede d to see this picture.

60

Spatial
61

Temporal
62

Social
63

Semantic
64

Peanut butter in Denver right now?

65

The web is good at people and things. The web is good at semantic relationships.
(and okay at social relationships)

Mobile is good at places

67

Mobile is good at spatial and temporal relationships.

68

69

There are currently not many technologies that help us understand place, and temporal and spatial relationships.

70

Q:

How do we get that understanding?

Design Principles:
Sympathy to Context

1 Design for partial attention

and interruption

2 Reduce cognitive load

and opportunity cost

3 Ideate in the wild

Design for partial attention and interruption

73

Get sympathetic to the mobile context

74

The Kate Rutter Wand in the World Activity

75

76

Then ideate

77

Then ideate

78

Great Mobile Experiences: 1 are uniquely mobile

2 are sympathetic to context

3 speak their power

Q: A

Huh?

81

82

83

We can annotate expectations in the web world

84

Look inside the book Add to cart Shipping!

Free two-day shipping

REALLY! Look inside the book

Get it new OR used!

Collectible! Sell mine

Maybe a kindle!

We can annotate expectations in the web world

85

Options in mobile have to be readily apparent

86

Q: A

How do I create mobile interfaces that speak their power?

Design Principles:
Interfaces that speak their power

1 Say good-bye to done.

2 Think possibilities, not tasks.

3 Dismantle the page metaphor.
Boulders to pebbles.

This should look familiar

89

This should look familiar

90

This should look familiar

The web has evolved around a task-efficiency model. Mobile is different.

91

Mobile is different.

92

Mobile is different.

93

Mobile is different.
Mobile is about pivoting people through information quickly. Its about exposing possibilities.

94

Whats the point?

What can happen?

TASK

POSSIBILITIES

Tasks are about completion

96

Tasks are about completion

Possibilities are interactions that accrue over time

97

Tasks are about completion

Possibilities are interactions that accrue over time

or facilitate exploration
98

Tasks are about completion

Possibilities are interactions that accrue over time

or facilitate exploration

..or are about SENSING INTENT!

99

100

101

102

103

104

105

Q: A

How do I design for possibilities?

107

108

109

Its like a card game

110

Each card speaks its power

111

You win with a good hand

112

Create a winning hand.

113

114

Create a winning hand.

115

Create a winning hand.

Stitch cards together to answer the question Allow people to pivot through information quickly

116

Prototype Prototype Prototype Prototype Prototype Prototype

117

Q:

Can users grok it? Does each card speak its power? Can I simplify this? Is this intuitive?
118

Q:

Q:

Q:

Prototyping Swirl

119

Tips for mobile prototyping

1 Plan for a lot of it!

2 Work at scale and print it out!

2 Get it on the device as soon
as you can.
120

Prototype at every stage

121

122

Q:

Where do I begin?

Great Mobile Experiences: 1 are uniquely mobile

2 are sympathetic to context

3 speak their power

Everybody starts somewhere.

Good luck!

Thank you!
hinman@adaptivepath.com

Resources:
MOBILE RESOURCES Ultimate iPhone Stencil for Omnigraffle http://graffletopia.com/stencils/413 mooTools http://mootools.net

iUI 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 mobile http://tinyurl.com/6m7kwc

Q?