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. 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, its a standard thats 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 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. 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. Whos 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