throw-out-hamburger Design

Why so much hate for the Hamburger?

The hamburger leads the way in the ubiquitous web experience. Seeing a new lease of life in mobile design’s rise, the three small bars continue to pop up over all number of platforms. Even as I write this, I see Chrome’s own 3 barred icon looking at me from the corner of the screen. Behind that I can see iTunes with a hamburger sitting pretty aside my favourite song. Even one of my favourite games, Football Manager, has recently employed that ever present hamburger. This simple icon has solved a problem, and in it defined a standard.

Yet I continually see articles spouting “Kill the Hamburger”. People resentful of the fact that the hamburger has become an ever present icon – as recognisable as the floppy-disk-to-save, or cog-wheel-settings-menu. How, or why, does something which appears to excel in its niche warrant such vitriol and hate?

History

Though many of us may consider the hamburger a new invention – countering the ever problematic issue of minimalism on smaller interfaces – it has existed far longer than you’d imagine. Its origins can be traced back to 1981, appearing on the Xerox Star within one of the first graphical user interfaces (GUI). The hamburger, which looks like a list, was intended to remind the user of a menu list.

For the next 30 years it remained a relatively niche icon until mobile design instilled a new lease of life. The icon was at home to hiding menu options within apps and mobile web pages where space was at a premium. This wide adoption has lead to ubiquity and infamy. Such is the three bar’s popularity on mobile, larger screened desktop designs – where space isnt quite so valuable – have taken to its implementation.

It is with this universal adoption that the hate has reared its head.

Hamburgers are healthy in moderation

It is all about the enviroment – where and how it is used. I see no reason to hate on something which fulfills its purpose. Which is so widely known that it holds its own standard. Why kill a ubiquitous icon, which our users know and understand, and replace it with a new iteration for them to learn all over again.

A poor hamburger is the product of a poor chef (read: designer), and poor implementations. Using the icon where it doesn’t belong only makes the user’s life harder, wrecking the user experience. Two years ago every app under the sun was implementing the hamburger as a quick and easy method to hide menu options. Unfortunately, the swiftness of its adoption meant more and more jumped onto the bandwagon. The hamburger craze caused the icon to be implemented regardless, without real thought but merely because it was popular to do so.

From this malaise have risen many abominations. Implementations with no rhyme nor reason. A hamburger for the sake of a hamburger. Chief among these monstrosities are its appearance on a plethora of large, desktop redesigns.



(time.com & teehan+lax)

Why? Why do we need a hamburger on formats with abundant white space. The reason is inevitably due to responsive design. Scaled down on a mobile resolution, fine. You need to save that space. Scaled up on a widescreen monitor, needless. It only adds to the annoyance.

Poor implementations such as these are common, and unquestionably contribute to the hostilities. Poor implementations create poor user experiences, in turn producing annoyed users. Annoyed users blame the screen, the hamburger, and not the man behind it.

There is nothing wrong with the hamburger, only the ways in which it is implemented.

The Hamburger is here to remain

The beauty of the web and mobile design industries’ current state is that they are constantly evolving. In these past 5 years, new problems have consistently cropped up. Designers have consistently had to solve these. The hamburger proves a perfect example of how this evolution can, or will, eventually result in a new design format to follow.

Facebook’s initial mobile application hid the majority of their app’s functionality under the hamburger. Hidden from view, and increasing the interaction required to browse – an amateur mistake. Only recently did their redesign fix this. Promoting common interactions to ever-present locations. Replacing the hamburger with icons directly to these locations. Space lost, but the user experience improved.


(Facebook’s mobile app before and after. The Hamburger remains, but the use changes)

The hamburger didn’t disappear completely. In fact it is still an essential component, used to hide the lesser used parts of the app. The hamburger has been made intuitive.

I see this on my browser as I type. Chrome’s hamburger doesn’t hide the back button, the home button, or the refresh button. It hides settings, history, and other rarely used features. Offering a minimalist experience whilst ensuring the key components are ever-present.

This is the lesson that needs to be learnt. We can’t just kill the hamburger. The hamburger is an essential component of modern user interfaces. What needs to change is its use. Minimalism doesn’t translate to “Hide everything from your users”; it should mean that users are only shown what they need to use. Creating that clean and fresh feeling without crushing usability.

That is the job of us designers, to ensure we use the tools we have at our disposal effectively. To not get lazy and use them inappropriately. This is a surefire way to produce hate for an icon older than the internet itself, one that always worked perfectly before. (Over to you Time)

One comment

  1. Stephanie Bousquet

    Thoroughly enjoyed your article and insight–cited you in our response to the hamburger menu debate if you want to check it out: http://www.flightpath.com/insights/index.php/2014/06/build-better-hamburger-menu/

Leave a Reply

Your email address will not be published. Required fields are marked *