If you browse the internet on your phone, you’ve probably noticed that what you might be used to seeing as a full navigation menu on your desktop has been replaced on your phone as three, parallel, horizontal bars.
This is the “hamburger icon,” so named because it (unintentionally, we presume) resembles the iconic ground beef sandwich (in particular, a double-decker), not because it has any association with fast food.
Where did the hamburger menu come from?
Due to its recent popularity on mobile websites, you might think this simple icon was cooked up with the invention of the smartphone or with the advent of responsive design, but it turns out the hamburger menu (or “air vent” as was its original nickname) was created by Norm Cox when designing one of the very first graphic user interfaces for the Xerox “Star.”
Cox designed it to represent what it would show when you clicked it: a list of options. On the limited pixel space of the Xerox “Star”, graphic designers sought to be as minimalist as possible, and aimed to make icons as easily identifiable as road signs.
Many of the standard icons we’re used to using on computers in our everyday life come from that era of graphic interface design.
That was all the way back in 1980. But it didn’t really take off until about 30 years later when Apple added it to the Voice memo app back in 2009. With adoption by a few other trendsetters, the hamburger menu soon came to be as commonly understood as a STOP sign.
The history comes full circle as the hamburger menu now fulfills the same basic task it was designed to: represent an icon that could be clicked (or tapped on a smartphone) to expand a list of options that otherwise would remain hidden. And its simple design is attractive now for the same reasons as it was then: it quickly conveys its purpose using a minimal amount of screen space.
Should I use a hamburger menu?
The hamburger menu has both its fans and its detractors. And that’s because as with every design choice, it has its benefits and its drawbacks.
The downsides are worth considering, and shouldn’t just be brushed off.
Not recognizable
To begin with, one issue with hamburger menus is that they might be confusing for some people. For less tech-savvy web users, the three lines haven’t yet been drilled into them as code for “click/tap here for a menu,” and so having your entire site navigation tucked inside a hamburger menu might be losing you some visitors.
Overstuffing
Next, it’s very easy to “overstuff” your hamburger menu. Because what’s one more item in a list? Once you’ve added that fourth item, the fifth one doesn’t seem like much more, and when you’ve hit six, why not seven?
It’s very easy to just stuff your hamburger menu full of options rather than thinking through how the information on your website is hierarchized and how to create the optimal way of navigating through it.
Too many clicks
Another issue with hamburger menus is the space you gain comes at the price of a click, and every additional click a visitor has to make to get to where they want to go, the less likely they are to actually end up there in the end.
Similarly, when “collapsed,” the hamburger itself doesn’t provide any actual information. You can’t tell at a glance what items are in the menu, just that a menu with a list of options on it exists.
Benefits of hamburger menus
Nonetheless, on the plus side, using a hamburger menu offers a clean, minimalist, and sleek design to your mobile site. It provides a way to give your users an efficient way to control their navigation on your site, as opposed to relying on an endless scrolling design that requires your visitors to look harder for the information they want.
You can avoid many of the draw backs by being sure to keep your menu options to a minimum, and finding ways of incorporating other options into your website’s navigation that don’t involve resorting to expanding a hamburger menu.
Try it yourself
If you have some free time, we suggest playing around with this in your website. If you need a sandbox to play around in, feel free to spin up a Simple Hosting instance and try it out.
Tagged in Simple Hosting
