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?

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

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 *

Originally published at www.developertown.com on September 1, 2015.