The Evolution of the “Hamburger Icon Pattern”

Tweet

In my last article Obvious always wins, I discussed in depth how arbitrary and relative the concept of “obvious” is and then I left you with an insight. That what big companies adopt for their services as good for (all) users isn’t always true.

We’ve seen that this is particularly true for a recent commonly used pattern for the navigation menu, the “hamburger icon”. This simple three-bar icon has become a convention to indicate a menu (in some cases lists) that many companies such as Disney, Starbucks, Facebook, and Google have employed in the mobile version of their websites or in their mobile applications.

There have been many discussions in UX circles that have raised the the unintuitive nature of the hamburger icon. Some alternatives have already been adopted and this icon will probably be replaced by a new and more intuitive one soon.

In this article we’ll discuss the evolution of this pattern, how the icon has been implemented, which companies have decided to use it in their projects, and why now it seems everything has changing.

The very beginning of a widespread trend

At the beginning of this trend, almost three years ago, there were some developers who studied this pattern and found that the hamburger icon was necessary in order to maintain a high conversion rate and user experience.

In their opinion, the icon didn’t distract users from achieving their task (in this case, filling a form), while giving them the freedom to navigate to other pages. In fact, they noticed that links that were too prominent caught the users attention, while when hidden behind the use of the hamburger icon, users only used the links when they needed.

Afterwards, in her interesting article Don’t Make These Mobile Menu Mistakes, Linda Bustos explored the potential of this new pattern. She didn’t refute the prior use of the hamburger icon as a menu but she insisted on a truth that should be always considered, what matters is how you apply it to your design.

In support of her thesis, she compared several design choices made in some mobile apps and drew up a list of what to do and what not to do while implementing this pattern.

Dos

  • Tell the visitor where to start, providing visual clues to help users maintain control of the navigation.
  • Group your category icon with other navigation elements and follow conventions when determining the order of your icons. For example, put the hamburger icon at the top-left corner of your page and the search box at the top-right one).
  • Label your icons to clarify what they do.

Donts

  • Confuse the menu icon (or other icons) with your logo: it could not be seen as an obviously clickable element
  • Give it too much room to breathe (i.e. Don’t leave too much space between your menu icon and the other elements of your page).

Meanwhile, big companies such as Disney, Starbucks, Facebook, and Google have started employing it in their websites or in mobile applications.

A few months ago in one of his articles, Morten Rand-Hendriksen didn’t use pleasant words for this icon. He identifies the hamburger icon as a symbol known as the “triple bar” used in logic and math to mean absolute equivalence or identical. According to him, it has become a staple of no-UI design and its effectiveness is higher if used as list icon rather as an indicator of a menu.

In my humble opinion, he gets the point, the hamburger icon doesn’t look like a menu icon unless users already know that it’s supposed to show the items of a menu. People who develop mobile apps know from experience that the hamburger icon indicates a menu and they wrongly assume it’s intuitive. The key point is that it would all depend on the user base and how exposed they are for its use as a menu button.

Morten hits the mark when he says that this icon is an anti-pattern and cannot be associated to a menu, it only looks like a triple bar, because that’s what it is.

As with Linda Buston’s suggestions, I propose Morten Rand-Hendriksen’s tips aimed to curb the desire to use the hamburger icon as an icon for a menu:

  • Try using the word “Menu” instead.
  • Consider using a down arrow or another active icon (i.e. an icon that induces action such as plus, minus, etc.).
  • Reconsider the menu position and function.
  • Use an off-canvas menu and use a tab with an arrow to indicate active interaction.

Although indicated as a convention, the hamburger icon does not work in every case.

New studies

One of the last studies that have been made is cited by Luke Wroblewski in a tweet of his:

I then decided to test the hamburger icon against the word “MENU” http://exisweb.net/mobile-menu-abtest

The conclusions from this research was the following:
1. People over 35 years old don’t seem to understand the hamburger icon.
2. Results are influenced by demographic values.
3. The research recommends adding the word ‘menu’ to the hamburger icon.

Another important lesson that we can learn from this story is that there aren’t solutions that work for every project as confirmed by this tweet from Jeffrey Zeldman:

Design considerations beat design patterns. Test and decide, don’t just copy things like the hamburger icon. @lukew #aeaatl #mobile #RWD

Conclusions

In conclusion, testing is the key. User testing and A/B or multivariate testing can really tell you whether your design is working or not for your specific case.

As I’ve said perviously, often the wide adoption of a given convention is driven by a chain of copy and paste and not by a well-pondered reason, so it may not be the solution you need. Focus on your needs and don’t imitate others blindly.

Free Chapter! HTML5 & CSS3 for the Real World

Get a free chapter of SitePoint's new book, the second edition of our popular HTML5 & CSS3 for the Real World and receive updates on our latest offers.

  • M S

    Why is it called “off-canvas menu”?
    Since when are hidden elements considered to be off some canvas?
    What “canvas”?

    Also; where did the (anti)-pattern
    “Always hide the navigation, even when there is plenty of room for it. And force the user to unhide it, and unhide, it and unhide it, on every F page.”, come from?

  • Aaron Moreno

    I’m on the fence with the burger. Using it for mobile makes sense IMO. I wonder if there will be a burger replacement soon in place of the existing. Something that’s memorable and makes sense for a wider demographic.

  • James Edwards

    “the hamburger icon doesn’t look like a menu icon unless users already know that it’s supposed to show the items of a menu”

    Isn’t that true for a great many web design components? Loads of common icons don’t really look like the thing they’re supposed to be, but once we all get used to them, they serve their purpose just fine. You only have to click a hotdog once and have it open a menu, to realise that it will do the same thing on other sites that use it. It only becomes problematic if sites use it for different things, but that isn’t happening.

    I don’t think this icon will be replaced by something better, I think it will become ever more entrenched and commonly seen. Especially since Google Chrome uses it in their toolbar, I don’t think it will very long before other browsers, and other applications, start to do the same.

  • Benoit Adam

    The key is the standard.
    It represent a list, now we know that. But it doesn’t represent a menu. But a menu is a list. Once you’ve done the match, you’re in.
    If you consider young users that have never met any floppy disk, and recognize without any doubt the “save” icon, you know that it’s the standard that count.

    Imagine a great company (Apple, MS or Google for example) that starts to use, let’s say the shape of a car, to represent the main menu (because that’s what you use to go anywhere), in 5 years, everybody will recognize it as the menu icon!

    • Jared Cubilla

      Nope, not everyone. As stated in the article, the hamburger icon is not recognized by those 35 years or older. The car will obviously be the standard for teens and users who have been born into the car icon, but older people will still rely on other symbols.

  • Daniela

    re: “Use an off-canvas menu and use a tab with an arrow to indicate active interaction”
    Trying to visualize what this looks like, can anyone point to some sites that use this pattern? Also, are there any frameworks or libraries that have a built-in widget to do this? (something like bootstrap nav automatically converts to hamburger icon)

  • omnichad

    It’s not any different than the floppy disk icon or the red X in the top corner of my screen. They really have no inherent meaning. The minimize/maximize buttons do to some extent, but only if you’re already familiar with the concepts.

    I can’t think of very many truly intuitive design elements at all. Even a button is counterintuitive, considering they are mostly represented as flat and 2D (lately) and no tactile response.

  • Fiftyseven

    There is a hamburger icon in the WordPress editing menu. The “Insert Read More” looks like a hamburger. A hamburger with pickles.

  • Rob

    Intuitive or not I can’t get Sitepoint’s hamburger icon to work for me on this post on my iPad mini. Works fine from the home page.