Hamburgers are healthy in moderation

Unless you’ve been living under a device-less rock for the past few years, chances are you’ll have stumbled across many of these hamburger icons on an overkill of websites. It’s the three black bars, that have gained personality and is as familiar as your mouse’s cursor; so much so that it has been granted a name - the hamburger, as well as nick names such as menu, sidebar, basement or navigation drawer. The full name is often the name designers and developers go by as the three layers look more like a stylised burger instead, hence the name. It has been stripped back to its constituent parts so it looks like a hamburger inside two halves of a bun - do you see it now? It may seem author-less and a UI feature that has sprung out of the wild but someone did actually design this little visual nugget.

Although it’s considered a new-fangled invention or an overnight sensation, that solves all of the issues that can be faced on smaller interfaces, the icon can be traced back to 1981, when it appeared on the Xerox Star, the desktop and application software on one of the earliest graphical user interfaces (GUI). The designer, Norm Cox, created a suite of icons for the system’s interface. Today, the three-lined enigma appears more often than not, tucked up in that upper corner of your screen.

It was popularised by Facebook, Apple’s Voice Memos app for iOS and Twitter’s Tweetie mobile app that saved the day by bringing a handy list of memos and options to the forefront for their users to explore. The hamburger now crops up everywhere and it’s hard to avoid it.

However, there’s much debate about the relative merits of the hamburger icon. The hamburger icon has witnessed a meteoric rise in its use as an expandable menu but it’s also cast in a negative light by many. Some users hail it as the hallmark of the digital era and others want to put it onto the digital chopping block or toss it onto a tasty UI barbecue. Hate has reared its ugly head but what exactly has the hamburger done to warrant so much hate other than excelling in its niche? Why should we dislike something so heavily when it fulfils its purpose?

Some designers are projecting all of their traffic issues into one little graphic, with an “out of sight, out of mind” mentality, which can have detrimental effects in terms of engagement. We’ve all probably muttered under our breath when searching for something of interest “oh, why is this hidden?” or there seems to be an easy navigation to the menu but nothing on how to get back. It’s like heading into an unfamiliar room and you hear the dreaded slam of the door behind you with no handle on your side. Nobody wants this. Perhaps the icon needs to be improved. Everything is better with cheese, but I’m not talking about a cheeseburger icon. The hamburger could be improved by adding a ‘menu’ label to the icon, making the icon look like a clickable button in a bounding box or simply giving it enough space so it doesn’t get swamped with all the other elements on the webpage, could help user experience. It’s a stretch to say that designers never really like the icon, although disowning it would be the “cool” thing to do in this day in age, instead adding plus, arrow or grid icons for hidden navigation.

Arguably, the hamburger’s duties are still vital. It may not be the most ‘nutritious’ feature in some cases but it does the job. People are increasingly reliant on their mobile devices and now expect the full functionality of desktop experiences in their hands, so the need to deliver extended functionality that is all packaged up within a small icon is more desirable than ever. When some playful interaction is prioritised in the design, with overlays and sliding effects, the hamburger can look pretty flavoursome and appetising for users to delve into!

One of the main arguments for its demise is that many users don’t understand what the hamburger is and therefore don’t use it. This may have been true a few years back but it would be daft to say you’ve not recognised it at all. Part of this comes down to demographics, particularly the age sector. The younger generation are likely to universally understand the icon and its functionality whereas it may not be so easily fathomed by the older generation. Many and most apps are targeting a younger crowd and there may be some exceptions to this, but most are skewed towards the young.

The hamburger is a convention and users will learn how the icon works by operating it time and time again. For instance, the triangle icon for the play button on music players across a multitude of different apps and webpages is recognisable to many as they see that, when pressed, music will play and they soon learn what its function is. It’s a similar situation - you will in time learn to associate the icon with an experience. There’s a reason there to argue that we shouldn’t kill off a ubiquitous icon, one that users know and understand and replace with a new iteration. It takes time and patience to learn something new and not all users have this. Why wreck user experience?

A poor hamburger is a product made by a poor chef (designer) which results in poor implementations. Implementing the icon as a quick method to hide options has seen a dramatic climb in adopting it more and more. Jumping on the bandwagon has resulted in designers implementing it regardless, incorporating it into their design without any serious thought. Annoyed users will be quick to blame the the hamburger but not the chef (designer) behind the making. Is its presence on a plethora of large desktop screens really necessary? It’s a hamburger for the sake of a hamburger and that’s being greedy. There’s nothing wrong with a hamburger, only the way it gets implemented.

I would side for the keeping of the hamburger but agree that they’re only healthy in moderation. Whether your hamburger is dressed with categories, subpages, tags, pickle or cheese, hold tight as users will all soon find their way.

Charlotte Allen

Charlotte