Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Immersive Mobile Experiences - ConvergeSE 2013

Designing Immersive Mobile Experiences - ConvergeSE 2013

How to design mobile apps that suspend disbelief and create a seamless experience for users.

Wren Lanier

April 26, 2013

More Decks by Wren Lanier

Other Decks in Technology


  1. None
  2. In 2012, shipments of smartphones and tablets surpassed shipments of

    laptop and desktop PCs by almost 200 MILLION UNITS
  3. By the end of 2013, there will be more mobile

    devices on Earth than people
  4. Mobile search has rown 500% over the last 2 years

  5. Mobile internet traffic is predicted to overtake desktop internet traffic

    by 2014
  6. TOUGH CHOICES • Native App? • Hybrid App? • RWD?

  7. PROS TO NATIVE APPS • Use existin conventions and native

    UI elements • Most responsive to touch, superior physics, complex animations • Push notifications, social media inte ration • Marketin advanta es to bein in the App Store
  8. CONS TO NATIVE APPS • Native developers aren’t cheap or

    plentiful, particularly for iOS • Lon er dev time means hi her costs • Apple App Store submission process • Additional effort to support multiple platforms: iOS, Android, Blackberry, Windows
  9. PROS TO HYBRID APPS • Offers many advanta es of

    native app • Less development cost & effort
  10. CONS TO HYBRID APPS • Not as responsive to touch/swipe,

    difficult to support complex physics • Users expect native behavior and are subtly disappointed when it doesn’t deliver
  11. PROS TO A RESPONSIVE SITE • Easy to develop, deploy

    and update • One site, many devices • Works across platforms
  12. CONS TO MOBILE WEB SITES • Lack of native UI

    elements • Fewer complex animations • Lack of exposure in the App Store • Can’t do push notifications, can’t inte rate with the user’s contacts/social media
  13. None
  14. SEAMLESSNESS erases the line between the physical and the virtual

  15. Touch makes immersion and seamless experiences possible

  16. None
  17. None
  18. None
  19. We are movin towards a mouseless future

  20. Touch is thrillin because of the lack of mediation

  21. Seamlessness requires the suspension of disbelief

  22. Suspension of disbelief requires flawless technolo y

  23. Seamless desi n requires new, touch-specific patterns and paradi ms

  24. User testin is the only way to validate seamlessness

  25. SEAMLESSNESS TAKEAWAYS • Enabled by the ma ic of touch

    • Requires suspension of disbelief and flawless technolo y performance • Necessitates new, touch-specific UI patterns • Destroyed by anythin clunky or unexpected • Happens in the minds of users
  26. None
  27. What do users want to do? Why are they doin

    it? Where are they doin it?
  28. There is no substitute for user research and user testin

  29. User behavior is context-specific

  30. photo credit: http://www.flickr.com/photos/sidewalk_flyin /

  31. None
  32. None
  33. None
  34. Mobile-optimizin means research-driven, context-specific desi n

  35. Use research to identify unique contexts for phone vs tablet

    vs desktop
  36. None
  37. None
  38. 26% of apps downloaded are only used once

  39. More features != More app usa e

  40. Cuttin superfluous features creates more immersive experiences

  41. 30 SECOND RULE: If I can’t do somethin in 30

    seconds or less I will never use your app a ain
  42. Immersive apps offer hi hly edited avenues for exploration

  43. None
  44. None
  45. Quick wins build confidence in new users

  46. Seamlessness builds with familiarity

  47. Speed and responsiveness lead to lon er, immersive interactions Speed

    → Familiarity → Confidence → Exploration
  48. Choose the ri ht metrics to measure and et client

  49. Launch small and keep iteratin

  50. Break sets of features out into multiple apps

  51. PLANNING TAKEAWAYS • Extra features do not make an app

    extra immersive • 30 seconds to your most critical function • Offer carefully edited avenues for exploration • Anticipate user needs and enhance the experience in context specific ways.
  52. None
  53. Desi n = problem solvin

  54. Immersive desi n = solvin fundamental problems + layer of

    ma ic and deli ht
  55. Navi ation is critical to your mobile experience

  56. None
  57. None
  58. None
  59. None
  60. None
  61. One door, one exit

  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. Transitions and animations aren’t eye candy; they provide important user

  69. Use the z-axis to layer screens and describe relationships between

  70. None
  71. None
  72. Animation should always mimic real world physics

  73. Good er onomics is key to creatin seamlessness

  74. ima e credit: Josh Clark

  75. Reduce the number of items on each screen

  76. Secret panels and hidden doors streamline UI and offer en

    a ement for expert users
  77. None
  78. Only hide as much as you have to, and offer

    stron visual cues
  79. Use familiar metaphors

  80. Make the next action painfully obvious

  81. Reward users for every touch

  82. Super-realism extends interactions in a way that’s both excitin and

  83. None
  84. DESIGN TAKEAWAYS • Optimize navi ation for discoverability • Help

    users build mental maps • Use animation to provide information, not eye candy • Don’t for et to consider er onomics • Hide options in secret panels, but only when necessary • Look for opportunities to create Super Realism
  85. Nobody’s ot this perfectly fi ured out yet

  86. Go make somethin awesome

  87. THANK YOU! Follow me on Twitter: @heywren