loading gif

Can we leave hamburgers alone?

“Wherever it came from, it’s certainly something that caught on in the web design community. Just as it became a pattern that’s recognisable, at least for those of us working in the web every day, the detractors started to show up. Big and small.”

This evening I had another delicious hamburger from Tuck Shop Takeaway (if you live in Melbourne... just go) and it got me thinking about the other kinds of hamburgers in my life.

These ones.

Hamburger Menu

Source: iconfinder.com

The hamburger menu.

What hasn't been written about hamburgers? A few years ago they started popping up on our iPhone screens, and before you knew it they were everywhere. Even the big sites are using them, Time and BBC News being amongst the more famous ones.

The story of their seemingly inconspicuous birth at Xerox PARC has been discussed around the net as people wonder where on earth this thing came from. Norm Cox, who created it, referred to it as an 'air vent', designed as a container for contextual menu choices on the Xerox Star personal workstation.

Reportedly, one of the first 'recent' reincarnations that has been picked up around the web was Apple's use of it in the Voice Memos app back in the earlier days of iOS.

Voice Memos app

Source: truefire.com

The PlaceIt blog seems to suggest Facebook's use of the hamburger in iOS also contributed to its popularity. Wherever it came from, it's certainly something that caught on in the web design community.

Just as it became a pattern that's recognisable, at least for those of us working in the web every day, the detractors started to show up. Big and small.

Not everyone loves a burger

The Nielsen group suggest that one of the biggest issues with the hamburger menu is the fact that there's some confusion around how to use it. We have, for example, seen it being used to mean more than one thing, like lists rather than just menus. The guys at Apple, who have a pretty good idea about UX, are also worried, again more about how it's used than what it means:

"The potential for bloat and misuse is tremendous
-Mike Stern, Apple

Luis Abreu wrote a passionate and detailed article about why we shouldn't use them and why. Even Luke Wroblewski has badmouthed them.

So at this stage you're thinking that I'm readying for the kill. Hamburgers out. But no, I'm not. I disagree, certainly not with any of these very wise (and experienced) people's logic, but I disagree with those who say that hamburger's don't work, because there's a usability issue with them. It's simply not always true.

It's only as good as your audiences understanding of it

It's all a matter of establishing what you are trying to do and how the menu will work in the overall picture, and then decide on a case-by-case basis. More importantly, it's about who your users are and how they perceive it. How do we determine that? Testing.

An interesting perspective from the UX Movement, is that hamburger menus can actually increase conversion. Not always necessary on an information based site, but for a landing page, reducing your clutter with a hamburger menu can actually help users understand your page.

One of the best articles I've read on the matter was based on user testing carried out by booking.com. They very much champion the idea I'm discussing - the idea that  if in doubt, test it. They have done testing and are still using the menu on their mobile site, which speaks for itself.

A lot of the sites I work on have these menus and it's something I like to try out, from time to time. Have a quick look at the heat map here:

Hamburger Menu - Larger than Life

Source: Heatmap for the Larger Than Life menu.

It's clear that these users know what the button does. The design of the web page simplifies the choices available on the screen and users are able to navigate successfully through the page. Here, the hamburger is a winner.

So what are the alternatives?

Apple are fans of the 'always visible' bottom navigation. Think Facebook app, Twitter App, Safari, YouTube, pretty much most of our day to day apps.

Facebook Hamburger

While this is a good solution it's limited to presenting four or five choices. It can also affect cross browser compatibility, not to mention the sacrifice of screen space (admittedly less of a concern in the age of iPad sized phones). Not necessarily a bad thing one could argue, however, not always the right solution.

In Conclusion

Sometimes a hamburger menu is the perfect solution for your site. Its widespread use over the past few years has led it to become a recognisable pattern for many, and this really is the most important thing.

The problem to address is do your users know this pattern? And you can only find that out by testing it. In many cases you'll find that it works just fine, or the difference is negligible. Other times, you may benefit from a change.

All I know is I'm fed up with the fighting... there's always enough room in the world to accommodate another kind of hamburger.

To round off I'd like to include my favourite incarnation of the hamburger menu.

Hungry Jacks Hamburger

Source: hungryjacks.com.au (mobile)

If in doubt, why not be as blunt as Time?

Time Magazine Hamber

Source: time.com

No subtlety here.

Indietech blog article author - Digital Marketing and Web Design insights
Noted by Vincent Feeney

Marketing & design inspiration
direct to your inbox