Design & UX

Article

Challenge: Re-Imagining the Hamburger Icon

By Gabrielle Gosha September 12, 2014

Photo: Thomas Hawk

The ‘hamburger icon’. Most of us are familiar with it, have likely seen it countless times and have even tapped it more than once on our mobile devices.

You may know it by one of its other names. The ‘three line menu‘, the ‘drawer‘, the ‘menu icon‘, ‘side swipe‘, ‘three stripes‘ or the generic ‘navicon‘ are just a few names associated with this symbol.

You could even possibly know it as the ‘heaven/sky’ trigram in taoist cosmology.

Regardless of the name you give this commonly used icon, it’s certainly been the subject of many debates. Recently Annarita Tranfici looked at it from a UX perspective. Today, I’d like to take a look at it in terms of pure graphic design.

Instead of solely focusing on whether the design and inclusion is counterintuitive or intuitive, I’d like to find out whether we can find something better. Not only that, but figure out whether a change in design will be effective or if a different alternative altogether should be examined and developed.

Making the ‘Hamburger’ Icon

Before debating the relative merits of the hamburger icon, it could be useful to know where it began. To many, it felt seemed to arrive from nowhere as an overnight sensation. Today it’s difficult to visit mobile site without seeing that familiar three-lined enigma in an upper corner.

Research will typically deliver a range of origin stories.

Some have said Apple kicked it off back in 2007 (iPhone). Others point to Google Chrome, while others still will swear that it started with apps like Facebook and Path.

So far, I’ve seen little hard evidence to back any of these claims, although the first mention I could find of the term ‘hamburger icon’ was in a Chrome discussion from late 2011. But while one shouldn’t be too quick dismiss things based solely on a lack of documentation, we can say that the graphic form of the icon did not originate with any of the aforementioned companies.

The hamburger icon graphic appears to be much older than we might suspect. As far as anyone can tell, it was the Xerox Star where we first saw the icon way back in 1981. Check this out.

That’s right, we have a 30+ year old icon.

While it does seem we can credit Xerox with being the first company to use the icon, we have to give the credit to Norm Cox, the designer of the interface system.

Despite the fact that some people give the icon some flak for acting as a menu icon it should be noted that when Cox created the symbol it was meant to act as a “container” for contextual menu choices.

His goal was to not only create a functional and memorable “road sign” but to also have the design mimic a menu list.

xerox-star2

All credit goes for this find goes to to Geoff Alday. It was thanks to his inquiries and this email exchange that the mystery behind the origination of the three lined icon was solved.

The question of who first referred to it as the ‘hamburger’ icon remains a mystery for now, but if you have a theory, don’t hesitate to share.

The Great Debate

Photo: Adventures of KM &G-Morris

Since we now know who designed the navicon it’s time to address what is going on in regards to the icon in the design community. Now earlier I noted that the icon has been the topic of recent discussions and debates and it’s true, it has.

I’ll admit that I’m not one to bother with current events but I have stumbled on many articles in the past week that appeared to lobby against the ‘hamburger’ icon. Another admission, I had no idea people were even calling it that, I actually clicked on the articles because I wanted to know what it was. Regardless, it’s clear that there are different groups lobbying for and against the icon.

So what are people saying?

In short, a lot. You will find articles and forums that say the ‘hamburger’ icon is a problem because it conceals content from users. This is said to be non-UX friendly as it can have users forgetting to execute actions they would usually have had the content been placed right in front of them instead of hidden.

Another issue that some have taken up with the icon is the fact that if you are not mobile literate you won’t even realize that those three lines indicate a menu. This is sort of in the same vein as the “younger generations won’t get that the floppy disk icon means save” argument. The only difference here is that people have switched it around to say that “older generations won’t recognize the hamburger icon for what it is”.

A platter of hamburgers

There are many other arguments raised by developers, designers and UX enthusiasts including the “three click” rule and the fact that it isn’t so much the icon itself but it’s technique.

Possible Visual Solutions

Technique and rules aside, at least for the moment, let’s talk about possible visual solutions. Could a change in design help? The truth is that we really don’t know unless we try. Here are some ideas that have been suggested or already implemented.

Mobile First Approach

While not exactly a visual solution in the sense of changing the icon itself, author Paddi MacDonnell suggests in the last half of article How to Solve the Hamburger Icon Problem that mobile developers should simplify their sites and apps to their most simplest forms. This strategy insists that with a reduced functionality you therefore reduce the number of options ergo the need for the “hamburger” icon is removed

While this seems to be a good way to go idyllically, I’m not too certain that users and developers alike will be too thrilled with the reduction of content and function just for the sake of revealing typically hidden content and options.

Remember that the great thing about mobile devices is that we can access the same information from our devices on the go as we would when sitting at our computers.

Text Approach

Morten Rand-Hendriksen who is a specialist in WordPress, web development and design as well as an educator suggests that instead of going the icon route that we replace the “hamburger” with text. In this instance the icon would be swapped out with the word “menu”. He isn’t excessively harsh towards the “hamburger” icon but he does make some interesting points in his article The Hamburger is Bad for You. He also goes on to suggests some other methods to battle your craving of using the “hamburger”.

The idea of switching out an image for text may seem like an odd choice for some especially if you’re trying to simplify but it does remove the confusion of the three lines for those who are not familiar with it.

The Grid Approach

iPhone UI template offering the grid and the hamburger.

iPhone UI (PSD freebie) by Virgil Pana

So far I have only seen this Google use this in production, and that’s only if you are using your desktop or laptop. If you visit any Google affiliated page while using your mobile device, you will still see the standard three line icon. However, desktop or laptop users see a grid comprised of nine mini squares.

Some might argue this still hides the menu but let’s not forget that this challenge is all about finding an improved visual solution. I haven’t seen any chatter about the use of the grid in lieu of the three lines so this might be a possible alternative.

The Button Approach

Buttonized hamburger

The button approach adds a tweak to standard navicon design. The icon takes on a buttonized state to re-inforce the idea of interactivity. You typically see the navicon overlayed on a header or something similar.

Because the design isn’t flat it hints at more interactivity. With the button approach you either create a border around the icon or set it inside of a block. Some websites have already implemented this.

Exis web ran a test with this method and while the tests still indicated that the hamburger icon is not a desirable solution, the “button approach” was clicked on more than the other two options.

You can check out the test and read up on it in their Mobile Menu AB Testing article.

Challenge : Now it’s your turn.

What do you think about the burger? Love it? Hate it? Indifferent?

Do you have a better solution to the three lines? If you do I want you to share it either through the comments or you can tweet them to me. This can be a quick mockup design in Photoshop, Illustrator or whatever you prefer.

If you want to add some CSS animation to show it in action, even better.

Should it remain hidden to reduce the visual clutter, or is there a better and more user-friendly way for it to be implemented?

Meet the author

Gabrielle Gosha

Gabrielle is a creative type who works as a freelance graphic designer, animator, photographer and filmmaker. She has worked doing various jobs from designing logos to filming commercials and animating music videos for both domestic and international music artists.

http://thebeeobee.com/ thebeeobee

Cool challenge, but I can’t agree that this is a big issue.

It’s been added to http://time.com, http://nytimes.com …i could go on and on. Every major news and content site has hamburger menus now.
http://cneude-createur-web.com Matthieu

It’s not because many websites implement the hamburger that it is a good solution to represent a menu…

However it’s true that big website can start a trend and, with time, people will associate “hamburger icon” to “menu”.
- http://thebeeobee.com/ thebeeobee
  
  But other than some user studies that show a 1% difference in engagement, I don’t really buy that it’s a bad way to represent a menu.
  
  We’ve been using dropdown menus and sub-navigation forever…this is worse, why?
  
  Keep mission critical stuff visible. Everything else goes behind the hamburger.
Alex McCabe

This is how I solved it: http://i59.tinypic.com/91b89e.png
- Gabrielle Gosha
  
  Thanks for sharing Alex. What a nice and simple solution.
  - http://www.trivial.ly/ Nic Johnson
    
    This is now linking to mac-cleaner spam.
http://viii.in Vinay Raghu

Yeah and people not *getting* it is a little weak. It is ubiquitous and doesn’t take too much getting used to. The “Menu” approach is brilliant. But I’ve heard the “it hides content”, “it’s not accessible” argument before. Those are far more important and valid.
- http://thebeeobee.com/ thebeeobee
  
  But we’ve been using dropdown navigation and subnavigation forever. I don’t see a difference here. In fact, I think a hamburger menu makes things much more organized! Mission critical navigation can be constantly displayed and everything else can be out of the way in an organized place, rather than lumped in with more important things.
Kdub

It’s funny, this is the first time I have heard this icon referred to as the “Burger” icon … I always thought the three lines represented three line items of a menu … Therefore it made sense … But to the argument that its not the best UI solution because it hides content, the only thing I can say is that it really depends on the business need … The menu icon is not ideal to hide two or thee menu items, but when business needs dictate that the users have up to 10-20+ elements to act upon on a single page, it’s one solution that helps alleviate visual clutter and prevent overwhelming distraction from the most important part of the page, content and potential revenue generating CTAs
- Gabrielle Gosha
  
  Hi Kdub, I’ve never heard it referred to the “Burger” icon either and have always associated it with being the menu so called it such. You make a great point with the use of the icon depending on the business need. This would make it on a case by case basis. I didn’t even think of that. Thanks for commenting.
Gabrielle Gosha

Your right it isn’t a big issue but some people do have a gripe against it.

The icon is indeed used by major sites as well as new start-ups and appears to be the new status quo. But that doesn’t mean a new solution/design can’t be humored even if it doesn’t replace the current design.

In any case this article is meant to serve as a fun, creative exercise for designers and developers alike opposed to bashing the icon because there are plenty of those already.
- http://thebeeobee.com/ thebeeobee
  
  What people? I’ve seen some big name designers gripe about it on twitter and medium but that’s it.
  
  I just saw this post by QZ about their new redesign and they refer to the button specifically to talk about major features built behind it: http://qz.com/246831/quartz-has-a-new-look-and-for-the-first-time-a-homepage/
  
  I’m all for a better solution. I wasn’t trying to be a defeatist. I just know that like/enjoy the hamburger icon and how it gets things out of my way until I need them.
  
  Even Youtube has a hamburger drop down!
Liz

the best solution I’ve seen so far is a button that has the word “menu” in it with the 3 line hamburger icon under the word “menu”. Here is an example of the word “menu” above the icon: https://www.dmdc.osd.mil/appj/dwp/index.jsp Then you hit all 3 bases – all internet users know what a button looks like and know to click it, the text is for the users who don’t know the icon and the icon is there to teach them it means “menu”.
- Gabrielle Gosha
  
  Hi Liz, you’re right just using the word “menu” could really be the solution opposed to the three lines. Maybe if more websites adopt it then it would catch on. Thanks for commenting.
Trent Reimer

Appreciate this discussion, it does remind me of the old floppy icon debate.

Just to be that jerk who nitpicks… does the grid icon specifically represent a list of apps rather than a general menu? That is my understanding anyway, although if wrong I would appreciate being enlightened. I think they assume we will associate the grid with the little launcher squares we see on our phones.
- Gabrielle Gosha
  
  Thanks Trent, it is sort of like the floppy icon debate isn’t it?
  
  I think you’re right about the grid icon representing a list of apps instead of a general menu. Though I think you could also see it as a menu of apps as well but it is really about personal perceptions when it comes down to it.
yojimi

How about the sitemap icon? http://fontawesome.io/icon/sitemap/
- Gabrielle Gosha
  
  Nice share Yojimi. The sitemap icon could really work to show that there is a menu available.
Frederik Krautwald

If the interaction is supposed to show navigation, then the icon (if an icon should be used in the first place) should show navigation. This could be achieved with a compass icon or a ship’s wheel. Personally, I’d go for the compass.
- Gabrielle Gosha
  
  Thanks for commenting Frederik using a ship’s wheel or compass is rather clever. Like you I would pick the compass. Makes a lot of sense when you compare it to three lines.
  - http://www.nicholasjohnson.com/ Nick Johnson
    
    I’m guessing you two are too young to remember Netscape Navigator.
http://joshuachristensen.net/ Joshua Christensen

I think the whole debate is really kind of pointless. Most all of the articles I have seen about how people have seen diminished visits and whatnot since implementing it typically have extremely low traffic to begin with. Most of these are referring to site that get maybe a few thousand page views a month and not only that, their traffic is very unstable.

More importantly, almost every “study” was done along with a complete redesign of the site in question. This also begs the question as to whether or not there was other poor UX involved in these reduced numbers and not the menu itself.

That’s not to say that these small traffic sites aren’t important or that their loss in traffic is any less annoying. However the small numbers make it very hard to make a case for exactly why something has gone amiss.

I personally work with a large ad agency (I’m the lead UX Developer for the office) and deal with a number rather large brands whom get in the several million page views monthly (one client daily) with very little deviation on a month-by-month basis. Three of our clients implemented the hamburger style menu within the last two years and none of them have had any drop in traffic or other issues to note because of the menu system. The biggest issue that most of them have faced when it comes to mobile is that for a few of the clients, their content has so much breadth and depth that it makes it very difficult to effectively organize and display on such a small device.
seanom

I think there are some apps that handle a similar issue quite well, the Jamie’s Recipes app on iOs devices, hides the search functionality at the top of the screen. http://a4.mzstatic.com/eu/r30/Purple4/v4/01/da/c9/01dac907-599f-fea3-389f-4ffe56abc678/screen568x568.jpeg

By default you do not see the search bar but pull down(as if to scroll past the top of the page) reveals the search bar.

I think this would be a nice alternative, you get the content straight away but scroll up and you would reveal the menu.

I’m aware this is sort of possible with anchors but it would be nicer to have a similar ability to use some of these scroll features that mobile devices have.
- Gabrielle Gosha
  
  Thanks for sharing seanom. I have never seen this before but it does look like a good workable solution.
http://www.glennphilp.com Glenn Philp

Honestly I think the issue is usage. Meaning if you have a off-canvas menu on the left then the icon should be associated with the left side of the screen; vice-versa for the right off-canvas. If you are creating a drop-down menu then User Experience suggest a downward facing arrow or chevron (http://fortawesome.github.io/Font-Awesome/icon/chevron-down/).

I am not sure of the number of new web users each year, but my guess is the majority of American’s are on the web. And based on the number of visitors to sites such as Facebook, Google, New York Times, CNN, BBC, etc. I am sure people have learned what icons mean. Can small web sites start a new trend absolutely, but when you are trying to help guide people through your site you will most likely adhere to the standards set by the big-boys.

I personally think you can use the 3-line/text justified “aka Hamburger” (http://fortawesome.github.io/Font-Awesome/icon/bars/), unordered-list (http://fortawesome.github.io/Font-Awesome/icon/list-ul/), or grid-list (http://fortawesome.github.io/Font-Awesome/icon/th/) icon to represent your sites navigation. However, I think it is important to associate the icon with the type of list your are presenting. I even think Google’s off-canvas icon which is like the BBC Weather app above is appropriate as it provides direction of which side the off-canvas is on.

It also makes since that flat-icons don’t provide enough insight that they are clickable, so wrapping the icon with a outline whether circle or square is more useful. I do believe that a flat-icon with plenty of white-space will signal to the user that it is at least clickable/touchable. Associating a word like BBC does on their mobile site, which has a downward chevron gives clear indication of what the user should expect.

My biggest complaint is beyond the scope of this article, but having duplicate icons creates serious confusion. An example can be seen at m.bbc.com/weather. After entering your location you should see 2 different magnifying glass, indicating search. However, each of these search actions are completely separate from one another. So when you have for example a left off-canvas and a right off-canvas I would highly suggest using different icons to represent each.

Another icon I forgot to list above is the flow icon (http://fortawesome.github.io/Font-Awesome/icon/sitemap/) which could open an off-canvas menu containing your site-map. Each person can interpret icons differently, once we start a standard as designers and developers we should adhere to those best practices.

This challenge could and should be taken further to include the share icon.

Which share icon makes more since:
http://fortawesome.github.io/Font-Awesome/icon/share/
http://fortawesome.github.io/Font-Awesome/icon/share-alt/
http://fortawesome.github.io/Font-Awesome/icon/share-square-o/
- Gabrielle Gosha
  
  Glenn you make a lot of great points. I think usage is a big part of this issue and as you noted each person can interpret icons differently. As far as duplicate icons this has always confused me when they do two completely different actions. Perhaps a slight modification in the magnifying glasses would better distinguish the use.
  
  But this challenge is certainly opened to other icons but perhaps an article can be generated just for the share icon. Thanks for your thoughtful comments.
Reinier Kaper

I think the hamburger icon is the perfect example of overthinking things.

The use of an icon alone will always stir some debate, because it’s also tied in with a person’s background and culture.

Where an “X” shape has a very broad similar meaning, other shapes might have a lesser cultural base.

Personally, I always use the “hamburger” icon next to the word “menu” or “navigation”, because I rarely find it interferes with a design.

Alternatively, how about an icon that represents a table of contents or an indented list? But then again, this might not be universal enough.
http://www.trivial.ly/ Nic Johnson

The menu icon is a convention. Everyone knows what it does (rarely used extra features). It’s in line with the principle “don’t make me think”. I see no problem with it.
- Hugh Briss
  
  It’s the opposite of “don’t make me think.” An icon in computing is supposed to be a visual representation (can you say “skeuomorph?”) of an action you can take that can be used as a mnemonic for faster recall after learning it. This thing is literally just three short horizontal black lines. It visually represents nothing. It does not map to a mental concept that has anything to do with “menus” or “navigation.” There is no mnemonic value to it. In fact, it looks more like the “list view” in OS X Finder.
http://www.peaktwo.com Mike Granetz

Piping in on an older post here…We debated using the traditional three-lined hamburger menu in the launch of our new site and in the end opted for a alternative solution that we felt added value to our design theme. While the three lines would have served the pedestrian purpose, the use of a carabiner clip – with the same placement (and for the short-term, text cue) – adds visual impact and interest to the look & feel. Will we have users that might not figure it out at first, possibly. Will our target audience have an issue with this? Probably not. As with all design, functionality should be the priority, but a little fun with usability to support overall objectives isn’t such a bad thing. Only our metrics will show the real results. Love to know your thoughts – our non-traditional burger http://www.peaktwo.com.
http://instagram.com/cleverclicker Sonu Kunnath

Only issue i found with the ‘hamburger icon’ is It’s position. Most often this icon is placed on the Top left side of the screen in app or webpage layouts. It will be handy for people who are left handed but not for someone like me who is Right handed. So it depends on person to person. Otherwise i don’t see the point of arguing.

Also this is the second article written by you I’m reading and you write really well. I’m gonna go through all of your articles. Thank you for all these awesome writeup. :)