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.

1. MARCH
2014
ROSETTA
UXPA CLE

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