mobile prototyping essentials workshop - part one

128
Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Hinman Part I Mobile Prototyping Essentials

Upload: rachel-hinman

Post on 17-Aug-2014

8.256 views

Category:

Design


0 download

DESCRIPTION

Mobile prototyping essentials workshop with Rosenfeld Media - May 24th

TRANSCRIPT

Page 1: Mobile Prototyping Essentials Workshop - Part One

Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA

Hinman

Part IMobile Prototyping

Essentials

Page 2: Mobile Prototyping Essentials Workshop - Part One

2004

Page 3: Mobile Prototyping Essentials Workshop - Part One

Q: Where do I begin?

Page 4: Mobile Prototyping Essentials Workshop - Part One

Q:

What can we do with mobile?

Q:

Page 5: Mobile Prototyping Essentials Workshop - Part One

Q: Where do I begin?

Page 6: Mobile Prototyping Essentials Workshop - Part One

Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild• Creating a Good Hand

1:30pm – 5:30pmMobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype

Noon – 1:30pm - LUNCH

Page 7: Mobile Prototyping Essentials Workshop - Part One

8:30am - Noon

What makes mobile UX different?Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences

A set of mobile design principles

Three mobile design activities

Page 8: Mobile Prototyping Essentials Workshop - Part One

8:30am - Noon

What makes mobile UX different?Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences

A set of mobile design principles

Three mobile design activities

Page 9: Mobile Prototyping Essentials Workshop - Part One

8:30am - Noon

What makes mobile UX different?Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences

A set of mobile design principles

Three mobile design activities

Page 10: Mobile Prototyping Essentials Workshop - Part One

8:30am - Noon

What makes mobile UX different?Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences

A set of mobile design principles

Three mobile design activities

Page 11: Mobile Prototyping Essentials Workshop - Part One

Okay, let’s get started!

Page 12: Mobile Prototyping Essentials Workshop - Part One

A What are the similarities?

Q:

Page 13: Mobile Prototyping Essentials Workshop - Part One

UX designers know how to work in a rapidly evolving field

13

Page 14: Mobile Prototyping Essentials Workshop - Part One

UX designers understand how to create experiences within technical

constraints14

Page 15: Mobile Prototyping Essentials Workshop - Part One

UX designers use similar

tools and processes15

Page 16: Mobile Prototyping Essentials Workshop - Part One

AQ: What are the

differences?Q:

Page 17: Mobile Prototyping Essentials Workshop - Part One

A mobile phone is not a computer

17

Page 18: Mobile Prototyping Essentials Workshop - Part One

A umm…. duh!

Page 19: Mobile Prototyping Essentials Workshop - Part One

19

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

Page 20: Mobile Prototyping Essentials Workshop - Part One

20

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

Page 21: Mobile Prototyping Essentials Workshop - Part One

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

Page 22: Mobile Prototyping Essentials Workshop - Part One

22

Page 23: Mobile Prototyping Essentials Workshop - Part One

23

Page 24: Mobile Prototyping Essentials Workshop - Part One

24

Page 25: Mobile Prototyping Essentials Workshop - Part One
Page 26: Mobile Prototyping Essentials Workshop - Part One

26

Page 27: Mobile Prototyping Essentials Workshop - Part One

2727

Opinion!

Page 28: Mobile Prototyping Essentials Workshop - Part One

The Rearview Mirror Effect

Page 29: Mobile Prototyping Essentials Workshop - Part One

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.”

Page 30: Mobile Prototyping Essentials Workshop - Part One

30

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

Opinion!

Page 31: Mobile Prototyping Essentials Workshop - Part One

31

Mobile phones aren’t really phones anymore

Page 32: Mobile Prototyping Essentials Workshop - Part One
Page 33: Mobile Prototyping Essentials Workshop - Part One
Page 34: Mobile Prototyping Essentials Workshop - Part One
Page 35: Mobile Prototyping Essentials Workshop - Part One
Page 36: Mobile Prototyping Essentials Workshop - Part One

A What’s the first step?Q:

Page 37: Mobile Prototyping Essentials Workshop - Part One

3Steps

37

Page 38: Mobile Prototyping Essentials Workshop - Part One

38

Step One: Become familiar with the medium you’re designing for

Page 39: Mobile Prototyping Essentials Workshop - Part One

39

NO EXCUSES!

Buy a modern mobile device

Page 40: Mobile Prototyping Essentials Workshop - Part One

40

Step Two: Mobile culture indoctrination

Page 41: Mobile Prototyping Essentials Workshop - Part One

41

Images needed

Observe the culture you’re designing for

Page 42: Mobile Prototyping Essentials Workshop - Part One

42

Step Three: Brace yourself for a fast and exciting ride

Page 43: Mobile Prototyping Essentials Workshop - Part One

43

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

Page 44: Mobile Prototyping Essentials Workshop - Part One

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

Page 45: Mobile Prototyping Essentials Workshop - Part One

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

Page 46: Mobile Prototyping Essentials Workshop - Part One

ADo you remember a time when the web was new?

Q:

Page 47: Mobile Prototyping Essentials Workshop - Part One

A“We need a web presence!”

!

Page 48: Mobile Prototyping Essentials Workshop - Part One

48

Brochureware

Page 49: Mobile Prototyping Essentials Workshop - Part One

A“We need online commerce!”

!

Page 50: Mobile Prototyping Essentials Workshop - Part One

50

What about shipping?

Page 51: Mobile Prototyping Essentials Workshop - Part One

AA“Let’s make our site like…”

!

Page 52: Mobile Prototyping Essentials Workshop - Part One

52

Page 53: Mobile Prototyping Essentials Workshop - Part One

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.

Page 54: Mobile Prototyping Essentials Workshop - Part One

AAHow do we NOT do that again?

Q:

Page 55: Mobile Prototyping Essentials Workshop - Part One

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!

Page 56: Mobile Prototyping Essentials Workshop - Part One

VS.

Page 57: Mobile Prototyping Essentials Workshop - Part One

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

Page 58: Mobile Prototyping Essentials Workshop - Part One

58

vs

Page 59: Mobile Prototyping Essentials Workshop - Part One

59

vs

Page 60: Mobile Prototyping Essentials Workshop - Part One

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

Page 61: Mobile Prototyping Essentials Workshop - Part One

Design Principle: Uniquely Mobile Need vs. Solution

Page 62: Mobile Prototyping Essentials Workshop - Part One

62

Research Techniques

Diary Studies

Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation Study

OnlineSurvey

Shop Alongs

Prototype Testing

TrafficStudies

Shadowing

Page 63: Mobile Prototyping Essentials Workshop - Part One

63

Research Techniques

Diary Studies

Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation Study

OnlineSurvey

Shop Alongs

Prototype Testing

TrafficStudies

Shadowing

Use Two Techniques

Page 64: Mobile Prototyping Essentials Workshop - Part One

64

Solution Speak…Solution NeedDatabase of Dr. Names Find a Doctor near meMap Get from point A to Point BCalendar I need to know what may happenEmail I need to communicateFacebook Updates I need to feel connectedLinkedIn I need to manage my identitySearch I need to answer a questionPicassa I need to share

Page 65: Mobile Prototyping Essentials Workshop - Part One

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

Page 66: Mobile Prototyping Essentials Workshop - Part One

AWhat exactly do you mean by mobile “context” ?

Q:

Page 67: Mobile Prototyping Essentials Workshop - Part One

A

Page 68: Mobile Prototyping Essentials Workshop - Part One
Page 69: Mobile Prototyping Essentials Workshop - Part One
Page 70: Mobile Prototyping Essentials Workshop - Part One

AContext is complex!!

Page 71: Mobile Prototyping Essentials Workshop - Part One

A

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

Page 72: Mobile Prototyping Essentials Workshop - Part One

72

Context Framework steal this slide!

Page 73: Mobile Prototyping Essentials Workshop - Part One

73

Context Framework steal this slide!

Page 74: Mobile Prototyping Essentials Workshop - Part One

74

Orchestration and Inflection

Page 75: Mobile Prototyping Essentials Workshop - Part One

75

Page 76: Mobile Prototyping Essentials Workshop - Part One

76

Spatial

Page 77: Mobile Prototyping Essentials Workshop - Part One

77

Temporal

Page 78: Mobile Prototyping Essentials Workshop - Part One

78

Social

Page 79: Mobile Prototyping Essentials Workshop - Part One

79

Semantic

Page 80: Mobile Prototyping Essentials Workshop - Part One

80

Peanut butter in Melbourne right now?

Page 81: Mobile Prototyping Essentials Workshop - Part One

A

The web is good at people and things.

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

Page 82: Mobile Prototyping Essentials Workshop - Part One

82

Mobile is good at places…

Page 83: Mobile Prototyping Essentials Workshop - Part One

83

Mobile is good at spatial and temporal relationships.

Page 84: Mobile Prototyping Essentials Workshop - Part One

84

Page 85: Mobile Prototyping Essentials Workshop - Part One

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

85

Page 86: Mobile Prototyping Essentials Workshop - Part One

How do we get that understanding?

Q:

Page 87: Mobile Prototyping Essentials Workshop - Part One

Design for partial attention and interruption

Design Principles:Sympathy to Context

Reduce cognitive load and opportunity cost

steal this slide!

Ideate in the wild

Page 88: Mobile Prototyping Essentials Workshop - Part One

88

Design for partial attention and interruption

Page 89: Mobile Prototyping Essentials Workshop - Part One

89

Design for partial attention and interruption

Page 90: Mobile Prototyping Essentials Workshop - Part One

90

Cognitive Load

Page 91: Mobile Prototyping Essentials Workshop - Part One

91

Opportunity cost

Page 92: Mobile Prototyping Essentials Workshop - Part One

92

Ideate in the wild…

Page 93: Mobile Prototyping Essentials Workshop - Part One

93

Your Design Challenge! Activity

How might Starbucks use mobile devices to improve their customer

experience?

Page 94: Mobile Prototyping Essentials Workshop - Part One

94

Your Design Challenge!Step 1: Identifying Needs

Activity

1. Divide into groups2. Head to the nearest

Starbucks.3. Develop a list of

customer needs based on your observations using the needs worksheet.

25 Minutes

Page 95: Mobile Prototyping Essentials Workshop - Part One

95

Activity

Go outside and brainstorm ideas

Page 96: Mobile Prototyping Essentials Workshop - Part One

96

ActivityYour Design Challenge!Step 2: Sympathy to the mobile context

1. Head to the streets

2. Ideate in the wild – Create 2-3 concepts based on the needs your team identified

25 Minutes

Page 97: Mobile Prototyping Essentials Workshop - Part One

97

Activity25 Minutes

Page 98: Mobile Prototyping Essentials Workshop - Part One

98

Activity

Page 99: Mobile Prototyping Essentials Workshop - Part One

99

Mobile is good at places…

Page 100: Mobile Prototyping Essentials Workshop - Part One

100

Mobile is good at places…

Page 101: Mobile Prototyping Essentials Workshop - Part One

101

One Hour!

Page 102: Mobile Prototyping Essentials Workshop - Part One

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

Page 103: Mobile Prototyping Essentials Workshop - Part One

AHuh?Q

:

Page 104: Mobile Prototyping Essentials Workshop - Part One

104

Page 105: Mobile Prototyping Essentials Workshop - Part One

105

Page 106: Mobile Prototyping Essentials Workshop - Part One

106

Page 107: Mobile Prototyping Essentials Workshop - Part One

107

We can annotate expectations in the web world

Page 108: Mobile Prototyping Essentials Workshop - Part One

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

108

Page 109: Mobile Prototyping Essentials Workshop - Part One

109

Page 110: Mobile Prototyping Essentials Workshop - Part One

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

Q:

Page 111: Mobile Prototyping Essentials Workshop - Part One

Edit!!!

111

Page 112: Mobile Prototyping Essentials Workshop - Part One

RuthlessEditing

112

Page 113: Mobile Prototyping Essentials Workshop - Part One

“We made the web in the image of ourselves, and in the U.S., that means OBESE.”

~Jason Grigsby

Page 114: Mobile Prototyping Essentials Workshop - Part One

A

114

Page 115: Mobile Prototyping Essentials Workshop - Part One

115

Page 116: Mobile Prototyping Essentials Workshop - Part One

A

116

Page 117: Mobile Prototyping Essentials Workshop - Part One

A

117

Page 118: Mobile Prototyping Essentials Workshop - Part One

A

118

Page 119: Mobile Prototyping Essentials Workshop - Part One

Josh Clark Example119

Page 120: Mobile Prototyping Essentials Workshop - Part One

Josh Clark Example120

Page 121: Mobile Prototyping Essentials Workshop - Part One

Historically, we start with structure…

Page 122: Mobile Prototyping Essentials Workshop - Part One

Try hiding the structure…

Page 123: Mobile Prototyping Essentials Workshop - Part One

Try starting with intuition.

Page 124: Mobile Prototyping Essentials Workshop - Part One

It’s like a card game…124

Page 125: Mobile Prototyping Essentials Workshop - Part One

Each card speaks it’s power125

Page 126: Mobile Prototyping Essentials Workshop - Part One

You win with a good hand126

Page 127: Mobile Prototyping Essentials Workshop - Part One

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

Page 128: Mobile Prototyping Essentials Workshop - Part One

LUNCH!12 – 1pm