Web Development Trends: The Hamburger Menu Icon

Should you or shouldn’t you use a hamburger menu?

Bring up the topic of the hamburger icon in web design (three lines stacked on top of each other that resemble a hamburger) and you’re likely to get various responses. Some think it should be killed off while others think it could still catch on. Killing it off may be a bit extreme, but it is ever going to become universally accepted like the floppy disk save icon?

What is the hamburger icon?

In the graphic above, you can start to see where this icon got its name. But besides the name, the hamburger icon is most commonly used on mobile sites (though it’s popping up in desktop sites as well) as a way to ‘hide’ the navigation and maximize the limited screen space for other content.

Why the bad rap?

Hamburger icons don’t necessarily have a bad rap because of their name or design (though some may argue that is exactly the reason), many in the design / UX community aren’t fans of the icon because of how it is implemented. Those in the design community argue that hiding your navigation behind a click / tap just adds extra steps for your users to hunt for content on your site.

It can also be argued that a hamburger menu is a somewhat lazy way to converting your desktop site into a mobile site by just dumping everything into a hidden navigation instead of going through and strategically thinking about what should be available to your mobile users.

Another reason many don’t like the hamburger icon is that it’s not universally recognized as a navigation icon, leading to confusion of users. Some companies have taken to adding the word ‘menu’ next to the icon to insure users know what is behind the click.

What’s the solution?

Some argue that a tab navigation at the bottom of the screen that highlights the top 4 - 5 items is better for user experience while others think that eventually, if used enough, the hamburger menu will have enough exposure to be easily recognized as navigation, therefore improving the user experience of a site. Facebook’s mobile app has done a somewhat hybrid approach of a tab navigation and a hamburger menu.

In the end, you need to pick the solution that is right for your project. If your site does a good job of displaying the content users need, a hamburger menu might be a perfect complement that can expand to show options that are not commonly needed when viewing your site (think app settings or user profiles). If users on your site are constantly jumping around between a few sections of your site, a tab menu at the bottom (or a hybrid like Facebook has) may be a better solution. Talk to your users and conduct A/B tests of your site to see which option works best for you.

The hamburger icon has its place in mobile design, when used correctly. No need to write it off just yet!