Member preview

If the hamburger button impacts discoverability, and is seen as bad UX, why do most mobile sites still depend on it?

The internet is awash with articles on the Hamburger button.

Hamburger Menus and Hidden Navigation Hurt UX Metrics, Why and How to Avoid Hamburger Menus, 3 Good Reasons Why You Might Want to Remove that Hamburger Menu from Your Product. It’s a contentious issue amongst designers, and it’s difficult to find any articles online justifying it’s usage (Or at least it was for me). That being the case, why is it still used extensively for navigation on a vast swathe of websites? That’s not to say that all mobile websites use this style of menu, some use other approaches such as “snail trail” navigation or tabs — but there’s no question that the hamburger button dominates mobile website navigation.

An excellent example of a “Snail Trail” as demonstrated on next.co.uk.

How do users interact with the hamburger menu and does it impact discoverability? It just so happens that I’m testing this very subject for a mobile project, so let’s jump right in and learn more.

What is the hamburger button?

Popularised with the rise of mobile content the hamburger button, or menu, is a way in which a designer can hide multiple menu items behind a simple icon that looks, no surprise really, like a hamburger. Today, It’s effectively a response to the limited amount of screen space available on mobile or tablet devices as opposed to Desktop. However, I’ve seen numerous examples of it being used on Desktop websites as well, which I’ll touch upon later.

A typical looking hamburger button, with no label, on the Superdry website.

It first appeared back in the 80’s, on a Xerox workstation called Star, which was running an operating system called Pilot (One of the first operating systems to have a GUI). Norm Cox, an interaction designer from Baton Rouge, Louisiana, is regarded as the person who invented the Hamburger Icon.

These lines resemble a list of items, which serve as a visual reminder of menu lists. The hamburger menu was designed to be simple, functionally memorable, and mimic the look of the resulting displayed menu list. Norm originally designed it as a “container” for contextual menu choices on the Xerox Star, similar to the contextual menu that’s displayed today when we right mouse click on objects. The symbol is still in extensive use today as an indicator of hidden menus on websites and smartphone apps.
https://bit.ly/2HYz4e7

Can we make the assumption, given the icon’s history and how often it’s used now, that users are familiar with those three simple lines? I carried out user research to establish if this is indeed the case.

Hint: You should never make assumptions about user behaviour.

Unlabelled, potentially abstract icons are not good

For context, I created three different navigation designs for user testing. It was a fairly straightforward test that required users to browse a mobile prototype, but use only menus to find items that they wanted to view. The three navigation designs involved a simple hamburger menu, a dropdown accordion menu ala Argos and a tabbed approach which also incorporated a hamburger menu.

Argos’ approach is to do away with the hamburger button altogether. They’ve used a dropdown accordion instead, with labeled iconography for other sections of the website.

In the interest of fairness, participants were asked the exact same questions for each design, which was shown one at a time. Participants could click the menu and view items down to at least one level, as I felt this was enough to be considered fairly “realistic” to the participant.

The prototypes that participants got to see were of much higher fidelity and more realistic than these simple wireframes, however, these demonstrate the different menus implemented.

These designs were tested on 10 people within our target market (an initial requirement which I don’t necessary agree with, as we’re testing fundamental design concepts that shouldn’t be dependant on target market) and were a mixture of male and female, ages ranging from 25–65. Of the 10 people who participated, 4 of them were over 60.

The eagle-eyed amongst you will probably notice something about the hamburger button shown above. The word menu. I’m a big fan of labelling icons which may be considered too ambiguous for some users. Is the hamburger button too ambiguous for some users? It’s possible. No matter how small that possibility is, adding the word menu underneath goes further to remove doubt and hopefully, cognitive load.

Conversionxl.com carried out research on different treatments for mobile menus and concluded that, “Our own test showed that the word MENU helps + using a colour to make it stand out from the noise can help.”

Reducing cognitive load can also go a long way in reducing interaction cost. Coined by the Nielsen Norman Group in this 2013 article. “The interaction cost is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.”

A picture of the stereo in my wife’s car. How many buttons would you be able to identify before having to consult the manual? Consider the cognitive load / interaction cost for the average user, especially given the context of a moving vehicle.

Of the prototypes tested, which one do you think proved to be the most effective and popular amongst participants? Number one, by far.

Given the apparent distain within the design community for this button, I was genuinely surprised at the immediacy people displayed when they were given a task that involved the hamburger menu. It was almost as if participants were primed, like a rocket ready to launch, in search for categories behind that button.

Personally, I thought that design number two would be the most popular, but I was wrong. It came dead last. The impression I got from user feedback was a sense of uncertainty, that they were unfamiliar with the menu being presented in this manner. My own design assumption was turned on its head because we reached out to users, and I love that. That’s what user experience design is.

My own design assumption was turned on its head because we reached out to users, and I love that. That’s what user experience design is.

What I will suggest is this: do your own research. A little research is better than no research. Do your best to reach out to users; whether it be surveys, remote user research or guerrilla user research at your local coffee shop. Context is extremely important, and while we have a wealth of amazing knowledge to read and guide us as designers, there is no better guide than feedback from users.

While the the hamburger menu was well received within the context of my research, would it have been without the word menu? What about if it was used on a website frequented by people who maybe aren’t quite so tech-savvy?

Using a hamburger menu on desktop

While I feel there’s a much stronger case to be made for the hamburger button being used on mobile, I’m not entirely convinced of it’s need on desktop websites. Consider the amount of space available on a desktop version of a website, and also consider how long traditional, horizontal, navigation has been around before designers decided to hide everything within a single button.

Some will argue they prefer the cleaner, more minimalist aesthetic, that’s afforded with this approach — but you need to consider if this is more important than accessibility. Again, context is key and a hamburger or menu button might considered more acceptable on a desktop website like MoMu Antwerp than a large scale e-commerce website.

If the hamburger button impacts discoverability, and is seen as bad UX, why do most mobile sites still depend on it?

You can probably tell from the tone of this article, that I’m suggesting using a hamburger button with the word menu is a perfectly acceptable way in which we can display navigation on mobile devices (not so much on desktop however). There are countless articles that suggest we shouldn’t, and that we should seek out alternatives. If the alternatives are genuinely better at reducing cognitive load and interaction cost, then sure, that menu should absolutely take precedence. But during my research, which is always ongoing, I found all participants were able to locate the menu regardless of their age or ability, and comfortably navigate to a menu item of their choice.

My own opinion now is that the hamburger is convention, and I found that participants were frustrated if the menu wasn’t presented this way on mobile.

Like what you read? Give Chris Kernaghan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.