Skip to content

The drawbacks of your ‘hamburger menu’

Yesterday I suggested using the navigation bar on your website to show visitors the things they really want to click on, rather than hiding the good stuff under generic labels. But this often only works on desktop displays. With modern responsive websites, the plan can literally collapse, as most designs, when viewed on mobile devices, bundle all the navigation bar items into what’s known as a ‘hamburger menu’ (usually three horizontal lines).

This is an accepted convention, and I’m sure most web users know that those three lines mean ‘click this to reveal a site menu’*. But of course it says nothing at a glance, so you need to remember that nobody knows what it contains until they click on it, and why should they? If you expect the navigation bar to list your products, for example, then you’re going to have to list them elsewhere too.

Also realise that you may have been given a ‘hamburger menu’ through laziness on the part of the website designer, who just used a template where that was the default for mobile screens. If your navigation bar is compact enough, there may be no need to ditch it in this way. I’m not saying that the BMON website is a paragon of great design, but we did take the decision to ensure the navigation links always show in full text, even on a mobile screen.

*Some research suggests that this may not be the case, and that replacing the ‘hamburger menu’ icon with a label saying ‘Menu’ increases clicks on it significantly. Something else worth testing?