Atomic Smash homepage splash

The Hamburger Menu Debate: Design vs UX

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.

The History

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 Debate

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.

The Negatives

  • 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.”

    Source: JustUXDesign

  • 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.

Read more about this herehere and here.

The Positives

From a designers point of view the hamburger icon is great and here are a few reasons why:

  • It results in a minimal, clean and uncluttered design.
  • It’s following a popular design trend. As the trend continues people are becoming increasingly aware of its functionality.
  • It allows for some great animation and movement to be incorporated into the design.

 

via GIPHY

Is there a more effective use of the hamburger?

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.

Medium produced a great article about the alternatives to the hamburger menu. Here’s a round up of some of the best options:

  • Tabs
    A tabbed design can work well for a site with up to 5 navigation items. The tabs could use type, icons or a combination of both. If the icons are not widely understood, pairing them with type is the best solution. You should also design both an inactive and active state for the tabs.

Source: Medium

  • Tabs with a ‘more’ option
    If you have more than 5 navigation items, the final item in the tabbed list could be a more option. This is where you could use the hamburger icon to signify the hidden list. With this solution you should use your information architecture plan to highlight the most important content to populate the visible tabs, with less important nav items hidden under the ‘more’ tab.

Source: Medium

  • Scrollable navigation
    If the results from you information architecture research show that you have lots of navigation items with fairly equal importance then you might not want to split them into ‘visible’ and ‘more’. Scrollable navigation is a good solution in this case.However, this still leaves some of the items off the edge of the screen and not visible. To counter this, a good visual nudge should be used to let the user know they need to scroll to discover more, like a scroll icon or a gradient  fade on the text to show it continues off screen.
  • Dropdown menus
    Dropdown menus can work well when you have one important landing page and a number of sub pages. The dropdown bar itself can act as a page title, as long as there is a clear indication that it also acts as a dropdown list.

Source: Medium

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!

Related Content

Profile picture of Jenny Johnson

Jenny Johnson

Jenny has a keen eye for detail and is always up-to-date with digital design trends. She transforms your ideas into beautifully crafted sites, whilst always keeping the user journey in mind.

Go back to top

Keep up to date with Atomic news