Hamburger icon? Most people think a juicy and tasty hamburger, but in web design, a hamburger icon? What is that? Well, there is such an icon and it doesn’t look anything close to a hamburger. It’s an icon that is 3 lines or also called a triple bar, and it’s used to signify on a website that there is a menu present. The purpose of this article is to introduce you to the hamburger icon, and give a few interesting facts as well as resources on how to implement it into your own site.
In web design, the purpose of the hamburger icon is that is kind of hides the menu, and then the user can click and it slides or opens in some direction, very much like the concept of the jQuery accordion. In responsive web design, this is suppose to give the site a less cluttered look, especially in very small mobile browsers.
Case in point, see the following:
Full size (Click to see bigger image. It will open in a lightbox.):
What appears in a device with 320 pixels in width:
The problem is that a lot of people are seeing this on websites and not knowing what “that three bar thingy” is, especially after it started popping up online. However, the icon is not new. The hamburger icon first appeared on Xerox photocopiers and showed up in 1981 in for the Xerox Star workstation. It was borrowed by Apple iOS and the Internet has since seen this implemented for website’s across the Internet.
The idea of the hamburger icon or triple bar is clever, but for the average Internet user, it means that some educating has to be made in order for them to know that it means that it’s for some type of navigation, as also agreed in this really great post on the hamburger icon, navigation menus, and mobile experience. For those who like to play Devil’s Advocate, some places are bringing up resources saying that the hamburger icon is possibly bad for user experience.
Some websites are trying to solve the educational aspect of the icon by either writing articles or place the word “menu” right next to the hamburger icon.
Doing so does seem to illustrate the point across, but it also defeats the purpose of what the icon was suppose to do, be simple, and save space. Frankly, most of the markup doesn’t even change, it’s merely implementing CSS and jQuery, and for responsive web design, the CSS is all in the media query. There are plenty of tutorials on implementing the Hamburger menu. Below are listed a couple tutorials:
So, still hungry? 😉
Do you use the hamburger icon on your website? How do you think people will easily learn what the hamburger icon signifies and be able to use it?