Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Small Screen, Big Ideas

22 519 vues

Publié le

Now that more designers are adopting a mobile-first approach, traditional websites are changing. But does it make sense to put mobile design elements in a traditional web context? A mobile-centric approach might make sense to UX practitioners, but what about our users?

Rosetta’s user research team led a discussion on how mobile designs are affecting traditional websites, focusing on the use of the hamburger-style navigation menu. They will share the results of user testing to illustrate how people respond to mobile design elements in a web-based context.

Publié dans : Design

Small Screen, Big Ideas

  2. Agenda 2 03 Mobile Influences Desktop 10 Hamburger Takeover 12 Click Test Results 18 Unmoderated Usability Test Results 21 Mobile A/B Test Example 24 Our Point of View 30 Who‟s Hitting the Mark? 34 Appendix
  3. Mobile Influences Desktop 3
  4. Mobile Influences Desktop Overview We found many examples of desktop sites that have adopted several mobile and tablet design themes. 4
  5. Mobile Influences Desktop Cleaner Homepage A cleaner homepage is introduced to desktop designs, providing a consistent layout to their mobile counterpart. Search is replaced with key navigational options, while promotions and ads are eliminated. 5 Kayak
  6. Mobile Influences Desktop Flat Design Now that flat design is prevalent across all channels, it‟s a standard that‟s being pushed. 6 Microsoft Windows 8 Operating System Built By Buffalo site
  7. Mobile Influences Desktop Larger Font Large text allows users to more easily scan. This is especially beneficial when translating information over to the mobile platform. 7 Gummisig.com
  8. Mobile Influences Desktop Infinite Scrolling Infinite scrolling has been adapted to desktop designs, allowing more content to load on a single page as opposed to users clicking through multiple pages. 8 Pinterest Skittles
  9. Mobile Influences Desktop Responsive Design Google recommendation that everyone should move to a responsive design, has led to a recent „boom‟ in utilization of the technique. 9 DittoDC.com
  10. Hamburger Takeover 10
  11. Hamburger Overview The “hamburger” menu icon is often used in mobile design, but now desktop sites are starting to use it. 11
  12. Click Test Results 12
  13. Click Test Results Testing Adoption Selected a sample of desktop sites using the hamburger navigation today:  Time  Today  Slate  New York Times 13 Online click tests and unmoderated usability studies gauged if the users on an online panel would use the hamburger navigation for simple tasks
  14. Click Test Results New York Times Home Users were asked the following question before given a chance to click: Where would you click to find news related to business? 14 Heat Map
  15. Click Test Results Slate Sign In Users were asked the following question before given a chance to click: Where would you click to sign in to your account? You may click up to two places. 15 Heat Map
  16. Click Test Results Today Nav Flow Users were asked the following question before given a chance to click: Where would you go on this website to find news stories related to food? 16 Heat Map Heat Map
  17. Click Test Results Time Users were asked the following question before given a chance to click: Where would you click to find news section related to business? 17 Heat Map
  18. Unmoderated Usability Test Results 18
  19. Unmoderated Usability Test Overview Four users were asked to explore Marriott.com and complete specific tasks. These tasks were designed to identify the navigational paths users took in reviewing the site, with specific focus on whether or not any users interacted with the “hamburger” icons to complete their tasks. 19
  20. Unmoderated Usability Test Review Overall, none of the users interacted with the “hamburger” menu option. Several users had difficulty navigating to categories, such as weddings and rewards program. Two users thought the rewards program was difficult to find, as they expected to find this in the top utility navigation near the sign in information. In summary, the site has some overall usability issues, but the “hamburger” navigation did not help any of these issues. Having both the “hamburger” option and changing navigation throughout the experience did them a disservice. 20
  21. Mobile A/B Test Example 21
  22. Mobile A/B Test Example In February 2014, an independent web publishing company, Exis, conducted an A/B test on the “hamburger” icon to see how users interact with this element on their site and which version of the icon resonates with the user more.  50,000 mobile users  Users were tested across multiple mobile devices including iOS (64%), Android (34%), and Windows Phone and Blackberry (2%). 22 Original test:  The menu icon on the right was clicked more than the previous two.
  23. Mobile A/B Test Example 23 Findings:  Bordered menu clicked on significantly more than “hamburger” icon  iOS users are 2-3 times more likely to tap menu icon than Android users Original test:  The menu icon on the right was clicked more than the previous two. New test:
  24. Our Point of View 24
  25. Our Point of View Be Consistent BE CONSISTENT The “hamburger” icon should always remain in the same place, carrying the same options. 25
  26. Our Point of View Crutches INCLUDE SOME CRUTCHES JUST IN CASE Marriott pulls out key user tasks (sign in, reservations etc.) out of the hamburger nav and allows for quick access in the utility navigation. 26
  27. Our Point of View Right Place, Right Time RIGHT PLACE, RIGHT TIME Use it in the right site for the right audience. Use it only if it matches the simplicity of the design you are going for. 27
  28. Our Point of View Don‟t Get Lazy DON‟T GET LAZY Do not make it the junk drawer of the site. For sites such as Slate, avoid hiding the sign in, as it seems unnecessary. Remember you want to encourage users to sign in. 28
  29. Our Point of View Test With Users TEST WITH USERS The best way to make sure you haven‟t created roadblocks with your new design is to test it with users. 29
  30. Who‟s Hitting The Mark? 30
  31. Desktop Examples NBC News 31 New visitors see this welcome screen with directions. NBCNews.com
  32. Desktop Examples Pinterest 32 New visitors see this welcome screen with directions. Pinterest.com I've had that for as long as I can remember. It's where I go to find ideas on whatever sub category I want… usually food.” — Sabrina “
  33. Desktop Examples Squarespace 33 Simple design makes the “Menu” and hamburger nav more obvious to users. Squarespace.com
  34. Appendix 34
  35. Resources 35  http://www.demacmedia.com/design-user-experience/5-ways-tablets-mobile-devices- influence-design-trends/  https://econsultancy.com/blog/8123-should-mobile-tablet-design-influence-your-web-design  https://www.internetretailer.com/mobile/2014/02/03/sponsored-special-report-web-and- mobile-design-converge?list_type=mag&index=4  https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014  https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014  http://www.onextrapixel.com/2013/12/10/30-beautifully-designed-sites-using-horizontal-or- vertical-infinite-scrolling/  http://exisweb.net/mobile-menu-abtest  http://searchenginewatch.com/article/2253965/3-Reasons-Why-Responsive-Web-Design- is-the-Best-Option-For-Your-Mobile-SEO-Strategy