Why You Shouldn't Use a Hamburger Menu

The hamburger menu, the small icon with three horizontal lines often found in the upper left corner of an app, has long been a common solution for providing users access to a menu with various functions and options in an app. However, over time, many design experts have begun to question whether the hamburger menu is really the best solution, especially in native apps.

Disadvantage 1: Discoverability

One of the biggest criticisms of the hamburger menu is that it is difficult for users to discover. Since the icon is so small and usually placed in one of the corners of the screen, it can easily be missed by users. This can result in important information and functions in the menu never being used, as the user may not even know they exist.

A hamburger menu does not give the user any indication of what is in the menu. The user must first click on the icon and wait for the menu to open to see what is available. This can be frustrating for users, especially if they want to quickly find a certain function or information.

A study by Nielsen Norman Group showed that using a hamburger menu halved the 'discoverability' by hiding the main navigation of the page.

Disadvantage 2: Accessibility

Another major drawback of the hamburger menu is its accessibility on mobile devices. Since it is often placed in the upper left corner, it is difficult to reach if you are holding the phone with one hand. The image below shows different zones on a mobile screen and which are easiest to reach when holding a phone in one hand. As you can see, the upper corners are the worst places to have a main navigation.

Disadvantage 3: UX and Context

You often use a hamburger menu when you have a larger app and want to build a more advanced navigation structure. Unfortunately, the experience often becomes poor or limited when using a hamburger menu. On iOS, for example, a back button appears on all sub-views that you navigate to under the selected view. Thus, the hamburger menu is not accessible from all sub-views, and you must go back in the hierarchy to access the main navigation. This makes it unnecessarily complicated to switch between major functions in an app.

With the alternative of tabs, you can instead directly change context without having to go back to the root view. This makes it easier to have multiple major functionalities in an app that the user can quickly switch between.

Better Solution: Use Tabs

A tab bar gives users a clear overview of the different options available in the app. Each tab in the tab bar represents a specific view or function, and users can easily switch between them by clicking on the desired tab. This makes it much easier for users to find and navigate to the information or function they are looking for.

A tab bar also has the advantage of always being visible on the screen, which means users always know they have access to the different options. This can increase users' confidence in the app, as they know they can easily find the information or function they need at any time.

If you need more than five tabs in an app, make the last one a 'More' tab, which opens a tab like the others but contains further links to other functionalities. Here, you lose functionality for context-switches, but you should then place the four biggest functions in the app in the tab bar and locate other major functions in the 'More' tab. If you have more than four main functions, perhaps you should split your app into smaller apps with more specific functionality.

You also reach the main navigation more easily because the tab bar is at the bottom of the screen.

Finally, a tab bar is also a more user-friendly solution for navigating between different views in an app. Since each tab represents a specific view, users can easily see what each tab entails and choose the one that best suits them."

Download Pixelmost Today!

Get started designing mockups for your next project right away!