Upload
rachel-hinman
View
8.257
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Mobile prototyping essentials workshop with Rosenfeld Media - May 24th
Citation preview
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