Is a Hamburger (Navicon) Menu Right for Desktop?

Minimalism in web design has been an ongoing trend over the past few years and continues to go strong. With an increased focus on simplicity and ease of navigation – it wasn’t long before web designers turned their sights on the ubiquitous website menu bar. Some designers going so far as hiding the main navigation altogether beneath a hamburger ≡ menu icon as we’ve seen on mobile for years. The idea behind the move is to allow more focus on banner images, logos, and messaging, but does it provide the best user experience?

Pros

The hamburger menu icon has become a best practice, so in general most users know how to use it, where to find it, and how it looks.

It allows users to “opt in” to the navigation, decreasing the chances of feeling overwhelmed by an abundance of options or clutter.

Allows design to draw attention to one specific element while downplaying other aspects of the site. For example, a tagline and signup can be the singular focus rather than offering users an immediate opportunity to navigate away from your calls to action.

Allows for varying styles of navigation based on page count and objectives – full screen nav, off canvas nav and slide-out horizontal nav just to name a few.

Cons

This style of navigation can be alienating to users who aren’t familiar with the hamburger, causing frustration.

Hamburgers require users to take an extra step each time they wish to navigate on your site.

Decreased discoverability, if the hamburger icon isn’t obvious it could be overlooked.

Your content is hidden and the extent of your site is unknown until clicked.

Best Uses

This style of navigation is best used for simple sites concerned with a clean aesthetic and bold messaging.

Sites with an appropriate user demographic that are familiar with the navicon from mobile sites.

When used developers should insure that the hamburger is easily visible and include a hover effect so users are clear it is clickable.

So, after reviewing the pros and cons, is the hamburger menu icon best for the desktop version of your site? Here are a few questions to ask yourself.

How many navigation menu items do you have? Do you have a simple navigation menu without any children items? (Ex. About, Services, Contact)

Who is your user demographic? Some demographics are more open to the off canvas menu; others are more traditional in what they expect. Know your demographic to avoid users being frustrated with UI.

What features need to always be displayed? For example, is this a site that has a focus on search? If so the search field shouldn’t be hidden in an off canvas menu. eCommerce sites for example have second level of interaction – cart, checkout, my account, etc. – that should probably never be hidden.