header thumbnail image

What Is A Hamburger Menu?

February 2, 2016 - fifteen

hamburgericonYou might have heard the term ‘Hamburger’ being thrown around in the web design world. By now, we’d like to think that the hamburger icon is pretty recognisable. iPhone’s OS, the Facebook app and many of Google’s various offerings makes it a daily used piece of UI for most internet users. The three stacked lines create a symbol for a menu, usually hidden until clicked.

Where did the Hamburger Menu Icon come from?

We’d like to take a look at where it came from and how it is has evolved since it’s inception. Although it has rapidly become a popular visual icon for the web and apps, it’s actually a lot older than you might think. Back in the 80s, Norm Cox was responsible for its design as part of the interface for Xerox Star, and not much has really changed about its use today.

Hamburger Menu

In an interview with design Geoff Alday, Cox told about how the symbol was created as a “container for contextual menu choices”. The design had to be simple as there were only 16 x 16 pixels to work with.

Since then the earliest use of the symbol seems to be from Apple’s old iOS system available on the iPhone 3Gs ‘Voice Memo’ app. The symbol brought in a side menu of recording and further options within the app.

Some would credit Apple for the resurgence of the hamburger icon, but its use within Facebook’s app has also caused a revival of the three little lines. All in all, it hasn’t derived too far from it’s initial creation back in the 90s.

Is it a good icon?

There is some debate on whether the hamburger icon is good or bad for digital design. One of the main benefits of the icon is that you can use it to hold as much or as little information as required, so it can function to your needs. What’s often seen as a drawback however, is that some everyday users still don’t identify it as a universal symbol, perhaps a few more years of use are what it takes to solidify this icon up there with the trash icon (usually a trash can) and the save icon (for some reason it’s still a floppy disk! Surely that one needs an update?).

One particular way of using the icon and helping users identify its use is to have the icon sit alongside the word ‘menu’. In a study by James Foster (New Zealand web developer), using the word ‘menu’ in tandem with the icon can increase the click rate by 7.2%. Putting the icon inside a box (making it more like a button) is said to increase the click rate by 22.4%.

Should I use one on my website?

We believe it all depends on your target market, nature of your website and size of your menu. Most experts would suggest to only use the hamburger menu on mobile devices, as these compact the menu where it is appropriate.

desktopsites

However, we have seen some great examples of it on desktop sites, so we wouldn’t completely rule out the minimalist style if it suits your site. There’s always the option of split testing, where you run two versions of your site side by side, with different versions of a menu. This way you can see which menu works best for your audience and apply it.

Back to Blog

Want to learn more?

Contact the Web Design experts at Fifteen to help you get started.

Contact Us!
Footer Call to Action
Sending