Web design and the burger

The burger in web design


As a requirement for mobile web design, the three lined ‘hamburger’ menu icon has become ubiquitous. And with good reason, with reduced screen space, there is often no option than to hide the navigation.

Even when used though, there are user variances around whether the word ‘menu’ is added, or even a border – example research here.

But what of it’s use in web design for desktop? There is an inherent desire within most designers to simplify, to strip out anything superfluous and reduce screen clutter. So it was inevitable that the hamburger menu would make inroads into desktop web design.

Has it had it’s day though? Surely the downside of putting an extra click in the way of key navigation items in counter-intuitive? Unless it is used for hiding secondary content, whilst still listing key navigation in full.

There may be web design examples where it is more appropriate – where imagery or video take precedence, where key sections are easily clickable from the home page, or where there is only one element of focus.

We were not immune to this desire to simplify – recently experimenting with using the burger approach on our own website. The result was pretty conclusive, with a bounce rate increase of around 130%. That’s a significant increase in users who did not see how to, or could not be bothered to, go any further.

There has to be a balance between web design aesthetics and functionality. And although well-considered visual design is vital, usability has to be at the forefront of any website design project.

This is brief reflection of our brief experiment on our own website. A really detailed breakdown of user testing can be found here.

If you would like to discuss a potential project with us, please get in touch or have a look through some of our web design examples.

(Also an excellent opportunity to add a link to officially the finest burgers in the UK from Brighton’s Burger Brothers.)