How to solve the hamburger icon problem

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. 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.

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. 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.

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