The Burger Menu

It all started after Facebook used it has a navigation pattern for its app but the icon had already been used way before in many different ways. The first time it was used was in Xerox Star user interface in 1982 and later used in Voice Memos iOS native app in 2009, so the idea goes way back. (http://blog.placeit.net/history-of-the-hamburger-icon/)

Without a doubt the burger icon might be one of the most discussed topics in modern web design accessibility and user experience nowadays. The main reason why it became so popular is the fact it offers a quick and easy way to unclutter an interface by hiding the navigation behind an icon.

Does it work?

The topic isn’t particularly new and according to a lot of articles out there it doesn’t seem to perform well on mobile. Some of the arguments and usability tests results show the icon has lower discoverability because its contents are hidden, it’s less efficient since you need at least two taps to access the information you are looking for and it’s hard to find due to its small size on screen.

There are a lot of usability test online but one stands out a bit more since it not only tackles the icon itself but other options as well. The test was conducted by Exis (http://exisweb.net/) and the burger icon was up against the word “menu”. If you think the burger performed the best, you are wrong. People apparently like the obvious, so the word “menu” was the one which performed the best. (http://exisweb.net/mobile-menu-abtest)

And because of these and other findings Facebook, Twitter, Youtube and others are removing the burger icon from some of their core mobile apps as well. It has become very clear that the burger icon is not working as we hoped, on mobile at least.

If it doesn’t work why are people using it anyway?

Like I said before the burger menu offers an irresistible solution for bigger problems, like information architecture but that is a topic for another article. The main reasons why it’s still popular it’s due to its simplicity, it also makes a concept look cleaner, slick and the most important of them all, you can put whatever you want behind it.

Just pick any responsive website and the chances the icon is there on mobile are pretty high. Just to name some, Microsoft.com, Starbucks.com and Time.com.

And this pattern goes beyond mobile apps or responsive websites. If you use google chrome as your browser, it uses the burger to hide some of the navigation, or on google maps, the menu is under the burger menu, or if we abstract ourselves of the burger icon, if you use Windows since Vista version you don’t have any word indicating where the menu is, instead you have the windows icon. And if we start looking at menu systems which are triggered behind some icon the list just starts growing.

Food for thought

It has become pretty clear that people don’t get the burger menu and it might take a good while until they understand or maybe they never will. But as some icons start to lose context to future generations, like “floppy disk” save icon, others start to make sense. I believe the real problem is the lack of consistency on which icon to use when representing a menu, it’s either a three dots, three lines or something else.

When the industry finally decides on which visual representation, people will gradually start to understand what it is and what it does, we just need standards and guidelines so we make things less complicated.

The burger icon or whatever name you want to call it is here to stay and some people might not understand it, but soon enough I bet most people will.

Here are some examples of burger navigation working.