Posted January 13 by Roman Kalina
Jan 13 by Roman Kalina

Reduce the fat, get rid of hamburger menu

reduce-the-fat-get-rid-of-hamburger-menu-img reduce-the-fat-get-rid-of-hamburger-menu-img

Everybody is trying to lose some weight by exercising, but the first thing that they should do is to put the hamburgers away. The same applies for the mobile apps. You can put a lot of stuff into a hamburger, but it only hurts the user. Josh Constine from TechCrunch called the hamburger menu “the devil” and “poor design choice”.

The sole purpose of the hamburger menu was to hide the secondary items in order to make the app look cleaner. Space on a screen of a mobile phone is very limited and while the hamburger menu looks like a clever idea on first sight, it actually does more harm than good. According to NNGroup hamburger menu hurts the UX with its low discoverability, which results in lower engagement, confusion and slowed exploration.

“Hidden navigation significantly decreases user experience both on mobile and on desktop”

More and more apps are now getting rid of a hamburger menu and they have replaced it with alternatives. We do not claim that either of the alternatives are the best, because there is no “one size fits all” in designing the app. Here are the alternatives to the hamburger menu:

Tab bar (bottom) — If your does not have a huge number of sections, it’s easier for your users to be able to go through them just by clicking on the icons in a tab bar. It’s also easy for users to really understand that there is navigation at the bottom which is easy to operate. If you want to use the bottom navigation for your app you have to keep in mind, that you can only have 5 or fewer items on a bottom tab bar and usually one of the items should be the most prominent and ought to be highlighted.

Tab bar (bottom) with more option — They can’t be wrong at Facebook, right? Facebook app switched from a hamburger menu to a navigation bar with more option. You basically have four prominent app features in the bottom navigation and the fifth tab will expand secondary functions. The “more” option is a much better alternative than the hamburger menu because it hides the content, but not all of it. Users of Facebook most of the time only use the four most prominent features.

Tab bar (top) — Tab bars on the top are similar to the bottom navigation tabs. They are often used as a switch between different features, and they are also a good indicator of where the user actually is in the app. People use tabs intuitively because they are used to work with them in web browsers. If the app has bottom navigation, top navigation often serves as an addition to primary navigation.

Scrollable navigation — When your app/website has a lot of features that are equally important and option “more” is not a sufficient compromise, you can use scrollable navigation. However, the same as the navigations with “more” options, it only shows a couple of items in the navigation, and the user is able to see more after he scrolls through the navigation. Scrollable navigation is best for the apps/webs with a lot of content e.g. e-shops. In order to make your user scroll through the navigation, it is important to onboard the first time user.

Successful change — Spotify In 2016, Spotify decided to swap the hamburger menu for the tab bar. Before this change, users had to open the top left menu in order to see the services like radio and music. This several step clicking process was hiding most of the Spotify’s content, especially for the new users.

Spotify started to test the new tab bar on iOS and they find out that users with tap bar were clicking 30% more on the actual menu items. They also revealed that the new bar prompted users to explore more content. The increase in user interaction convinced the company to make the change public.

Since the mobile apps/websites do not have all the same functionalities, there is no single navigation template for every app/website. Users respond to apps differently. In order for you to create the best UX, it is to test your product. The best way to do it is to define your minimum viable product (MVP) and test it. But keep in mind that it is very important, how easily can you navigate your users through your app/website.

Roman Kalina
Roman Kalina is a product strategist and copywriter at PLATFORM.