mobile user experience: what web designers need to know

130
Rachel Hinman Mobile User Experience What Web Designers Need to Know

Upload: rachel-hinman

Post on 17-Aug-2014

63.948 views

Category:

Design


1 download

DESCRIPTION

Until recently, the mobile internet was a crippled user experience due to product, interface and technical constraints. Recent innovations are causing an inflection point for the mobile internet, enabling new and exciting opportunities for mobile user experience. But how do folks who are well versed in creating PC-based internet experiences begin to engage with mobile? This presentation is designed to help web design professionals answer that question as well as: - Provide insight into how web designers can begin to approach mobile user experiences. - Identify key similarities and differences in designing for PC/mobile experiences. - Provide frameworks and design principles for creating compelling mobile experiences.

TRANSCRIPT

Page 1: Mobile User Experience: What Web Designers Need to Know

Rachel Hinman

What web designers need to know..

Mobile User ExperienceWhat Web Designers Need to Know

Page 2: Mobile User Experience: What Web Designers Need to Know

I used to be a web designer.

I used to be a web designer, too

Page 3: Mobile User Experience: What Web Designers Need to Know

What can we do with mobile?

How can we streamline the checkout process?

How can we streamline the checkout process

Q:

How can we get community on our site?

Q:

What can we do with mobile?

Q:

Page 4: Mobile User Experience: What Web Designers Need to Know

What can we do with mobile?

How can we streamline the checkout process?

How can we streamline the checkout process

Q:

How can we get community on our site?

Q:

What can we do with mobile?

Q:

Page 5: Mobile User Experience: What Web Designers Need to Know

Q: Where do I begin?

Where do I begin

Page 6: Mobile User Experience: What Web Designers Need to Know

Our plan for today…

Our plan for today

Similarities and differences between designing for web and mobile

Page 7: Mobile User Experience: What Web Designers Need to Know

Our plan for today…

Our plan for today

Similarities and differences between designing for web and mobile

Three most important attributes of great mobile experiences

Page 8: Mobile User Experience: What Web Designers Need to Know

Our plan for today…

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

Page 9: Mobile User Experience: What Web Designers Need to Know

Our plan for today…

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

Page 10: Mobile User Experience: What Web Designers Need to Know

Along the way…

Along the way

Slides Worth Keeping

Shameless Opinion

Design Activities

Design Principles

Watch for slides with this orange label!

Page 11: Mobile User Experience: What Web Designers Need to Know

Okay, let’s get started!

Okay… let’s get started

Page 12: Mobile User Experience: What Web Designers Need to Know

A

What are the similarities

What are the similarities?Q:

Page 13: Mobile User Experience: What Web Designers Need to Know

Web designers know how to work in a rapidly evolving field

13

Web designers know how to work in a rapidly evolving field

Page 14: Mobile User Experience: What Web Designers Need to Know

Web designers understand how to create experiences within technical constraints

14

Ability to work within technical constraints

Page 15: Mobile User Experience: What Web Designers Need to Know

Web designers use similar tools and processes

15

Similar Tools… Similar processes

Page 16: Mobile User Experience: What Web Designers Need to Know

A

What are the differences?

Q: What are the differences?

Page 17: Mobile User Experience: What Web Designers Need to Know

A mobile phone is not a computer

17

A mobile phone is not a computer

Page 18: Mobile User Experience: What Web Designers Need to Know

A umm…. duh!

Um… duh!

Page 19: Mobile User Experience: What Web Designers Need to Know

19

Differences in the mobile environment

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

Page 20: Mobile User Experience: What Web Designers Need to Know

20

Differences in the mobile environment

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

Page 21: Mobile User Experience: What Web Designers Need to Know

21

Differences in the mobile environment

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

Page 22: Mobile User Experience: What Web Designers Need to Know

22

Mobile phones started out as a one-to-one

Page 23: Mobile User Experience: What Web Designers Need to Know

They evoloved

23

Page 24: Mobile User Experience: What Web Designers Need to Know

Mobile phones evolved from the landline phone

24

Page 25: Mobile User Experience: What Web Designers Need to Know

25

Smartphone… added

Page 26: Mobile User Experience: What Web Designers Need to Know

26

Smartphone… added 26

Opinion!

Page 27: Mobile User Experience: What Web Designers Need to Know

27

iPhone

Mobile phones aren’t really phones anymore

Page 28: Mobile User Experience: What Web Designers Need to Know

28

Mobile presents an opportunity to invent new ways…

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

Opinion!

Page 29: Mobile User Experience: What Web Designers Need to Know

29

Shift your perspective and point of view

Expert to Explorer

Page 30: Mobile User Experience: What Web Designers Need to Know

30

How?

Understand your assumptions

Page 31: Mobile User Experience: What Web Designers Need to Know

are uniquely mobile1

Great Mobile user experiences

Great Mobile Experiences:

are sympathetic to context2

speak their power3

steal this slide!

Page 32: Mobile User Experience: What Web Designers Need to Know

are uniquely mobile1

Great Mobile user experiences

Great Mobile Experiences:

Page 33: Mobile User Experience: What Web Designers Need to Know

A

Do you remember a time…

Do you remember a time when the web was new?

Q:

Page 34: Mobile User Experience: What Web Designers Need to Know

A

Do you remember a time…

“We need a web presence!”!

Page 35: Mobile User Experience: What Web Designers Need to Know

35

Solution: Brochure - online

Brochureware

Page 36: Mobile User Experience: What Web Designers Need to Know

“we need a web presence”

A“We need online commerce!”!

Page 37: Mobile User Experience: What Web Designers Need to Know

37

Online commerce

What about shipping?

Page 38: Mobile User Experience: What Web Designers Need to Know

A

Make it like the world

A“Let’s make our site like…”!

Page 39: Mobile User Experience: What Web Designers Need to Know

39

Southwest airlines

Page 40: Mobile User Experience: What Web Designers Need to Know

We confused the solution with the need.

What we learned from the web

Lessons Learned from Web

steal this slide!

We borrowed broken models. Too focused on tactics.

We didn’t focus on what the web could do well.

Page 41: Mobile User Experience: What Web Designers Need to Know

A

How do we not do that again?

AHow do we NOT do that again?

Q:

Page 42: Mobile User Experience: What Web Designers Need to Know

Focus on needs instead of tactics and solutions.

What we learned from the web

Design Principles:Uniquely Mobile

Mobile is a different medium - focus on what it can do well.

Don’t get hung up on heuristics and technology - they change rapidly.

steal this slide!

Page 43: Mobile User Experience: What Web Designers Need to Know

Identify your assumptions upfront. Unpack your computer baggage.

1

Three tips for uniquely mobile experiences

Three tips for creating uniquely mobile experiences

Identify the difference betweenneeds and solutions.

2

Focus on what makes mobile unique.3

steal this slide!

Page 44: Mobile User Experience: What Web Designers Need to Know

44

Identify your assumptions

Unpack your computerand mobile baggage…

Activity

Page 45: Mobile User Experience: What Web Designers Need to Know

45

information needs

What are the needs?Activity

What need does this information fill?

Frame it as a question from the perspective of a user.

Page 46: Mobile User Experience: What Web Designers Need to Know

46

Identify information needs

What are the needs?Activity

What need does this information fill?

Frame it as a question from the perspective of a user.

I wonder if this restaurant is popular?What neighborhood is

this place in?

Public Transport?

Page 47: Mobile User Experience: What Web Designers Need to Know

47

Identify information needs

What are the needs?Activity

Page 48: Mobile User Experience: What Web Designers Need to Know

A The web was not a direct translation…

The web was not a direct translation

Page 49: Mobile User Experience: What Web Designers Need to Know

A … mobile won’t be either.

And mobile won’t be either.

Page 50: Mobile User Experience: What Web Designers Need to Know

are uniquely mobile1

Great Mobile user experiences

Great Mobile Experiences:

are sympathetic to context2

Page 51: Mobile User Experience: What Web Designers Need to Know

Pictures of mobile contexts

AWhat exactly do you mean by mobile “context” ?

Q:

Page 52: Mobile User Experience: What Web Designers Need to Know

A

Pictures of mobile contexts

Page 53: Mobile User Experience: What Web Designers Need to Know

More pictures of mobile contexts

Page 54: Mobile User Experience: What Web Designers Need to Know

Social context

Page 55: Mobile User Experience: What Web Designers Need to Know

A

Context is complex

Context is complex!!

Page 56: Mobile User Experience: What Web Designers Need to Know

A

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

Context is about understanding the relationships

Page 57: Mobile User Experience: What Web Designers Need to Know

57

Context Framework

Context Framework steal this slide!

Page 58: Mobile User Experience: What Web Designers Need to Know

58

Context Framework

Context Framework steal this slide!

Page 59: Mobile User Experience: What Web Designers Need to Know

59

Relationships Chording

Orchestration and Inflection

Page 60: Mobile User Experience: What Web Designers Need to Know

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

60

Peanut butter

Page 61: Mobile User Experience: What Web Designers Need to Know

61

Google: Facebook

Spatial

Page 62: Mobile User Experience: What Web Designers Need to Know

62

Temporal

Temporal

Page 63: Mobile User Experience: What Web Designers Need to Know

63

Spatial - peanut butter

Social

Page 64: Mobile User Experience: What Web Designers Need to Know

64

Google: Facebook

Semantic

Page 65: Mobile User Experience: What Web Designers Need to Know

65

Peanut butter in Denver

Peanut butter in Denver right now?

Page 66: Mobile User Experience: What Web Designers Need to Know

A

The web is good at people and things.

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

Context is about understanding the relationships

Page 67: Mobile User Experience: What Web Designers Need to Know

67

Context Framework

Mobile is good at places… steal this slide!

Page 68: Mobile User Experience: What Web Designers Need to Know

68

Context Framework

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

Page 69: Mobile User Experience: What Web Designers Need to Know

69

Google maps - PC vs. Mobile

Page 70: Mobile User Experience: What Web Designers Need to Know

Temporal and spatial relationships are underserved

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

70

Page 71: Mobile User Experience: What Web Designers Need to Know

How do you get that understanding?

How do we get that understanding?

Q:

Page 72: Mobile User Experience: What Web Designers Need to Know

Design for partial attention and interruption

1

Sympathy to context principles

Design Principles:Sympathy to Context

Reduce cognitive load and opportunity cost

2

steal this slide!

Ideate in the wild3

Page 73: Mobile User Experience: What Web Designers Need to Know

73

Text entry will never be easy

Design for partial attention and interruption

Page 74: Mobile User Experience: What Web Designers Need to Know

74

Wand in the world

ActivityGet sympathetic to the mobile context…

Page 75: Mobile User Experience: What Web Designers Need to Know

75

“in the wild” ideation

Activity

The Kate Rutter Wand in the World Activity

Page 76: Mobile User Experience: What Web Designers Need to Know

76

“in the wild” ideation

Activity

Page 77: Mobile User Experience: What Web Designers Need to Know

77

“in the wild” ideation

ActivityThen ideate…

Page 78: Mobile User Experience: What Web Designers Need to Know

78

“in the wild” ideation

ActivityThen ideate…

Page 79: Mobile User Experience: What Web Designers Need to Know

are uniquely mobile1

Great Mobile user experiences

Great Mobile Experiences:

are sympathetic to context2

speak their power3

Page 80: Mobile User Experience: What Web Designers Need to Know

Speak their power?

AHuh?Q:

Page 81: Mobile User Experience: What Web Designers Need to Know

A light switch

81

Page 82: Mobile User Experience: What Web Designers Need to Know

Shopping cart

82

Page 83: Mobile User Experience: What Web Designers Need to Know

Shopping cart

83

Page 84: Mobile User Experience: What Web Designers Need to Know

We can annotate expectations in the web world

84

We can annotate expectations in the web world

Page 85: Mobile User Experience: What Web Designers Need to Know

We can annotate expectations in the web world

85

We can annotate expectations in the web world

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

Page 86: Mobile User Experience: What Web Designers Need to Know

Options in mobile have to be readily apparent

86

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

Page 87: Mobile User Experience: What Web Designers Need to Know

How do you make interfaces that speak their power

AHow do I create mobile interfaces that “speak their power”?

Q:

Page 88: Mobile User Experience: What Web Designers Need to Know

Say good bye to done

Say good-bye to “done”.1

Design Principles:Interfaces that speak their power

steal this slide!

Think possibilities, not tasks.2

Dismantle the page metaphor. Boulders to pebbles.

3

Page 89: Mobile User Experience: What Web Designers Need to Know

89

Wireframe

This should look familiar…

Page 90: Mobile User Experience: What Web Designers Need to Know

90

Wireframe

This should look familiar…

Page 91: Mobile User Experience: What Web Designers Need to Know

91

Wireframe

This should look familiar…

The web has evolved around a task-efficiency model.

Mobile is different.

Page 92: Mobile User Experience: What Web Designers Need to Know

92

Mobile is different

Mobile is different….

Page 93: Mobile User Experience: What Web Designers Need to Know

93

Mobile is different

Mobile is different….

Page 94: Mobile User Experience: What Web Designers Need to Know

94

Mobile is different

Mobile is different….

Mobile is about pivoting people through information quickly.

It’s about exposing possibilities.

Page 95: Mobile User Experience: What Web Designers Need to Know

What’s the point?

“What’s the point?” “What can happen?”

TASK POSSIBILITIES

Page 96: Mobile User Experience: What Web Designers Need to Know

96

Tasks are about completion

Tasks are about completion…

Page 97: Mobile User Experience: What Web Designers Need to Know

97

Tasks are about completion

Tasks are about completion…

Possibilities are interactions that accrue over time…

Page 98: Mobile User Experience: What Web Designers Need to Know

… or facilitate exploration…

98

Tasks are about completion

Tasks are about completion…

Possibilities are interactions that accrue over time…

Page 99: Mobile User Experience: What Web Designers Need to Know

… or facilitate exploration…

99

Tasks are about completion

Tasks are about completion…

Possibilities are interactions that accrue over time…

..or are about SENSING

INTENT!

Page 100: Mobile User Experience: What Web Designers Need to Know

100

Example -

Page 101: Mobile User Experience: What Web Designers Need to Know

101

Example -

Page 102: Mobile User Experience: What Web Designers Need to Know

102

Example -

Page 103: Mobile User Experience: What Web Designers Need to Know

103

Example -

Page 104: Mobile User Experience: What Web Designers Need to Know

104

Example -

Page 105: Mobile User Experience: What Web Designers Need to Know

105

Example -

Page 106: Mobile User Experience: What Web Designers Need to Know

How do you make interfaces that speak their power

AHow do I design for possibilities?

Q:

Page 107: Mobile User Experience: What Web Designers Need to Know

How do you make interfaces that speak their power

A

107

Page 108: Mobile User Experience: What Web Designers Need to Know

How do you make interfaces that speak their power

A

108

Page 109: Mobile User Experience: What Web Designers Need to Know

How do you make interfaces that speak their power

A

109

Page 110: Mobile User Experience: What Web Designers Need to Know

It’s like a card game…110

It’s like a game of cards

Page 111: Mobile User Experience: What Web Designers Need to Know

Each card speaks it’s power111

It’s like a game of cards

Page 112: Mobile User Experience: What Web Designers Need to Know

You win with a good hand112

It’s like a game of cards

Page 113: Mobile User Experience: What Web Designers Need to Know

Pivoting people through information

113

ActivityCreate a winning hand.

Page 114: Mobile User Experience: What Web Designers Need to Know

Pivoting people through information

114

Page 115: Mobile User Experience: What Web Designers Need to Know

Pivoting people through information

115

ActivityCreate a winning hand.

Page 116: Mobile User Experience: What Web Designers Need to Know

Pivoting people through information

116

ActivityCreate a winning hand.

Allow people to pivot through information quickly

Stitch cards together to answer the question

Page 117: Mobile User Experience: What Web Designers Need to Know

117

Prototype

PrototypePrototypePrototypePrototypePrototypePrototype

Page 118: Mobile User Experience: What Web Designers Need to Know

118

Can users grok it?

Can users grok it?

Does each card speak it’s power?

Can I simplify this?

Is this intuitive?

Q:

Q:

Q:

Q:

Page 119: Mobile User Experience: What Web Designers Need to Know

119

Analogy of cards

Prototyping “Swirl”Process

Page 120: Mobile User Experience: What Web Designers Need to Know

120

Analogy of cards

Plan for a lot of it!1

Tips for mobile prototypingsteal this slide!

Work at scale and print it out!2

Get it on the device as soon as you can.

2

Page 121: Mobile User Experience: What Web Designers Need to Know

121

Analogy of cards

Prototype at every stageProcess

Page 122: Mobile User Experience: What Web Designers Need to Know

Paper Prototype example

122

Page 123: Mobile User Experience: What Web Designers Need to Know

High fidelity prototype example

Page 124: Mobile User Experience: What Web Designers Need to Know

Where do I begin?

Q: Where do I begin?

Page 125: Mobile User Experience: What Web Designers Need to Know

are uniquely mobile1

Great Mobile user experiences

Great Mobile Experiences:

are sympathetic to context2

speak their power3

steal this slide!

Page 126: Mobile User Experience: What Web Designers Need to Know

Everybody starts somewhere

Everybody starts somewhere….

Page 127: Mobile User Experience: What Web Designers Need to Know

Good luck

Good luck!

Page 128: Mobile User Experience: What Web Designers Need to Know

Thank you!

[email protected]

Thanks, and next up…

Page 129: Mobile User Experience: What Web Designers Need to Know

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

RESOURCES

Page 130: Mobile User Experience: What Web Designers Need to Know

Q?

Q&A: final break