This post touches on the pros and cons of the Hamburger Menu Icon, as well as its history, and looks forward into its possible future.
I’d like to talk about hamburgers. Hamburgers are delicious. I think pretty much all carnivores would agree to varying degrees. Simple. Easy-to-make. Yummy. But there is a new kind of hamburger taking (taken?) the internets by storm and you might’ve seen it. Those 3 lines stacked on top of each other in the upper corner. It’s an icon. It means “menu.” Some of us in the business call it a hamburger because it looks like a bun-burger-bun combo. Get it? Well not everyone does. And that can be a problem. A delicious, mouth watering problem.
1980’s! So Hot Right Now!
Purely out of necessity, those 3 little lines began appearing on mobile devices (and beyond) to represent menu and to save space. What people don’t know is that the icon itself was actually originally designed by Norm Cox for Xerox in the early 1980’s as a symbol meant to represent a “container for contextual menu choices.” His words, not mine. So it’s not like it came out of nowhere, it has history behind it. But it makes sense. A menu is a list of things. And the hamburger icon looks like a written list.
After lying dormant for decades, it popped up once we started using our phones to view websites. It seemingly came into prominent fashion on mobile and tablet-like devices once Facebook began using it in 2010. I get why, It’s kind of difficult to have a 7 item menu bar going across the top of your tiny mobile devices. For better or worse, something had to be done. You only have so much space to work with and an icon seemed to foot the bill. For designers like me, it was perfect. Who doesn’t like a simple solution? Everything wrapped up with a tiny bow. But is that a good thing? That’s the million dollar question. Does the icon have enough recognition to really work? And should we even be using it? It depends on who you ask. Yes! No! Maybe!
Yes! It’s Great!
Let’s face it, websites are cluttered. Menu bars, side navigation, social media links, search boxes, carousels, logos, multiple calls-to-actions, feeds and the list goes on and on and on. And unfortunately, all of them are vying for your attention. So if the opportunity presents itself to simplify one of the more complex parts of a website, we (designers) jump at the chance. I’m not going to lie and say it’s always about functionality or usability, it’s not. At least not totally. It’s also about aesthetic. It’s about wanting to try something new. It’s just trying to clean up the mess we’ve made. Simple is better (looking). Navigation can get pretty complex in and of itself, so putting all that behind an icon is a visually elegant solution to squeeze on your phone. Not to mention the idea that it allows us to focus more on the content of a page by removing a point of “distraction.” Something I believe we should be doing anyway.
No! It’s Terrible!
UX designers on the other hand, well, let’s just say they aren’t the biggest fans of it. I can point you to a virtual cavalcade of people telling you how it’s just not a good solution. It’s hiding navigation. It’s adding an extra click where one wasn’t needed. It’s forcing your users to “work” for their navigation. Their rallying cry is “out of sight, out of mind.” It also goes against the grain of their particular job description, which (according to that sage called wikipedia) is to “improve the usability, accessibility, and pleasure provided in the interaction between the user and the product.” That product being a website in this case. So “hiding” a key component of accessibility is a big no-no. Not to mention they tend to believe that no one knows what the hamburger icon signifies. Is the icon familiar or descriptive enough to actually be, y’know, useful? These are all good arguments, but I don’t see it as a black and white issue.
Maybe! In Time!
Everything’s eventual, right? Meaning, sooner or later everything will come to pass. Good or bad, for better or for worse. Maybe not today. Maybe not next week or even next year, but y’know… eventually. I’m a big fan of that belief. (It’s probably the Hippie in me.) The argument that people don’t recognize the icon may be true to an extent now, but the more it is used the more people become familiar with it. Right? And over time it gains enough steam to be easily recognizeable. It’s a simple enough pattern to see. And the only way for that to happen, is for designers and UX designers to push past all the arguments and just do it. Because eventually, it will become instantly recognizeable. A perfect example is the magnifying glass icon to represent search. Back in 2005, the argument was made that you need a box with the word “search” in it for people to understand what it’s purpose was. Fast forward to 2014 and oh hey guess what, people recognize the magnifying glass to represent search. And why? Repitition. Rinse and repeat. Bucking the research and pushing forward with something new. And eventually, it became expected. And I believe that is already happening to the hamburger icon. It just needs time to live and breath for awhile longer.
Now the whole “extra click/hiding navigation/out of sight out of mind” argument is completely valid, but as the old adage goes “necessity is the mother of invention.” And when you have extensive navigation, out of necessity you need a simple answer on a small device. There’s no way around it. Every solution I’ve seen to argue against the hamburger revolves around a tab/icon bar of some sort. Unfortunately not everyone can cleanly have their menu items be simple, single word descriptors. Sometimes a single main navigation element has a long titled section like “Engineering & Environmental Services.” Imagine if there are seven of them? Eeek! It can be a lot. You only have so much real estate and when you need a solution to such a navigational cluster, the hamburger works quite nicely… out of necessity.
In the end, as designers (graphic, user-experience, or otherwise), it’s our job to make sense of it all, organize it in a way that makes sense (or to accomplish the goal at hand) and present it in a way that is appealing. Sometimes it’s easier said then done. Sometimes you have to go against the grain and sometimes you have to fall in line. There is no “one-size-fits-all” solution for each and every instance. And that’s ok. Two wrongs don’t make a right, but three lefts do. You’ll get there, eventually. Everything does. And that’s OK.