SlideShare a Scribd company logo
1 of 130
Download to read offline
Rachel Hinman
Mobile User Experience
What Web Designers Need to Know
I used to be
a web designer.
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
:
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?
Our plan for today…
Similarities and differences between
designing for web and mobile
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…
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…
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…
Slides Worth Keeping
Shameless Opinion
Design Activities
Design Principles
Watch for
slides with
this orangelabel!
Okay, let’s get started!
A
What are the similarities?Q
:
Web designers know how to work
in a rapidly evolving field
13
Web designers understand how to create
experiences within technical constraints
14
Web designers use similar
tools and processes
15
AQ
: What are the differences?
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
25
26
26
Opinion!
27
Mobile phones aren’t really phones anymore
28
Mobile presents an
opportunity to invent new
ways for users to interact
with information.
Opinion!
29
Expert to Explorer
30
Understand your assumptions
are uniquely mobile1
Great Mobile Experiences:
are sympathetic to context2
speak their power3
steal thisslide!
are uniquely mobile1
Great Mobile Experiences:
A
Do you remember a time
when the web was new?
Q
:
A
“We need a web presence!”!
35
Brochureware
A
“We need online commerce!”!
37
What about shipping?
AA
“Let’s make our site like…”!
39
We confused the solution with the need.
Lessons Learned from Web
steal thisslide!
We borrowed broken models.
Too focused on tactics.
We didn’t focus on what the web
could do well.
AA
How do we NOT
do that again?
Q
:
Focus on needs instead of tactics and
solutions.
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 thisslide!
Identify your assumptions upfront.
Unpack your computer baggage.
1
Three tips for creating
uniquely mobile experiences
Identify the difference between
needs and solutions.
2
Focus on what makes mobile unique.3
steal thisslide!
44
Unpack your computer
and mobile baggage…
Activity
45
What are the needs?
Activity
What need does
this information fill?
Frame it as a
question from the
perspective of a
user.
46
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
What are the needs?
Activity
A
The web was not a direct
translation…
A
… mobile won’t be either.
are uniquely mobile1
Great Mobile Experiences:
are sympathetic to context2
A
What exactly do you mean
by mobile “context” ?
Q
:
A
Mobile User Experience: What Web Designers Need to Know
Mobile User Experience: What Web Designers Need to Know
A
Context is complex!!
A
Context is about
understanding
human relationships to
the people, places and
things in the world.
57
Context Framework
steal thisslide!
58
Context Framework
steal thisslide!
59
Orchestration and Inflection
QuickTime™ and a
TIFF (LZW) decompressor
are needed to see this picture.
60
61
Spatial
62
Temporal
63
Social
64
Semantic
65
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)
67
Mobile is good at places…
steal thisslide!
68
steal thisslide!
Mobile is good at spatial
and temporal relationships.
69
There are currently not
many technologies
that help us understand
place, and temporal and
spatial relationships.
70
How do we get that
understanding?
Q
:
Design for partial attention
and interruption
1
Design Principles:
Sympathy to Context
Reduce cognitive load
and opportunity cost
2
steal thisslide!
Ideate in the wild3
73
Design for partial attention and interruption
74
Activity
Get sympathetic to
the mobile context…
75
Activity
Activity
The Kate Rutter Wand in the World Activity
76
Activity
Activity
77
Activity
Activity
Then ideate…
78
Activity
Activity
Then ideate…
are uniquely mobile1
Great Mobile Experiences:
are sympathetic to context2
speak their power3
A
Huh?Q
:
81
82
83
We can annotate expectations in the web world
84
We can annotate expectations in the web world
85
Add to
cart
Add to
cart
Free two-
day
shipping
Free two-
day
shipping
Shipping!Shipping!
Collectible!Collectible!
Maybe a
kindle!
Maybe a
kindle!
Look inside
the book
Look inside
the book
REALLY!
Look inside
the book
REALLY!
Look inside
the book
Get it new
OR used!
Get it new
OR used!
Sell
mine
Sell
mine
Options in mobile have to be readily apparent
86
A
How do I create
mobile interfaces that
“speak their power”?
Q
:
Say good-bye to “done”.1
Design Principles:
Interfaces that speak their power
steal thisslide!
Think possibilities, not tasks.2
Dismantle the page metaphor.
Boulders to pebbles.
3
89
This should look familiar…
90
This should look familiar…
91
This should look familiar…
The web has evolved around a
task-efficiency model.
Mobile is different.
92
Mobile is different….
93
Mobile is different….
94
Mobile is different….
Mobile is about pivoting people
through information quickly.
It’s about exposing possibilities.
“What’s the point?” “What can happen?”
TASK POSSIBILITIES
96
Tasks are about completion…
97
Tasks are about completion…
Possibilities are interactions that
accrue over time…
… or facilitate
exploration…
98
Tasks are about completion…
Possibilities are interactions that
accrue over time…
… or facilitate
exploration…
99
Tasks are about completion…
Possibilities are interactions that
accrue over time…
..or are about
SENSING
INTENT!
100
101
102
103
104
105
A
How do I design for
possibilities?
Q
:
A
107
A
108
A
109
It’s like a card game…
110
Each card speaks it’s power
111
You win with a good hand
112
113
Activity
Create a winning hand.
114
115
Activity
Create a winning hand.
116
Activity
Create a winning hand.
Allow people to pivot
through information
quickly
Stitch cards together to
answer the question
117
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
118
Can users grok it?
Does each card speak it’s
power?
Can I simplify this?
Is this intuitive?
Q
:
Q
:
Q
:
Q
:
119
Prototyping “Swirl”
Process
120
Plan for a lot of it!1
Tips for mobile prototyping
steal thisslide!
Work at scale and print it out!2
Get it on the device as soon
as you can.
2
121
Prototype at every stage
Process
122
Mobile User Experience: What Web Designers Need to Know
Q
: Where do I begin?
are uniquely mobile1
Great Mobile Experiences:
are sympathetic to context2
speak their power3
steal thisslide!
Everybody starts
somewhere….
Good luck!
Thank you!
hinman@adaptivepath.com
Resources:
MOBILE RESOURCES
Ultimate iPhone Stencil for Omnigraffle
http://graffletopia.com/stencils/413
mooTools
http://mootools.net
iUI 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 mobile
http://tinyurl.com/6m7kwc
Q?

More Related Content

Viewers also liked

Viewers also liked (10)

’How do they even do that?’: How Today’s Technology is Shaping Tomorrow’s Stu...
’How do they even do that?’: How Today’s Technology is Shaping Tomorrow’s Stu...’How do they even do that?’: How Today’s Technology is Shaping Tomorrow’s Stu...
’How do they even do that?’: How Today’s Technology is Shaping Tomorrow’s Stu...
 
"How Do [They] Even Do That?" Myths and Facts About the Impact of Technology ...
"How Do [They] Even Do That?" Myths and Facts About the Impact of Technology ..."How Do [They] Even Do That?" Myths and Facts About the Impact of Technology ...
"How Do [They] Even Do That?" Myths and Facts About the Impact of Technology ...
 
Exclusive rose fragrances for special occasions
Exclusive rose fragrances for special occasionsExclusive rose fragrances for special occasions
Exclusive rose fragrances for special occasions
 
Windows 8 and the cloud a match made in heaven
Windows 8 and the cloud a match made in heavenWindows 8 and the cloud a match made in heaven
Windows 8 and the cloud a match made in heaven
 
Ten uparty anestezjolog
Ten uparty anestezjologTen uparty anestezjolog
Ten uparty anestezjolog
 
Building your first windows store app in html5 js phonegap
Building your first windows store app in html5 js phonegapBuilding your first windows store app in html5 js phonegap
Building your first windows store app in html5 js phonegap
 
Great Brak River Map
Great Brak River MapGreat Brak River Map
Great Brak River Map
 
English perfumes
English perfumesEnglish perfumes
English perfumes
 
Los perfumes
Los perfumes Los perfumes
Los perfumes
 
Praca z uczniem ze spektrum autyzmu
Praca z uczniem ze spektrum autyzmuPraca z uczniem ze spektrum autyzmu
Praca z uczniem ze spektrum autyzmu
 

More from Rachel Hinman

Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Rachel Hinman
 
Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1Rachel Hinman
 
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part IIMobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part IIRachel Hinman
 
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part OneMobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part OneRachel Hinman
 
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierFinal virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierRachel Hinman
 
Technology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX AustraliaTechnology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX AustraliaRachel Hinman
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Mobile UX Essentials
Mobile UX EssentialsMobile UX Essentials
Mobile UX EssentialsRachel Hinman
 
Technology as a Cultural Practice
Technology as a Cultural PracticeTechnology as a Cultural Practice
Technology as a Cultural PracticeRachel Hinman
 
They Call it Surfing for a Reason
They Call it Surfing for a ReasonThey Call it Surfing for a Reason
They Call it Surfing for a ReasonRachel Hinman
 

More from Rachel Hinman (13)

Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
 
Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1
 
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part IIMobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
 
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part OneMobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
 
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierFinal virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
 
The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
 
Technology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX AustraliaTechnology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX Australia
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Mobile UX Essentials
Mobile UX EssentialsMobile UX Essentials
Mobile UX Essentials
 
Technology as a Cultural Practice
Technology as a Cultural PracticeTechnology as a Cultural Practice
Technology as a Cultural Practice
 
They Call it Surfing for a Reason
They Call it Surfing for a ReasonThey Call it Surfing for a Reason
They Call it Surfing for a Reason
 

Recently uploaded

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Recently uploaded (19)

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

Mobile User Experience: What Web Designers Need to Know

Editor's Notes

  1. Hello - My name is Rachel Hinman and I am an experience design director at Adaptive Path. I’m truly thrilled to be here at Web Directions North and have the opportunity to share these ideas with you with you because this content is very personal to me - it reflects the journey that I have taken over the past four years of my professional life. During that time, I’ve been focused on mobile user experience… Before I joined Adaptive Path, I worked at Yahoo in their mobile group working in the mobile internet space… but more importantly… before I even got involved with mobile…
  2. I used to be a web designer, too. When I started working at Yahoo in their mobile group I really had little to no experience with the mobile industry. And I distinctly remember how that perception of my lack of experience made me feel. I got very hung up on the things I didn’t know. What I quickly realized was that there were actually a lot of skills that I learned as an interaction designer and researcher in the web world that served me well as a mobile designer. And it wasn’t until I was able to recognize those skills and learn to embrace the things that I didn’t know that able to move forward with confidence. And that is really the point of this talk -
  3. Because I imagine that you guys are faced with these kinds of questions everyday…
  4. But this question is not like the others… it’s a question that may scare you or stop you in your tracks… and it may leave you wondering …
  5. today, good mobile designers are a scarcity. And there are a lot of very broken mobile experiences out there that need the skills of good designers. And there is no reason that any of you should let this question hold you back from getting involved in mobile. My hope that at the end of this talk, you are able answer this question. I hope that you’ll be able to recognize and have confidence in the design skills you have that make you well suited to design mobile experiences, and that you have some scaffolding, some insights, and some tools into how to begin design mobile experiences…
  6. So here’s the plan for today: I’m going to share with you What I think are the Key similarities and differences between designing for mobile and designing for the web (that has to date been a predominantly PC experience) The three key things I believe make a good mobile user experience
  7. And that is really what the next 35 minutes is about… I’m going to share with you What I think are the Key similarities and differences between designing for mobile and designing for the web (that has to date been a predominantly PC experience) The three key things I believe make a good mobile user experience
  8. And that is really what the next 35 minutes is about… I’m going to share with you What I think are the Key similarities and differences between designing for mobile and designing for the web (that has to date been a predominantly PC experience) The three key things I believe make a good mobile user experience A set of mobile design principles
  9. And that is really what the next 35 minutes is about… I’m going to share with you What I think are the Key similarities and differences between designing for mobile and designing for the web (that has to date been a predominantly PC experience) The three key things I believe make a good mobile user experience A set of mobile design principles Three mobile design activities that you can use after today to help you kick start your mobile design fun.
  10. And along the way…
  11. So what are things that all of you have that make you especially well suited to design mobile user experiences?
  12. Web designers know how to work in a rapidly evolving field. If you just stop and think about how the web has evolved since say … 1996/97 - a lot has changed in a relatively short amount of time. And if you compare it to a lot of other industries -- like law, mechanical engineering, dry cleaning….the web is a space where things move quickly -- and all of you have been acclimated to work in a space that changes and shifts rapidly. And that is a really wonderful strength.
  13. Secondly… web designers understand how to create and craft experiences within technical constraints. Any design activity has constraints -- fashion design, furniture design, architecture…. The constraints between web and mobile are similar. You all know how to craft experiences that inherently understand technical constraints while delivering something special…
  14. Finally, web designer and mobile designers use very similar tools and processes. Both often include activities such as research, sketching, defining problem spaces, brainstorming and ideating, creating storyboards and wireframes, visual design, prototyping… and we use some of the same software tools.
  15. So what are the differences?
  16. The biggest and most important difference is that a mobile phone is not a computer….
  17. And I don’t say that to be pajoritive,
  18. I say it because I think that if you unpack some of the dimensions that define technology experiences today…you’ll see that a lot of how we understand computing has been defined by the PC experience. And as designers -- our skills, expectations, instincts and bodies of academic knowledge are deeply embedded in that legacy. So if you think about the experience of computer use… these are some of the dimensions…
  19. Interface elements…Experiences are anchored to a desktop… cascading application windows…
  20. If you compare that to the mobile experience - there are a lot of fundamental differences. A mobile phone is actually a pretty weird and and amazingly human technology that has evolved and borrowed from many technology experiences…
  21. Mobile phones are the direct descendents of landline telephones - and when phones first started out, … there really wasn’t much of an interface at all - it was almost entirely voice driven -- and there was a weird “human in the loop” interface - you picked up the phone and said - I want to talk to Bill Smith And an operator tried to connect you to that person…
  22. Landline phones evolved - they got more sophisticated and started to have things like number dials - and phone numbers became the “URLs” for people.
  23. And then we got mobile phones…. Mobile phones initially were built on the mental model of the land line phone - similar features, similar functionality… it was a landline phone you could take anywhere … but unlike landline phones, there were certain pieces of functionality that was borrowed from other technology experiences that were added to the phone -- address book, settings, games…
  24. And as mobile phones advances and became more sophisticated, we began to add more and more features and functionality to the phone -- we simply borrowed from a lot of other technology experiences -- especially from the PC -- and phones began to die under their own weight.
  25. Mobile phones became these frankenstein pieces of technology. They were kluged together experiences that were very incoherent for most people… phones were featured-laden, complex and off-putting for most users. Until…
  26. I can’t emphasize how the last 18 months have really been a watershed moment within the mobile space. ... The iphone has brought touchscreens and gestural as well as more intuitive interfaces to a wider consumer market... These phones have also opened up this amazing, subterranean mobile application development phenomenon that makes it easy for users to buy applications…It’s created an exciting inflection point in the landscape… And while some people may think of these phones as a STARTING POINT for how mobile experiences should be, I would like to invite you to consider that instead of a starting point, these beautiful kids instead are instead an END POINT… because mobile phones aren’t really phones anymore.
  27. As much as we designers like to get hung up on the delivery mechanisms and the “design” of things like mobile phone, or PC browser, or mobile application… it is really easy to lose sight of the most important thing - PEOPLE INTERACTING WITH INFORMATION. And what is exciting about mobile and what is happening in the mobile landscape it that it is opening up and presenting and opportunity for us to invent new ways for users to interact with information. And In order to truly invent new things, I believe you have to do two things -
  28. FIRST: You have to shift your point of reference and identity from the expert to the explorer. Explorers have to be curious - they have to be willing and excited to embrace what they don’t know.
  29. SECOND: need to identify and understand your assumptions about technology experiences. Just like when you go to another country, you find that people do many of the same things, it’s just they are expressed in different ways. So, it is important to identify that you have assumptions about technology experiences and they probably won’t become obvious to you until you have a “faux pau” experience where you realize on a very viseral level a fundamental difference in mobile.
  30. To get you started, though - I am going to walk you through what I feel are three most important attributes of great mobile experiences. IN MY OPINION: Great mobile experiences are:
  31. So let’s start off with the first one. Great mobile user expereiences are uniquely mobile.
  32. I’d like to invite you to go back into the way way back machine with me and recall a time, in say 1995 or 1996, when the web was new…
  33. And companies said things like:
  34. And that responsibility fell many times on folks in marketing and branding, and graphic designers.… so their perfectly logical response was to leverage what they knew. And they by and large knew print and desktop publishing…. THEY KNEW PRINT… and they applied that knowledge to the web -- and so was born brochureware. It achieved a web presence - but it really didn’t take advantage of what the web was capable of ding really well. It was instead, AN EASY TRANSLATION
  35. Another thing people said things like: “We need online commerce!
  36. So you had this mad rush of folks putting there wares online for sale - But then we realized that buying products online was really only relevant for certain types of products. It made sense to buy high touch items online like books, electronics, shoes -- whereas it didn’t make a lot of sense to sell things like detergent and toilet paper because it would cost more to ship than the product itself…
  37. And then there were the weird metaphors that people tried to use to shape the experience…
  38. People would design sites with web pages that had the visual design of actual pages - or make the web site feel like a physical space like this example Southwest Airlines Web site Circa 1996
  39. Lessons learned form the web…
  40. The thing is… we could make a lot of these same mistakes again in moible…How do we not do that again? Well, there are three tips I have….
  41. Just like the web, mobile is a unique medium. As a designer, there is something to be said for learning what a medium can do well. Regardless of the type of design - furniture, graphic design, clothing design -- I think you can almost always tell when someone has designed something with a sensitivity and understanding of the medium for which is was created. A lot of the mistakes that were made in the early days of the web were made because people were borrowing instead of developing that sensitivity -- they really focused on the tactics and the solutions instead of the ways the medium could serve human needs well. Also - don’t get hung up on the heuristics and technology… they are going to change rapidly. Of course… the technical constraints are important because it’s not helpful for anybody to design things that can’t be built and made -- but just like in the days of the web… heuristics and technology constraints are a fast and fleeting moving target. (more)
  42. So in order to design uniquely mobile experiences, one activity that I found to be really helpful is to unpack assumptions about computers and mobile phones… First - give yourself about a half an hour to really think about your relationship to computers. What do you use your PC to do? What are the dimensions that define that experience for you? Where are you when you use your computer? When don’t you use your computer? Where is it socially acceptable? What types of activities do you do? What don’t you do on your computer? Next, do the same for mobile phones. And when you’re done listing out these assumptions, don’t throw these pieces of paper away…. Keep them around and continue to add to them. Because this activity is really about being mindful -- you really can’t begin to challenge your assumptions until you know what they are.
  43. The second activity I’d like for you to do is to take a web site -- the web site that you currently work on… or a web site that you use a lot. Take a couple screen shots and print them out. And then take a marker and start to deconstruct the information on the page. Ask yourself not what the information is, but what information need it fulfills. Frame it as a question from the perspective of a user.
  44. So take for example: The address for this restaurant… “what’s the address?” But a better question to ask yourself is why people need an address. What does having an address enable users to do? What choices can they begin to make?
  45. What’s great about this activity is that it helps you separate the solution from the needs that solutions serves. So when you start to design, you don’t have to feel tied to the legacy of an old solutions.
  46. Both these activities should help you start to identify aspects of creating uniquely mobile experiences - their activities that are designed to help you deconstruct your assumptions and get back to the fundamental needs designing for mobile will serve. The web was not a direct translation…
  47. And it was broken because we confused the vehicle with the purpose.
  48. Brandon:
  49. Mobile designers have long emphasized the importance of context in mobile user experience, and rightly so. It’s the easiest way to communicate an important and fundamental difference between designing for a PC and designing for a mobile device. What does it actually mean?
  50. These are some photos from a an ethnographic study I worked on about mobile phone usage. What we asked participants in this study to do was to take a picture of all the places they used their mobile phones. These pictures aren’t terribly surprising….There are a lot of places that one would expect people to use a mobile phone..
  51. However, these pictures are less expected…. Home, in bed, an an office where there’s another landline phone…
  52. And then you start to think about the implicit social rules of these places… and the relationships people start to have to each other, to the place… and it all gets very overwhelming pretty quickly because context is everywhere. Context more than just a physical location… Context is about our very human relationships to stuff in the world.
  53. Context is really about cognition… It’s about how we understand and process the world…. And that’s a pretty complex thing to articulate in an interface.
  54. Context is about understanding the human relationships to the people places and things in the world…
  55. So one framework that I’ve used to help break down the complexity of “context” is to start to think about the world as a series of nouns… people, places and things…
  56. So one framework that I’ve used to help break down the complexity of “context” is to start to think about the world as a series of nouns… people, places and things…
  57. Now the thing is, none of these relationships happen in isolation… we use all four of these relationships to make meaning in the world… but in certain moments there is a different inflection or focus on a particular relationship to noun. Understanding context is really about understanding how to orchestrate these relationships in a meaningful way.
  58. So let me give you a lovingly told example of that framework. Let’s talk about one of my favorite THINGS… peanut butter. This photo is a kind of Bruce Sterling inspired spime-like diagram of one of my favorite foods…
  59. Spatial relationship are about where something is physically - so you can imagine that the information needs I have for peanut butter sitting on a shelf in a grocery store is quite different than the information needs I might have for the jar of peanut butter in my kitchen cabinet….
  60. Temporal relationships are time-based relationships…
  61. My friend, Ryan and I share a love of chunky peanut butter and I’m also part of the chocolate and peanut butter flickr group…
  62. Now when I say semantic relationships -- I mean the language… the words we use to describe something. If I went to Japan, it would be difficult to pantomime peanut butter, so if I’d probably want to know the word for it…So the web, as it stand today is actually really good at things and semantics. Search, for example is all about semantics…
  63. But what if I wanted a peanut butter sandwich in Denver right now…. I don’t know where you go to get a peanut butter sandwich… how could I use the web and my mobile phone to figure that out? I could use google…
  64. But what I hope these peanut butter examples help highlight is that the web as we know it today is pretty good at people and things… and it’s very good at semantic relationships…
  65. So one framework that I’ve used to help break down the complexity of “context” is to start to think about the world as a series of nouns… people, places and things…
  66. and breathe life into our spatial and temporal relationships to people places and things…
  67. Compare the experience to google maps on a pc vs a mobile device. Google maps on an iphone is one of the best and most used applications out there because it leverages our spatial relationship to data in a way that is very relevant in a mobile context. …
  68. This won’t be easy because there currently aren’t a lot of technology experiences that can serve as great reference points to help us understand place and temporal and spatial relationships.
  69. How do we get that understanding? Well I have three design principles and a design exercise that will do precisely that. It will help you get a better understand on how to understand place, and focus in on temporal and spatial relationships…
  70. Here are three principles…
  71. Interactions on a PC are like scuba diving… experiences can be designed to be immersive.
  72. So here is an exercise to help you get sympathetic to the mobile context… gather a bunch of your colleagues and list out on a whiteboard all you assumptions about mobile devices… And then ceremoniously draw a big X through them…
  73. Next, gather a bunch of objects… a pen, a silk flower, a paint brush
  74. Finally, great mobile experiences speak their power
  75. What do I mean by that?
  76. A great example of an interface that speaks it’s power is a light switch. It’s easy to approach, there’s instant feedback about what it does…it’s clear, it’s easy, and it speaks it’s power
  77. Another great example of an interface that speaks it’s power if a shopping cart. There’s something very intuitive about the form factor and the way a shopping cart is designed that people kinda know what to do with it…
  78. And that is why it was a good metaphor to borrow when we created online commerce
  79. The big reason it’s so important to create interfaces that speak their power in mobile. On the web we are able to provide users with a lot more choices…
  80. Because web pages give us plenty of real estate to annotate expectations
  81. There’s simply not the screen real estate or cognitive energy reserves for that in mobile… options need to be readily apparent, Users need to be able to immediately “grok” what they are seeing and the ways to engage and interact with the interface… To do that, you really have to make a lot of ruthless choices.
  82. How do you make interfaces that speak their power
  83. Three design principles that will help you create interfaces that speak their power are:
  84. This illustration should look familiar… it’s a wireframe…
  85. And while there are a lot of choices and types of information on a web page, they are designed to dump people into a funnel and complete some type of task…
  86. The web has evolved around a task-efficiency model… Mobile is different…
  87. Mobile is more about breaking an experiences down into bite-sized chunks that people can easily consume… and stitching those things together in a way that the experience unfolds like a game…
  88. Each one of these series of need to be precisely honed… but one of the biggest mindshifts that has to happen is that mobile is less about tasks. Mobile isn’t a great platform for a lot of the task-driven experiences we’ve created via the web…
  89. Mobile is about pivoting people through information quickly. Mobile is about exposing possibilities.
  90. Task = what’s the point Possibilities = what can happen
  91. Task-based interactions are about driving users to completion…
  92. Mobile example
  93. This interaction model shifts the focus from task completion to surfacing information and making it easy for people to participate. A great example is Twitter. I’ve long heard folks who’ve never used Twitter ask, “What’s the point?” Compared to a similar experience that uses a more task-centric model like email, Twitter’s value is only revealed as users engage with the service over time.
  94. The value of the interaction is not around completing a task - typing a response to “what are you doing?” - but rather the conversation that can happen as a result.
  95. Interactions that facilitate exploration - This is an interaction model that calls to mind two of my favorite iPhone apps – Koi Pond and Bloom. These are open-ended interaction models that are easy to enter and exit. The interfaces usually have built-in affordances that inspire curiosity and play..
  96. They usually have some type of clear and immediate feedback, are visually rich and engaging, rely on animation to aid in cognition, and often orchestrate touch, gesture and sound into the experience. Pointless? Perhaps. However, there is something so completely intriguing and fun about these interfaces that is far more emotionally satisfying than clicking a send or buy button on a web site
  97. Interactions that Sense Intent - This interaction model is one I’ve been tracking for the last 18 months and is perhaps the most exciting of the three. This model uses information from sensors, use patterns, GPS data and algorithms to anticipate needs and deliver intuitive options that make sense in a particular context. Devices are already doing this today. Sensors and accelerometer data on the iPhone can sense the orientation of the device and adjust the interface and screen orientation accordingly.
  98. The mobile Google Maps application anticipates that users will want to use their current location and automatically integrates it into the interaction. This model seems to be less about enabling users to complete discreet tasks and more about sensing what users want and delivering intuitive options.
  99. So these models might seem interesting -- but a reasonable question to ask is, “How do I design for possibilities”
  100. First, you have to think about web pages as they are today - they are like giant boulders… and you have to dismantle those pages into a consumeable form - like pebbles. Instead of thinking about web experiences from the page-based view, try thinking about it as a series of microformatted data that you can stitch together into an experience that makes sense in a mobile context.
  101. First, you have to think about web pages as they are today - they are like giant boulders… and you have to dismantle those pages into a consumeable form - like pebbles. Instead of thinking about web experiences from the page-based view, try thinking about it as a series of microformatted data that you can stitch together into an experience that makes sense in a mobile context.
  102. People can read a pages - you can see and anticipate everything that you can do on that page… it’s a relatively known experience. But mobile experiences are different… but a mobile they unfold and progressively reveal their nature….it’s like a game, and that idea of a game is actually I think a great metaphor for creating mobile experiences… I like to think of them as creating a card game…
  103. Second, I would suggest thinking about this process like a card game….
  104. Each card speaks it’s power…
  105. You need all the cards - and you win with a good hand…
  106. A design activity that I like to use is to take the user questions we talked about earlier and a stack of blank recipe cards…
  107. And begin to sketch how each card could begin to answer one of those questions…I like these cards because they are slightly larger than scale… but they are pretty close…
  108. So you sketch out all the ways a person could answer a question…
  109. And then you begin to think how a series of cards would answer that question…
  110. But the most important part of this process is to prototype prototype and test test test…
  111. But the most important part of this process is to prototype prototype and test test test…
  112. This is what I call the prototyping swirl… and I know that prototyping is something a lot of folks do to test their web work… but prototyping is truly essential in creating interfaces that speak their power… do it early, do it often.
  113. Mobile is really about moving people through information structures quickly and intuitively. It’s about assembling microformats of data together in a way that makes sense and feels intuitive to users.
  114. From Idea to implementation - prototype throughout the process…
  115. Here is an example of a higher-fidelity paper prototype we created for a project… We tested this with users around the office just to see if they could grok the interactions -- and we got a lot of ideas out of that process, too…
  116. This is an example of a high-fidelity prototype we created on an iphone using the browser and javascript… Now admittedly, there are not a lot of tools out there to help you make high-fidelity prototypes on phones… but that will change. The point is there are a lot of tools - paper, web-based and javascript that are super helpful and can make this process do-able…
  117. So just to close… I want to remind all of you today, good mobile designers are a scarcity. And there are a lot of very broken mobile experiences out there that need the skills of good designers. And you have a lot of the skills that are necessary to improve those experiences
  118. You have the skills and the insights and the curiosity to create mobile experiences that have these attributes…
  119. And remember -- everybody starts somewhere…
  120. Brandon: