The Evolution of the “Hamburger Icon Pattern”

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.