To hamburger or not to hamburger
Disclaimer: This article is an academic essay written as part of an assignment within the «Design and Creativity» module of Hyper Island’s Digital Experience Design master program. My academic and English writing skills are a bit rusty. Therefore I am open to any constructive criticism and feedback from the academic community, the web & UX industry, my fellow students or any other party or individual interested in the topic of course. At the time of this publication, the related essay has neither been submitted to nor approved by the corresponding authorities at Hyper Island and/or Teesside University.
Introduction
By working in the digital industry for more than 10 years I have been exposed to trends, «new» technologies and various user experience issues.
A debate I have often come across in recent years concerns the way of displaying a website’s navigation and in particular the usage of the so-called hamburger icon.
Along the increased usage of mobile applications and websites, the hamburger has gained larger exposure and it has also been adopted for desktop usage.
In this essay I am trying to find out more about the hamburger icon, its background, usage, pros and cons, its legitimacy and therefore try to answer the ultimate question:
To hamburger or not to hamburger.
Summary
The hamburger is a navigation element represented as an icon consisting of three horizontal black bars piled upon one another, resembling a physical hamburger. It is often used to group and stack the main navigation items of a website below one icon.
First introduced in the early 80ies, the hamburger gained popularity with the rise of the mobile web and responsive design. In recent years it has also been transferred to desktop websites. The hamburger has led to controversy.
On the pro side it is argued that the hamburger icon helps reducing complexity, offering a consistent way to display navigation. With the visual reduction of the chrome, more space for design and content becomes available. It has also been claimed that due to the wide spread of the icon, users have become familiar with it.
The counterparty often refers to usability issues and therefore lower engagement rates with hamburgers compared to other forms of navigation. Critics see fundamental design rules violated. A major aspect is that information gets hidden and therefore forces users to think, discover and later memorize information.
There does not seem an academically or scientifically right or wrong. Generally said, it depends, whether using the hamburger is a good or bad thing to do, as there are many more aspects to take into account.
About the hamburger
The hamburger is an icon consisting of three horizontal black bars piled upon one another, resembling a physical hamburger consisting of two buns and a patty.
Nielsen (2016) states that, when designed correctly, this icon is supposed to be a resemblance icon that looks like a navigation menu. The hamburger menu UI pattern reduces all navigational elements into a single, simplified icon (Cao, Cousins, Zieba, 2015).
History
The hamburger was first introduced by Norman Cox somewhere between 1981 and 1982 according to Campbell-Dollaghan (2014). Cox used to be a software designer at Xerox and was responsible for the world’s first graphical user interface that was part of the Xerox Star personal workstation (A brief history of the hamburger icon — Placeit Blog, 2014). The hamburger was originally referred to as «menu button» and consisted of three and sometimes four horizontal black bars (All-the-widgets, no date).
Source: https://vimeo.com/61556918 (go to 21:13)
As history went on, the icon lay mostly dormant, randomly appearing in user interfaces but celebrated resurrection with the invention and later rise of the smartphone (Rand, 2015). As he explains, the mobile revolution triggered a new mindset in web design. Tab navigation in the first iOS native apps became used. Rand (2015) adds that moving more content to the mobile web created the need for a new way to economically place navigation.
Ethan Marcotte’s «Responsive Web Design» turned the industry on its head in 2011, Rand (2015) further claims. It meant that rather than producing content for a single mobile and single desktop website, it could now be set up once, aligned in a single column and adapt its visual appearance to any device or screen size. At the same time large desktop navigations had to be shrunken down to a size and position where they would not cover the majority of a small screen, he continues. The hamburger served as solution.
Based on Rand (2015) it was around 2012 when the hamburger icon made its way from mobile to desktop devices. The usage of the hamburger enabled designers to gain additional screen space and therefore have a larger canvas to unfold their creativity.
Nowadays the hamburger is present on mobile apps and websites and it is also to be found on desktop websites. «One of the most enduring design trends of the last few years has been minimalism due to its focus on clean, simple and easy-to-navigate aesthetics», says Schenker (2015). He concludes that the popularity of the hamburger menu is no surprise as it promotes minimalism in terms of design and function.
Navigation and usability
«You know this from your own experience as a Web user. If you go to a site and can’t find what you’re looking for or figure out how the site is organized, you’re not likely to stay long — or come back» (Krug, 2013, p.116). As Krug (2013) states, users are usually on a website in order to find something either through searching or through browsing. In the case of browsing, one makes its way by searching for signs that guide.
Unless entering a page through a deep-link this often starts on the homepage. If browsing does not result in finding anything, one might leave.
The navigation serves a main purpose: It is there to help users to find what they are looking for and to tell them where they are (Krug, 2013).
But the navigation serves other purposes as well as Krug (2013) adds:
- It provides information about what may be found in a specific location of the site.
- If done correctly it tells the user how to use the site.
- It provides confidence in the people that built and run it.
There are conventions to a navigation as Krug (2013) goes on. Standardising the appearance of the navigation and putting it in a standard place allows users to locate the navigation quickly and distinguish it from everything else on the site.
In case of the hamburger icon as a navigation pattern, there has been controversy not only in the industry and also mainstream media such as the BBC (2015) have reported on it.
The following two chapters reveal pros and cons of the hamburger icon.
Positions in favor of the hamburger
BBC (2015) quotes application designer Alex Tyagulsky. According to Tyagulsky the biggest advantage of the hamburger icon is, that it can hold information inside it, and at the same time provide a consistent way to find this extra information.
Hoober (2015) states that it was «totally ok to use a hamburger icon». He argues that the icon had been used since long before touchscreen smartphones gained popularity. As an example he refers to a TV remote control that had been using the three lined icon to represent the menu.
In a similar manner Hinderling and Volkart (2016) consider the use of the hamburger on mobile websites as standard and common sense. Volkart (2016) adds that hamburgers have become a more and more familiar pattern on desktops. According to Hinderling (2016) the hamburger also helps to reduce complexity.
Bawcombe (2014) sees the hamburger debate mainly as a discussion about goals. He agrees with hamburger opponents that hiding the menu is generally a bad thing but points out at the same time: «…links to either related articles or the most popular articles are more effective at increasing depth than anything we do with menus» (Bawcombe, 2014).
Brunborg (2016) generally argues that as the industry matures, there would always be the rise and sometimes fall of a contentious issue that polarize the community.
He takes on James Foster’s A/B tests that gained media attention in the field. The tests claimed that switching the icon for the word «Menu» made 20% more people click.
Brunborg (2016) refers to Foster’s tests by criticising that these tests showed particular results from a particular period of time on a particular site, using a particular set of hamburger icons.
A/B testing excluded the rest of the alphabet and there was no telling of what would or could have happened if the button had been in a different color, a different size, or in a different context altogether, Brunborg (2016) explains his criticism.
Positions against the hamburger
Cardello and Whitenton (2014) raise the question whether it was safe to hide the global navigation in any way and conclude that most sites would be better off showing top-level categories to users right away, as they consider it one of the most effective ways of helping users quickly understand what a site is about.
Although Schade (2015) acknowledges advantages of the hamburger icon on smaller screens in order to save space and make the menu constantly available, she argues that it may be harmful to a website’s business goals. «When navigation is visible on a page, it is consistently available, giving users not only quick access to the navigation, but also a way to get an at-a-glance overview of what the site has to offer. Hiding the navigation results in a higher interaction cost. If a user cannot locate or expose the navigation, interaction on the site becomes limited» (Schade, 2015).
Budiu (2014) points out that the hamburger menu was just one incarnation of the trend to downplay the chrome (UI elements such as buttons, menus, and other widgets) on the desktop website in favor of content and design.
Based on her research she points out three disadvantages of hiding the chrome. The disadvantages pointed out by Schade (2015) may also be referred to other web design and UX principles:
- People must think, uncover or discover the chrome, which violates Krug’s (2014) core principle and understanding of good web design: «Don’t make me think» (Krug, 2014, p.43).
- Once discovered, users need to recall how to access it later or in a new session. A violation of one of the ten heuristics for good user interface design by Nielsen (1995): «recognition rather than recall».
- There is an interaction cost as users need to click the hamburger icon every time they need to access the navigation rather than being able to just click a navigation item.
Another aspect may be the one of users being able or unable to identify the hamburger icon as a signifier. As Don Norman states: «Signifier signal things in particular what options are possible and how they should be done. Signifiers must be perceivable, else they fail to function» (Norman, 2013, p.19). In an example he showcases a tablet wireframe, describing arrows and icons as signifiers, that tell users where to swipe in order to retrieve the desired information.
The hamburger may be perceived as a signifier, but if people are not familiar with it or fail to recognize it, they might neglect it and thus, the hamburger would fail to fulfill its function overall.
If this was the case and adding on to this, Dieter Ram’s «10 principles of good design» may be taken into consideration. Two of these ten principles state that good design makes a product «understandable» and «useful».
If a user cannot navigate, it can be debated — unless «users navigating» is not an intended goal of the website — whether these two principles of good design are being violated (Good design | about Vitsœ | Vitsœ, no date).
In a series of A/B tests Foster (2014) took on the hamburger. His findings gained attention in the field as he concluded that users were less likely to click on a simple hamburger icon compared to a hamburger icon visually framed in a rectangle or just the word «Menu» instead of the hamburger (Foster, 2014). Sherwin (2014) adds that clear labels would help users make decisions faster and labels gave good information scent about what to come next.
Fichter and Wisniewski (2016) add another variable to the equation as they consider the hamburger menu a trap for developers to plop the desktop web site menu on the mobile, leading to long menus. They refer to Amazon, and most of the top iOS App Store Apps that have recently dropped the hamburger in favour of a tabbed menus.
Conclusion
Based on secondary research and primary research through interviewing industry representatives, the question of whether to use a hamburger icon depends on various variables.
Due to a lack of academic and scientific research regarding this particular topic, positions in favor or against the hamburger seem opinionated. There are individual studies that draw conclusions but fail to deliver scientifically backed up and/or academic proof.
There remains room for a further exploration of the topic. Especially primary research is yet to be carried out. Established web, usability, design principles and guidelines could be taken into consideration in order to establish an appropriate research framework. A corresponding research set up would have to clearly define a research scope, methodologies and scenarios as the hamburger icon should be looked at in a broader context in order to answer the «yes» or «no» question.
Within the scope of this academic essay and its underlying research no absolute «yes» or «no» answer may be deduced at this point.
Nevertheless and in order to refer to original question «to hamburger or not to hamburger?» the most appropriate answer might be: «It depends».
Update 28.06.2016 — Study by NNGroup
Referring to my conclusion drawn in the original article and the notion that further studies have to be carried out it is worth pointing out this article published by the Nielsen Norman Group published on 26.06.2016: “Hamburger Menus and Hidden Navigation Hurt UX Metrix. Based on the studies presented, discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases. They recommend using a visible navigation for desktop and avoiding hidden navigation such as Hamburgers. NN Group restrains from defining a “hard-and-fast” rule noting that a Hamburger navigation in combination with i.e. visible top navigation links may be used a site consists of more than four navigation elements.
References
A brief history of the hamburger icon — Placeit Blog (2014) Available at: https://blog.placeit.net/history-of-the-hamburger-icon/ (Accessed: 19 February 2016)
All-the-widgets (no date) Available at: https://vimeo.com/61556918 (Accessed: 19 February 2016).
Bawcombe, L. (2014) The hamburger menu-icon debate. Available at: http://www.theatlantic.com/product/archive/2014/08/the-hamburger-menu-debate/379145/ (Accessed: 19 February 2016).
BBC (2015) Hamburger icon: How these three lines mystify most people. Available at: http://www.bbc.co.uk/news/magazine-31602745 (Accessed: 19 February 2016).
Brunborg, E. (2016) Is the Internet killing creativity? — smashing magazine. Available at: https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity/ (Accessed: 19 February 2016).
Campbell-Dollaghan, K. (2014) Who designed the hamburger icon? Available at: http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 (Accessed: 19 February 2016).
Cao, J., Cousins, C. and Zieba K. (2015) Web Design Book of Trends 2015–2016. Available at: https://studio.uxpin.com/ebooks/web-ui-design-trends-2015-2016/
Cardello, J. and Whitenton, K. (2014) Killing off the global navigation: One trend to avoid | Nielsen Norman Group. Available at: https://www.nngroup.com/articles/killing-global-navigation-one-trend-avoid/ (Accessed: 19 February 2016).
Don’t be afraid of the hamburger: A/B test (2015) Available at: http://exisweb.net/hamburger-is-ok (Accessed: 19 February 2016).
Fichter, D, & Wisniewski, J 2016, ‘Emotional Design, Storytelling, ‘Slippiness,’ and Understandable Icons’, Online Searcher, 40, 1, pp. 74–76, Education Research Complete, EBSCOhost, viewed 21 February 2016.
Good design | about Vitsœ | Vitsœ (no date) Available at: https://www.vitsoe.com/gb/about/good-design (Accessed: 19 February 2016).
Hinderling, M. & Volkart, M., 2016. «Survey about the hamburger icon» online survey.
Hoober, S. (2015) Why It’s totally okay to use a hamburger icon: UXmatters. Available at: http://www.uxmatters.com/mt/archives/2015/05/why-its-totally-okay-to-use-a-hamburger-icon.php#sthash.GBFpR2J9.dpuf (Accessed: 19 February 2016).
Krug, S. (2013) Don’t make me think, revisited: A common sense approach to web usability. 3rd edn. United States: Pearson Education (US).
Nielsen, J. (1995) 10 Heuristics for user interface design: Article by Jakob Nielsen. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/ (Accessed: 19 February 2016).
Nielsen, J. (2015) Banish the hamburger menu, adopt pizza menus. Available at: https://www.nngroup.com/articles/hamburger-menu-vs-pizza/ (Accessed: 19 February 2016).
Norman, D.A. (2013) The design of everyday things. Cambridge, MA: The MIT Press.
Rand, J. (2015) The Genius — and potential Dangers — of the hamburger icon (Flyout menu). Available at: https://vtldesign.com/web-strategy/website-design-development/hamburger-icon-flyout-menu-website-navigation/ (Accessed: 19 February 2016).
Schade, A. (2015) Supporting mobile navigation in spite of a hamburger menu. Available at: https://www.nngroup.com/articles/support-mobile-navigation/ (Accessed: 19 February 2016).
Schenker, M. (2015) Do hamburger menus work on desktop sites? Available at: http://www.webdesignerdepot.com/2015/08/do-hamburger-menus-work-on-desktop-sites/ (Accessed: 19 February 2016).
Sherwin, K. (2014) The magnifying-glass icon in search design: Pros and cons. Available at: https://www.nngroup.com/articles/magnifying-glass-icon/ (Accessed: 19 February 2016).
