#UX / When are hamburger menus the best navigation solution?

Hamburger menus: a brilliant solution to smaller screens?

Whether you call it hamburger or sandwich (or pulled pork bun?), it essentially refers to a ‘list icon’. It is generally used as a navigation menu on both desktop and mobile interface. The purpose of a hamburger menu? Simply put, it saves more space; It hides site navigation on a limited website space, and only allows users to find the content once s/he clicks on it. 

In the face of minimalism, hamburger menus are the most commonly used solution to ‘preserve precious real estate on mobile, tablet or other small screens.’ ().

And it’s ubiquitous. As you might have noticed, we also use it where appropriate.

However, as much as we love hamburger of all kinds, we are also very aware that it’s not the only way to handle web navigation. When it comes to design, there’s no universal solutions, nor rules.

Yup, you’re right. ‘There are always exceptions’.

So when is it considered as an exception to get rid of hamburger menus?

Hamburger menus are cool and promote minimalism. So what’s the harm? Among all the criticism, it hinders the principles of web navigation: clarity and interactivity.

Try to picture the Disneyland without any navigation or whatsoever. No signs, no maps and no arrows. Most of us will probably end up wasting half of our day asking for directions, looking for restaurants, or even worse, a way out. 

And what if the users don’t know what they want from your site? One of the most frequently debated issues with hamburger menus is that ‘users often don’t know quite what they want, and they rely on site navigation to nudge them in the right direction by telling them what their options are and what content they should be looking at.’

The key navigation and usability issues of hamburger menu

• Not glanceable: it doesn’t allow the most basic user needs: to casually scan over what’s there to offer.
• Low discoverability: When it’s set as a default, users need to be able to identify the icon as actionable. In fact, many websites like the previous example supplement the menu icon with a ‘menu’ label.  
• Less efficient: even if users are familiar with the icon, it forces them to first click the menu to find what they need.    
• Inconsistent with platform navigation patterns: the hamburger icon often overloads navigation bar on a mobile interface (see below). What’s worse, it inevitably forces people to ‘navigate several pages to get to the menu. (via lmjabreu.com)

 The NBC News site also once incorporated a mobile-first hamburger menu, but shortly after realised that it only attracted few number of clicks. It then adopted a couple of tweaks by making it yellow and adding ‘menu’ subtitles.
Eventually they gave up and returned to the good old horizontal navigation menu instead (see more at Deep Design).

So when IS it appropriate to use hamburger menus?

Today, the most popular example would be the use of Hamburger menu as one of the secondary navigation items within a tab bar (via deep design).

Instead of hiding the navigation menus behind one icon, the Facebook app has prioritised and displayed some core functionalities that its users often look for. By doing so, users won’t need to repetitively switch back and forth between the home screen and navigation menu. At the same time, you can conveniently hide the rest of functionality of low priority behind the three-lined icon.

And do review your site’s information architecture.

So, is hamburger menu still appropriate to your site/app? The short and obvious answer would be: it’s time to review your website’s information architecture. Reorganize your priorities and do some user research (ie., What devices do they use the most? What’s their desire, needs and struggles?). Determine the top actions and tasks that users are expected to take, and then create an hierarchy accordingly. As pointed out by UX Matters, primary task should be placed at the centre, followed by secondary tasks along the edges. And finally, ‘stack all of the tertiary functions in a menu of some sort’.  

What do you think?

Appnova is a digital agency specialising in web design, UX, eCommerce, mobile app development, branding, content marketing and social media.

Keep following us on Twitter @appnova and “like” us on Facebook for useful news and tasteful digressions about geeky stuff.