Within the past few years, a website and app navigation trend deliciously named the “hamburger menu” has come into vogue. The name comes from the shape of the three-lined button, which was originally part of the interface for the Zerox Star, a computer from 1981. You’ve most likely seen them on websites and in apps since 2010. Since that time, the Internet has debated (so much, plus more) about whether or not hamburgers are healthy for your website.
One argument is that it is the designer’s “lazy way out”; that the designer can simply hide navigation via a hamburger menu and call it done. Another argument is that the burger menu is an elegant way to present the navigation and is an opportunity to inject delight into design. The root of the issue is how using this type of interaction design pattern affects a user’s ability to understand and use the navigation in the way it was intended.
The Hamburger Menu: Nutrition Facts
According to Moovweb data, there are still users who have no idea what the hamburger menu is. Simply pairing the icon with the word “menu” can increase interactions by 61%.
James Foster of Exis ran multiple tests last year. The first concluded that the look of the hamburger icon, itself, affected whether or not it was even clicked, and that behavior on desktops differed from behavior on mobile devices. The second determined (among other things) that iOS users were two to three times more likely to tap a menu icon than Android users. The third showed that using the word “menu” was more effective at getting people to interact and show the menu than the hamburger icon by itself.
So should your website go on a diet and cut out the burger?
On desktop devices, absolutely; on mobile devices, maybe.
However, there are many factors that you must consider when you create the blueprint for your website’s navigation and both of the arguments mentioned above are valid reasons to accept or reject its use. It comes down to the wheres, whens, and whys of the menu button’s usage.
Building a Better Burger
First, consider the number of important and necessary navigation items you have for your website. If you only have a few — 3 or 4, for example — a hidden menu may not be necessary, since that small number of navigation items can easily be scaled for mobile devices. If you hide your content behind a menu, your users may not realize its there: Out of sight, out of mind.
Next, compare the navigation icon to your website as a whole. If your navigation icon clashes with other elements in your website, your users may not be able to find or use your navigation, which affects every page of your website.
Finally, review your website’s information architecture and find patterns in the types of information you provide. What’s important enough to be visible? Having better, more intelligent grouping of your menu items will ensure that your navigation makes sense, even if you choose to forego the hamburger icon completely. Let your website’s users make these decisions for you; give them what they want.
It’s About Goals
Carl Johnson, web developer for the Atlantic, says the burger debate is really a discussion about goals. "The hamburger can lead design teams astray by letting them avoid making hard choices about priorities," he said. "What's more important: showing channel navigation or meta-pages? Well, let's just shove them all into the hamburger menu because they're all top-top priority!"
All-in-all, it’s about your users and how you want them to flow from page to page (or off of) your website. Find this out, and you’re all set.
Now where’re the fries?