Hamburger menu
In 2010, a new graphical interface element in the form of three short, parallel bars was first seen on websites and in applications. Since then, it has established itself as the "hamburger" icon. When the icon is clicked, the navigation opens and overlays the content. The icon then often changes to a "close" icon, which closes the entire area with navigation points and leads back to the content.
Influence of a hamburger menu
Visible menu items make it easier to interact with a user interface and help navigate quickly through an application. Qualitative studies have repeatedly demonstrated that in both desktop and mobile applications, open navigation is more popular than the hamburger menu. The hamburger menu slows down interactions significantly. This is equally true for desktop and mobile applications.
To measure the size of this effect in a quantitative study, Nielsen Norman Group partnered with WhatUsersDo (a company specializing in remote usability testing) to conduct a study with 179 participants. The group was given the task of finding specific information on seven different websites.
On both mobile devices and desktops, navigation was used significantly more often when all or some of the navigation items were visible. On desktops, the hidden (hamburger) menu was opened in only 27% of cases, while the open or combined navigation was used almost twice as often. On mobile devices, the hidden navigation was used in 57% of cases and the combined navigation in 86% of cases. The study also showed that navigation in general, whether hidden or partially visible, was used more often on mobile devices than on desktop. When navigation was hidden on both desktop and mobile, participants took longer to use it than when it was open or partially open.
These results show that hidden navigation is used significantly less often than open or combined navigation.
Source: https://www.nngroup.com/articles/hidden-navigation-methodology/
When does a hamburger menu make sense?
If we are not influenced by the objections described above and want to use the hamburger menu, the following cases could speak for this decision:
We want to hide secondary functions using the hamburger menu. If the main navigation elements and functions of our application are visible, we can hide secondary options that do not serve the primary goals using the hamburger menu.
Also, if we have the space available for secondary options and we don't want the page to provide too much interaction, the hamburger menu can be an effective tool. This can avoid sensory overload in the viewer.
When should the hamburger menu be avoided?
The hamburger menu should not be used when functions, options or settings that are hidden in it are important or central to the execution of the User Tasks. These options or menu items should always be available.
Before the decision is made to use a hamburger menu, it should first be defined which interaction options of the application are essential and what risks are involved in hiding menu items.
Before the decision is made to use a hamburger menu, it should first be defined which interaction options of the application are essential and which risks are involved in hiding menu items.
Another important aspect, if a menu item is hidden in the hamburger menu, is the number of clicks to be performed to reach the desired goal. Additional and above all unnecessary clicks distance the user from his goal and contribute significantly to poor user experience.