3 design patterns for navigation that are better than hamburger menus
Hamburger menus often end up as a navigation dead end
The more I’ve gotten used to designing mobile websites, the more I’ve realized that hamburger menus are like junk drawers.
Hamburger menus are often thought of as a one-stop shop for mobile navigation: the hamburger menu is the most straightforward and low-effort approach to mobile navigation. However, sticking all your navigation behind the ‘three-line icon’ isn’t just a lazy solution: it can quickly reduce the likelihood of users moving around the site.
To design better mobile navigation patterns, we must first pay attention to different levels of information hierarchy: global and local.
Global vs. local information hierarchies
In designing the correct navigation options, we first must consider the use case (and value) we’re offering users. This is important because you should not group global and local navigation options in the same menu.
To highlight this, let’s consider two mobile examples: Slack and Discord.
Both support global and local navigation options, but the different use cases lead to different navigation setups.
Discord wants to support ‘server hopping’ or shifting between multiple servers. There may be different conversations or notifications in each server that the user might want to pay attention to, so global navigation to change servers is always present on the left side of the screen.
On the other hand, Slack doesn’t want (or expect) users to escalate to global navigation: most conversations happen in a local workspace. As a result, most global options are hidden: you might not even realize how to access global options unless you’re familiar with how to do it on the desktop.
Understanding the types of navigation (and the level of information hierarchy) will help you determine the best way to lay things out. This is important because the disadvantage of not using hamburger menus is that navigation will take up more space. Instead of an icon, you’ll have to plan how to squeeze the navigation into a similar space.
So what are alternative mobile design patterns, and how do you use them?
Top-level menus and tab bars: Best for <5 consistent navigation options
These options are mostly the same, the only difference being that tab bars tend to be persistent across the entire experience. At the same time, top-level navigation can disappear upon scrolling down.
In either case, clicking on a word (or icon) leads the user to a different application section. However, it’s important to remember that we shouldn’t mix global and local navigation options. In the case of Google Play, the top-level menu is all local navigation, while the Tab menu is global navigation.
These menus usually can support up to 5 options on a mobile device before forcing the user to scroll, which users aren’t likely to do.
Story tiles/accordions: Best for task-based navigation
Another helpful approach is turning your mobile application into a navigation hub, which lists all the likely tasks the user is trying to accomplish. This is often used with websites with clear-cut user tasks, such as airlines or other travel websites.
Whether they’re separate tiles (or simply accordion menus), the idea is to have them be things that are directly accessible on the website rather than be hidden away in a hamburger menu.
While this may take up a lot of space, it is often much clearer for users than a hamburger menu.
Tray overlays: Great for filtering, sorting and searching
Tray overlays are a recent design pattern to address one of the most common issues with the search: opening up a search filter menu would often hide the search results. Without any idea of how their filters affect the search results, it’s hard for users to be sure they’re moving towards the right place.
As a result, faceted search controls, which are a ‘push-out style tray,’ allow you to view the search filters and see how it affects the results.
Moving beyond Hamburger menus
While Hamburger menus are still a useful mobile navigation pattern, especially for your less critical options, frequently, it’s more common for them to act like a junk drawer for every piece of navigation.
This can often result in problematic and overloaded menus, which the users aren’t likely to see in the first place.
So if that’s what you’re running into, consider these three different navigation patterns to help you refine your mobile application. They require additional planning to maximize your available space but can give you a much more focused and navigable mobile experience.
Kai Wong is a Senior UX Designer, Design Writer, and author of the Data and Design newsletter. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.