Some common mobile nav patterns & when to use them
From hidden hamburger menus to classic nav bars, here’s a few tips on ensuring your user can comfortably navigate your design.
For mobile devices, screen real-estate is a precious resource. Whether you are surfing the web, writing emails, or exploring new digital content, one thing is clear: you want to spend your time on content, not navigation.
Since the late 2000s, multiple common mobile UI patterns have emerged that provide nimble, discoverable, and accessible navigation –all with varying impact on screen space (1). Many of these patterns walk the fine line of grabbing your attention, while still prioritizing content.
Explicit: Navigation Bars (Top / Bottom Nav)
Navigation bars, usually positioned at the top of a screen are holdovers handed down from earlier desktop design. These bars display main navigational options across the top or bottom of a screen (1).
While fairly straightforward and efficient, they only are useful when displaying a few options. If your application or website features more than five navigation options, it can be tricky to fit them comfortably and maintain the adequate touch-target size of 0.4 in by 0.4 in to prevent users from touching unintended targets (2). As seen above, Google.com employs a horizontally-scrollable carousel to fit multiple items in its nav bar.
These kinds of interfaces also tend to take up a lot of screen real estate. And even if a site or application only has four to five main navigation options, it’s important to keep the overall context of elements on a screen in mind. If additional elements like a search bar, account information, or shopping cart also need to be included, a nav bar may not be the best solution (1).
Hidden: Navigation Menus (Hamburger Menu & Side Drawer)
If top and bottom navigation bars aim to display a few items while taking up a fair amount of screen space, navigation menus display multiple detailed navigation items, but only upon user request.
The common three-bar “hamburger icon” is one of the more recognizable navigation menu signifiers, and denotes that multiple navigation options can be displayed. While not as discoverable as navigation bars, hamburger menus can contain a large number of navigation options, housed in a tiny space.
Hamburger menus are best used by sites or applications that specialize in content-heavy screens and pages, where users are mostly browsing or absorbing information initially presented to them (3).
A major point to keep in mind when making use of a hamburger menu is that a user needs to make a conscious decision to open it to check if it contains the option they are looking for. While this pattern is becoming standard amongst most mobile users, some people just don’t think to open it.
Long story short: Hidden navigation, like hamburger menus ultimately save space, but in doing so, they are less discoverable compared to always-visible or partially visible navigation, like top or bottom nav bars.(4)
The limitations of small mobile screens encourage designers to make the most of that space and prioritize content. With this desire to save space, we also need to be efficient with how we communicate what navigation options are available to the user.
Navigation bars offer an explicit and visible interface that users can almost always see, though they are most effective when only showcasing four to five options. With that, these bars run the risk of competing with actual site or app content for user attention.
Navigation menus offer compact real estate and can display a large number of navigation items. However, this comes at the cost of user discoverability, and since these nav items are initially hidden, their design can be considered unintuitive.
It’s important for designers to properly assess the context and use case in which these navigation interface patterns are to be used. Both suffer from usability problems, but the key is to select the one that plays to your site or application’s strengths, while minimizing the strain on your users.
Article Sources:
- Nielson Norman Group: https://www.nngroup.com/articles/mobile-navigation-patterns/
- Nielson Norman Group: https://www.nngroup.com/articles/touch-target-size/
- Nielson Norman Group: https://www.nngroup.com/articles/hamburger-menus/
- Westwerk.com: https://www.westwerk.com/why-the-hamburger-menu-is-so-controversial/
