Whilst using a mobile to browse online, screen space is rather important. In order to overcome the challenge of a small screen, designers often use the hamburger icon to hide navigation. During this article, we will delve deeper into how and why hidden navigation results in bad UX, and what alternatives can be used by designers to avoid inaccessible navigation.
Are you currently, or have you ever worked on digital products? If the answer is yes, then you’ve probably already read articles that describe how the hamburger menu is bad for UX metrics. To keep it simple, the hamburger menu hurts UX because of its low discoverability. This statement is actually backed up by numbers from qualitative studies. In their studies, the NNGroup found that hidden navigation is ultimately less discoverable than visible navigation. Overall, this means that when navigation can’t be seen, users are less likely to use it. It is because of this that hamburger menus drive user engagement down.
Even though there is no definite rule for mobile apps and websites, we generally recommend that designers use visible or combo navigation. Visible navigation features options in a visible navigation bar, and combo navigation is where some of the main navigation options are detectable and some are hidden under an interactive element.
So, what should we use instead of the hamburger icon? We’ve listed a few of our favourable suggestions below:
Tab Bar – Do you have a limited number of top-level destinations in your app or website? If so, then a tabbed navigation might be the best option for you. If a menu is located at the bottom of a screen, it is ultimately an advertisement to let a user know there are navigation options from the very beginning. Whilst tabs seem to be the simplest and most popular navigation pattern, there are a few things to be considered before implementing it into your design. Tab bars only allow five or fewer navigation options to display.
The first tab should always be the home page, this is so that the tabs are located in logical order for user flow.
One of the options should constantly be active, therefore visually highlighted. You may opt to do this by using a different colour-perhaps a contrasting one.
Top tip: To save screen space, be sure to place the navigation bar in a hidden/revealed downward and upward scrolling option.
Progressively Collapsing Menu – The Progressively Collapsing Menu, which is also known as the “Priority+” pattern, is a menu that adapts according to which screen is being used. It ultimately shows as much of the navigation as it possibly can. It also puts everything that isn’t priority under a “more” button. In simple terms, this is basically a sophisticated take on the ‘Tab Bar’ option, where the amount of navigation options hidden behind the “more” menu depends on the screen space that’s available. Many designers believe that this is a more flexible solution than a static ‘Tab Bar’, though everyone has their preferences and it does depend on the context of the overall site.
Full-Screen Navigation – As mentioned earlier in this article, the struggle can often be to minimize the space that the navigation systems take up. Differently to the above suggestions, the full-screen approach does usually take the exact opposite principles. The full-screen navigation option devotes the whole homepage exclusively to navigation, with users having to either tap or swipe to view additional menu choices. We advise designers to use this method for task-based and direction-based websites and apps. It is especially good when users are limiting themselves to only one branch of navigation during a session. By pushing users from broad overview pages to detailed pages, a brand is ultimately helping the customer to find what they are looking for. Plus, it encourages them to focus on content within a certain section of the website/app.
With there being so many different sized mobiles, there isn’t a one-size-fits-all solution here. Ultimately it depends on who your users are, your product, and on the overall context. That said, the key to any successful navigation icon is information. It must be clear, structured, prioritized, and labelled according to your users’ needs. Successful navigation should be at the top of the priority list for every designer. Every single user should understand exactly how to move through your app or website in a stress-free and simple manner.
I found this blog when doing research for my web design class. I’m learning a lot, thank you! What did you mean by “Top tip: To save screen space, be sure to place the navigation bar in a hidden/revealed downward and upward scrolling option”? Sorry, I’m a bit of a newbie to web design.
Thanks for reading Aq, we are really pleased it has helped you. What we mean is to simply use a collapsible menu icon resembling that of a downward or upward scrolling arrow. Take a look at http://www.shopezi.co.uk ignore the burger bar at the top left and look to the category menu drop down. Let us know if we can help further