Mobile User Experience: What Web Designers Need to Know

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + artsraj Rajesh nair 1 month ago
    one of the best presentation i have ever seen on mobile UX... thanks Rachel for this wonderful master piece... keep it up.. looking for our other presentation...

    rajesh
    http://artseye.blogspot.com
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

Hello - My name is Rachel Hinman and I am an experience design director at Adaptive Path. I’m truly thrilled to be here at Web Directions North and have the opportunity to share these ideas with you with you because this content is very personal to me - it reflects the journey that I have taken over the past four years of my professional life. During that time, I’ve been focused on mobile user experience… Before I joined Adaptive Path, I worked at Yahoo in their mobile group working in the mobile internet space… but more importantly … before I even got involved with mobile…

80 Favorites & 2 Groups

Mobile User Experience: What Web Designers Need to Know - Presentation Transcript

  1. What web designers need to know.. Rachel Hinman Mobile User Experience What Web Designers Need to Know
  2. I used to be a web designer, too I used to be a web designer.
  3. What can we do with mobile? 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. What can we do with mobile? 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. Where do I begin Q: Where do I begin?
  6. Our plan for today Our plan for today… Similarities and differences between designing for web and mobile
  7. Our plan for today 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 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 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 Along the way… Slides Worth Keeping Shameless Opinion Design Activities Design Principles Watch for slides with this orange label!
  11. Okay… let’s get started Okay, let’s get started!
  12. What are the similarities A What are the similarities? Q:
  13. Web designers know how to work in a rapidly evolving field Web designers know how to work in a rapidly evolving field
  14. Ability to work within technical constraints Web designers understand how to create experiences within technical constraints
  15. Similar Tools… Similar processes Web designers use similar tools and processes
  16. What are the differences? A Q: What are the differences?
  17. A mobile phone is not a computer A mobile phone is not a computer
  18. Um… duh! A umm…. 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
  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
  22. Mobile phones started out as a one-to-one
  23. They evoloved
  24. Mobile phones evolved from the landline phone
  25. Smartphone… added
  26. Smartphone… added Opinion!
  27. iPhone Mobile phones aren’t really phones anymore
  28. Mobile presents an opportunity to invent new ways… Mobile presents an opportunity to invent new ways for users to interact with information. Opinion!
  29. Shift your perspective and point of view Expert to Explorer
  30. How? Understand your assumptions
  31. Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2 speak their power 3 steal this slide!
  32. Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences:
  33. Do you remember a time… A Do you remember a time when the web was new? Q:
  34. Do you remember a time… A “ We need a web presence!” !
  35. Solution: Brochure - online Brochureware
  36. “ we need a web presence” A “ We need online commerce!” !
  37. Online commerce What about shipping?
  38. Make it like the world A A “ Let’s make our site like…” !
  39. Southwest airlines
  40. What we learned from the web We confused the solution with the need. Lessons Learned from Web steal this slide! We borrowed broken models. Too focused on tactics. We didn’t focus on what the web could do well.
  41. How do we not do that again? A A How do we NOT do that again? Q:
  42. What we learned from the web 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 this slide!
  43. Three tips for uniquely mobile experiences 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 this slide!
  44. Identify your assumptions Unpack your computer and mobile baggage… Activity
  45. information needs What are the needs? Activity What need does this information fill? Frame it as a question from the perspective of a user.
  46. Identify information needs 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. Identify information needs What are the needs? Activity
  48. The web was not a direct translation A The web was not a direct translation…
  49. And mobile won’t be either. A … mobile won’t be either.
  50. Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2
  51. Pictures of mobile contexts A What exactly do you mean by mobile “context” ? Q:
  52. Pictures of mobile contexts A
  53. More pictures of mobile contexts
  54. Social context
  55. Context is complex A Context is complex! !
  56. Context is about understanding the relationships A Context is about understanding human relationships to the people, places and things in the world.
  57. Context Framework Context Framework steal this slide!
  58. Context Framework Context Framework steal this slide!
  59. Relationships Chording Orchestration and Inflection
  60. Peanut butter
  61. Google: Facebook Spatial
  62. Temporal Temporal
  63. Spatial - peanut butter Social
  64. Google: Facebook Semantic
  65. Peanut butter in Denver Peanut butter in Denver right now?
  66. Context is about understanding the relationships A The web is good at people and things. The web is good at semantic relationships. (and okay at social relationships )
  67. Context Framework Mobile is good at places… steal this slide!
  68. Context Framework steal this slide! Mobile is good at spatial and temporal relationships.
  69. Google maps - PC vs. Mobile
  70. Temporal and spatial relationships are underserved There are currently not many technologies that help us understand place , and temporal and spatial relationships.
  71. How do you get that understanding? How do we get that understanding? Q:
  72. Sympathy to context principles Design for partial attention and interruption 1 Design Principles: Sympathy to Context Reduce cognitive load and opportunity cost 2 steal this slide! Ideate in the wild 3
  73. Text entry will never be easy Design for partial attention and interruption
  74. Wand in the world Activity Get sympathetic to the mobile context…
  75. “in the wild” ideation Activity The Kate Rutter Wand in the World Activity
  76. “in the wild” ideation Activity
  77. “in the wild” ideation Activity Then ideate…
  78. “in the wild” ideation Activity Then ideate…
  79. Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2 speak their power 3
  80. Speak their power? A Huh? Q:
  81. A light switch
  82. Shopping cart
  83. Shopping cart
  84. We can annotate expectations in the web world We can annotate expectations in the web world
  85. We can annotate expectations in the web world We can annotate expectations in the web world Add to cart Free two-day shipping Shipping! Collectible! Maybe a kindle! Look inside the book REALLY! Look inside the book Get it new OR used! Sell mine
  86. Options have to be apparent and intuitive in mobile for people to Options in mobile have to be readily apparent
  87. How do you make interfaces that speak their power A How do I create mobile interfaces that “speak their power”? Q:
  88. Say good bye to done Say good-bye to “done”. 1 Design Principles: Interfaces that speak their power steal this slide! Think possibilities, not tasks. 2 Dismantle the page metaphor. Boulders to pebbles. 3
  89. Wireframe This should look familiar…
  90. Wireframe This should look familiar…
  91. Wireframe This should look familiar… The web has evolved around a task-efficiency model. Mobile is different.
  92. Mobile is different Mobile is different….
  93. Mobile is different Mobile is different….
  94. Mobile is different Mobile is different…. Mobile is about pivoting people through information quickly. It’s about exposing possibilities.
  95. What’s the point? “ What’s the point?” “ What can happen?” TASK POSSIBILITIES
  96. Tasks are about completion Tasks are about completion…
  97. Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time…
  98. Tasks are about completion … or facilitate exploration… Tasks are about completion… Possibilities are interactions that accrue over time…
  99. Tasks are about completion … or facilitate exploration… Tasks are about completion… Possibilities are interactions that accrue over time… ..or are about SENSING INTENT!
  100. Example -
  101. Example -
  102. Example -
  103. Example -
  104. Example -
  105. Example -
  106. How do you make interfaces that speak their power A How do I design for possibilities? Q:
  107. How do you make interfaces that speak their power A
  108. How do you make interfaces that speak their power A
  109. How do you make interfaces that speak their power A
  110. It’s like a game of cards It’s like a card game…
  111. It’s like a game of cards Each card speaks it’s power
  112. It’s like a game of cards You win with a good hand
  113. Pivoting people through information Activity Create a winning hand.
  114. Pivoting people through information
  115. Pivoting people through information Activity Create a winning hand.
  116. Pivoting people through information Activity Create a winning hand. Allow people to pivot through information quickly Stitch cards together to answer the question
  117. Prototype Prototype Prototype Prototype Prototype Prototype Prototype
  118. Can users grok it? Can users grok it? Does each card speak it’s power? Can I simplify this? Is this intuitive? Q: Q: Q: Q:
  119. Analogy of cards Prototyping “Swirl” Process
  120. Analogy of cards Plan for a lot of it! 1 Tips for mobile prototyping steal this slide! Work at scale and print it out! 2 Get it on the device as soon as you can. 2
  121. Analogy of cards Prototype at every stage Process
  122. Paper Prototype example
  123. High fidelity prototype example
  124. Where do I begin? Q: Where do I begin?
  125. Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2 speak their power 3 steal this slide!
  126. Everybody starts somewhere Everybody starts somewhere….
  127. Good luck Good luck!
  128. Thanks, and next up… Thank you! [email_address]
  129. RESOURCES 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
  130. Q&A: final break Q?

+ Rachel_HinmanRachel_Hinman, 9 months ago

custom

7092 views, 80 favs, 30 embeds more stats

Until recently, the mobile internet was a crippled more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 7092
    • 6605 on SlideShare
    • 487 from embeds
  • Comments 1
  • Favorites 80
  • Downloads 634
Most viewed embeds
  • 94 views on http://www.torresburriel.com
  • 71 views on http://www.rachelhinman.com
  • 64 views on http://ulczyk.blogspot.com
  • 51 views on http://asiermarques.com
  • 42 views on http://minalab.insitum.net

more

All embeds
  • 94 views on http://www.torresburriel.com
  • 71 views on http://www.rachelhinman.com
  • 64 views on http://ulczyk.blogspot.com
  • 51 views on http://asiermarques.com
  • 42 views on http://minalab.insitum.net
  • 38 views on http://bikolabs-ux.tumblr.com
  • 29 views on http://www.jbarahona.com
  • 16 views on http://east08.webdirections.org
  • 16 views on http://mobilewebexperience.com
  • 12 views on http://livercake.tumblr.com
  • 7 views on http://www.tunelcarpiano.net
  • 7 views on http://www.usercentered.de
  • 7 views on http://www.soft-strategy.com
  • 5 views on http://www.afhill.com
  • 4 views on http://kumeugirl.com
  • 3 views on http://safe.tumblr.com
  • 3 views on http://wildfire.gigya.com
  • 2 views on http://www.socialsemantic.it
  • 2 views on http://www.blogger.com
  • 2 views on http://www.ibloom.it
  • 2 views on http://www.jorgebarahona.com
  • 2 views on http://static.slidesharecdn.com
  • 1 views on http://pillateunlinux.wordpress.com
  • 1 views on http://rachelhinman.com
  • 1 views on http://mi-n70-y-yo.blogia.com
  • 1 views on http://lenguajes-x.com.ar
  • 1 views on http://surf.googlemashups.com
  • 1 views on http://tecnicalia.com
  • 1 views on http://www.notasd.com
  • 1 views on http://www.jbarahona.cl

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories