Defending the Hamburger Icon

If you haven’t been living under a device-less rock for the last few years, then chances are you’ve seen what is affectionately referred to as the “hamburger” icon.

In case you have been under a rock (or if you’re just not really into design), the hamburger icon is simply the navigation icon comprised of three horizontal lines, which some would say resembles a hamburger. Also known as the list, menu, etc. icon, the hamburger has witnessed a meteoric rise in its use as an expandable menu button (especially within mobile apps/sites), but it’s also coming under increasing fire as of late. But does the evidence stack up against it as much as the haters want you to think?

Owing to its widespread usage, it would be a stretch to say designers never liked the icon, even though disowning it is the “cool” thing to do these days. Regardless, though, it certainly fell out of favor with the majority of folks a while ago. Just do a Google search on the topic, and the first results page will include countless sites explaining why you shouldn’t use the hamburger icon on your site or in your app. Hailed experts such as this Apple evangelist will tell you not to use it. Amateur and professional designers will show you the data that they’ve found when running A/B tests, data which does not bode well for the hamburger icon.

What if the hamburger icon doesn’t suck?

So why would we come to the aid of the hamburger icon and defend its honor? Well, at the end of the day, data is data and has to be taken into account. It’s highly possible that the data accurately reflects the entirety of reality, and in that case the hamburger icon has already lost. But, we would just like to pose the “what if” questions — what if the data that has been published simply fails to look at the context of the bigger picture? What if the most common arguments against the hamburger icon are inherently flawed? What if — and this is gonna sound crazy — but what if there were millions of designer/user success stories of the hamburger icon?

The data doesn’t add up

As we mentioned earlier, there are a number of examples of A/B tests that were performed in an attempt to answer the hamburger icon question once and for all. While we applaud the motivation behind such efforts, we find that such tests aren’t necessarily valid for something like a menu icon. With A/B testing, you can’t determine intent, so you don’t really know why a user did or did not click on the hamburger icon or any other tested menu icon. Could it be due to the difference of icons? Sure. Could it also just be that a user who was going to engage with the menu anyway was served an alternative icon, or one who wasn’t going to dive deeper was shown the hamburger icon? That’s also possible. So A/B tests might shed some insight on the issue, but we don’t feel that they can be held up as the definitive conclusion.

The arguments are one-sided

The most common arguments all cast the hamburger icon in a negative light, as is to be expected. What most people don’t mention, though, is that for every design decision, there are tradeoffs to be made, and you can’t simply focus solely on the negative aspects of a decision — it’s a two-sided coin. The most basic argument against the hamburger icon is that users don’t understand what it is, and therefore don’t use it. While this may have been true a few years ago, as we jokingly mentioned earlier, you’d pretty much have to be living under a rock to not know what the icon means at this point. Part of this could come down to demographics (primarily, age), so ultimately it does sort of depend on what your target audience looks like. If they’re younger, a hamburger icon should be fairly universally understood, whereas the older generations might not be as familiar with it. But at the end of the day, many (or maybe most) apps and mobile sites are targeting a younger crowd. Obviously there are exceptions to this, but many/most things technology-related are going to skew young.

Another related argument against the hamburger icon states that the lack of visibility of the menu will lead to less engagement. But with companies such as Google and Facebook using the icon on their mobile sites, you’d think they would’ve done extensive user testing and found that idea to be false. Beyond that, though, the lack of visibility of the menu is really the point of the hamburger icon — it sits inconspicuously in the corner, out of the way and leaving just the content. Designers shouldn’t just use it because it’s trendy, but as long as it’s a conscious design decision to let the content shine, then the lack of a persistent menu is actually an advantage, not a drawback.

Finally, some have argued that the structure of menus using the hamburger icon makes navigation tedious. Instead of having the entire menu constantly present, the user has to click or tap, wait for the animation of the menu sliding out, and then click or tap the menu item. While this is a valid concern, the question here really ties back to the previous point. If the hamburger icon is being used with purpose to hide the menu and allow for the screen to be dominated with content, then such a design has to be weighed against about one second. We don’t have empirical data to back that number up, but offhand, it would probably take at most one extra second to open up the menu using the hamburger icon and then click on the menu item (once the user is familiar with the menu, of course, but that familiarity is also necessary with a traditional persistent menu).

There are a few (million) success stories

So despite the data and the experts advocating for the extermination of the the hamburger icon, how has the icon actually fared in the wild? Well, we don’t have the exact numbers for this either, but based on Google and Facebook alone using the icon on their mobile sites, we would guess that many millions of users have successfully navigated using the hamburger icon. And with such well-established companies using the icon, it’s also reasonable to expect that more and more users are becoming familiar with the hamburger icon and its meaning, if they weren’t already.

The hamburger icon and navigation can coexist peacefully

Speaking of Google, they have an interesting new-ish approach to the hamburger icon in apps: instead of using it standalone, they recommend that it be used in conjunction with an icon as part of their navigation drawer developer guidelines. Maybe this approach means that the hamburger icon really is ineffective by itself (although, as we mentioned, Google’s mobile site uses it alone still), or maybe Google is just trying to play to the trend of denouncing it. Either way, it looks as though at least a piece of the hamburger icon may live on in the end, despite the buzz of the naysayers.

Luke Johnson
Luke Johnson
Luke once aspired to be a zoologist and first read of the elusive echidna when he was just a young boy. Feel free to email him with any questions related to marketing.