Interface design often depends on the icon to communicate functionality to a user in one compact image. Some icons even become a part of our digital language. The magnifying glass, the house, the printer… these are all universal icons [1]. Recently, the hamburger icon has been debated for inclusion though research is steadily revealing its shortcomings.
The hamburger menu (also known as the list icon) is meant to communicate to the user that more information is held within the icon aka a menu lies here. Although the hamburger menu has seen a significant upswing in usage in recent years (sites such as Facebook, The New York Times, and YouTube all embraced the hamburger along with countless others), it was actually invented years earlier for the Xerox Star[2], an early workstation released in 1981[3]. The design, originally intended to fit within a mere 16×16 pixels, was meant to mimic the look of the menu that would appear when clicked, hence the stack of horizontal lines. In the years since its creation, the icon’s small size and pleasing graphic has been particularly appealing to mobile designers working with limited screen space as well as those creating responsive desktop sites. After all, the smaller the menu, the more space for content, the better the site. Right? Not so much.
Despite its age and continued popularity, however, the hamburger menu has proved to be far from universal [1]. Users simply aren’t recognizing the hamburger as a stand in for “Menu”. Icons are most functional when they resemble the action they are meant to represent[4]. It is difficult for users to “learn” an icon when the design appears arbitrary. In the hamburger’s case, it’s supposed universality is often used as it’s main justification. Users are expected to recognize it simply because it is common.
The use of the hamburger menu becomes especially dangerous when used as a site’s main form of navigation. Part of the problem is that very few users come to a site with an action sequence in mind. Instead, users tend to explore the site and take clues from the interface to guide them where to navigate[5]. By hiding the navigation options within an icon, the designer is taking away those clues. An A/B test by exisweb.net seems to back up this assertion. According to the study, the implementation of the hamburger menu had huge consequences for the site as a whole: “Weekly frequency was down. Daily frequency was down. Time spent in app was down.”[6] If users can’t discover your content, they simply won’t stay on your site. The hamburger also adds an extra step to the navigation process for those that do have a specific task in mind, making the entire pathway less efficient and more cumbersome for the user[7].
It is important to remember that an attractive design does not mean a usable interface and a good idea in theory is not always a good idea in practice. Icons are best when they look like the thing they mean and usability is best when the thing that is meant is simply stated. Although the hamburger menu may have a place in certain contexts[8], it is often best to just say “Menu”.
Footnotes
1. Icon Usability by Aurora Bedford (July 27, 2014)
2. Xerox Star – Wikipedia (accessed October 13, 2015)
3. Who Designed the Hamburger Icon by Kelsey Campbell-Dollaghan (March 31, 2014)
4. Icon Classification: Resemblance, Reference, and Arbitrary Icons by Jakob Nielsen (August 17, 2014)
5. The Hamburger Menu Doesn’t Work by James Arthur (n.d.)
6. Menu Eats Hamburger by James Foster (update May 25, 2014)
7. Why and How to Avoid Hamburger Menus by Louie Abreu (May 14, 2014)
8. Why It’s Totally Okay to Use a Hamburger Icon by Steven Hoober (May 4, 2015)