Everybody is trying to lose some weight by exercising, but first thing that they should do is to put the hamburgers away. Same applies for the mobile apps. You can put a lot of stuff into hamburger, but it only hurts the user. Josh Constine from TechCrunch called the hamburger menu “the devil” and “poor design choice”.
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 hamburger menu looks like a clever idea on a 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 hamburger menu:
Tab bar (bottom) — If your does not have a huge number of sections, it’s easier for your users to be able go 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 a 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 less 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 the more option. You basically have four prominent app features in the bottom navigation and fifth tab will expand secondary functions. The “more” option is much better alternative than 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 a bottom navigation, top navigation often serve as an addition to primary navigation.
Scrollable navigation — When your app/website has a lot of features which are equally important and option “more” is not a sufficient compromise, you can use a scrollable navigation. However, same as the navigations with “more” options, it only shows couple of items in the navigation, and 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 to scroll through the navigation, it is important to onboard the first time user.
Successful change — Spotify
In 2016, Spotify decided to swap hamburger menu for 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’s 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 best UX, is to test your product. Best way to do it is 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.
