The Most Recognizable Thing on the Planet
An eye-tracking study of the use of the hamburger menu on desktop websites
I know, you are reading this thinking "just what I need, another opinion on the use of the hamburger menu". Apple says "I'd prefer you didn't...", Google material design guidelines say "sure, but design it like this...", Jacob Nielsen says "try pizza instead...", and so on, and so on and so on... But wait, this one is different, I promise. This one is focused on answering a very specific question that could have interesting considerations for you to think about as you design your site. With the help of our eye-tracking software and 25 gracious participants, we ran a test to gain insight into the following question:
Does behavior change when users encounter the hamburger menu on a desktop website versus a more traditional menu?
We'll be honest, we were surprised by the results.
The hamburger menu icon has become more and more prevalent in recent iterations of mobile and responsive web apps such as Facebook, Snapchat, and all Google apps. The hamburger menu often contains “the rest” of all the other menu options, hiding menu options that have less importance to maximize limited screen real estate.
However, we've noticed that it's now finding it’s way onto more and more desktop websites. Google’s new email-helper website, Inbox, up-and-coming search engine, DuckDuckGo, and website design and hosting service, Squarespace, are all using the hamburger menu on their pages. Google, in its Material Design Guidelines, has even gone so far as to recommend a permanent navigation drawer for desktop websites. Wherever you stand on if/how it should be used, there's no denying at this point that it has become a highly-recognizable symbol in user interface design.
Since web viewing on mobile has surpassed desktop web viewing by most accounts, it makes sense that mobile conventions are now bleeding over into the desktop space, but is this necessarily a good thing? Does doing this hinder the discoverability? Does it change behavior? If so, for better or worse?
I designed that symbol many years ago as a "container" for contextual menu choices. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button…[it] was meant to be very "road sign" simple, functionally memorable, and mimic the look of the resulting displayed menu list.
What We Did
Using eye tracking software, we ran 25 people through a series of tasks to gather viewing data. We used Google Inbox as the test site, but created two different versions that were presented at random. Version 1 was Inbox exactly as it is currently designed today with a hamburger menu, and Version 2 was another version we created with a horizontal menu of the same main menu choices hidden in the hamburger. The tasks the users were asked to complete were as follows:
- Open a message
- Compose a new message
- Access settings (to change layout)
- Find and access a conversation thread (which didn't exist in the viewing area)
The sessions ran about 10 minutes each and then participants were asked some follow-up questions to gauge their reaction about what they saw and what they thought was the proper use/purpose of the hamburger menu.
What we found
When asking people to find menu-specific options, they were quicker when a horizontal navigation bar was used. In the images shown you can see there were visible chunks of viewing centered around the navigation bar. The static navbar image seemed to be the most straightforward and accessible (in terms of menu options showed), as most people stated.
The hamburger menu content, some people said, was better because they they really didn’t think that the static navbar was appropriate for the interface. One person noted that the offset search bar made him think that they were searching the whole web rather than just their email. They also said the hamburger menu made the site look more professional.
Looking at the gazing patterns, something we never expected to see, was a pattern that each view seemed to support. On the hamburger menu page, the gaze of people seemed to be mostly vertical:
However, the static navbar page seems to suggest that gaze pattern occur in a more horizontal view:
Is there an underlying meaning behind this driving the viewing behavior? We are not exactly sure at this point, but what we do know is that with this sample was a clear difference in the way in which people consumed the content on the page.
What we think
Now an interesting thing to note is when asked where our participants encounter hamburger menus most, they almost always say mobile apps. Following up their answer we asked why they thought that was, they almost always reiterated that they thought it was that way to gain screen real estate on smaller devices. Why then have it on the desktop, where screen real estate isn’t an issue?
The answer it seems, might depend on the purpose of the software.
What is the function of your website? Are you selling a product/service? Are you delivering content to an audience? Are you providing a tool or digital product that is used for a specific purpose or solves a specific need?
Most likely, if you are using a product, you will move through the site with a clear concise goal(s) in mind. Take a banking site, like 5/3 Bank, for instance. One would come to this page, wanting to do specific tasks, as quickly and efficiently as possible, like checking balances, transferring money, paying bills, etc. Usually these options are intentionally at the forefront of the design, and therefore, easy for users to find.
Sites like: CNN, 500px, 5/3 Bank, Facebook
Take this other instance. Imagine your site, like Squarespace, is used for selling a product you make. You want people to make a purchase and the best way to do this is by helping them experience a compelling story that they identify with in order to make it happen. What better way to do so than by encouraging exploration and relevant content discovery? Lisa Gevelber put best in her ThinkWithGoogle article on MicroMoments, "Consumers want what they want, when they want it. That means it's more important than ever to deliver a good first impression - especially on mobile." So there is a world where you may want your content to be upfront and obscure at the same time, so users stay on your page long enough to find information relevant to their situation and buy the product. You may want to consider the use of the hamburger menu to encourage organic discovery.
Sites like: Squarespace, MTV, Leo Burnett, IGN
These are just 2 viewpoints into a very complex view of the web, and each situation (and it's users) are unique. Going forward, we really need to be cognizant of context and how users are experience our technology - then design for that experience.
Web developments are moving at the speed of light as the internet continues to evolve. We have past the point where we need to decide on whether or not conventions such as the hamburger menu should be ubiquitous. We need to really think about why we use certain tools and layouts and less about following trends. Let’s continue the conversation and see where it takes us.
* Special thank you to our phenomenal summer intern Jereme Magsaysay for all of your hard work on this project - it wouldn't have been possible without you *
Published September 1st, 2015 by:
Partner and Director of Design