Hamburger Menu-Icon or Mystery Meat Navigation?
We have all come across a hamburger menu at one point or another — no, i’m not referring to the kind you eat (sigh). Hamburger menus are those horizontal stacked lines (three-bar icons) typically in the upper corner of various mobile websites or apps, that once clicked reveal the navigation menu. UX designers’ relationship with the hamburger menu is a complex one to say the least. The argument persists on both sides and like most web design or UX trends, it is either beloved by digital designers or despised.
The origin of the hamburger icon comes from the 1981 Xerox Star, one of the earliest graphical user interfaces created by Norm Cox in an effort to be “road sign” simple.
It was not until Facebook adopted it in 2008 that it popularised as a trend, but if it had a Facebook relationship status today, it would be “it’s complicated”. The hamburger menu’s prevalence surfaced primarily due to sites adopting a mobile-first approach, however the controversial icon has come under scrutiny recently, as some feel that it is dated and ineffective.
Websites are continuing to use the hamburger menu because it is unobtrusive and works well with minimalist designs. Hamburger menus are simple and can keep “decision fatigue” to a minimum by eliminating secondary navigation items. Consolidating an abundance of information not only saves screen space, but is also aesthetically pleasing.
Pro-hamburger users are typically geared towards Millennials and tech-savvy users, however recognition is on the rise. The widespread use of “the hamburger” have users trained to comprehend what the menu signifies and gravitate towards it naturally. The growing popularity of the hamburger menu triggers users to either understand it immediately or targets curious users that want to interact with it.
Tip: Age matters. Businesses need to be cautious about adopting the hamburger menu if users are in their 40’s or older, as data suggests older users experience the hamburger menu differently. It has its benefits when utilised appropriately to the right target audience or paired with a strong call-to-action label to avoid alienating users.
The contested issue with the hamburger menu is that it could be overlooked (in its default state) and can mean different things to different people. What is out of sight, is in fact out of mind. Navigation is a very critical element in web design, guiding users to browse and explore a website. Having such a small icon tucked away in the corner can lower discoverability and frustrate users unfamiliar with the icon.
Problem right? Think of it this way: If you’re lost in a building, your sense of navigation is guided by exterior cues or by following the crowd. So, while most users eyes gravitate to information in the centre of the screen, the hamburger icon could go unnoticed, potentially leading to detrimental effects on engagement.
Tip: There are ways to utilise the hamburger menu in a way that increases clarity and visibility. The goal is to achieve effective usability, often defined as ease of use. Moreover, a usable interface is one that is learnable, as well as efficient. For example, simply adding in the word “menu” or adding a box around the hamburger icon can increase the use as a visual cue for clarification and can reduce cognitive load (it appears clickable).
Keep in mind that adding a “menu” text option might not work if for example, a restaurant attracts users seeking a food menu or if users landing on the site do not speak English.
Recently, Spotify ditched the hamburger menu after extensive user testing indicating navigation wasn’t very intuitive for users. In an effort to improve user engagement, the new navigation bar in the iOS app redesign puts its key sections in the bottom navigation bar and encourages users to explore more types of content.
Ultimately, the hamburger menu is not “one-size-fits all” and what works for one website, may not for another. Nevertheless, the preferred menu opinion that matters most are those of your users. If you do decide to use the hamburger menu, ensure you are using best practices most suitable to your content and audience.