mobile prototyping essentials workshop - part one

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

Hinman

Part IMobile 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 - 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

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 device

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 mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

are uniquely mobileGreat 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 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!

VS.

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

58

vs

59

vs

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

Design Principle: Uniquely Mobile Need vs. Solution

62

Research Techniques

Diary Studies

Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation Study

OnlineSurvey

Shop Alongs

Prototype Testing

TrafficStudies

Shadowing

63

Research Techniques

Diary Studies

Contextualinterviews

INVASIVE

LESS INVASIVE

RESEARCHERPRESENT

RESEARCHERNOT PRESENT

Deprivation Study

OnlineSurvey

Shop Alongs

Prototype Testing

TrafficStudies

Shadowing

Use Two Techniques

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

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

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.

72

Context Framework steal this slide!

73

Context Framework steal this slide!

74

Orchestration and Inflection

75

76

Spatial

77

Temporal

78

Social

79

Semantic

80

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)

82

Mobile is good at places…

83

Mobile is good at spatial and temporal relationships.

84

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

85

How do we get that understanding?

Q:

Design for partial attention and interruption

Design Principles:Sympathy to Context

Reduce cognitive load and opportunity cost

steal this slide!

Ideate in the wild

88

Design for partial attention and interruption

89

Design for partial attention and interruption

90

Cognitive Load

91

Opportunity cost

92

Ideate in the wild…

93

Your Design Challenge! Activity

How might Starbucks use mobile devices to improve their customer

experience?

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

95

Activity

Go outside and brainstorm ideas

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

97

Activity25 Minutes

98

Activity

99

Mobile is good at places…

100

Mobile is good at places…

101

One Hour!

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

AHuh?Q

:

104

105

106

107

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

108

109

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

Q:

Edit!!!

111

RuthlessEditing

112

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

~Jason Grigsby

A

114

115

A

116

A

117

A

118

Josh Clark Example119

Josh Clark Example120

Historically, we start with structure…

Try hiding the structure…

Try starting with intuition.

It’s like a card game…124

Each card speaks it’s power125

You win with a good hand126

are uniquely mobileGreat Mobile Experiences:

are sympathetic to contextspeak their power3

1

2

3

LUNCH!12 – 1pm