Many desktop sites have one and most mobile sites (including our own) do. Yet, despite their almost ubiquitous use, they are one of the most argued about elements of digital design.

 

It’s important that designers don’t take their output for granted. And especially that we continue to examine and justify the use (or not) of aspects of graphic design that, for better or worse, have become the norm.

 

Enter the humble burger symbol.

 

Now, you may (if you are as ignorant about your digital design history as I am), have assumed it was a relatively recent invention. For my part, I think I got easily distracted by its flatness and conflated that with the recent vogue for flat design, and thought that the burger probably originated around the same period as mobile specific design did. The truth is however that the burger is a lot older than that. It goes all the way back to an early graphical user interface used on the Xerox Star, a computer that was released way back in 1981.

 

According to the guy who created the burger, Norm Cox, the graphic design of the burger had to be simple. First, it was meant to act like a ‘road sign’ in that it was functionally memorable (the lines of the burger were supposed to represent the menu it hid). And second, the design was extremely limited by the constraints of the day. Digital graphics in 1981 being what they were, he apparently had a limit of 16X16 pixels (possibly less), to work with.

 

Of course, designers today have constraints and considerations of their own, and although they have changed in substance they haven’t resulted in drastically different outcomes. Mobile design leaves us with less space to fit content that we expect to carry over from design for desktops. So the burger continues today, those three lines still representing the lines of a menu, but also, serendipitously, a collection of links too.

 

Because it is ubiquitous, and incredibly easy to spot, most frequent web users recognise the symbol, which is why it is still used today. A virtuous circle, since the more familiar it becomes, the harder it is to replace it. It has become a common shorthand. A rarity in digital design, where there aren’t that many universal symbols.

 

All of which isn’t to say there aren’t problems with the burger.

 

Most importantly, by virtue of its function, it hides content and adds a click to any navigation which further reduces the chance of the hidden content being found. Huge UX no-nos. This is, according to mobile savvy designers, a result of desktop sites trying to fit onto mobile screens. The burger is, according to this rationale, a short fix that is a bit of a cop-out. Sites should simply work harder at prioritising visible content rather than using a catch-all menu button – just like Facebook did when, in 2014 (after loads of A/B testing), they relegated their burger to the bottom of their messenger app.

 

By hiding content behind the burger, site developers are avoiding making tough choices about what goals and priorities a mobile site should have. The truth of it is, if you are trying to export a content heavy site (a news website for example) wholesale to a mobile design, you either have tough decisions to make about what is visible or you avoid those decisions and use a burger.

 

Despite all of the testing and UX theory that says we should relegate the burger, we still see good reasons for continuing to use it.

 

    • The burger frees up valuable screen space. A lot of it on mobile sites. The use of a burger should be a conscious weighing between site navigation goals and graphic design goals (which are made easier to achieve through careful use of the burger). Both should be working for the greater good of the brand behind the site.

 

    • Although we now have far more than 16X16 pixels to play with, it’s still nice to be able to render a symbol so easily.

 

    • The burger is a widely recognised symbol – which is very convenient for international brands when it comes to translating their designs into other languages. Use of a common icon reduces the need for localisation.

 

  • Also, as mentioned above, it is hugely consistent. Most of us know what it means and what we are likely to find behind it. It is a reliable , if clunky, method of hiding a huge amount of content.

 

It is, for now, often the least bad option for getting a desktop site mobile. We are, however, on the cusp of a mobile first life, and when sites (and indeed brands) are designed from the ground up with mobile in mind, we’d expect to see more sites taking the plunge, dropping the burger and focusing on what matters most.

 

By Oliver Brown