1. 1. MARCH 2014 ROSETTA UXPA CLE
2. 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 Whos Hitting the Mark? 34 Appendix
3. 3. Mobile Influences Desktop 3
4. 4. Mobile Influences Desktop Overview We found many examples of desktop sites that have adopted several mobile and tablet design themes. 4
5. 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. 6. Mobile Influences Desktop Flat Design Now that flat design is prevalent across all channels, its a standard thats being pushed. 6 Microsoft Windows 8 Operating System Built By Buffalo site
7. 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. 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. 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. 10. Hamburger Takeover 10
11. 11. Hamburger Overview The hamburger menu icon is often used in mobile design, but now desktop sites are starting to use it. 11
12. 12. Click Test Results 12
13. 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. 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. 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. 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. 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. 18. Unmoderated Usability Test Results 18
19. 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. 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. 21. Mobile A/B Test Example 21
22. 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. 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. 24. Our Point of View 24
25. 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. 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. 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. 28. Our Point of View Dont Get Lazy DONT 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. 29. Our Point of View Test With Users TEST WITH USERS The best way to make sure you havent created roadblocks with your new design is to test it with users. 29
30. 30. Whos Hitting The Mark? 30
31. 31. Desktop Examples NBC News 31 New visitors see this welcome screen with directions. NBCNews.com
32. 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. 33. Desktop Examples Squarespace 33 Simple design makes the Menu and hamburger nav more obvious to users. Squarespace.com
34. 34. Appendix 34
35. 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