Hamburger menus in website design

Here at your Suffolk website design agency we know a thing or two about building websites, and over the last few years, we have witnessed firsthand the rise of mobile website design.

The industry has rapidly moved from mobile website design being an ‘additional extra’ to being an ‘absolute requirement.’ One of the more fascinating aspects of this meteoric rise, for web design firms such as us, has been the way in which the ergonomic practicality of the media used, has meant a requirement for unique design elements.

hamburger_icon

Surely, king of these unique new requirements is the ‘hamburger menu’ icon. Open up any responsive website design and you’re almost certain to see three stacked lines in the top corner of the screen. We call this strange symbol a ‘hamburger menu’ icon as it looks slightly like a hamburger inside two halves of a bun. …Admittedly, the link is tenuous to say the least.

“The hamburger icon is a classic. Even if you don’t know it by that name, its three black bars are as familiar as your mouse’s cursor—a constant companion on your cyber journey since the day you got your first computer”

Gizmodo

Although the creation date and initial author of the hamburger icon is disputed, its commonly accepted that the icon comes from a standard ‘unordered list’ icon with the bullet points removed. The icon was first really popularised by Facebook and Google – after these global giants had signed up to the ‘hamburger fan club’ many other, smaller companies were quick to follow. With such well-established brands using the hamburger icon, it’s fair to state that the general public are becoming more familiar with the icon and adopting it as a normality within website design.

The hamburger icon is useful as it allows any web design agency to hide reams of content, that would normally consume a smaller screen of mobile devices. This information is still accessible if required, but it is optional and doesn’t impose itself on an mobile website design. The argument against this is that it makes navigation tedious. Some website designers argue that the entire menu should always be accessible, instead of having to click, wait for the animation of the menu sliding out, before selecting a menu item. Whilst this is fair concern, if a menu is not important enough to be constantly present on the site, it’s probably worth a few seconds of delay whilst the navigation is accessed. Certain recent A/B test results have also shown that few users are actually familiar with the hamburger icon and the addition of the word “Menu” alongside/instead of the icon is much more successful for instant recognition.

unordered_list

Nevertheless, it’s also arguable that an icon is also always preferable to having to write out the word. (Any way of making the user experience more simple and succinct is a benefit in an age where information is required quicker and in greater detail every day.) Three thin lines are much quicker and easier to render and read on all devices than the word “menu”. The other issue of using type is that you then have to translate the word when the site is used in a different culture. An icon is universal to all languages, doesn’t need to change and won’t suddenly be a different size when viewed in another location.

The hamburger icon has been getting a lot of attention lately—and not all positive. Over the last few years, the hamburger has been accused of leading website designers astray. The icon can lead to skirting around the issue of considering site structure properly and instead simply shoving all the options into the hamburger menu. However what’s clear, regardless of individual opinion, is that the hamburger menu is set to be around for the foreseeable future until an indisputably better alternative can be found.

If you’re looking to commission a responsive website design or want to know how you can ensure your website is accessible in a mobile age, please give our team a call on 01284 706 842 and we’ll happily talk it through with you and give you the benefit of our experience.