mobile user experience: what web designers need to know
Post on 17-Aug-2014
63.948 Views
Preview:
DESCRIPTION
TRANSCRIPT
Rachel Hinman
What web designers need to know..
Mobile User ExperienceWhat Web Designers Need to Know
I used to be a web designer.
I used to be a web designer, too
What can we do with mobile?
How can we streamline the checkout process?
How can we streamline the checkout process
Q:
How can we get community on our site?
Q:
What can we do with mobile?
Q:
What can we do with mobile?
How can we streamline the checkout process?
How can we streamline the checkout process
Q:
How can we get community on our site?
Q:
What can we do with mobile?
Q:
Q: Where do I begin?
Where do I begin
Our plan for today…
Our plan for today
Similarities and differences between designing for web and mobile
Our plan for today…
Our plan for today
Similarities and differences between designing for web and mobile
Three most important attributes of great mobile experiences
Our plan for today…
Our plan for today
Similarities and differences between designing for web and mobile
Three most important attributes of great mobile experiences
A set of mobile design principles
Our plan for today…
Our plan for today
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
Along the way…
Along the way
Slides Worth Keeping
Shameless Opinion
Design Activities
Design Principles
Watch for slides with this orange label!
Okay, let’s get started!
Okay… let’s get started
A
What are the similarities
What are the similarities?Q:
Web designers know how to work in a rapidly evolving field
13
Web designers know how to work in a rapidly evolving field
Web designers understand how to create experiences within technical constraints
14
Ability to work within technical constraints
Web designers use similar tools and processes
15
Similar Tools… Similar processes
A
What are the differences?
Q: What are the differences?
A mobile phone is not a computer
17
A mobile phone is not a computer
A umm…. duh!
Um… duh!
19
Differences in the mobile environment
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
20
Differences in the mobile environment
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
21
Differences in the mobile environment
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
Mobile phones started out as a one-to-one
They evoloved
23
Mobile phones evolved from the landline phone
24
25
Smartphone… added
26
Smartphone… added 26
Opinion!
27
iPhone
Mobile phones aren’t really phones anymore
28
Mobile presents an opportunity to invent new ways…
Mobile presents an opportunity to invent new ways for users to interact with information.
Opinion!
29
Shift your perspective and point of view
Expert to Explorer
30
How?
Understand your assumptions
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
speak their power3
steal this slide!
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
A
Do you remember a time…
Do you remember a time when the web was new?
Q:
A
Do you remember a time…
“We need a web presence!”!
35
Solution: Brochure - online
Brochureware
“we need a web presence”
A“We need online commerce!”!
37
Online commerce
What about shipping?
A
Make it like the world
A“Let’s make our site like…”!
39
Southwest airlines
We confused the solution with the need.
What we learned from the web
Lessons Learned from Web
steal this slide!
We borrowed broken models. Too focused on tactics.
We didn’t focus on what the web could do well.
A
How do we not do that again?
AHow do we NOT do that again?
Q:
Focus on needs instead of tactics and solutions.
What we learned from the web
Design Principles:Uniquely Mobile
Mobile is a different medium - focus on what it can do well.
Don’t get hung up on heuristics and technology - they change rapidly.
steal this slide!
Identify your assumptions upfront. Unpack your computer baggage.
1
Three tips for uniquely mobile experiences
Three tips for creating uniquely mobile experiences
Identify the difference betweenneeds and solutions.
2
Focus on what makes mobile unique.3
steal this slide!
44
Identify your assumptions
Unpack your computerand mobile baggage…
Activity
45
information needs
What are the needs?Activity
What need does this information fill?
Frame it as a question from the perspective of a user.
46
Identify information needs
What are the needs?Activity
What need does this information fill?
Frame it as a question from the perspective of a user.
I wonder if this restaurant is popular?What neighborhood is
this place in?
Public Transport?
47
Identify information needs
What are the needs?Activity
A The web was not a direct translation…
The web was not a direct translation
A … mobile won’t be either.
And mobile won’t be either.
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
Pictures of mobile contexts
AWhat exactly do you mean by mobile “context” ?
Q:
A
Pictures of mobile contexts
More pictures of mobile contexts
Social context
A
Context is complex
Context is complex!!
A
Context is about understanding human relationships to the people, places and things in the world.
Context is about understanding the relationships
57
Context Framework
Context Framework steal this slide!
58
Context Framework
Context Framework steal this slide!
59
Relationships Chording
Orchestration and Inflection
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
60
Peanut butter
61
Google: Facebook
Spatial
62
Temporal
Temporal
63
Spatial - peanut butter
Social
64
Google: Facebook
Semantic
65
Peanut butter in Denver
Peanut butter in Denver right now?
A
The web is good at people and things.
The web is good at semantic relationships.(and okay at social relationships)
Context is about understanding the relationships
67
Context Framework
Mobile is good at places… steal this slide!
68
Context Framework
steal this slide!Mobile is good at spatial and temporal relationships.
69
Google maps - PC vs. Mobile
Temporal and spatial relationships are underserved
There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.
70
How do you get that understanding?
How do we get that understanding?
Q:
Design for partial attention and interruption
1
Sympathy to context principles
Design Principles:Sympathy to Context
Reduce cognitive load and opportunity cost
2
steal this slide!
Ideate in the wild3
73
Text entry will never be easy
Design for partial attention and interruption
74
Wand in the world
ActivityGet sympathetic to the mobile context…
75
“in the wild” ideation
Activity
The Kate Rutter Wand in the World Activity
76
“in the wild” ideation
Activity
77
“in the wild” ideation
ActivityThen ideate…
78
“in the wild” ideation
ActivityThen ideate…
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
speak their power3
Speak their power?
AHuh?Q:
A light switch
81
Shopping cart
82
Shopping cart
83
We can annotate expectations in the web world
84
We can annotate expectations in the web world
We can annotate expectations in the web world
85
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
Options in mobile have to be readily apparent
86
Options have to be apparent and intuitive in mobile for people to
How do you make interfaces that speak their power
AHow do I create mobile interfaces that “speak their power”?
Q:
Say good bye to done
Say good-bye to “done”.1
Design Principles:Interfaces that speak their power
steal this slide!
Think possibilities, not tasks.2
Dismantle the page metaphor. Boulders to pebbles.
3
89
Wireframe
This should look familiar…
90
Wireframe
This should look familiar…
91
Wireframe
This should look familiar…
The web has evolved around a task-efficiency model.
Mobile is different.
92
Mobile is different
Mobile is different….
93
Mobile is different
Mobile is different….
94
Mobile is different
Mobile is different….
Mobile is about pivoting people through information quickly.
It’s about exposing possibilities.
What’s the point?
“What’s the point?” “What can happen?”
TASK POSSIBILITIES
96
Tasks are about completion
Tasks are about completion…
97
Tasks are about completion
Tasks are about completion…
Possibilities are interactions that accrue over time…
… or facilitate exploration…
98
Tasks are about completion
Tasks are about completion…
Possibilities are interactions that accrue over time…
… or facilitate exploration…
99
Tasks are about completion
Tasks are about completion…
Possibilities are interactions that accrue over time…
..or are about SENSING
INTENT!
100
Example -
101
Example -
102
Example -
103
Example -
104
Example -
105
Example -
How do you make interfaces that speak their power
AHow do I design for possibilities?
Q:
How do you make interfaces that speak their power
A
107
How do you make interfaces that speak their power
A
108
How do you make interfaces that speak their power
A
109
It’s like a card game…110
It’s like a game of cards
Each card speaks it’s power111
It’s like a game of cards
You win with a good hand112
It’s like a game of cards
Pivoting people through information
113
ActivityCreate a winning hand.
Pivoting people through information
114
Pivoting people through information
115
ActivityCreate a winning hand.
Pivoting people through information
116
ActivityCreate a winning hand.
Allow people to pivot through information quickly
Stitch cards together to answer the question
117
Prototype
PrototypePrototypePrototypePrototypePrototypePrototype
118
Can users grok it?
Can users grok it?
Does each card speak it’s power?
Can I simplify this?
Is this intuitive?
Q:
Q:
Q:
Q:
119
Analogy of cards
Prototyping “Swirl”Process
120
Analogy of cards
Plan for a lot of it!1
Tips for mobile prototypingsteal this slide!
Work at scale and print it out!2
Get it on the device as soon as you can.
2
121
Analogy of cards
Prototype at every stageProcess
Paper Prototype example
122
High fidelity prototype example
Where do I begin?
Q: Where do I begin?
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
speak their power3
steal this slide!
Everybody starts somewhere
Everybody starts somewhere….
Good luck
Good luck!
Resources:MOBILE RESOURCES
Ultimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413
mooTools http://mootools.netiUI iPhone navigation (javascript):http://code.google.com/p/iui/
jQuery (javascript):http://jquery.com/
TweenMax (actionscript):http://blog.greensock.com/tweenmaxas3/
Bruce Sterling speaks on the future of mobilehttp://tinyurl.com/6m7kwc
RESOURCES
Q?
Q&A: final break
top related