Successfully reported this slideshow.
Your SlideShare is downloading. ×

Mobile User Experience: What Web Designers Need to Know

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 130 Ad

Mobile User Experience: What Web Designers Need to Know

Download to read offline

Until recently, the mobile internet was a crippled user experience due to product, interface and technical constraints. Recent innovations are causing an inflection point for the mobile internet, enabling new and exciting opportunities for mobile user experience. But how do folks who are well versed in creating PC-based internet experiences begin to engage with mobile?

This presentation is designed to help web design professionals answer that question as well as:

- Provide insight into how web designers can begin to approach mobile user experiences.
- Identify key similarities and differences in designing for PC/mobile experiences.
- Provide frameworks and design principles for creating compelling mobile experiences.

Until recently, the mobile internet was a crippled user experience due to product, interface and technical constraints. Recent innovations are causing an inflection point for the mobile internet, enabling new and exciting opportunities for mobile user experience. But how do folks who are well versed in creating PC-based internet experiences begin to engage with mobile?

This presentation is designed to help web design professionals answer that question as well as:

- Provide insight into how web designers can begin to approach mobile user experiences.
- Identify key similarities and differences in designing for PC/mobile experiences.
- Provide frameworks and design principles for creating compelling mobile experiences.

Advertisement
Advertisement

More Related Content

Viewers also liked (10)

Advertisement

Recently uploaded (20)

Mobile User Experience: What Web Designers Need to Know

  1. Rachel Hinman Mobile User Experience What Web Designers Need to Know
  2. I used to be a web designer.
  3. 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 :
  4. 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 :
  5. Q : Where do I begin?
  6. Our plan for today… Similarities and differences between designing for web and mobile
  7. Our plan for today… Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences
  8. 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
  9. 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
  10. Along the way… Slides Worth Keeping Shameless Opinion Design Activities Design Principles Watch for slides with this orangelabel!
  11. Okay, let’s get started!
  12. A What are the similarities?Q :
  13. Web designers know how to work in a rapidly evolving field 13
  14. Web designers understand how to create experiences within technical constraints 14
  15. Web designers use similar tools and processes 15
  16. AQ : What are the differences?
  17. A mobile phone is not a computer 17
  18. A umm…. duh!
  19. 19 Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input
  20. 20 Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input
  21. 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. 22
  23. 23
  24. 24
  25. 25
  26. 26 26 Opinion!
  27. 27 Mobile phones aren’t really phones anymore
  28. 28 Mobile presents an opportunity to invent new ways for users to interact with information. Opinion!
  29. 29 Expert to Explorer
  30. 30 Understand your assumptions
  31. are uniquely mobile1 Great Mobile Experiences: are sympathetic to context2 speak their power3 steal thisslide!
  32. are uniquely mobile1 Great Mobile Experiences:
  33. A Do you remember a time when the web was new? Q :
  34. A “We need a web presence!”!
  35. 35 Brochureware
  36. A “We need online commerce!”!
  37. 37 What about shipping?
  38. AA “Let’s make our site like…”!
  39. 39
  40. 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.
  41. AA How do we NOT do that again? Q :
  42. 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!
  43. 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. 44 Unpack your computer and mobile baggage… Activity
  45. 45 What are the needs? Activity What need does this information fill? Frame it as a question from the perspective of a user.
  46. 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. 47 What are the needs? Activity
  48. A The web was not a direct translation…
  49. A … mobile won’t be either.
  50. are uniquely mobile1 Great Mobile Experiences: are sympathetic to context2
  51. A What exactly do you mean by mobile “context” ? Q :
  52. A
  53. A Context is complex!!
  54. A Context is about understanding human relationships to the people, places and things in the world.
  55. 57 Context Framework steal thisslide!
  56. 58 Context Framework steal thisslide!
  57. 59 Orchestration and Inflection
  58. QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture. 60
  59. 61 Spatial
  60. 62 Temporal
  61. 63 Social
  62. 64 Semantic
  63. 65 Peanut butter in Denver right now?
  64. A The web is good at people and things. The web is good at semantic relationships. (and okay at social relationships)
  65. 67 Mobile is good at places… steal thisslide!
  66. 68 steal thisslide! Mobile is good at spatial and temporal relationships.
  67. 69
  68. There are currently not many technologies that help us understand place, and temporal and spatial relationships. 70
  69. How do we get that understanding? Q :
  70. 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
  71. 73 Design for partial attention and interruption
  72. 74 Activity Get sympathetic to the mobile context…
  73. 75 Activity Activity The Kate Rutter Wand in the World Activity
  74. 76 Activity Activity
  75. 77 Activity Activity Then ideate…
  76. 78 Activity Activity Then ideate…
  77. are uniquely mobile1 Great Mobile Experiences: are sympathetic to context2 speak their power3
  78. A Huh?Q :
  79. 81
  80. 82
  81. 83
  82. We can annotate expectations in the web world 84
  83. 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
  84. Options in mobile have to be readily apparent 86
  85. A How do I create mobile interfaces that “speak their power”? Q :
  86. 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
  87. 89 This should look familiar…
  88. 90 This should look familiar…
  89. 91 This should look familiar… The web has evolved around a task-efficiency model. Mobile is different.
  90. 92 Mobile is different….
  91. 93 Mobile is different….
  92. 94 Mobile is different…. Mobile is about pivoting people through information quickly. It’s about exposing possibilities.
  93. “What’s the point?” “What can happen?” TASK POSSIBILITIES
  94. 96 Tasks are about completion…
  95. 97 Tasks are about completion… Possibilities are interactions that accrue over time…
  96. … or facilitate exploration… 98 Tasks are about completion… Possibilities are interactions that accrue over time…
  97. … or facilitate exploration… 99 Tasks are about completion… Possibilities are interactions that accrue over time… ..or are about SENSING INTENT!
  98. 100
  99. 101
  100. 102
  101. 103
  102. 104
  103. 105
  104. A How do I design for possibilities? Q :
  105. A 107
  106. A 108
  107. A 109
  108. It’s like a card game… 110
  109. Each card speaks it’s power 111
  110. You win with a good hand 112
  111. 113 Activity Create a winning hand.
  112. 114
  113. 115 Activity Create a winning hand.
  114. 116 Activity Create a winning hand. Allow people to pivot through information quickly Stitch cards together to answer the question
  115. 117 Prototype Prototype Prototype Prototype Prototype Prototype
  116. 118 Can users grok it? Does each card speak it’s power? Can I simplify this? Is this intuitive? Q : Q : Q : Q :
  117. 119 Prototyping “Swirl” Process
  118. 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
  119. 121 Prototype at every stage Process
  120. 122
  121. Q : Where do I begin?
  122. are uniquely mobile1 Great Mobile Experiences: are sympathetic to context2 speak their power3 steal thisslide!
  123. Everybody starts somewhere….
  124. Good luck!
  125. Thank you! hinman@adaptivepath.com
  126. 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
  127. Q?

Editor's Notes

  • 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…
  • 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 -
  • Because I imagine that you guys are faced with these kinds of questions everyday…
  • 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 …
  • 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…
  • 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
  • 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
  • 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
  • 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.
  • And along the way…
  • So what are things that all of you have that make you especially well suited to design mobile user experiences?
  • 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.
  • 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…
  • 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.
  • So what are the differences?
  • The biggest and most important difference is that a mobile phone is not a computer….
  • And I don’t say that to be pajoritive,
  • 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…
  • Interface elements…Experiences are anchored to a desktop… cascading application windows…
  • 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…
  • 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…
  • Landline phones evolved - they got more sophisticated and started to have things like number dials - and phone numbers became the “URLs” for people.
  • 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…
  • 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.
  • 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…
  • 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.
  • 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 -
  • 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.
  • 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.
  • 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:
  • So let’s start off with the first one. Great mobile user expereiences are uniquely mobile.
  • 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…
  • And companies said things like:
  • 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
  • Another thing people said things like: “We need online commerce!
  • 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…
  • And then there were the weird metaphors that people tried to use to shape the experience…
  • 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
  • Lessons learned form the web…
  • 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….
  • 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)
  • 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.
  • 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.
  • 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?
  • 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.
  • 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…
  • And it was broken because we confused the vehicle with the purpose.
  • Brandon:
  • 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?
  • 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..
  • However, these pictures are less expected…. Home, in bed, an an office where there’s another landline phone…
  • 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.
  • 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.
  • Context is about understanding the human relationships to the people places and things in the world…
  • 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…
  • 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…
  • 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.
  • 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…
  • 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….
  • Temporal relationships are time-based relationships…
  • 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…
  • 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…
  • 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…
  • 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…
  • 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…
  • and breathe life into our spatial and temporal relationships to people places and things…
  • 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. …
  • 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.
  • 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…
  • Here are three principles…
  • Interactions on a PC are like scuba diving… experiences can be designed to be immersive.
  • 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…
  • Next, gather a bunch of objects… a pen, a silk flower, a paint brush
  • Finally, great mobile experiences speak their power
  • What do I mean by that?
  • 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
  • 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…
  • And that is why it was a good metaphor to borrow when we created online commerce
  • 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…
  • Because web pages give us plenty of real estate to annotate expectations
  • 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.
  • How do you make interfaces that speak their power
  • Three design principles that will help you create interfaces that speak their power are:
  • This illustration should look familiar… it’s a wireframe…
  • 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…
  • The web has evolved around a task-efficiency model… Mobile is different…
  • 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…
  • 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…
  • Mobile is about pivoting people through information quickly. Mobile is about exposing possibilities.
  • Task = what’s the point
    Possibilities = what can happen
  • Task-based interactions are about driving users to completion…
  • Mobile example
  • 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.
  • 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.
  • 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..
  • 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
  • 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.
  • 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.
  • So these models might seem interesting -- but a reasonable question to ask is, “How do I design for possibilities”
  • 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.
  • 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.
  • 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…
  • Second, I would suggest thinking about this process like a card game….
  • Each card speaks it’s power…
  • You need all the cards - and you win with a good hand…
  • 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…
  • 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…
  • So you sketch out all the ways a person could answer a question…
  • And then you begin to think how a series of cards would answer that question…
  • But the most important part of this process is to prototype prototype and test test test…
  • But the most important part of this process is to prototype prototype and test test test…
  • 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.
  • 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.
  • From Idea to implementation - prototype throughout the process…
  • 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…
  • 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…
  • 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
  • You have the skills and the insights and the curiosity to create mobile experiences that have these attributes…
  • And remember -- everybody starts somewhere…
  • Brandon:

×