On a mobile, screen space is certainly a precious resource. To meet design criteria in a small screen space, designers often rely on hiding navigation behind the hamburger icon. In this article, we will discuss exactly why and how hidden navigation generates negative UX, and what fresh alternatives there are for designers to use instead.
Why is the hamburger menu so bad for UX?
If you regularly work on digital products, you are probably aware that the hamburger menu hurts UK metrics on mobile. The main reason for this is because of its low discoverability, which is backed up by actual numbers. In its studies, the NNGroup found that hidden navigation is a lot less discoverable than visible or partially visible navigation. It is obvious that when navigation is hidden that users are a lot less likely to use navigation. It is because of this that hamburger menus ultimately drive engagement down, slowing exploration and confusing people.
What should we use instead?
If you have numerous top-level destinations in your website or app, then a tabbed navigation may well be the solution. When a menu is located at either the top or the bottom of the screen, it is showing the user that there are navigation options available. Plus, tabs seem to be the simplest navigation. Although, a few things should be considered before putting them into your design.
- Tab bars allow 5 or less navigation options to display.
- One of the options should always be active and should be visually highlighted.
- The first tab should always link to the homepage so that they are in order of importance.
Progressively Collapsing Menu
A progressively collapsing menu is a menu which adapts to the screen width. It shows as much navigation as possible and then categorises everything else into a “more” option/button. The flexibility of this option provides a better experience for users.
Similarly to the pattern above, this is an approach for longer lists. You can list all items in a scrollable view, giving users the option to move from side-to-side. However, the downside to this solution is that the few top items are the only ones visible, whilst the other ones are out of sight. Though this is acceptable when you get users who are open to exploring content and new categories.
With navigation pattern for mobile, there isn’t a one-size-fits-all solution. It generally depends on the product and on the content. However, with a bit of planning, the design should and could fit the users needs exactly. Helping others navigate should be a priority, providing a good experience and encouraging them to return.
Keep up to date with our web design news for more top tips.