Savvy Alternatives to the Hamburger Menu Navigation

Mobile screens are obviously a lot smaller than your average desktop, which means your mobile web design needs to be attractive and informational while still offering users easily accessible navigation. That said, many web designers try to hide navigation buttons behind the “hamburger icon” to save on space. Unfortunately, this makes for difficult and frustrating navigation on the part of the user.

Why is the Hamburger Menu Bad For User Experience?

The biggest problem with the hamburger menu is the fact that it is tough to find and actually comes with low discoverability numbers. This has actually been proven and monitored. Essentially, when navigation is hidden, users are not as likely to use a site’s navigation. Further, hamburger menus send engagement down and get in the way of exploration.

Alternatives to the Hamburger Menu

A good rule of thumb is to either use visible (where the main navigation options are displayed on a visible navigation bar) or combo navigation (where certain main navigation options are visible while others are hidden under an interactive element). Here are some options to consider.

Tab Bar

If there aren’t many top-level destinations on your website, a tabbed navigation could be the right option for you. People will assume that there is a navigation menu when they see a menu at the top or bottom. While this is a simple option, there are certain things to be considered about this kind of navigation:

• The tab bar only displays 5 or fewer navigation options .
• The first tab must be the home page.
• The order of tabs should be relevant to their priority.
• One option should always be active and be visually highlighted.

Tab Bar With a “More” Option

If there are less than 5 top-level destinations, a good idea would be to display the 4 prioritized areas and have a fifth element as a list of whatever options remain. All design principles for this option are essentially the same as for Tab bar, except that the last element is the ‘more’ item which can work as a drop-down menu or link to another navigation page with all the other sections.

Progressively Collapsing Menu

Also referred to as the “Priority+” pattern, the progressively collapsing menu is able to adapt to the width of the screen width. As much of the navigation is displayed as possible and everything else is put under a “more” button. This pattern is more sophisticated than the ‘Tab bar + more’ navigation because the number of navigation options that are hidden behind the “more” menu will depend on how much screen space is available.

Scrollable Navigation

This option is similar to the previous two patterns, but this is more geared towards longer lists. If you have several navigation options with no major difference in priorities, you could list all of the items in a scrollable display which would allow users to move side-to-side easily.

The only problem with this solution is that only the top few items will be displayed without having to scroll and all those that remain are not visible. That said, this is an acceptable solution if users are expected to do some exploration of content.

Full-Screen Navigation

With this approach, the home page is usually exclusively dedicated to navigation. Users will tap or swipe to display more menu options when they scroll up or down. This pattern is effective with task- or direction-based websites, particularly when users only use one branch of the navigation hierarchy in one session. Helping users focus on detail pages can help them hone in on what they’re searching for.

With full-screen navigation, web designers are better able to organize big chunks of data in a coherent way and display info without overwhelming users. After they make their decision on where to go next, you can then devote all of the screen space to content.

The Bottom Line

There isn’t just one solution when it comes to navigation patterns for mobile. The best option for you will depend on your product, users, and context. Having said that, information architecture is fundamental to every well-designed navigation. Web designers’ main priority should be helping users navigate websites and apps.