SlideShare a Scribd company logo
Mobile UX EssentialsSilicon Valley IxDA Rachel Hinman Senior Research Scientist   Nokia Research Lab  Palo Alto, California USA Title
2004
Where do I begin? Q: Where do I begin
What can we do with mobile? Q: Q:
Where do I begin? Q: Where do I begin
Our plan for today… Our plan for today Similarities and differences between designing for the PC and mobile
Our plan for today… Our plan for today Similarities and differences between designing for the PC and mobile Three most important attributes of great mobile experiences
Our plan for today… Our plan for today Similarities and differences between designing for the PC 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 the PC and mobile Three most important attributes of great mobile experiences A set of mobile design principles Mobile design activities
Along the way… Along the way Watch for slides with this orange label! Slides Worth Keeping Design Principles Design Activities Shameless Opinion
Okay, let’s get started! Okay… let’s get started
A What are the similarities What are the similarities? Q:
UX designers know how to work  in a rapidly evolving field 13 Web designers know how to work in a rapidly evolving field
UX designers understand how to create experiences within technical constraints 14 Ability to work within technical constraints
UX designers use similar tools and processes 15 Similar Tools… Similar processes
What are the differences? What are the differences? A Q:
A mobile phone is not a computer  17 A mobile phone is not a computer
umm…. duh! A 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
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 21
22 Mobile phones started out as a one-to-one
They evolved 23
Mobile phones evolved from the landline phone 24
26 Smartphone… added
27 Smartphone… added  Opinion! 27
The Rearview Mirror
Hypothesis vs. Agenda 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… Opinion! Mobile UX presents you with the opportunity to invent new ways for people to interact with information.
31 iPhone Mobile phones aren’t really phones anymore
Hypothesis vs. Agenda
Hypothesis vs. Agenda Work outside the contours  of your own assumptions
Hypothesis vs. Agenda
What are the differences? What’s the first step? A Q:
36 Shift your perspective and point of view Step One: Know the medium you’re designing for
37 Shift your perspective and point of view NO EXCUSES! Buy a modern mobile device
38 Shift your perspective and point of view Step Two: Participate in the cultureyou are designing for
39 Shift your perspective and point of view Images needed Cultivate mobile “mindfulness”
40 Shift your perspective and point of view Step Three: Embrace the chaos
Shift your perspective and point of view “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 Rapid Evolution 41
1 are uniquely mobile Great Mobile user experiences steal this slide! Great Mobile Experiences: 2 are sympathetic to context 3 speak their power
Great Mobile Experiences: 1 are uniquely mobile Great Mobile user experiences
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!” ! A
46 Solution: Brochure - online Brochureware
“we need a web presence” “We need online commerce!” ! A
48 Online commerce What about shipping?
Make it like the world “Let’s make our site like…” ! A A
50 Southwest airlines
What we learned from the web 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.
How do we not do that again? How do we NOT do that again? Q: A A
What we learned from the web steal this slide! Design PrinciplesUniquely 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
What we learned from the web Design Principle: Uniquely Mobile Focus on what mobile can do well
vs 56 Identify your assumptions
57 Identify your assumptions vs
What we learned from the web Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus
What we learned from the web Design Principle: Uniquely Mobile Need vs. Solution
Identify your assumptions Research Techniques INVASIVE Prototype  Testing Deprivation  Study Contextual interviews  Diary Studies RESEARCHER PRESENT RESEARCHER NOT PRESENT Online Survey Shadowing Shop Alongs Traffic Studies LESS INVASIVE 60
Identify your assumptions Research Techniques INVASIVE Prototype  Testing Deprivation  Study Use Two Techniques Contextual interviews  Diary Studies RESEARCHER PRESENT RESEARCHER NOT PRESENT Online Survey Shadowing Shop Alongs Traffic Studies LESS INVASIVE 61
Identify your assumptions Research Techniques INVASIVE Prototype  Testing Deprivation  Study Contextual interviews  Diary Studies RESEARCHER PRESENT RESEARCHER NOT PRESENT Online Survey Shadowing Shop Alongs Traffic Studies LESS INVASIVE 62
are uniquely mobile 1 Great Mobile user experiences Great Mobile Experiences: are sympathetic to context 2
Pictures of mobile contexts What exactly do you mean by mobile “context” ? Q: A
Pictures of mobile contexts A
More pictures of mobile contexts
Social context
Context is complex Context is complex! ! A
Context is about understanding human relationships to the people,places and things in the world. A Context is about understanding the relationships
70 Context Framework Context Framework steal this slide!
71 Context Framework Context Framework steal this slide!
72 Relationships Chording Orchestration and Inflection
73 Peanut butter
74 Google: Facebook Spatial
75 Temporal Temporal
Spatial - peanut butter Social 76
Google: Facebook Semantic 77
78 Peanut butter in Denver Peanut butter in Melbourne right now?
The web is good at people and things. The web is good at semantic relationships. (and okay at social relationships) A Context is about understanding the relationships
Context Framework Mobile is good at places… steal this slide! 80
Context Framework Mobile is good at spatial and temporal relationships. steal this slide! 81
82 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. 83
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 steal this slide! 2 Reduce cognitive load and opportunity cost 3 Ideate in the wild
Design for partial attention and interruption 86 Text entry will never be easy
87 Text entry will never be easy Design for partial attention and interruption
Reduce cognitive load and opportunity cost 88
89 Text entry will never be easy Ideate in the wild…
90 Wand in the world Your Design Challenge! Sympathy to the mobile context Activity Divide into groups Head to the streets Ideate in the wild – Create 2-3 concepts based on the needs your team identified
91 “in the wild” ideation Activity Go outside and brainstorm ideas
92 “in the wild” ideation Activity Sketch your ideas…
Context Framework Mobile is good at places… steal this slide! 93
Context Framework Mobile is good at places… steal this slide! 94
Great Mobile Experiences: are uniquely mobile 1 Great Mobile user experiences are sympathetic to context 2 speak their power 3
Speak their power? Huh? Q: A
A light switch 97
Shopping cart 98
Shopping cart 99
We can annotate expectations in the web world 100 We can annotate expectations in the web world
We can annotate expectations in the web world Free two-day shipping Look inside the book REALLY!Look inside the book Get it new OR used! Sell mine Add to cart Shipping! Collectible! Maybe a kindle! We can annotate expectations in the web world 101
Options in mobile have to be readily apparent 102 Options have to be apparent and intuitive in mobile for people to
How do you make interfaces that speak their power How do I create mobile interfaces that “speak their power”? Q: A
Say good bye to done steal this slide! Design Principles: Interfaces that speak their power Understand the characteristics of GUI, NUI, OUI interfaces  1 2 Grow ruthless editing skills 3 Say good-bye to done
steal this slide! 105 Wireframe
106 Wireframe GUI = Metaphorics, containment and place
107 Wireframe Recognition vs. Recall
108 Wireframe We’re reaching the edges of what GUI can do
109 Wireframe It’s not longer “what you see is what you get…”
110 Wireframe …now it’s “what you do is what you get”
111 Wireframe Different platforms express characteristics differently
112 Wireframe steal this slide!
113 Wireframe Ruthless editing is part of the NUI design process
Say Goodbye to done 114 Wireframe
This should look familiar… 115 Wireframe
116 Wireframe This should look familiar… The web has evolved around a task-efficiency model. Mobile is different.
Mobile is different…. 117 Mobile is different
Mobile is different…. 118 Mobile is different
119 Mobile is different Mobile is different…. Mobile is about pivoting people through information quickly. It’s about exposing possibilities.
What’s the point? “What can happen?” “What’s the point?” TASK POSSIBILITIES
Tasks are about completion… 121 Tasks are about completion
122 Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time…
Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time… … or facilitate exploration… 123
… or facilitate exploration… 124 Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time… ..or are about SENSING INTENT!
125 Example -
126 Example -
127 Example -
128 Example -
129 Example -
130 Example -
How do you make interfaces that speak their power How do I design for possibilities? Q: A
How do you make interfaces that speak their power A 132
How do you make interfaces that speak their power A 133
How do you make interfaces that speak their power A 134
It’s like a card game… 135 It’s like a game of cards
Each card speaks it’s power 136 It’s like a game of cards
You win with a good hand 137 It’s like a game of cards
Pivoting people through information Your Design Challenge! Step 3: Creating a good hand Activity 138
Pivoting people through information 139
Pivoting people through information Create a winning hand. Activity 140
Pivoting people through information Create a winning hand. Activity Stitch cards together to answer the question Allow people to pivot through information quickly 141
Prototype Prototype Prototype Prototype Prototype Prototype 142 Prototype
143 Analogy of cards Process Prototype at every stage
144 Analogy of cards Process Prototyping “Swirl”
Pivoting people through information 145
Pivoting people through information 146
Paper Prototype example 147
Pivoting people through information 148
High fidelity prototype example
Can users grok it? Can users grok it? Does each screen speak it’s power? Can I simplify this? Is this intuitive? Q: Q: Q: Q: 150
Analogy of cards steal this slide! Tips for mobile prototyping Plan for a lot of it! 1 Work at scale and print it out! 2 Get it on the device as soon as you can. 2 151
Analogy of cards Some info about mobile web/ and app programming: iPhone Apps = Xcode 1 Android Apps = Java (managed code)  2 Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps by Brian Fling 152
Where do I begin? Where do I begin? Q:
are uniquely mobile 1 Great Mobile user experiences steal this slide! Great Mobile Experiences: are sympathetic to context 2 speak their power 3
Everybody starts somewhere Everybody starts somewhere….
Good luck Good luck!
Thank you! Email: rachel.hinman@nokia.com The Mobile Frontier www.rosenfeldmedia.com/books/mobile-design/ 		Friday, February 18th 		http://www.uxhongkong.com/ 157
Resources: MOBILE RESOURCESUltimate 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

More Related Content

Viewers also liked

Strings connect
Strings connectStrings connect
Strings connect
Akash Seelam
 
Message Queuing (MSMQ)
Message Queuing (MSMQ)Message Queuing (MSMQ)
Message Queuing (MSMQ)
Senior Dev
 
Developing My Online Professional Learning Network
Developing My Online Professional Learning NetworkDeveloping My Online Professional Learning Network
Developing My Online Professional Learning Network
lisbk
 
Resultados etapa excepcional 12 10-2016
Resultados  etapa excepcional 12 10-2016Resultados  etapa excepcional 12 10-2016
Resultados etapa excepcional 12 10-2016
ELVIN VEGA ESPINOZA
 
GCSE Physics Conduction of Heat
GCSE Physics Conduction of HeatGCSE Physics Conduction of Heat
GCSE Physics Conduction of Heat
sherinshaju
 
Cronica tita
Cronica titaCronica tita
Cronica tita
Polo Apolo
 
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル智治 長沢
 
Curso de Mini-Basket Baloncesto Formativo
Curso de Mini-Basket Baloncesto FormativoCurso de Mini-Basket Baloncesto Formativo
Curso de Mini-Basket Baloncesto Formativo
Educagratis
 
IPhone Application Development India |#IPhoneApplicationDevelopmentIndia
IPhone Application Development India |#IPhoneApplicationDevelopmentIndiaIPhone Application Development India |#IPhoneApplicationDevelopmentIndia
IPhone Application Development India |#IPhoneApplicationDevelopmentIndia
Mobile App Developers India
 
Tech Backpack Journey till May 2013
Tech Backpack Journey till May 2013Tech Backpack Journey till May 2013
Tech Backpack Journey till May 2013
Tech Backpack
 
How to Prepare for Information Technology
How to Prepare for Information TechnologyHow to Prepare for Information Technology
How to Prepare for Information Technology
Sudheer Paidi
 

Viewers also liked (11)

Strings connect
Strings connectStrings connect
Strings connect
 
Message Queuing (MSMQ)
Message Queuing (MSMQ)Message Queuing (MSMQ)
Message Queuing (MSMQ)
 
Developing My Online Professional Learning Network
Developing My Online Professional Learning NetworkDeveloping My Online Professional Learning Network
Developing My Online Professional Learning Network
 
Resultados etapa excepcional 12 10-2016
Resultados  etapa excepcional 12 10-2016Resultados  etapa excepcional 12 10-2016
Resultados etapa excepcional 12 10-2016
 
GCSE Physics Conduction of Heat
GCSE Physics Conduction of HeatGCSE Physics Conduction of Heat
GCSE Physics Conduction of Heat
 
Cronica tita
Cronica titaCronica tita
Cronica tita
 
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
 
Curso de Mini-Basket Baloncesto Formativo
Curso de Mini-Basket Baloncesto FormativoCurso de Mini-Basket Baloncesto Formativo
Curso de Mini-Basket Baloncesto Formativo
 
IPhone Application Development India |#IPhoneApplicationDevelopmentIndia
IPhone Application Development India |#IPhoneApplicationDevelopmentIndiaIPhone Application Development India |#IPhoneApplicationDevelopmentIndia
IPhone Application Development India |#IPhoneApplicationDevelopmentIndia
 
Tech Backpack Journey till May 2013
Tech Backpack Journey till May 2013Tech Backpack Journey till May 2013
Tech Backpack Journey till May 2013
 
How to Prepare for Information Technology
How to Prepare for Information TechnologyHow to Prepare for Information Technology
How to Prepare for Information Technology
 

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 2
Rachel Hinman
 
Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1
Rachel Hinman
 
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part IIMobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Rachel Hinman
 
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part OneMobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Rachel Hinman
 
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierFinal virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Rachel Hinman
 
The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
Rachel 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 Australia
Rachel Hinman
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
Rachel Hinman
 
The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
Rachel Hinman
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
Rachel Hinman
 
Mobile UX Essentials
Mobile UX EssentialsMobile UX Essentials
Mobile UX Essentials
Rachel Hinman
 
Technology as a Cultural Practice
Technology as a Cultural PracticeTechnology as a Cultural Practice
Technology as a Cultural Practice
Rachel 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 Reason
Rachel 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

International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
RashmitaSwain3
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 

Recently uploaded (20)

International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 

Mobile UX Essentials - Silicon Valley IxDA/BayChi

  • 1. Mobile UX EssentialsSilicon Valley IxDA Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Title
  • 3. Where do I begin? Q: Where do I begin
  • 4. What can we do with mobile? Q: Q:
  • 5. Where do I begin? Q: Where do I begin
  • 6. Our plan for today… Our plan for today Similarities and differences between designing for the PC and mobile
  • 7. Our plan for today… Our plan for today Similarities and differences between designing for the PC and mobile Three most important attributes of great mobile experiences
  • 8. Our plan for today… Our plan for today Similarities and differences between designing for the PC and mobile Three most important attributes of great mobile experiences A set of mobile design principles
  • 9. Our plan for today… Our plan for today Similarities and differences between designing for the PC and mobile Three most important attributes of great mobile experiences A set of mobile design principles Mobile design activities
  • 10. Along the way… Along the way Watch for slides with this orange label! Slides Worth Keeping Design Principles Design Activities Shameless Opinion
  • 11. Okay, let’s get started! Okay… let’s get started
  • 12. A What are the similarities What are the similarities? Q:
  • 13. UX designers know how to work in a rapidly evolving field 13 Web designers know how to work in a rapidly evolving field
  • 14. UX designers understand how to create experiences within technical constraints 14 Ability to work within technical constraints
  • 15. UX designers use similar tools and processes 15 Similar Tools… Similar processes
  • 16. What are the differences? What are the differences? A Q:
  • 17. A mobile phone is not a computer 17 A mobile phone is not a computer
  • 18. umm…. duh! A Um… duh!
  • 19. 19 Differences in the mobile environment Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input
  • 20. 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 21
  • 22. 22 Mobile phones started out as a one-to-one
  • 24. Mobile phones evolved from the landline phone 24
  • 25.
  • 27. 27 Smartphone… added Opinion! 27
  • 29. Hypothesis vs. Agenda 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. 30 Mobile presents an opportunity to invent new ways… Opinion! Mobile UX presents you with the opportunity to invent new ways for people to interact with information.
  • 31. 31 iPhone Mobile phones aren’t really phones anymore
  • 33. Hypothesis vs. Agenda Work outside the contours of your own assumptions
  • 35. What are the differences? What’s the first step? A Q:
  • 36. 36 Shift your perspective and point of view Step One: Know the medium you’re designing for
  • 37. 37 Shift your perspective and point of view NO EXCUSES! Buy a modern mobile device
  • 38. 38 Shift your perspective and point of view Step Two: Participate in the cultureyou are designing for
  • 39. 39 Shift your perspective and point of view Images needed Cultivate mobile “mindfulness”
  • 40. 40 Shift your perspective and point of view Step Three: Embrace the chaos
  • 41. Shift your perspective and point of view “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 Rapid Evolution 41
  • 42. 1 are uniquely mobile Great Mobile user experiences steal this slide! Great Mobile Experiences: 2 are sympathetic to context 3 speak their power
  • 43. Great Mobile Experiences: 1 are uniquely mobile Great Mobile user experiences
  • 44. Do you remember a time… Do you remember a time when the web was new? Q: A
  • 45. Do you remember a time… “We need a web presence!” ! A
  • 46. 46 Solution: Brochure - online Brochureware
  • 47. “we need a web presence” “We need online commerce!” ! A
  • 48. 48 Online commerce What about shipping?
  • 49. Make it like the world “Let’s make our site like…” ! A A
  • 51. What we learned from the web 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.
  • 52. How do we not do that again? How do we NOT do that again? Q: A A
  • 53. What we learned from the web steal this slide! Design PrinciplesUniquely 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.
  • 54. Design Principle: Uniquely Mobile Focus on what mobile can do well
  • 55. What we learned from the web Design Principle: Uniquely Mobile Focus on what mobile can do well
  • 56. vs 56 Identify your assumptions
  • 57. 57 Identify your assumptions vs
  • 58. What we learned from the web Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus
  • 59. What we learned from the web Design Principle: Uniquely Mobile Need vs. Solution
  • 60. Identify your assumptions Research Techniques INVASIVE Prototype Testing Deprivation Study Contextual interviews Diary Studies RESEARCHER PRESENT RESEARCHER NOT PRESENT Online Survey Shadowing Shop Alongs Traffic Studies LESS INVASIVE 60
  • 61. Identify your assumptions Research Techniques INVASIVE Prototype Testing Deprivation Study Use Two Techniques Contextual interviews Diary Studies RESEARCHER PRESENT RESEARCHER NOT PRESENT Online Survey Shadowing Shop Alongs Traffic Studies LESS INVASIVE 61
  • 62. Identify your assumptions Research Techniques INVASIVE Prototype Testing Deprivation Study Contextual interviews Diary Studies RESEARCHER PRESENT RESEARCHER NOT PRESENT Online Survey Shadowing Shop Alongs Traffic Studies LESS INVASIVE 62
  • 63. are uniquely mobile 1 Great Mobile user experiences Great Mobile Experiences: are sympathetic to context 2
  • 64. Pictures of mobile contexts What exactly do you mean by mobile “context” ? Q: A
  • 65. Pictures of mobile contexts A
  • 66. More pictures of mobile contexts
  • 68. Context is complex Context is complex! ! A
  • 69. Context is about understanding human relationships to the people,places and things in the world. A Context is about understanding the relationships
  • 70. 70 Context Framework Context Framework steal this slide!
  • 71. 71 Context Framework Context Framework steal this slide!
  • 72. 72 Relationships Chording Orchestration and Inflection
  • 76. Spatial - peanut butter Social 76
  • 78. 78 Peanut butter in Denver Peanut butter in Melbourne right now?
  • 79. The web is good at people and things. The web is good at semantic relationships. (and okay at social relationships) A Context is about understanding the relationships
  • 80. Context Framework Mobile is good at places… steal this slide! 80
  • 81. Context Framework Mobile is good at spatial and temporal relationships. steal this slide! 81
  • 82. 82 Google maps - PC vs. Mobile
  • 83. Temporal and spatial relationships are underserved There are currently not many technologiesthat help us understand place, and temporal and spatial relationships. 83
  • 84. How do you get that understanding? How do we get that understanding? Q:
  • 85. Design for partial attention and interruption 1 Sympathy to context principles Design Principles: Sympathy to Context steal this slide! 2 Reduce cognitive load and opportunity cost 3 Ideate in the wild
  • 86. Design for partial attention and interruption 86 Text entry will never be easy
  • 87. 87 Text entry will never be easy Design for partial attention and interruption
  • 88. Reduce cognitive load and opportunity cost 88
  • 89. 89 Text entry will never be easy Ideate in the wild…
  • 90. 90 Wand in the world Your Design Challenge! Sympathy to the mobile context Activity Divide into groups Head to the streets Ideate in the wild – Create 2-3 concepts based on the needs your team identified
  • 91. 91 “in the wild” ideation Activity Go outside and brainstorm ideas
  • 92. 92 “in the wild” ideation Activity Sketch your ideas…
  • 93. Context Framework Mobile is good at places… steal this slide! 93
  • 94. Context Framework Mobile is good at places… steal this slide! 94
  • 95. Great Mobile Experiences: are uniquely mobile 1 Great Mobile user experiences are sympathetic to context 2 speak their power 3
  • 96. Speak their power? Huh? Q: A
  • 100. We can annotate expectations in the web world 100 We can annotate expectations in the web world
  • 101. We can annotate expectations in the web world Free two-day shipping Look inside the book REALLY!Look inside the book Get it new OR used! Sell mine Add to cart Shipping! Collectible! Maybe a kindle! We can annotate expectations in the web world 101
  • 102. Options in mobile have to be readily apparent 102 Options have to be apparent and intuitive in mobile for people to
  • 103. How do you make interfaces that speak their power How do I create mobile interfaces that “speak their power”? Q: A
  • 104. Say good bye to done steal this slide! Design Principles: Interfaces that speak their power Understand the characteristics of GUI, NUI, OUI interfaces 1 2 Grow ruthless editing skills 3 Say good-bye to done
  • 105. steal this slide! 105 Wireframe
  • 106. 106 Wireframe GUI = Metaphorics, containment and place
  • 108. 108 Wireframe We’re reaching the edges of what GUI can do
  • 109. 109 Wireframe It’s not longer “what you see is what you get…”
  • 110. 110 Wireframe …now it’s “what you do is what you get”
  • 111. 111 Wireframe Different platforms express characteristics differently
  • 112. 112 Wireframe steal this slide!
  • 113. 113 Wireframe Ruthless editing is part of the NUI design process
  • 114. Say Goodbye to done 114 Wireframe
  • 115. This should look familiar… 115 Wireframe
  • 116. 116 Wireframe This should look familiar… The web has evolved around a task-efficiency model. Mobile is different.
  • 117. Mobile is different…. 117 Mobile is different
  • 118. Mobile is different…. 118 Mobile is different
  • 119. 119 Mobile is different Mobile is different…. Mobile is about pivoting people through information quickly. It’s about exposing possibilities.
  • 120. What’s the point? “What can happen?” “What’s the point?” TASK POSSIBILITIES
  • 121. Tasks are about completion… 121 Tasks are about completion
  • 122. 122 Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time…
  • 123. Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time… … or facilitate exploration… 123
  • 124. … or facilitate exploration… 124 Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time… ..or are about SENSING INTENT!
  • 131. How do you make interfaces that speak their power How do I design for possibilities? Q: A
  • 132. How do you make interfaces that speak their power A 132
  • 133. How do you make interfaces that speak their power A 133
  • 134. How do you make interfaces that speak their power A 134
  • 135. It’s like a card game… 135 It’s like a game of cards
  • 136. Each card speaks it’s power 136 It’s like a game of cards
  • 137. You win with a good hand 137 It’s like a game of cards
  • 138. Pivoting people through information Your Design Challenge! Step 3: Creating a good hand Activity 138
  • 139. Pivoting people through information 139
  • 140. Pivoting people through information Create a winning hand. Activity 140
  • 141. Pivoting people through information Create a winning hand. Activity Stitch cards together to answer the question Allow people to pivot through information quickly 141
  • 142. Prototype Prototype Prototype Prototype Prototype Prototype 142 Prototype
  • 143. 143 Analogy of cards Process Prototype at every stage
  • 144. 144 Analogy of cards Process Prototyping “Swirl”
  • 145. Pivoting people through information 145
  • 146. Pivoting people through information 146
  • 148. Pivoting people through information 148
  • 150. Can users grok it? Can users grok it? Does each screen speak it’s power? Can I simplify this? Is this intuitive? Q: Q: Q: Q: 150
  • 151. Analogy of cards steal this slide! Tips for mobile prototyping Plan for a lot of it! 1 Work at scale and print it out! 2 Get it on the device as soon as you can. 2 151
  • 152. Analogy of cards Some info about mobile web/ and app programming: iPhone Apps = Xcode 1 Android Apps = Java (managed code) 2 Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps by Brian Fling 152
  • 153. Where do I begin? Where do I begin? Q:
  • 154. are uniquely mobile 1 Great Mobile user experiences steal this slide! Great Mobile Experiences: are sympathetic to context 2 speak their power 3
  • 155. Everybody starts somewhere Everybody starts somewhere….
  • 156. Good luck Good luck!
  • 157. Thank you! Email: rachel.hinman@nokia.com The Mobile Frontier www.rosenfeldmedia.com/books/mobile-design/ Friday, February 18th http://www.uxhongkong.com/ 157
  • 158. Resources: MOBILE RESOURCESUltimate 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
  • 159. Q? Q&A: final break