Your SlideShare is downloading. ×
0
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Mobile UX Essentials
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile UX Essentials

5,896

Published on

Slides from Mobile UX Essentials workshop at UX Australia, 2010

Slides from Mobile UX Essentials workshop at UX Australia, 2010

Published in: Design
2 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,896
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
266
Comments
2
Likes
35
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile UX EssentialsUX Australia 2010<br />Rachel Hinman<br />Senior Research Scientist <br />Nokia Research Lab <br />Palo Alto, California USA<br />Title<br />
  • 2. 2004<br />I used to be a web designer, too<br />
  • 3. Where do I begin?<br />Q:<br />Where do I begin<br />
  • 4. How can we streamline the checkout process<br />What can we do with mobile?<br />Q:<br />Q:<br />
  • 5. Where do I begin?<br />Q:<br />Where do I begin<br />
  • 6. Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for web and mobile<br />
  • 7. Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for web and mobile<br />Three most important attributes of great mobile experiences<br />
  • 8. Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for web and mobile<br />Three most important attributes of great mobile experiences<br />A set of mobile design principles<br />
  • 9. Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for web and mobile<br />Three most important attributes of great mobile experiences<br />A set of mobile design principles<br />Three mobile design activities<br />
  • 10. Along the way…<br />Along the way<br />Watch for slides with this orange label!<br />Slides Worth Keeping<br />Design Principles<br />Design Activities<br />Shameless Opinion<br />
  • 11. Okay, let’s get started!<br />Okay… let’s get started<br />
  • 12. A<br />What are the similarities<br />What are the similarities?<br />Q:<br />
  • 13. UX designers know how to work <br />in a rapidly evolving field<br />13<br />Web designers know how to work in a rapidly evolving field<br />
  • 14. UX designers understand how to create experiences within technical constraints<br />14<br />Ability to work within technical constraints<br />
  • 15. UX designers use similar tools and processes<br />15<br />Similar Tools… Similar processes<br />
  • 16. What are the differences?<br />What are the differences?<br />A<br />Q:<br />
  • 17. A mobile phone is not a computer <br />17<br />A mobile phone is not a computer<br />
  • 18. umm…. duh!<br />A<br />Um… duh!<br />
  • 19. 19<br />Differences in the mobile environment<br />Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input<br />
  • 20. 20<br />Differences in the mobile environment<br />Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input<br />
  • 21. Differences in the mobile environment<br />Highly variable context and environment<br /> Small screen size and limited text input<br /> UI takes up the entire screen <br /> Difficult to multi-task and easy to get lost<br />21<br />
  • 22. 22<br />Mobile phones started out as a one-to-one<br />
  • 23. They evolved<br />23<br />
  • 24. Mobile phones evolved from the landline phone<br />24<br />
  • 25.
  • 26. 26<br />Smartphone… added <br />
  • 27. 27<br />Smartphone… added <br />Opinion!<br />27<br />
  • 28. Hypothesis vs. Agenda<br />The Rearview Mirror<br />
  • 29. Hypothesis vs. Agenda<br />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.”<br />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.”<br />
  • 30. 30<br />Mobile presents an opportunity to invent new ways…<br />Opinion!<br />Mobile presents an opportunity to invent new ways for users to interact with information.<br />
  • 31. 31<br />iPhone<br />Mobile phones aren’t really phones anymore<br />
  • 32. Hypothesis vs. Agenda<br />
  • 33. Hypothesis vs. Agenda<br />
  • 34. Hypothesis vs. Agenda<br />
  • 35.
  • 36. Hypothesis vs. Agenda<br />
  • 37. Hypothesis vs. Agenda<br />
  • 38. What are the differences?<br />What’s the first step?<br />A<br />Q:<br />
  • 39. 39<br />Shift your perspective and point of view<br />Step One: Know the medium you’re designing for<br />
  • 40. 40<br />Shift your perspective and point of view<br />NO EXCUSES!<br />Buy a modern mobile device<br />
  • 41. 41<br />Shift your perspective and point of view<br />Mobile Culture Indoctrination<br />
  • 42. 42<br />Shift your perspective and point of view<br />Mobile Culture Indoctrination<br />
  • 43. 43<br />Shift your perspective and point of view<br />Images needed<br />Step Two: Observe the culture you’re designing for<br />
  • 44. 44<br />Shift your perspective and point of view<br />Step Three: Brace yourself for a fast and exciting ride<br />
  • 45. Shift your perspective and point of view<br />“The rapid development of cell phones is killing early cell phones much faster than it's killing any of the early, older legacy technologies.<br />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.<br />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.<br />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.”<br />-- Mobile Monday Amsterdam – November 2008<br />Rapid Evolution<br />45<br />
  • 46. 1<br />are uniquely mobile<br />Great Mobile user experiences<br />steal this slide!<br />Great Mobile Experiences:<br />2<br />are sympathetic to context<br />3<br />speak their power<br />
  • 47. Great Mobile Experiences:<br />1<br />are uniquely mobile<br />Great Mobile user experiences<br />
  • 48. Do you remember a time…<br />Do you remember a time when the web was new?<br />Q:<br />A<br />
  • 49. Do you remember a time…<br />“We need a web presence!”<br />!<br />A<br />
  • 50. 50<br />Solution: Brochure - online<br />Brochureware<br />
  • 51. “we need a web presence”<br />“We need online commerce!”<br />!<br />A<br />
  • 52. 52<br />Online commerce<br />What about shipping?<br />
  • 53. Make it like the world<br />“Let’s make our site like…”<br />!<br />A<br />A<br />
  • 54. 54<br />Southwest airlines<br />
  • 55. What we learned from the web<br />Lessons Learned from Web<br />We borrowed broken models. Too focused on tactics. <br />We confused the solution with the need.<br />We didn’t focus on what the web could do well.<br />
  • 56. How do we not do that again?<br />How do we NOT do that again?<br />Q:<br />A<br />A<br />
  • 57. What we learned from the web<br />steal this slide!<br />Design PrinciplesUniquely Mobile<br />Mobile is a unique & different medium- focus on what it can do well. <br />Technology can guide, but should not be the focus. <br />Focus on needs instead of tactics and solutions. <br />
  • 58. What we learned from the web<br />Design Principle: Uniquely Mobile Focus on what mobile can do well<br />
  • 59. What we learned from the web<br />Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus<br />
  • 60. What we learned from the web<br />Design Principle: Uniquely Mobile Need vs. Solution<br />
  • 61. Identify your assumptions<br />Research Techniques<br />INVASIVE<br />Prototype<br /> Testing<br />Deprivation <br />Study<br />Contextual<br />interviews<br /> Diary Studies<br />RESEARCHER<br />PRESENT<br />RESEARCHER<br />NOT PRESENT<br />Online<br />Survey<br />Shadowing<br />Shop Alongs<br />Traffic<br />Studies<br />LESS INVASIVE<br />61<br />
  • 62. Identify your assumptions<br />Research Techniques<br />INVASIVE<br />Prototype<br /> Testing<br />Deprivation <br />Study<br />Use Two Techniques<br />Contextual<br />interviews<br /> Diary Studies<br />RESEARCHER<br />PRESENT<br />RESEARCHER<br />NOT PRESENT<br />Online<br />Survey<br />Shadowing<br />Shop Alongs<br />Traffic<br />Studies<br />LESS INVASIVE<br />62<br />
  • 63. Identify your assumptions<br />Research Techniques<br />INVASIVE<br />Prototype<br /> Testing<br />Deprivation <br />Study<br />Contextual<br />interviews<br /> Diary Studies<br />RESEARCHER<br />PRESENT<br />RESEARCHER<br />NOT PRESENT<br />Online<br />Survey<br />Shadowing<br />Shop Alongs<br />Traffic<br />Studies<br />LESS INVASIVE<br />63<br />
  • 64. 64<br />Identify your assumptions<br />Your Design Challenge!<br />Step 1: Identifying Mobile Needs<br />Activity<br />Divide into groups<br />Read your design challenge<br />Develop a list of mobile needs<br />Identify top 3-5 mobile needs<br />20 Minutes<br />
  • 65. are uniquely mobile<br />1<br />Great Mobile user experiences<br />Great Mobile Experiences:<br />are sympathetic to context<br />2<br />
  • 66. Pictures of mobile contexts<br />What exactly do you mean by mobile “context” ?<br />Q:<br />A<br />
  • 67. Pictures of mobile contexts<br />A<br />
  • 68. More pictures of mobile contexts<br />
  • 69. Social context<br />
  • 70. Context is complex<br />Context is complex!<br />!<br />A<br />
  • 71. Context is about understanding human relationships to the people,places and things in the world.<br />A<br />Context is about understanding the relationships<br />
  • 72. 72<br />Context Framework<br />Context Framework<br />steal this slide!<br />
  • 73. 73<br />Context Framework<br />Context Framework<br />steal this slide!<br />
  • 74. 74<br />Relationships Chording<br />Orchestration and Inflection<br />
  • 75. 75<br />Peanut butter<br />
  • 76. 76<br />Google: Facebook<br />Spatial<br />
  • 77. 77<br />Temporal<br />Temporal<br />
  • 78. Spatial - peanut butter<br />Social<br />78<br />
  • 79. Google: Facebook<br />Semantic<br />79<br />
  • 80. 80<br />Peanut butter in Denver<br />Peanut butter in Melbourne right now?<br />
  • 81. The web is good at people and things.<br />The web is good at semantic relationships.<br />(and okay at social relationships)<br />A<br />Context is about understanding the relationships<br />
  • 82. Context Framework<br />Mobile is good at places…<br />steal this slide!<br />82<br />
  • 83. Context Framework<br />Mobile is good at spatial and temporal relationships.<br />steal this slide!<br />83<br />
  • 84. 84<br />Google maps - PC vs. Mobile<br />
  • 85. Temporal and spatial relationships are underserved<br />There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.<br />85<br />
  • 86. How do you get that understanding?<br />How do we get that understanding?<br />Q:<br />
  • 87. Design for partial attention and interruption<br />1<br />Sympathy to context principles<br />Design Principles:<br />Sympathy to Context<br />steal this slide!<br />2<br />Reduce cognitive load and opportunity cost<br />3<br />Ideate in the wild<br />
  • 88. Design for partial attention and interruption<br />88<br />Text entry will never be easy<br />
  • 89. 89<br />Text entry will never be easy<br />Design for partial attention and interruption<br />
  • 90. Opportunity cost<br />90<br />
  • 91. 91<br />Text entry will never be easy<br />Ideate in the wild…<br />
  • 92. 92<br />Wand in the world<br />Your Design Challenge!<br />Step 2: Sympathy to the mobile context<br />Activity<br />Divide into groups<br />Head to the streets<br />Ideate in the wild – Create 2-3 concepts based on the needs your team identified<br />20-30 Minutes<br />
  • 93. 93<br />“in the wild” ideation<br />Activity<br />Go outside and brainstorm ideas<br />
  • 94. 94<br />“in the wild” ideation<br />Activity<br />20-30 Minutes<br />
  • 95. Context Framework<br />Mobile is good at places…<br />steal this slide!<br />95<br />
  • 96. Context Framework<br />Mobile is good at places…<br />steal this slide!<br />96<br />
  • 97. Great Mobile Experiences:<br />are uniquely mobile<br />1<br />Great Mobile user experiences<br />are sympathetic to context<br />2<br />speak their power<br />3<br />
  • 98. Speak their power?<br />Huh?<br />Q:<br />A<br />
  • 99. A light switch<br />99<br />
  • 100. Shopping cart<br />100<br />
  • 101. Shopping cart<br />101<br />
  • 102. We can annotate expectations in the web world<br />102<br />We can annotate expectations in the web world<br />
  • 103. We can annotate expectations in the web world<br />Free two-day shipping<br />Look inside the book<br />REALLY!Look inside the book<br />Get it new OR used!<br />Sell mine<br />Add to cart<br />Shipping!<br />Collectible!<br />Maybe a kindle!<br />We can annotate expectations in the web world<br />103<br />
  • 104. Options in mobile have to be readily apparent<br />104<br />Options have to be apparent and intuitive in mobile for people to <br />
  • 105. How do you make interfaces that speak their power<br />How do I create mobile interfaces that “speak their power”?<br />Q:<br />A<br />
  • 106. Say good bye to done<br />steal this slide!<br />Design Principles:<br />Interfaces that speak their power<br />Understand the characteristics of GUI, NUI, OUI interfaces <br />1<br />2<br />Grow ruthless editing skills<br />3<br />Say good-bye to done<br />
  • 107. steal this slide!<br />107<br />Wireframe<br />
  • 108. 108<br />Wireframe<br />We’re reaching the edges of what GUI can do<br />
  • 109. 109<br />Wireframe<br />It’s not longer “what you see it what you get…”<br />
  • 110. 110<br />Wireframe<br />…now it’s “what you do is what you get”<br />
  • 111. 111<br />Wireframe<br />Different platforms express characteristics differently<br />
  • 112. steal this slide!<br />112<br />Wireframe<br />
  • 113. 113<br />Wireframe<br />Ruthless editing is part of the NUI design process<br />
  • 114. Say Goodbye do done<br />114<br />Wireframe<br />
  • 115. This should look familiar…<br />115<br />Wireframe<br />
  • 116. 116<br />Wireframe<br />This should look familiar…<br />The web has evolved around a task-efficiency model.<br />Mobile is different.<br />
  • 117. Mobile is different….<br />117<br />Mobile is different<br />
  • 118. Mobile is different….<br />118<br />Mobile is different<br />
  • 119. 119<br />Mobile is different<br />Mobile is different….<br />Mobile is about pivoting people through information quickly.<br />It’s about exposing possibilities.<br />
  • 120. What’s the point?<br />“What can happen?”<br />“What’s the point?”<br />TASK<br />POSSIBILITIES<br />
  • 121. Tasks are about completion…<br />121<br />Tasks are about completion<br />
  • 122. 122<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br />
  • 123. Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br />… or facilitate exploration…<br />123<br />
  • 124. … or facilitate exploration…<br />124<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br />..or are about SENSING<br />INTENT!<br />
  • 125. 125<br />Example - <br />
  • 126. 126<br />Example - <br />
  • 127. 127<br />Example - <br />
  • 128. 128<br />Example - <br />
  • 129. 129<br />Example - <br />
  • 130. 130<br />Example - <br />
  • 131. How do you make interfaces that speak their power<br />How do I design for possibilities?<br />Q:<br />A<br />
  • 132. How do you make interfaces that speak their power<br />A<br />132<br />
  • 133. How do you make interfaces that speak their power<br />A<br />133<br />
  • 134. How do you make interfaces that speak their power<br />A<br />134<br />
  • 135. It’s like a card game…<br />135<br />It’s like a game of cards<br />
  • 136. Each card speaks it’s power<br />136<br />It’s like a game of cards<br />
  • 137. You win with a good hand<br />137<br />It’s like a game of cards<br />
  • 138. Pivoting people through information<br />Your Design Challenge!<br />Step 3: Creating a good hand<br />Activity<br />138<br />
  • 139. Pivoting people through information<br />139<br />
  • 140. Pivoting people through information<br />Create a winning hand.<br />Activity<br />140<br />
  • 141. Pivoting people through information<br />Create a winning hand.<br />Activity<br />Stitch cards together to answer the question<br />Allow people to pivot through information quickly<br />141<br />
  • 142. Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />142<br />Prototype<br />
  • 143. 143<br />Analogy of cards<br />Process<br />Prototype at every stage<br />
  • 144. 144<br />Analogy of cards<br />Process<br />Prototyping “Swirl”<br />
  • 145. Pivoting people through information<br />145<br />
  • 146. Pivoting people through information<br />146<br />
  • 147. Paper Prototype example<br />147<br />
  • 148. Pivoting people through information<br />148<br />
  • 149. High fidelity prototype example<br />
  • 150. Can users grok it?<br />Can users grok it?<br />Does each screen speak it’s power?<br />Can I simplify this?<br />Is this intuitive?<br />Q:<br />Q:<br />Q:<br />Q:<br />150<br />
  • 151. Analogy of cards<br />steal this slide!<br />Tips for mobile prototyping<br />Plan for a lot of it!<br />1<br />Work at scale and print it out!<br />2<br />Get it on the device as soon as you can.<br />2<br />151<br />
  • 152. Analogy of cards<br />Some info about mobile web/ and app programming:<br />iPhone Apps = Xcode<br />1<br />Android Apps = Java (managed code) <br />2<br />Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites andWeb Apps by Brian Fling<br />152<br />
  • 153. Where do I begin?<br />Where do I begin?<br />Q:<br />
  • 154. are uniquely mobile<br />1<br />Great Mobile user experiences<br />steal this slide!<br />Great Mobile Experiences:<br />are sympathetic to context<br />2<br />speak their power<br />3<br />
  • 155. Everybody starts somewhere<br />Everybody starts somewhere….<br />
  • 156. Good luck<br />Good luck!<br />
  • 157. Thank you!<br />Email:<br />rachel.hinman@nokia.com<br />Thanks, and next up…<br />
  • 158. Resources:<br />MOBILE RESOURCESUltimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413<br />mooTools http://mootools.netiUI iPhone navigation (javascript):http://code.google.com/p/iui/<br />jQuery (javascript):http://jquery.com/<br />TweenMax (actionscript):http://blog.greensock.com/tweenmaxas3/<br />Bruce Sterling speaks on the future of mobilehttp://tinyurl.com/6m7kwc<br />RESOURCES<br />
  • 159. Q?<br />Q&A: final break<br />

×