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.

Norm Cox, creator of the hamburger menu

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:

  1. Open a message
  2. Compose a new message
  3. Access settings (to change layout)
  4. 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

Hamburger Menu

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:
  • Randy Fisher

    Randy Fisher

  • OK, what should I do with my website? I’m currently working on a breakpoint to better support smaller devices. Does the hamburger belong on both those and desktop?

    • Daniel Winter

      Just go with the healthier alternative 😉

      • I like this sort of alternative. I’ll probably it or a give a variant of it a try.

      • This is not a good nav design (and not a new concept). Worst of all, it is developed using adjacent links which is extremely poor developer practice for accessibility. The most important aspect is context, flow and hierarchy, think with your users in mind and guide them where applicable. A we architected navigation within a hamburger would provide greater usability and accessibility then 5 choices with a more (what are the statistics on the more being selected) especially against the almost ubiquitously known burger!

        • Daniel Winter

          You don’t need statistics to put stuff into the more, but you could either go and check your own analytics data, or you want to direct the user to a page.
          Imagine you are a small business that drives a small site plus a webshop and some small information. You absolutely want your customers to visit the shop as you want to make profit. If you hide this link within a hamburger many people won’t even notice that you have a shop (no, 99.99999% don’t open the hamburger to see which sites are available, they just want to relax and surf). With paradeiser you are able to display it directly to your customer. As it is in horizontal navigation with big hitboxes it is very usable on both mobile and desktop. Nothing wrong with adjacent links here.

          Please provide any source of information that adjacent links are bad in any matter.

          And I do agree that context, flow and hierarchy are important. Guess what. Paradeiser respects all of these components.
          You decide which sites to put up facing the front page and create the context for the situation, You may lead the customer to important pages like that shop, which creates a flow, and you may hide less important stuff like terms of condition into the more overflow. Whatever you may call it, it’s just an overflow button. And it also has integrated classes for hiding information on mobile or pc, so you could put the shop into the more on mobile as people tend to buy on tablet/pc but instead move directions to your local shop onto the mobile nav as someone might try to reach you while they are on their smartphone.

          Feel free to visit this article for further information why the hamburger is a terrible solution for navigation:

          • Adjacent links recommendations

            As for context, i just think (and I stand by testing and analysis for any solution) that a defined CTA would cover your scenario for a shop. Guiding the user on a journey you know you want them to take, in order to successfully deliver on on the websites goals may be a better solution. I think more… is a bit ambiguous.

            Anyway, nice to see whats out there and perspectives being held. All perspectives are valuable. Though I like that you link to “Hamburger menus don’t work” article on a post expressing how hamburger menu icons are becoming so ubiquitous especially with the increase in mobile usage that they are bleeding backwards into the desktop space.

            Anyway, time will tell, and in the meantime, context and statistics will guide the way.

  • Nice article that highlights the grey areas in navigation architecture and design. I agree with the idea of apps having minimal navs, but with websites/stores the longer you can leave menu options as you reduce screen space the better to encourage users to click them.

    I would always advise keeping your primary navigation options visible and if necessary hide the less important options behind the hamburger.

  • Pete Wilkinson

    I’d like to know more about the make up of the test group. How were they selected and what kind of skill level did the group span?

    • Daniel Winter

      So much this.
      25 testers are nice, but many website showed results of a few thousand visitors and showed that the interaction suffers extremely if you use a hamburger.

    • Kayla Block

      Several quotes in here make me think the test subjects were all very computer savvy. For example, “Now an interesting thing to note is when asked where our participants encounter hamburger menu’s most, they almost always say mobile apps”

      My mom would have no idea. I’m not even sure if my brother would say that.

  • Robbie Farrell

    What kind of software & hardware did you use to complete the eye tracking tests?

  • I always add the title “Menu” next to the hamburger icon as a fix to the confusion… remember, users aren’t designers or developers or they care about any trend.

  • EKTM

    Eye tracking pretty much tells you where to place design elements. That’s what I took from this. Thanks guys!

  • Jacob

    Has anyone noticed, that in the hamburger menu page version there was evidently more focus on Google products menu button (3×3 squares) in the right corner, than on hamburger menu icon itself? In my experience these two are really confusing, and I frequently end-up clicking on wrong(products menu) icon and by the results of this research I’m not alone. I think, this is very unfortunate solution and design flaw by Google.

  • María P. Arrilucea

    Agree with this. You should analyze gazeplots instead of heatmaps to take conclusions about gaze patterns. Heatmaps show what people look, not the order.

Subscribe for DeveloperTown news.

  • This field is for validation purposes and should be left unchanged.