The hamburger menu is the three stripes you see in the upper corners of a website. It was inspired by mobile design patterns, where screen space is small (or rather used to be small before phablets showed up). You can’t put too many navigation links on a mobile site, so a new trend birthed itself from this problem: hide the navigation links under a menu. This menu was often designed as the, now notorious, hamburger icon.
Designers loved this because now they can just skip over the hard part of designing good navigation for mobile websites. That’s how we ended up with a majority of websites severing millions of cheap hamburger menus to people every day.
What’s worse, the damned hamburger crept its way into desktop websites, too! “Good god why?” you might be asking, “The desktop has enough space for proper navigation.” You’re completely right.
It’s time to end this design fad that’s hurting people and keeping them from completing their work faster.
Let the hunger games begin
The Nielsen Norman Group recently ran a study on hidden menus (also known as hamburger menus). Are they better or worse than visible, regular menus? And how?
Here’s what they found.
The hamburger menu is worse
Hiding navigation links behind a hamburger icon cuts its discoverability by half. Turns out people don’t see and are less like to use navigation links if they’re collapsed inside a single icon.
What’s especially interesting, is that they also tend to use navigation much later in their tasks than if it were visible.
What does this mean?
Imagine running a fashion store, like H&M. If you used hidden navigation, people would have trouble finding content (glasses, shirts, bags) because they wouldn’t know where to click to find them. They might use search, but that’s not the ideal user experience you want – because it’s more difficult to ask a search box what the store has on offer, than to just browse around its departments. And this also leads to people having spent more time on their tasks, like finding out how to get to the “bags” section, or trying to locate particular items.
So, hidden navigation:
- is worse for content discoverability
- makes tasks more difficult
- makes tasks last longer
The NNGroup sums it up best:
Why does hidden navigation have these effects? Throughout the article, we hinted at several answers:
- Low salience: A small icon is harder to notice on a large screen size (and even on a smaller mobile one).
- Low information scent: The menu icon or label doesn’t usually tell people what’s inside it, so they have no idea if they’ll find what they need by clicking on it.
- Extra work: To figure out what’s inside the menu, people must expand it. That increases the interaction cost for users and makes them less likely to do it, or, if they do it, they may take longer.
- Lack of standards: Hidden navigation is implemented in different ways by different sites. Some sites use it, some don’t. On mobile, patterns are starting to form, but on desktop there is a lot of variability and inconsistency in the placement and the labeling of hidden navigation.
- Low familiarity: Especially on desktops, hiding navigation is not a common pattern and people may not expect to find global navigation under an expandable menu. Some people may also still be unfamiliar with the hamburger icon that is frequently used for such menus. This low familiarity is exacerbated by the lack of standards which reduce long-term learnability (as further discussed in our course on The Human Mind and Usability, learning is facilitated by repeated exposure to the same pattern.)
Of these 5 points against hidden navigation, only the last one might decline in future years. Hypothetically, increased design standardizations could also occur (which would also increase familiarity), but our experience observing the web design evolve over the decades doesn’t make us optimistic that strong design standards will emerge anytime soon. The 3 biggest points of low salience, low information scent, and extra work will always be a curse on hidden navigation that will reduce its usability.
Best practices for navigation
Basically:
- Don’t use hidden menus and hamburgers on desktop.
- Use top-level navigation links on top or the left side.
- Display up to 4 top-level navigation links on mobile.
- If you have more than 4, hide the rest in a menu icon. They’ll be more difficult to find, but people are probably accustomed to the hamburger menu (largely thanks to the old design of the Facebook app that used it) so they’ll probably figure where the rest of your navigation is hiding.
- Use in-page links to important info, so people can find it without relying on or seeing navigation.
For an in-depth look at the research and its results, head over to NNGroup’s Hamburger Menus and Hidden Navigation Hurt UX Metrics.
Also note that most of our premium WordPress themes support both hidden and visible navigation designs. Choose wisely!
To get more posts like this delivered straight to your inbox, sign up for our newsletter!
