Anyone who has taken even a passing interest in web design will at some point have come across this fundamental question - what is the point of having a beautiful-looking website if your audience cannot find what they are looking for?

It is an issue built into the very fabric of the web, and striking the right balance between the aesthetically pleasing and the usable is something of a holy grail in web design. Solutions, innovations and approaches come and go, but most in the industry accept one basic maxim - poor navigation will drive users away from your website.

What’s in a Hamburger? 

One of the more controversial solutions to this thorny design problem has been the rise of the so-called ‘hamburger’ menu icon - three modest little dashes which, with some imagination, resemble a hamburger in a bun. You may have used these dozens of times without realising that is what they are known as. Technically, they are sidebar or ‘flyout’ menu icons, providing a convenient drop-down contents page.

Their popularity with web designers is easy to understand in the mobile age. With the rise of tablets and smartphones, hard-pressed developers were left with less and less screen space to work with. Whilst traditional desktop design could afford to leave navigation options in full sight, the needs of mobile demanded they be hidden. The attraction of the ‘flyout’ is that it can hide a complex range of navigation options right up until the user chooses to look at them.

It only takes one really big name to popularise a new icon; in the case of the hamburger menu, that big name was Facebook. Once the social media behemoth made the icon common currency for its millions of users, other sites flocked to follow.

But that is where the arguments start. Despite its meteoric rise, many question whether the hamburger menu actually passes muster on that most basic of design principles - usability. For a start, there is an issue of recognition - research has suggested that many users simply do not know what the icon is for. Three parallel lines can also look pretty anonymous and therefore easy to miss. That contradicts the supposed benefit of having navigation options hidden until the user wants to see them. If people do not know what the lines are for, or miss them entirely, the options are never revealed. 

Bespoke solutions

So navigation is something that requires a lot of careful thought and planning in website design. To burger or not to burger? Well, drop-down and fly-out menus do provide an extremely useful way to present complex navigation options, especially on mobile - an easy way around the recognition issue linked to the hamburger icon is to simply use the word ‘menu’ instead.

Combermereabbey_-_Hamburger_internal.jpg

And going back to aesthetics - let’s not forget that looking great is something to aim for in web design. Ensuring your navigation solutions fit in with the overall look and feel of the site is important too, in which case bespoke css-based menu and navigation design can be preferable to using standardised icons.

More Information

If you are looking for web design in Cheshire and Manchester, Ultimate Creative Communication’s talented team will take you through all of the options to make your site as usable as possible for your audience.

Written by Ben Brand August of 2016