If the term “hamburger menu” only brings to mind what a server would hand you at the Stock & Barrel, let’s bring you up to speed. The three-lined button that you see on many apps and websites when using your phone or other smaller devices (and occasionally on larger screens as well) has come to be nicknamed the hamburger - it’s been referred to as the hamburger button, hamburger menu, hamburger icon and so on. The hamburger is typically a shortcut to a navigation menu that would take up too much screen real estate if it were visible by default.
<figcaption id="caption-attachment-3495" class="wp-caption-text">Not since the “receive bacon” meme have three little lines caused so much discussion.</figcaption></figure>
There has been a lot of debate lately about the use of the hamburger menu in mobile apps and websites. If you google “hamburger menu” you’ll find no shortage of articles and everyone seems to have a strong opinion. There is a contingent that despises the hamburger menu, although you will find that the majority of highly negative commentary is about the use of the icon in app development as opposed to mobile websites. Why is that an important distinction, and what are the benefits of the hamburger menu?
Custom is excellent - if you’ve got the budget.
Unless your site is built to display all of its information on one page, you’re going to need a navigation menu - and even many single-page sites have some sort of menu to allow users to quickly jump to different content segments of that page. Maybe one day web design will progress to the point where menus are no longer necessary, somehow replaced with a navigation mechanism that we’ve yet to think of, but we’re not there yet. Menus are how users find their way around your page, and generally the style of menu that’s used on the desktop version of your site won’t translate well to a smartphone screen. Small touch screens have different usability needs - and a functioning menu that users know how to use is crucial to your site’s mobile friendliness.
So why the hamburger hate when it comes to apps? Most mobile apps - at least most heavily used, quality mobile apps - are custom designed and built. Apps aren’t like websites; not every business needs an app. If a business has an app developed then they’ve probably got a good reason for it - and a suitable budget. Since every app is going to fulfill specific, individual needs and handle varying functions, there aren’t as many commonly used layout standards on apps as there are on websites. There is also a lot more need for highly customized layout design in app development.
Highly customized layout design is great in websites as well - but it’s also expensive. Having a customized, outside-the-box navigation menu might be a great thing but it’s not going to be a cheap thing. Even if you do have the budget for these kinds of customizations you also want to be certain that your navigation menu is intuitive, which brings us to one of the main benefits of the hamburger menu: people know what it does.
Hamburgers are Everywhere
We’ve had clients express concern that users won’t know what the hamburger menu means. Here are some facts to consider if this is a concern of yours.
The Facebook mobile app has been using a hamburger menu since 2010.
Google Chrome - not just the mobile version but the desktop version as well - uses a hamburger menu. In fact, many Google apps, including Google Play, Gmail and Inbox use the hamburger menu.
Just a few other popular apps that use the hamburger menu: Netflix, Amazon, Fandango, Spotify, Snapchat
Time Magazine uses the hamburger menu on not just their mobile website but their main desktop site as well.
Just a few big name companies and organizations whose mobile sites use the hamburger menu: Starbucks, Yahoo, IMDb, NPR, Toyota
Hamburger menus can be found on some of the most prominent websites, social media and mobile apps - and this has been the case for quite some time. Users who spend any amount of time on the internet or using internet based apps on their smartphones have almost certainly been exposed to the hamburger menu many times and are already well aware of its function. If you have concerns about the use of the hamburger menu, its recognizability shouldn’t be one of them.
Is the hamburger perfect? No. Is it the best solution 100% of the time? No. What it is, however, is a recognizable, simple and intuitive solution to menus on mobile devices. If you’ve got the budget to have a customized solution designed for your site, that’s excellent. But even many high dollar, highly custom sites built for huge corporations use the hamburger menu, so don’t nix the concept from word go. Sometimes all you need is a good hamburger.
<figcaption id="caption-attachment-3495" class="wp-caption-text">Not since the “receive bacon” meme have three little lines caused so much discussion.</figcaption></figure>
