mobile prototyping essentials workshop: part 1

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

Hinman

Part I

Mobile Prototyping Essentials

2004

Q: Where do I begin?

Q:

What can we do with mobile?

Q:

Q: Where do I begin?

Our plan for today…8:30am - Noon

What makes mobile UX different?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild

1:30pm – 5:30pm

Mobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype

Noon – 1:30pm - LUNCH

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

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

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

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

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?

Q:

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 Effect

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 presents an

opportunity to invent new ways for users to interact with information.

Opinion!

31

Mobile phones aren’t really phones anymore

A What’s the first step?Q:

3Steps

37

38

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

39

NO EXCUSES!

Buy a modern mobile devices

40

Step Two: Mobile culture indoctrination

41

Images needed

Observe the culture you’re designing for

42

Step Three: Brace yourself for a fast and exciting ride

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

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

ADo you remember a time when the web was new?

Q:

A“We need a web presence!”

!

48

Brochureware

A“We need online commerce!”

!

50

What about shipping?

AA“Let’s make our site like…”

!

52

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

A mobile phone is not a computer

57

60

Design Principle: Uniquely Mobile

Focus on what mobile can do well

• Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors• Microphone and Speaker

• Small form factor

• Limited battery

• Inconsistent network access

• Vast and unpredictable contexts of use

• Highly personal

• Touchscreen

VS.

64

vs

65

vs

Design Principle: Uniquely Mobile

Technology can help guide, but should not be the focus

Design Principle: Uniquely Mobile

Need vs. Solution

68

Research Techniques

Diary Studies

Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation Study

OnlineSurvey

Shop Alongs

Prototype Testing

TrafficStudies

Shadowing

69

Research Techniques

Diary Studies

Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation Study

OnlineSurvey

Shop Alongs

Prototype Testing

TrafficStudies

Shadowing

Use Two Techniques

70

Solution Speak…Solution Need

Database of Dr. Names Find a Doctor near me

Map Get from point A to Point B

Calendar I need to know what may happen

Email I need to communicate

Facebook Updates I need to feel connected

LinkedIn I need to manage my identit

Search I need to find information

Picassa I need to share

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

AWhat exactly do you mean by mobile “context” ?

Q:

A

AContext is complex!!

77

Context Matters

78

Context will likely beyour blindside

A

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

80

Context Frameworksteal this slide!

81

Context Frameworksteal this slide!

82

Orchestration and Inflection

83

84

Spatial

85

Temporal

86

Social

87

Semantic

88

Peanut butter in Melbourne right now?

A

The web is good at people and things.

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

90

Mobile is good at places…

91

Mobile is good at spatial and temporal relationships.

92

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

93

How do we get that understanding?

Q:

A

A

Throughout the design process, our work should be situated in the contexts where it will be used.

Go to the Gemba

Go to the Gemba

Go to the Gemba

106

Ideate in the wild…

107

Your Design Challenge!Activity

How might Starbucks use mobile devices to improve their customer

experience?

108

Your Design Challenge!Step 1: Identifying Needs

Activity

1. Divide into groups2. Head to the nearest

Starbucks.3. Observe mobile users in a

mobile context4. Develop a list of

customer needs based on your observations using the needs worksheet.

30 Minutes

109

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

30 Minutes

110

Activity

Go outside and brainstorm ideas

111

Activity25 Minutes

112

Activity

113

Mobile is good at places…

114

Mobile is good at places…

115

One Hour!

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

AHuh?Q

:

118

119

120

121

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

122

123

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

Q:

Edit!!!

125

RuthlessEditing

126

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

~Jason Grigsby

A

128

129

131

A

132

A

133

A

134

Josh Clark Example

139

Josh Clark Example

140

Historically, we start with structure…

Try hiding the structure…

Try starting with instinct and intuition

More on this after lunch…

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

LUNCH!12 – 1pm