Words by Jenny JohnsonAugust 4, 2017
The hamburger menu is a design trend which is difficult to avoid, the icon being used in most mobile sites and apps, whilst also becoming increasingly popular in desktop designs too. In this post I talk about the history of the hamburger icon, the arguments for and against its use on mobile sites and the alternatives.
According to software designer Geoff Alday the first hamburger icon was designed by Norm Cox for the Xerox Star (the world’s first graphical user interface). In an email conversation between the two Norm Cox said:
Its graphic design was meant to be very 'road sign' simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image...
After this first sighting, the icon appeared a few times on apps including Voice Memos from iOS and Tweetie for iPad before Facebook switched its grid design to the three bars in 2010, marking the start of the hamburger menu trend.
The introduction of the hamburger menu definitely solved the issue of how to free up space on small mobile screens, but also resulted in a new issue:
What’s out of sight, is out of mind.
The tech savvy audience have become accustomed to the three lines (meant to resemble a list) revealing the menu items on click. However there are lots of articles and studies claiming that the hamburger menu isn’t healthy for UX.
It’s a barrier to content discovery.
With our increasingly short attention span online, first impressions are important. Being able to see the navigation gives the user a chance to scan content and get a feel of what the site is about, but the hamburger menu gets in the way of this. With no navigation items on show, it requires effort from the user to find what they are looking for.
“The ‘five second rule’ is an important guideline for UX designers. The idea is that after landing on your site, a user will decide whether or not they’ve made the right choice within five seconds.”
It encourages bad information architecture.
When working with so little space it’s important to be selective about the information shown.
We work with clients in the planning phase of a job to determine what content is needed on the new site, wether any of the information on the current site is no longer needed or if it can be cut down.
The hamburger menu, allowing for an almost infinite list of menu items, encourages the behaviour of throwing everything in for the sake of it. The solution here should not be the hamburger menu, but instead reviewing your information architecture.
It requires knowledge of an icon which some people don’t understand.
Working in the field of web design and development it is easy to assume everyone shares the same knowledge and understanding of icons, but some audiences may not initially understand the meaning of the hamburger icon, effecting the usability of the site.
It slows the navigation process down.
The hamburger icon adds an extra click in the process of finding pages, it’s only a few seconds, but if the user wants to navigate through a lot of pages on the site it may become frustrating.
From a designers point of view the hamburger icon is great and here are a few reasons why:
As designers, we should listen to the evidence that comes out of UX research and keep up to date with UX patterns. If it is proven that using the hamburger menu can damage the usability and effectiveness of a site then we should design new ways of handling information and the menu structure.
From a design perspective the hamburger solves issues with space, makes the page design clean and uncluttered and provides an opportunity to add interesting animation and movement. From the UX perspective hamburger menus are a barrier to content discovery, promote bad information architecture and slow the navigation process down.
Maybe designers should take the UX advice and find a middle ground which offers a better alternative to using the hamburger icon as a solve all. For now it looks like the icon is staying, especially as people become more aware of its purpose, but maybe more sites will start to take on some of the alternative approaches.
If not, theres always the pizza menu!