Why hamburger menus can be good for you as part of a healthy balanced diet

There is an interesting debate in the design community right now about the hamburger menu. The three bar icon (so called because it supposedly looks a bit like a hamburger) is often used to indicate some kind of navigation menu.

Origins of the hamburger menu

This user interface device has seen ups and downs in its 35 year history. It can be traced back to the Xerox Star workstation, which is one of the first systems to have had a graphical user interface.

But widespread adoption of the icon didn’t come until mobile devices took off in the past ten years. The space constraints inherent in smaller devices left designers struggling for a way to display the large numbers of navigation options and tools we had come accustomed to adding to our desktop layouts.

Facebook and Google were among those who heavily used the hamburger icon to create a hidden drawer menu that could be shown or hidden by the user. From there, its use spread widely.

The backlash

But in more recent times, received opinion has turned firmly against the hamburger menu.

Companies implementing the hamburger menu began to realise that, although their designs were now less cluttered, engagement was dropping. Apple started warning developers against adding hamburger menus to their app designs.

Luke Wroblewski produced an amusing graphic about “the mystery meat of navigation”. In addition to the hamburger menu, we have kebabs, doners, bento and meatballs.

Don't ever say you don't have choices on mobile. pic.twitter.com/Atu3Ogi58j

— Luke Wroblewski (@lukew) April 23, 2015

This neatly demonstrated one of the main problems with hidden drawer menus. It is difficult to know what it actually means.

What is the distinction between a meatball menu and a hamburger menu? Do users know what to expect from the subtly different icons designers are using to tidy away their options?

It looks like designers need to go on a diet.

The defence

Andy Budd has put up a spirited defence of the much-maligned menu, drawing an interesting analogy with a universally-known icon with an abstract design:

Had Twitter existed in the 80s, I’m sure a group of well meaning designers would have tried to shoot down the humble pause button—and it’s cousins “stop” and “record”—with similar arguments.

The logic goes that, given time, the hamburger icon will become as familiar as other ubiquitous symbols.

But is the hamburger icon on its way to gaining this universal recognition? Daniel Harvey provides some anecdotal evidence to suggest that is the case:

A few months ago while working on an app redesign for a major UK publisher we did some research on the usability of hamburger navs at the height of the bashing and without fail EVERY respondent knew what it was, how it would behave, and had a good mental model of what sections/links/options would follow.

Part of a healthy balanced diet

As usual, when you are presented with two extremes of opinion, the truth lies somewhere in the middle. My view is that a hamburger menu is probably safe to use in moderation, just as you can treat yourself to the occasional hamburger in real life.

To extend the already-tortured analogy, that means eating your greens too. So you should be careful with how you use a hamburger menu, and make sure you are aware of the consequences.

The real problem with hamburger menus

The main issue is not the icon itself. It is that some designers have misused the icon. This misuse has blurred the lines of what the hamburger menu should be used for. This in turn will have hindered users’ ability to understand what the icon means.

As a Nielsen Norman Group report on icon usability outlined, some apps have used the hamburger icon to denote a list rather than a menu.

This problem may settle down over time as designers begin to converge on a common understanding of what the icon should be used for. But coming to a common understanding of what various icons mean could be an uphill struggle while mobile interface design is still so new and fast-moving.

For instance, the Pocket Casts Android app uses an astonishingly similar-looking icon (which you might call a double hamburger) to denote a handle that enables you to re-order podcasts in a playlist. These handles appear directly underneath a more conventional hamburger menu icon. It is easy to understand why some users may be confused.

One common proposed solution to the hamburger icon issue is to replace or supplement the icon with descriptive text such as Menu. The BBC’s iPlayer apps noticeably take this approach. Yet somehow this solution seems feels even more uneasy. This is because the presence of the word Menu does nothing more to tell you what you will actually find in there.

Don’t make your hamburger menu a cop-out solution

I remember as a child being asked to tidy my room. I did so by scooping up everything that was on the floor and dumping it on the tables. It had to be explained to me that I had really made the problem worse. By not making decisions about what should go where, I just shoved everything onto a smaller space and made a bigger mess.

The same is true with your design. A badly implemented hamburger menu risks being such a cop out. You couldn’t be bothered prioritising your features in your mobile interface, so you just shoved it all in a drawer and hoped for the best.

If you take such an approach, don’t be surprised to see engagement drop. Perhaps there is a fundamental problem with your product. If even you don’t know what your most important features are, how are your users supposed to know?

Do your research. Work out what your product is for, how people will use it and what features really need to be displayed.

It needn’t be an all-or-nothing approach. Notice how the big players still use hamburger menus. Facebook’s hamburger sits comfortably alongside other prominent options, and the key feature — updating your status — is presented front and centre. Google’s apps now tend to pull out a few key features for display on the main screen, while retaining other options in the hamburger menu.

As usual, there is no one size fits all solution. Treat yourself to the occasional hamburger when the circumstances permit. But eat your greens too.