How to solve the hamburger icon problem

Paddi Macdonnell.
June 24, 2014
How to solve the hamburger icon problem.

The hamburger icon — three little bars used to indicate a link to a menu — is one if the most controversial techniques on the Web right now. Designers, we are told, all hate it; customers, we tell everyone, hate it too. Why then, is it everywhere? The hamburger icon is easily scaleable and it fits cleanly into a pixel grid. It was originally a list icon that has been press-ganged into its current role, but since a menu is simply a list of options, it’s semantically correct to use the list item in this way. There’s been a huge amount of debate, A/​B testing, blog rants, and user studies conducted on the subject, but these studies nearly always focus on app design. When the hamburger icon is used in web design it indicates a far more significant problem.

The problem with the hamburger icon

There are plenty of designers who question the value of the hamburger icon itself. It’s frequently seen as an iOS style icon even though it was used in this manner before Apple adopted it. swiss hugeinc There is in fact a great deal of conflicting evidence as to whether the hamburger icon is useable as an indication of a menu. Some designers argue that the icon is easily recognized by a younger demographic, others suggest that an older demographic recognizes it if web-literate. The only conclusion that we can really draw from this evidence is that usability tests have proved inconclusive, with parallel tests often returning conflicting results. What is universally accepted is that users do not recognize the hamburger icon as a single link — probably because it is designed to look like a group of links, rather than a single thing. Something that is supported is that surrounding the hamburger icon with a border, or giving it a background, so that it looks more button-like — dare I say, more skeuomorphic — will result in more clicks. futureinsights

More problems with the hamburger icon

Apart from the design of the icon itself, the approach to using a hamburger icon is also rife with problems. Firstly, and perhaps most significantly, the hamburger icon adds an extra action to your navigation; when it should take one click to reach a particular page, it will now take two. The rule of thumb for web designers has always been a maximum of three clicks (wherever possible), so far from solving a navigation problem, the hamburger icon technique simply exchanges one problem for another. Of course, that isn’t just an issue for the hamburger icon, it’s a problem for any navigation laid out in this fashion. You can use the word Menu’ in place of the hamburger icon and you’ll have the same obstruction, the difference is that the hamburger icon can’t be used in any other way. hobbit jam3 The hamburger technique also conceals its contents. From a UX point of view, users shouldn’t have to take an action in order to find out what actions they can take. It’s all too easy to forget to share on Twitter’, or go to Checkout’, when those options aren’t immediately in front of you. Users will simply not go looking for a link that they don’t know exists. Finally, the hamburger icon technique hides the current state of the your site and the user’s position in it. Down states in a menu provide contextual information to a user that the hamburger icon technique obscures. london-se

What does the hamburger icon do well?

Given that the hamburger icon is universally hated and results in a string of problems, why is it used everywhere? In my experience, certainly amongst certain demographics, the hamburger icon has recently reached the point of being easily recognized. Studies that refute that tend to be a year or more old and a year is a long time on the interweb. In fact the link icon is far more recognizable than the link icon or share icon, definitive forms of which have yet to emerge. The hamburger icon is consistent across any number of different designs. olympicstory Most importantly the hamburger icon does what it sets out to do: it saves us a ton of screen real-estate. If a client presents you with a list of a gagillion items that have to be added to a menu, then shifting them off screen and linking to them is a crude, but effective way of making room for the content that the client also wants. I’d like to say that the hamburger icon solves the problem better than other solutions, but it’s not true. Instead I’ll say that the hamburger icon solves the problem less badly than other solutions.

The root of the problem

The hamburger icon tends to be employed because designers — or more often, clients — aren’t fully committed to a mobile-first approach. They want a regular’ site, but squeezed onto their grandaughter’s phone. Opponents of the hamburger icon tend to replace it with the word Menu’ — in doing so, they are entirely missing the point. The hamburger icon has, like it or not, acquired its meaning now, but users understanding what the button is for doesn’t solve the biggest issue, which is that hiding our navigation, hiding our users’ options, is a terrible act of self-sabotage. In short, the hamburger icon is a symptom of our collective failure to wholeheartedly embrace all aspects of the mobile-first approach. pono mccollcenter

A better solution

In order to solve the hamburger issue, we have to accept that the Web as we know it doesn’t work. The rise of the mobile web means far more than reducing the number of columns we use and dropping some of the heavier image files. The mobile web is used in a different way to the web of old. The mobile web exists in the context of dedicated apps, and users expect the Web to be experienced in a similar fashion. Facebook’s app famously swapped their hamburger icon for a tab bar, and as a result saw improved conversions. But Facebook have done something far more significant than swap menu designs. Recently they’ve released their Messenger app, and the big deal about that is that they already had a perfectly functional and popular app that they could have integrated the messaging with. Facebook have compartmentalized their functions, by focusing each app’s role they’ve arrived at two simple apps, instead of one complex one. The reduced functionality results in a reduced set of menu options, and less need for a hamburger menu. Good apps are highly focussed, and they’ve evolved that way through far more rigorous user testing than the Web is subjected to. To create an app-style experience we need to simplify our sites, simplify again, and then simplify a bit more. If necessary, break your architecture down into manageable bite-sized pieces, microsites almost. When we present our users with a simple set of options, the problem of a complex menu never arises. Making use of the hamburger icon is like slapping a band-aid on an injury: it patches it up, but underneath something is still broken. Only if we fully embrace a mobile-first approach, and apply it not just to our design, but to our content and our information architecture, will we consign the hamburger menu to history. Featured image/​thumbnail, uses Hamburger image via Mononc’ Paul

Paddi MacDonnell

Paddi MacDonnell is a designer and entrepreneur from Northern Ireland, follow her on Twitter.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…