Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016

Slides from my talk at UX Ireland on 10 November 2016
http://uxireland.net/sessions/index.php?session=108

Abstract:
From myths to trends and best practice, actual usage, engagement, design patterns and interactions - in this session, I will go through the insights behinds the stats and take a look at the reality behind mobile and what really matters when designing for multiple devices.

  • Be the first to comment

Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016

  1. 1. www.flickr.com/photos/alexnormand/5992512756 @annadahlstrom | UX Ireland, 10 November 2016 BEYOND THE
 
 MENU WHAT YOU NEED TO KNOW ABOUT DESIGNING FOR MULTIPLE DEVICES hamburger
  2. 2. What 
 about Wall•E? www.robotshop.com/blog/where-is-wall-e-1391
  3. 3. “ Design for everyone and you design for no-one” https://www.flickr.com/photos/coofdy/12245978213/in/photostream/
  4. 4. https://www.flickr.com/photos/fotobib/13759982694 With mobile the 
 impossible has become possible
  5. 5. “ 70% of users check their smartphone within an hour of getting up. ” - Source: Zerohedge Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
  6. 6. https://www.flickr.com/photos/bfishadow/4604166391 “ Just a giant iPhone. ”
  7. 7. 1. 
 Not just mobile
  8. 8. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile. mobile.
  9. 9. https://www.flickr.com/photos/neontommy/9795979256 People think 
 of this
  10. 10. Source: Google Search result
  11. 11. Many of us own 
 multiple mobile devices
  12. 12. Source: Google Search result
  13. 13. 2. 
 It’s the same, but different
  14. 14. Source: www.thinkwithgoogle.com/articles/device-use-marketer-tips.html We’re increasingly living in a mobile first world
  15. 15. Source: www.thinkwithgoogle.com/articles/device-use-marketer-tips.html “ For a quarter of users it’s a mobile world only ”. - Source: Think with Google
  16. 16. www.flickr.com/photos/patdavid/9391602153 “ Your mobile phone has more computing power than the computers used for the Apollo 11 moon landing. ” - Source: www.factslides.com/s-Mobile-Phones
  17. 17. Source: http://think.storage.googleapis.com/docs/how-advertisers-can-extend-their-relevance-with-search_research-studies.pdf
  18. 18. Source Creative Market “ 64% of smartphone shoppers turn to mobile search for ideas about what to buy before heading into stores. ” - Source: Think with Google
  19. 19. Myth:
 Mobile users are rushed & on the go Image courtesy of Shutterstock
  20. 20. MobileSearchMoMentSUnderStandinghowMobiledriveSconverSionS 3of4mobilesearches triggerfollow-upactions Mobile searches drive valuable outcomes for businesses Actions triggered by mobile search also happen very quickly ofconversions(storevisit, phonecallorpurchase) happeningwithinanhour55% On average, each mobile search triggers nearly 2 follow-up actions Product&shoppingsearcheshavea highernumberofoutcomes Number of follow-up actions per mobile search Mobile search is always on, happening on the go, at home and at work ofmobilesearches occurathomeor work;17%onthego77% 2.082.523.56 Travel FoodAutoBeauty Tech 2.072.20 36% Continued Research 18% Shared Information 17% Made a Purchase 25% Visited a Retailer’s Website 17% Visited a Store 7% Called a Business Mobile searches are strongly tied to specific contexts Shopping queries are 2x more likelyto be in store Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html - FROM MARCH 2013 In March 2013 
 Google came out with this
  21. 21. Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html Home Work Stores Restaurants & bars The top 4 places we 
 use mobiles in an average day
  22. 22. Commute Sequential usage Morning Work Simultaneous usage + Multi-tasking + Extending + Complementing OR “ 90% of users start a task on one device and then complete it on another. ” - Source: Google
  23. 23. Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  24. 24. Source: http://marketingland.com/digital-growth-now-coming-mobile-usage-comscore-171505
  25. 25. Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  26. 26. Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html We spend nearly 3 hours a day on our phones
  27. 27. Users expect an equal & continuous experience across each one www.flickr.com/photos/joachim_s_mueller/7110473339
  28. 28. www.flickr.com/photos/patdavid/9391602153 Image from Creative Bloq “ Each device has its own features and capabilities that prevents a one size fit all solution from being implemented.. ” - Source: Adobe
  29. 29. Each device is different. Make the most of it
  30. 30. 3. 
 Everyone doesn’t have an iPhone
  31. 31. www.flickr.com/photos/gadl/3570118243 Every platform has their own 
 ui guidelines that their users are used to
  32. 32. At times we seem to 
 think that this is what users use
  33. 33. Source: http://www.gartner.com/newsroom/id/3415117 Android reached a 86.2% market share in Q2 of 20116
  34. 34. Sales of highend Android phones are increasing
  35. 35. 4. 
 There’s an app for that
  36. 36. Remember this?
  37. 37. “ The hottest app among Silicon Valley early adopters right now is Secret. You use it to post anonymous secrets. For the past two days it's all anyone is talking about on Twitter. ” 
 - Nicholas Carlson, Business Insider
  38. 38. “ The good news for Apple is that it's available on iPhone. The bad news for Apple is that it's really hard to find Secret through the App Store app on your iPhone. ” 
 - Nicholas Carlson, Business Insider
  39. 39. Source - http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/
  40. 40. Source - https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/
  41. 41. Source - https://www.statista.com/statistics/263795/number-of-available-apps-in-the-apple-app-store/
  42. 42. Source - http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  43. 43. $millions 
 in refunds
  44. 44. So… should you develop an app?
  45. 45. “The Web is for audience reach 
 and native apps are for rich experiences.” - Luke W. https://www.flickr.com/photos/alvy/12769050423
  46. 46. www.flickr.com/photos/haagsuitburo/5349040355www.flickr.com/photos/haagsuitburo/5349040355 www.flickr.com/photos/soundslogical/4255801733 direct vs non-direct
  47. 47. www.flickr.com/photos/dougbelshaw/4360008898 ” Money spent developing a pretty but limited iPhone app only benefits [...] the few, but money spent on the website UI would have benefitted everyone. ” - Gary Marshall on ‘The app trap’ in .net Magazine
  48. 48. 5. 
 Growing methods of input
  49. 49. www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jorgeq82/4732700819
  50. 50. www.flickr.com/photos/jorgeq82/4732700819 The first iPhone was
 designed to be held in one hand…
  51. 51. Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php …and easy to 
 interact with
  52. 52. https://www.flickr.com/photos/andrikoolme/25555948965 Then 
 this happened
  53. 53. https://www.flickr.com/photos/nomacnolife/21881584208 ..and Apple followed suit
  54. 54. From Flickr
  55. 55. www.flickr.com/photos/66327170@N07/7296381856 “ New rule: every desktop design has to go finger-friendly ” 
 - Josh Clark
  56. 56. Source & images from Smashing Mag- https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/ It gets harder the 
 larger our devices are
  57. 57. https://blogs.adobe.com/creativecloud/holistic-adaptive-design/ “ Making the design touch target too small, which requires precise input precision, can frustrate users, while making touch targets too big can clutter the interface. ” - Source: Adobe, Holistic Adaptive Design
  58. 58. https://www.flickr.com/photos/sidkid/2908468343 There’ll be a 
 move away from this
  59. 59. A day of 
 using voice
  60. 60. A day of 
 using voice
  61. 61. A day of 
 using voice
  62. 62. A day of 
 using voice
  63. 63. A day of 
 using voice
  64. 64. It’s estimated that by 2020
 50% of all searches will be by voice Image courtesy of Shutterstock
  65. 65. Bots the next frontier
  66. 66. 6. 
 It’s about the individual
  67. 67. Screenshot: https://moto360.motorola.com/
  68. 68. Screenshot: https://moto360.motorola.com/ “ It’s a really tiny computer strapped to your wrist ” - Source: Mashable
  69. 69. Screenshot: http://www.apple.com/uk/
  70. 70. Integration
  71. 71. “ One third of Americans who already own some sort of wrist-mounted device stop wearing theirs after six months” ” 
 - Source: FastCompany https://www.flickr.com/photos/djkeino/8667722768
  72. 72. Screenshot: http://www.apple.com/uk/ “ In order for any wearable to be successful it has to disappear from the foreground, and its utility in your life has 
 to far outweigh any small inconvenience. ” 
 - Source: Mashable
  73. 73. Source www.wareable.com/smartwatches/best-smart-analogue-watch
  74. 74. A talks to B talks to C talks to D talks to … … understands the user
  75. 75. Screenshot https://ifttt.com
  76. 76. 7. 
 Context + content = king
  77. 77. “ Argh! Did not mean to do that ” [Delete]
  78. 78. Selected by default. Bad Swarm
  79. 79. Screenshot: https://ifttt.com/
  80. 80. https://www.flickr.com/photos/pure9/2603089643 “ They should demand our attention only at truly demanding moments. ” 
 - Global Moxie, 
 Smart Watches, Wearables, and That Nasty Data Rash
  81. 81. Screenshot: http://www.apple.com/uk/
  82. 82. Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg From the ‘In Time’ movie
  83. 83. Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg From the ‘In Time’ movie
  84. 84. Source: https://www.youtube.com/watch?v=9J7GpVQCfms
  85. 85. Source: Duo Skin
  86. 86. Screenshot from http://www.duceretech.com/
  87. 87. Intelligent | Knows you
  88. 88. 8. 
 Treat it like lego
  89. 89. https://www.flickr.com/photos/websummit/15089463204/ A boundless future where 
 content flows from one “device” to another Screenshot: Minority Report
  90. 90. www.flickr.com/photos/mirafoto/494444094 “ Get your content to go anywhere, 
 because it’s going to go everywhere. ” - Brad Frost
  91. 91. Screenshot: https://blog.intercom.com/the-end-of-apps-as-we-know-them/ “ The idea of an app as an independent destination is becoming less important, and the idea of an app as a publishing tool, with related notifications that contain content and actions, is becoming more important. ” - Source: The End of Apps As We Know Them
  92. 92. It’s one of the ideas behind iOS 10 Screenshot: Apple.co.uk
  93. 93. Less about pages & 
 more about building blocks www.flickr.com/photos/boltofblue/4418442567
  94. 94. www.flickr.com/photos/donsolo/2136923757/ Clever design
 Clever team
  95. 95. device browser screen input method connection speed Any anytime anywhereUsed
  96. 96. “ The site you build is not dependent on 
 knowing what device it is being displayed on. ” - Sarita Harbour, WDD Image courtesy of Shutterstock
  97. 97. www.flickr.com/photos/visualpunch/7351572896 Adapt to device, platform, 
 purpose & usage
  98. 98. 9. 
 Go beyond the hamburger
  99. 99. Screenshot: https://twitter.com/beep/status/509027146950778881
  100. 100. Screenshot: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
  101. 101. Screenshot: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/ “ Like a cheap fast food chain, it got designers addicted to its convenience, and now serves millions each day, both on mobile devices and on desktops.”. ” 
 - Source: Nielsen Norman Group
  102. 102. Source & images from - https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
  103. 103. Lower discoverability Less efficient Clash with platform navigation patterns Not glanceable
  104. 104. Screenshot: https://developer.android.com/design/index.html
  105. 105. Screenshot: https://developer.android.com/design/index.html
  106. 106. 10. 
 It’s all about navigation
  107. 107. https://www.flickr.com/photos/neilsingapore/5465403730 What and where to click, tap, select, fill in, do, go next, ignore, pay attention to…
  108. 108. Navigation is conversation
  109. 109. www.flickr.com/photos/66327170@N07/7296381856 Best 
 buddies
  110. 110. 1. Don’t look at mobile too narrowly 2. Play to each device’s strengths 3. Consider all platforms 4. Look at app rational 5. Cater for different input methods 6. Think about the individual 7. Context + content = king 8. Build a system of components 9. Evaluate design & navigations patterns 10. It’s all about navigation
  111. 111. www.robotshop.com/blog/where-is-wall-e-1391 So, what 
 about Wall•E?
  112. 112. www.robotshop.com/blog/where-is-wall-e-1391 We can design 
 specifically for Wall•E
  113. 113. www.flickr.com/photos/htakashi/9754012931 Help him get more out 
 of life (but without the cord)
  114. 114. - Wilson Minor “We’re not just making pretty interfaces. We’re actually in the process of making an environment where we’ll spend most of our time, for the rest of our lives. 
 We’re the designers. We’re the builders. 
 What do we want that environment to feel like? What do we want to feel like.” http://www.flickr.com/photos/funch/4679422945/
  115. 115. Thank you @annadahlstrom @uxfika | anna.dahlstrom@gmail.com www.annadahlstrom.com

×