It’s one of the most common patterns in web design… But it could be a sign that your navigation needs a diet.
We’ve reached a point where most (if not all) websites should be responsive. It’s a standard that the whole design community agrees on, and it shows.
Any business who are serious about their online presence will have already launched a responsive website. If your site isn’t yet responsive, it’s fair to say you have some catching up to do.
In this new responsive world, many design patterns and ‘best practices’ have emerged.
Design patterns can be awesome. They keep interfaces consistent. They also prevent users from having to relearn everything each time they use something new.
That said, it’s not all been great.
There’s one pattern in particular that’s been bugging me for a while… The ‘hamburger menu’. Chances are that if you’re reading this, you know exactly what I’m talking about.
Here’s how it works.
When the user’s screen isn’t wide enough to show the navigation bar, it’s hidden from view. What shows instead is a not-so-tasty looking icon, usually in the upper right corner. This is the infamous hamburger.
The look of the icon can vary, but the most common representation is three horizontal bars.
Tapping the icon expands the navigation items, generally in the form of a flyout or a dropdown.
My issue isn’t with the icon, or even the interaction itself. My problem is with how lazily it’s used.
Designers seem to be falling back to the hamburger as a ‘best practice’, without first considering more effective solutions.
The problems with the hamburger menu
It’s a barrier to content discovery
This is my main issue with the approach. Users who arrive on your site for the first time should be able to scan the contents of your navigation immediately. Having your nav items on show right away helps users to understand what it’s all about. It gives them an earlier idea of whether your site is right for them.
If the whole contents of your navigation are hidden, it requires conscious effort from the user to see what’s inside. People have short attention spans, so this could be a big risk.
The ‘five second rule’ is an important guideline for UX designers. The idea is that after landing on your site, a user will decide whether or not they’ve made the right choice within five seconds. Hiding the whole contents of your navigation can risk losing people. First impressions are important, and your navigation forms part of this.
It encourages bad information architecture
The limitations of mobile force us to make difficult calls. With enough space to only show a few things in our nav, we need to think about what’s truly important.
A hamburger menu removes this constraint, opening the flood gates for bad IA.
It becomes far too tempting to add “just one more thing”, because technically there’s nothing stopping us. With the navigation hidden under a hamburger menu, it can be made as lengthy as you want. There’s no incentive to consolidate or prioritise.
This often results in navigation getting out of control - both at mobile and desktop.
It requires knowledge of a symbol not everyone understands
In spite of how common it’s gotten, many internet users still don’t know what the hamburger symbol actually means.
In our UX design bubbles we often take our knowledge for granted. If a user doesn’t know what this symbol means, you could have a usability issue on your hands.
It slows down the navigation process
Using a hamburger navigation means an extra tap is needed to get around your site.
It might only be a few seconds, but if you’re creating a service where people are likely to use the navigation several times it could be an issue. A social media site, for instance, will involve people doing the same actions many times. By having to repeatedly use a hamburger menu, you may being causing unnecessary inconvenience.
When did we get fat on hamburgers?
Back in the old days, the majority of design for small screens was for native apps and separate mobile websites.
These bespoke mobile experiences designers forced designers to prioritise. We would strip out the non-essential functions, and highlight important features. We wanted to make frequently used features & content more readily accessible.
This changed with the advent of responsive web design.
Responsive sites (quite rightly) required designers to give mobile and desktop visitors a consistent experience. This meant that the mobile experience was no longer ‘scaled back’. Anything visitors could do on desktop, they also needed to do on their phones.
This gave us the challenge of how to to fit all of those desktop choices on such a small screen.
Rather than reconsidering the IA and navigation from a mobile first perspective, many website owners instead just squashed the same desktop navigation into a hamburger menu.
This happened so often that’s it’s seen by some not just as the common practice, but the ‘best practice’.
The solution : plan your navigation mobile first.
When approaching your information architecture, think about how it’s going to look on a small screen.
- Could sections be consolidated?
- Could section titles be shortened?
- Are these sections really needed as main navigation items?
In an ideal world, your main navigation should be immediately visible and instantly accessible on mobile.
Getting your navigation to display tidily on a mobile screen involves keeping your IA very lean. In some situations that isn’t always realistic. Some sites are just too complex, and the user needs too demanding.
To that end, it’s alright to hide some secondary choices if they really can’t fit.
The great examples above show how high priority options are readily visible, but more secondary actions are hidden in an additional menu. The Gaurdian and the BBC in particular do a really good job of this.
A compromise : The ‘greedy’ navigation technique.
A great compromise is a ‘greedy’ navigation. This involves partial use of a hamburger menu for the items that ‘overflow’.
This means that on for any particular screen size, we show the navigation items that there’s space for. The remainder are hidden, and can be revealed by tapping a ‘more’ icon.
The technique introduces a degree of prioritisation, as the more important navigation items are still immediately visible. at mobile.
I’ve opted for to use a greedy navigation on Just UX Design. This is so that the ‘about’ and ‘work’ links are easily accessible to most mobile visitors. The more secondary ‘blog’ and ‘contact’ links are hidden in a seperate menu.
I don’t believe a traditional hamburger menu is ‘best practice’. I think it’s just widely accepted laziness.
There’s nothing wrong with the interaction itself, but so many better solutions are usually available. Challenge yourself to create a mobile-first navigation, and you’ll quickly see the benefits across all devices.