Mobile Prototyping Essentials Workshop - Part One

Mobile Prototyping Essentials
Part I

Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Hinman

Q:
What can we do with
Q:
mobile?

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

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

8:30am - Noon

What makes mobile UX different?

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

A
Q:
What are the similarities?

UX designers know how to work
in a rapidly evolving field

13

UX designers understand how to create
experiences within technical constraints
14

UX designers use similar
tools and processes
15

QQ:
A:
What are the differences?

A mobile phone is not a computer

17

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

Even in situations in which aa spirit of
Even in situations in which spirit of
exploration and freedom exist, where we are
exploration and freedom exist, where faculty
free free to experiment to work beyond physical
are to experiment and work beyond physical
and social constraints, our cognitive habits
and social constraints,
our cognitive habits often get in the way.
often get in the way.

Marshall McLuhan called called it
Marshall McLuhan it “the rear-view
mirrorrear-view mirror effect,” noting that
“the effect,” noting that “We see the world
“We see the world through a rear-view mirror.
through a rear-view mirror. We march
We march backwards into future.”
backwards into the the future.”

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

30

Mobile phones aren’t really phones anymore
31

AQ:
What’s the first step?

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

38

NO
EXCUSES!
Buy a modern mobile device

39

Step Two: Mobile culture indoctrination
40

Images needed

Observe the culture you’re designing for

41

Step Three: Brace yourself
for a fast and exciting ride
42

“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.”
Rapid Evolution
-- Mobile Monday Amsterdam – November 2008

43

Great Mobile Experiences:
1 are uniquely mobile

2 are sympathetic to context

3 speak their power
3

Q:
A
Do you remember a time
when the web was new?

!
A
“We need a web presence!”

!
A
“We need online commerce!”

What about shipping?

50

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

Lessons Learned from Web
We borrowed broken models.
Too focused on tactics.

We confused the solution with the need.

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

Q:
A
How do we NOT
do that again?

Design Principles
Uniquely Mobile

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

Technology can guide, but should not
be the focus.

Focus on needs instead of tactics and
solutions.

Design Principle: Uniquely Mobile

Focus on what mobile can do well


Technology can help guide,
but should not be the focus


Need vs. Solution

Research Techniques
INVASIVE

Prototype
Deprivation
Testing
Study

Diary Studies Contextual
interviews
RESEARCHER RESEARCHER
NOT PRESENT PRESENT
Online
Survey Shadowing

Traffic Shop Alongs
Studies

LESS INVASIVE

62

Research Techniques
INVASIVE

Prototype
Deprivation
Testing
Study

Use Two Techniques
RESEARCHER
Diary Studies Contextual
interviews
RESEARCHER
NOT PRESENT PRESENT
Online
Survey Shadowing

Traffic Shop Alongs
Studies

LESS INVASIVE

63

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 identity

Search I need to answer a question

Picassa I need to share 64

Q:
What exactly do you mean by
A
mobile “context” ?

Context is about
A
understanding
human relationships to the
people, places and
thingsin the world.

Context Framework

72

Context Framework

73

Orchestration and Inflection

74

Peanut butter in Melbourne right now?

80

The web is good at people
and things.
A

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

Mobile is good at places…

82

Mobile is good at spatial
and temporal relationships.

83

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

85

Q:
How do we get that
understanding?

Design Principles:
Sympathy to Context

Design for partial attention
and interruption
Reduce cognitive load
and opportunity cost
Ideate in the wild

Design for partial attention and interruption

88

Design for partial attention and interruption

89

Opportunity cost

91

Ideate in the wild…

92

Your Design Challenge!

How might Starbucks use mobile devices to
improve their customer experience?
93

Step 1: Identifying Needs

1. Divide into groups
2. Head to the nearest
Starbucks.
3. Develop a list of
customer needs based on
your observations using the
needs worksheet.

25 Minutes

94

Go outside and brainstorm ideas

95

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

96


99


100

We can annotate expectations
in the web world

107

Look inside
the book
Add to cart

Shipping! Free two-day
shipping

REALLY! Get it new
Look inside OR used! Collectible!
the book
Sell mine
Maybe a kindle!

108

Q:
A
How do I create
mobile interfaces that
“speak their power”?

Ruthless
Editing

112

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

~Jason Grigsby

Josh Clark Example
119

Josh Clark Example
120

Historically, we start with structure…

It’s like a card game…
124

Each card speaks it’s power
125

You win with a good hand
126

Mobile Prototyping Essentials Workshop - Part One

More Related Content

What's hot

Similar to Mobile Prototyping Essentials Workshop - Part One

Recently uploaded

Mobile Prototyping Essentials Workshop - Part One

Editor's Notes