Recent innovations are causing an inflection point in the mobile UX landscape, providing the opportunity to invent new and more human ways for people to interact with information. But where do designers who are steeped in the static desktop-computing paradigm begin? The purpose of this talk is to help UX designers and other UX professionals answer that very question. I'll share the three most important mobile design principles to consider when creating a mobile user experience, some mobile design exercises, and mobile prototyping tips.
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
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
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.
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
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.
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
69. Context is about understanding human relationships to the people,places and things in the world. A Context is about understanding the relationships
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
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
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…
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
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!
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
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
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