While using a mobile to browse online, screen space is essential. 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 shipping.
REASONS WHY THE HAMBURGER MENU IS NEGATIVE FOR UX
Are you currently, or have you ever worked on digital products? If the answer is yes, you’ve probably already read articles describing how the hamburger menu is terrible for UX metrics. To keep it simple, the hamburger menu hurts UX because of its low discoverability. This statement is backed up by numbers from qualitative studies. In their studies, the group found that hidden navigation is ultimately less discoverable than visible navigation. Overall, this means that when shipping can’t be seen, users are less likely to use it. It is because of this that hamburger menus drive user engagement down.
WHAT SHOULD DESIGNERS USE INSTEAD?
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.
We’ve listed a few of our favorite suggestions below instead of a specific icon:
Tab Bar – Do you have a limited number of essential destinations in your app or website? If so, then 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. While 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 costs are located in a logical order for user flow.
One of the options should continuously be active, therefore visually highlighted. You may opt to do this by using a different color-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 a sophisticated take on the ‘Tab Bar’ option, where the amount of navigation options hidden behind the “more” menu depends on the available screen space. 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 takes 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 useful 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 specific section of the website/app.
CONCLUSION
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 labeled according to your users’ needs. Successful navigation should be at the top of the priority list for every designer. Every single user should understand precisely how to move through your app or website in a stress-free and straightforward manner.
