The 3 stacked line icon that you normally see on the top left or right corner of your website or app is known as the hamburger menu (often referred to as a hamburger option or sandwich).
Before getting into why it was used prominently, why its use has been reduced now, and what are the alternatives for the Hamburger menu, let’s take a look at when it came into existence.
Developed in 1990, by Norm Cox for the Xerox Star, featuring the world’s first graphical user interface. The icon was designed to meet a specific need within the interface of the Xerox Star; constrained by the display limit at that time, the hamburger icon worked well at the time to link to other information and enhance navigation. In this interview, Norm Cox talks about why he thought it would work and what was his idea behind the icon design.
From there on, many websites and apps started deploying the hamburger icon in their UI design.
The hamburger menu came into existence in the mid-90s, from then it served the purpose of UX designers and web designers in many ways which include:
Let me demonstrate this with some examples:
Take a glance at the UI of Uber cabs. The main aim of the app is to provide the user information about the status of nearby cabs and transporting from point A to B. Rest of the things like user profile and the status of rides are secondary features. Here hamburger menu hides the secondary features to have a clear display and to allow the user to focus on the primary feature i.e. to book a cab.
Now take a look at the UI of the Amazon app. Now, Amazon literally sells everything. You can see it uses the hamburger icons as well. It is basically making a trade-off because it cannot practically list every possible type of product. Amazon makes up for it by providing a long search bar, which is omnipresent throughout the UI and can be used to search for the item you are looking for.
But, all is not well when using the hamburger menu. There are disadvantages to using the hamburger icon in websites and apps. These problems include:-
All the problems mentioned above led to controversial opinions among UX designers when it came to hamburger menus.
Research shows that using the hamburger menu in your websites and apps actually costs you user engagement and leads to other problems on your websites and apps. This research by Nielsen Norman Group, a leader in UX research, and A/B Testing by Zeebox(now Beamly) support this case.
The following graph depicts navigation usage as a function of device type (desktop, mobile) and navigation type (visible, hidden, combo). Let’s take a look at each of the navigation.
Hidden navigation– All the major links and content are placed under the hamburger icon and hence require explicit user action to be displayed.
Visible navigation– All the main navigation links are placed on the screen and hence can be easily visualized.
Combo navigation– Some of the navigation links are visible on the screen whereas others are hidden under the hamburger icon.
The graph clearly indicates that hidden navigation was preferred least. On the desktop, people used a hidden menu in only 27% of the cases, while for visible and combo navigation this was almost double and users had more ease in usage. On mobile platforms, hidden navigation was used by 57% of the users whereas the percentage significantly increases to 86% for combo navigation.
To get complete information about the UX research conducted by Nielsen Norman Group clicks here.
Zeebox(now relaunched as Beamly), a social network for TV conducted A/B testing on their UI designs one having side navigation and the other with the top navigation. The results were shocking to the company.
The company’s analysis showed that when they shifted their UI to sidebar navigation featuring a hamburger menu, the user engagement became half of what it was, as evidenced by the fact that the weekly and the average frequency decreased. The average weekly engagement was significantly greater for tabbed navigation.
For more evidence related to the effects of the hamburger menu on websites and apps click here.
There are other options to use instead of hamburger menus. Some of these are:
Sometimes the situation arises when prioritizing the contents or menu options become difficult. In that case, you have to include all the sections and provide a UI toggle to scroll between them.
Medium is an example of this.
Medium, in its UI for iOS users, has scrollbar navigation which allows you to switch to any option by using a single swipe. A great navigation pattern implemented have got them rid of the Hamburger menu
Google App is another example.
Google App uses scrollable navigation in its app where you can scroll to look for the multiple categories mentioned.
Tabs provide a great aspect of vision and clarity to the users interacting with the website or app. They organize the content in categories and are very much understandable to the users.
Twitter follows tabbed navigation
Above is the navigation pattern used in the Twitter app. Here the tabbed navigation is used in which the Me tab is currently highlighted.
YouTube is an example of this.
YouTube launched its new UI in 2015, which proved to be an excellent example of getting the hamburger menu removed by using a top navigation pattern in its UI design. It helped the users to view the features of the app immediately.
It is simply an enhancement of tabbed navigation. It is useful when you have more than 5 categories or sections to be displayed. You can simply add your four tabs based on priority and then the more section will take care of all your secondary features. However, it hides your information under the More tab but still is effective over Hamburger Menu.
Again, take a look at how Google implements this.
Google uses the More option along with other tabs that represent other categories.
It is a brand new navigation pattern that is increasingly becoming popular on websites. Here the contents are vertically oriented.
Check out VR Session’s website for an example of vertical lettering.
The contents are vertically oriented on the website and use minimum space, while efficiently engaging with the user.
The idea of priority+ navigation is new and it supports the navigation among items based on their importance to the user. It utilizes the display efficiently and hides the items depending on the screen size of the browser window or device.
Amazon Web Services is an example of this.
AWS has a priority+ navigation pattern on its website where the menus gradually disappear based on priority according to display size. This makes the site to be responsive and adaptable to any resolution.
Have a look at BBC’s site. The menu shrinks and expands based on the space available on the screen.
The UI of BBC adjusts according to the screen width and the menus progressively collapse by the priority.
By just measuring the amount of pressure on the icon, the system generates a custom menu with varying options, depending on the app in context, suggesting alternate actions without actually opening the app.
To get more insight on how developers can use Apple’s 3D Touch feature, see this link here.
Drop-down menus are used when the accessibility and visibility of other sections are not essential. It is simply a better way to abstract the information rather than using the hamburger icon.
Samsung is a good example of this.
When clicking on the Consumer menu, it displays a drop-down menu that displays all types of customer categories based on products they have. It helps clean up a busy layout and makes it more user-friendly.
Here is another example from Logitech’s site.
Logitech’s website uses different categories under which sub-categories can be accessed via drop-down menus. In this case, it’s more efficient than a hamburger icon.
Segmented controls are commonly seen in iOS applications. It is a linear set of 2 or more segments that work as mutually exclusive sections and are a great replacement for the hamburger menu.
The segmented control feature in iBooks allows the user to select titles, authors, and categories. It is preferable if you have a limited number of sections to be displayed.
Good UI is a lot about habits, as much it is about logic. Over time, users have taken to the hamburger menu and indeed, as Norm Cox has said, it worked for the Xerox Star UI then which is why it was used.
So what it comes down to are context and suitability. If a hamburger menu suits the interface’s context, as it does in Amazon’s app, then it’s a good option to use. But the hamburger menu cannot be an excuse for a lazy information architecture or navigation. If there’s a better alternative that simplifies workflow for the user, then that certainly calls for ditching the hamburger menu.
Even out of the alternatives given here, there isn’t a solution that fits in all instances.
Other great navigation patterns solve the problem of the hamburger menu. Which one should be added to the list? Let us know in the comments section.
Liked this post? Explore alternatives to static progress indicators for enhancing your UI here and follow the zipBoard publication for more great posts on design and UX.
©️ Copyright 2021 zipBoard Tech. All rights reserved.