Tab Bar VS Hamburger menu

The Hamburger menu era ended in 2014, when Apple literally trashed the concept during its annual WorldWide Developers Conference (WWDC) in San Francisco, urging developers to use the Tab Bar in their projects. In May of that year, Tech Crunch published an article proposing to “Kill The Hamburger Button!“, calling the three-bar icon “the devil,” which lowers engagement and hides options from the user. In 2015, Google also started introducing “Bottom navigation”, an analogue of Apple’s Tab Bar, on its platforms.

We’ve already written about this design element in the article “Hamburger Menu: to use it or not to use it?” Of course, this type of menu is a great way to save precious space on mobile screens, but it is also less intuitive for the user.

Figure 1: Credit Instagram @alexmuench via @UITrends

Here is a list of the main disadvantages:

• Icon isn’t clear ( some users still have trouble recognizing the icon with three bars);
• Less intuitive;
• Takes a lot of core functionality out of the user’s view;
• Less visible;
• Usability issues.

The Nielsen Norman Group published a study showing that the hidden navigation of the Hamburger menu is less noticeable than the visible or partially visible navigation of a website. This also leads to an increase in the time it takes a user to navigate and complete a task on the platform.

But now let’s look at some of the benefits:

• Allows you to simplify the UI;
• Provides a clearer layout of the interface;
• Creates more space on the screen;
• Makes for a simple and clean design.

Even though in 2021 many large companies removed the hamburger icon from their design and opted for a more intuitive solution like the Tab Bar, in some cases the three-bar icon is still the best solution for different designs. It’s perfect for Apps designed to solve basic tasks, like getting a taxi ride or ordering food, because it frees up space for other important layout elements.

Figure 2: Screenshot dell’app Uber, Ciao Spesa, it Taxi

Unlike the Hamburger menu, the Tab Bar has many advantages that greatly improve the User Experience:

• there is no need to touch an icon to know where the user is in the app, it is always visible
• users see all top-level navigation options
• the Tab bar is “thumb-friendly” and easier to reach with one hand

The main disadvantage of this type of menu is the limited number of navigation options, since only three to seven icons can be placed in the bar to make sure they’re still visible to users.

Another disadvantage of this type of solution is that the bottom bar takes up part of the screen. In some cases this can become critical to the usability of the app.

This type of menu requires UX designers and app developers to be more selective about the choice of icons occupying the bottom bar. Available screen space of the mobile device is very limited and there is no way to hide the infinite menu with three bars as there is in the case of Hamburger.

This is where the question of content over form finally arises. Don’t forget that the main task of navigation in an app is to help the user answer these three questions:

• Where am I?
• Where can I go?
• What will I find if I go here?

To address these questions, the best solution for mobile apps is definitely the Tab Bar, which prevents the user from getting lost in a navigational maze. Within the concept of Human-centered Design, the intuitive use of navigation plays a crucial role in ensuring a better User Experience and, in most cases, the Tab Bar does it best due to its unobtrusive yet constant presence on the screen. This allows the user to focus on achieving their goals and not get distracted by the tool (or searching for the right one).

“The more apps behave as we expect them to, the more intuitive they are to us. The more intuitive apps are for us, the easier it is for us to focus on our real goals.”
Mike Stern, Platform Experience and Design Evangelism Manager @Apple.

In his talk during WWDC 2014, Mike Stern used the pen as the ultimate example of an intuitive user experience.

Imagine getting a phone call with great news: you’ve won a decent amount of money. To get that money, you have to call the number they give you before hanging up. You’re excited but afraid you’ll forget the number, so you look for a pen and notebook to write it down.
You finally find a pen and a piece of paper and are able to write down the number that was dictated to you. Sounds simple enough, right?

Actually, in such a moment of excitement you might have forgotten the number before finding that notebook or in a rush maybe you grabbed something that looked like a pen.You get distracted and forget a couple of digits.
You also had to use the ability to write, to hold a pen in your hand, and hand-eye coordination. But in that moment these actions did not require any additional mental effort on your part, because these processes have already been processed in your brain and occur intuitively. This is what allowed you to stay on target and not forget the coveted number.

Using digital platforms is no different.

The main purpose of intuitive design is to help users focus on their main goal, making the app as easy-to-use as possible. A well-designed navigation plays a crucial role in this.

In most cases the Tab Bar menu is the better solution, because it’s easier for users to find their way around the app. Having said that, you should always adopt the most suitable solution for each project and in some cases the three-bar icon may be the right one.