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.
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
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
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
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
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:
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
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
“
Desktop websites have always paved the way in leading mobile and tablet designs. However, in recent years, companies have seen significant increases in their sales as more users flock to their mobile and tablet sites for the sake of convenience.From this discovery, more companies are seeing that designs used on mobile and tablet sites have assisted in generating more revenue for their businesses. Desktop websites are now taking on a more modern look and feel, displaying a cleaner and simpler layout. Some areas that have already been adopted include:Cleaner homepageRemoving navigational optionsEliminating promotions and ads, consolidating HTMLIncluding iconsFlat designLarger fontsInfinite scrollingAnother possible influence bringing desktop and mobile together is emphasis on Responsive Design, an approach aimed at crafting sites to provide an optimal viewing experience across a wide range of devices (mobile phones, tablet and desktop computers).
Recently sites and operating systems are more focused on a flat design layout similar to the mobile sites as it provides simplicity on the page. Images/ icons are easier for users to scan and digest. Keep in mind that icons that are used on the site should be universally accepted by users.Card/tiles design represents this idea as well- however there is debate of whether or not this limits the designers visuals or copy included within this space
Infinite scrolling has been established on the desktop design as users now continue to scroll down the page, with more content loading as the page progresses. This eliminates having to continuously go to new pages to view information.
Responsive websites provide a seamless user experience across many devices and screen sizes.
Show of hands – Who is familiar with this form of navigation?– Who’s heard it called ‘hamburger?’Do you feel this is a right or wrong way to present category choices on a desktop or mobile site? Are there any sites that you feel are doing a good job at presenting this?Do you feel that desktop sites should adopt the “hamburger” menu? If so, what content should go in here? Should it be all, some, or just the junk?
As you go deeper in the site, main navigation is removed and people can only get to main nav through the hamburger
We chose that test because it was interesting that they hid the sign in underneath. (no other way to get to it)The takeaway here is that some people are using it - it's the only way to get to the sign in - so, they made a mistake - didn't use it the right way
Did hiding the categories underneath the hamburger nav cause people to scrollSome people scrolled all the way to the bottom of the page to look for a story
Altered the task in this one by wording slightly differently – so we said news section to try and mitigate the random clicks.We allowed them to click once.As you can see while severalusers didn’t identify the hamburger navigation as they clicked elsewhere on the page to find the business section. (21 out of 40 users didn’t click on the hamburger navigation)
We chose a different method for this test because of the complications with Marriot – Participants performed the following tasks as a part of each session:Find an all inclusive vacationHow would you find more info and make a choice on a hotel to host a wedding receptionLearning more about the rewards program- where would you go to sign upIssue was there were several e-Spots on the homepage so users were more inclined to select in this area as opposed to using the hamburger navigation menu
Overall users didn’t interact with the hamburger menu option again because there were so many e-spots on the homepage and other optionsDespite having e-spots users had difficulty finding categories such as weddings and rewards program- rewards wasn’t where some users expected it to be (on the utility nav) since that’s where you would sign in but couldn’t actually obtain information on the programAgain weddings had an e-spot as well as other areas of the homepage that they could select on Having hamburger menu and the several different e-spots as well as multiple options on the homepage and subcategory pages hindered more users from interacting with the hamburger menu
Many ways to display the icon, even mobile is going through testing and optimizationMaybe an issue with using the word “Menu” in other languages (may not be the same length or resonate the same for users)- therefore may need a universal character
If there is a lot of content, we suggest expanding categories in the menu or using page sub navigation deeper in the site – rather than changing the options as the user goes deeper in the site.
Marriott’s quick links may defeat the purpose of having the complete set of options in the “hamburger” navigation. However, their tasks and content for their users are specific enough for it to work. In this case, the “hamburger” menu becomes more of a security blanket.
….or close to it
This is a bit overdone as it takes over the entire homepage – “it’s so easy we have to tell you how to use it!”Becomes very distracting to user as it takes them out of their experience.
We had out own internal debate on if this technique makes sense for simple categories or very complex like Pinterest – I think even in the complex case you should still take care in organizing the content and categories
Squarespace displays the word “menu” in conjunction with the hamburger navigation and inputs all of their main category options into this area.In addition, the homepage shifts to the left, as the menu drawer opens up on the right.Squarespace still struggles with consolidating the category options as there are still numerous options within this space
….or close to it
DThis is a bit overdone – “it’s so easy we have to tell you how to use it!”I think Pinterest had a bit subtler way of highlighting it quickly.