Upload
rachel-hinman
View
112
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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