Hidden Hamburger menus and their invisible pain

15 June 2017

Whilst popular on mobile websites, the hamburger trend is creeping its way to desktop layouts too as designers aim to simplify their website visuals. The trouble is, research indicates that Hamburger menus are more difficult to use and distract from navigation.

twitter

The rise of responsive design has many benefits. It not allows developers to build a single website for both desktop and mobile, it aides SEO by avoiding duplicate content, whilst maintaining a continuous brand experience from desktop to the small screen.

However as a result of limited screen real estate, designers are challenged with where to place often long and multi-layered navigation menus. A common emergence is one of using a ‘hamburger’ menu: a three lined symbol that when pressed, reveals a menu structure. Whilst popular on mobile websites, the hamburger trend is creeping its way to desktop layouts too as designers aim to simplify their website visuals.

Whilst the ‘hamburger’ symbol alone has been criticised by UX consultants, the fact that the menu itself is hidden until revealed is often over looked. The impact this has on a users experience, is something designers need to consider.

users were 29% more likely to use a menu if all items were visible immediately on screen

A study conducted by Neilsen Norman Group (NNG) reviewed this critical flaw of hidden hamburger menus and revealed that in all cases, the users experience is critically reduced. In fact, hidden menus result in them being used far later and much less in the task. On mobile, users were 29% more likely to use a menu if all items were visible immediately on screen, whilst on desktop they were 21% more likely.

So what can we take from this study? Well designers need to weigh up the limited screen real estate when designing for mobile and consider how they can place a menu, clearly visible without obscuring or hiding it for the sake of design. On desktop, unless your website is very simple, avoid a hidden menu or hamburger where possible, unless your plan is to steer a user further down your page or into another direction.

Instead of pushing everything out of sight, make your menu visible with tabs: 4-5 is the sweet spot

As a compromise, NNG revealed that a combination approach of using a partial traditional menu and a hidden menu may be a suitable alternative. In such cases users used a menu more than a visible or hidden menu alone (50% of tasks recorded).

Source: https://www.nngroup.com/articles/hamburger-menus/