26 May
Majority websites have more than one page and for that they need a menu. It’s a standard website element and one of the few things almost all websites have in common.
Your menu is often one of the first things visitors look for on your website, since it’s the easiest path to learning what the site contains and how to find the parts of it they care about.
The hamburger menu has gotten a lot of flak over the years, some for justifiable reasons and some not. One reason for its controversy is simply that it’s so darn popular on all kinds of apps.
What is a hamburger menu?
The hamburger menu is the common term used to describe the little three-lined icon used on many websites and apps to represent the larger menu. It most often shows up in the top left corner (but not exclusively), and clicking on it opens up the full menu.
Using a hamburger menu can also be an asset to the desktop version of your website, for example if you want to bring the focus to impressive fullscreen visual elements, or if there are some menu items that are less important to display than others.
Hamburger menu pros
1. Hamburger menus take up less space
Using a hamburger menu will allow you to have a squeaky clean website. By collapsing items behind the menu, you can avoid overloading or distracting users with too many options.
This is the reason hamburger menus exist to begin with, and why most websites that deploy them choose to do so. When creating a website, you have to figure out how to pack all the important information your visitors may need in a small amount of space. Hamburger menus are an efficient way to get more navigation options into a smaller package.
2. They allow for a cleaner webpage
Many visitors (and designers) prefer minimalist aesthetic websites that are cleaner and only include the design elements required for basic communication and functionality. When a website has too many images and information packed into a small screen, it can look sloppy and confusing. Using a hamburger menu cuts down on how much visitors have to process when taking in your web page at a glance.
3. For menus with a lot of pages, they mean less clutter
If you have a simple website with five pages or less, including them all in your main menu on the desktop may not be a visual challenge. But for websites that have a lot of different pages and categories, figuring out how to communicate all that to your visitors without overwhelming the page is a design challenge. And an overly complex menu can end up distracting visitors from the main part of the page you want their attention on.
For instance, on an ecommerce website, you want them to focus on your products and information that makes them more likely to buy. But if your eCommerce store has products that fall into a dozen or more categories, you also want visitors to be able to easily find the ones they’re interested in. A hamburger menu gives you a way to make sure visitors can find the full list of categories, while still designing each page to draw attention to the product you want them to focus on.
4. By now, they’re familiar to most people
Any design element that contains functionality needs to be intuitive to visitors, or it defeats the purpose. Using a hamburger menu to save space on your web page would backfire if your visitors couldn’t figure out to click on it to see their menu options. That was a valid concern a few years ago, but by now most visitors know what a hamburger menu means when they see it. You can reasonably assume that they won’t leave your website confused about how to find the menu.
The emphasis on most here is intentional though. Hamburger menus are intuitive to anyone who uses a smartphone regularly, or anyone who spends enough time online to be used to common web design elements. If your target audience includes people who likely don’t spend much time on a mobile device or browsing the web, there’s a chance they may still be baffled by your hamburger menu. As in all things web design, think first about who your audience is and what makes sense for them.
5. You can use them to remove distractions, without losing functionality
Hamburger menus are often used to replace a website’s main menu, but that’s not their only possible use. Some websites use them alongside their main menu to provide additional options or more information that doesn’t fit easily on the main page.
By removing visual distractions from the page, you can more effectively keep visitors’ attention on the main piece of information you most want them to notice. A hamburger menu can be a tool to help you do that, without removing the other options visitors may want to take entirely.
Hamburger menu cons
1. Harder to reach = lower click through rates
When your main menu is visible on the page at all times, every visitor can quickly see what the main category and page options are without doing any extra work. When you put all that information behind a hamburger icon, suddenly only a subset of visitors that make the choice to click will have that information.
That can make finding what they’re looking for a bit more difficult and unintuitive for visitors. And it could mean some visitors don’t seek out pages they’d be interested in if they knew they were an option, because they never see a link to them.
2. Creates extra steps for the user
Hiding information that you’d prefer the user to see right away is inefficient because they’ll have to go through more steps to get there. The case is different for each individual, and you might find that the benefits outway this disadvantage when implementing a hamburger menu into your site.
3. People may overlook it
Part of the appeal of the hamburger icon is that it’s small and out of the way, but that can also be a weakness. That’s what makes it so easy to overlook completely. Many of your visitors, especially those that spend a lot of time on mobile devices will instinctively know to look for it when looking for menu options.
But your audience may well include people who don’t automatically seek out that hamburger icon. For them, hiding your menu behind the icon could mean they never notice your menu options, and don’t bother exploring your website as much as they may have otherwise.
4. It’s harder to include tiered menus
Many websites not only use categories to organize their pages or products, but also have a number of subcategories. A pet store may have animal types as its main level of categories (dogs, cats, rabbits, etc.), but then subcategories under each for the types of products they sell for each animal.
When your main menu is spread across the top of the screen, it’s easy to add those subcategories in the dropdown menu. With a hamburger menu, it’s possible to add subcategories underneath each main menu item in your list, but the design structure doesn’t lend itself as naturally to this type of tiered menu. If your website structure includes a lot of subcategories, a hamburger menu might not make as much sense for you.
5. It can reduce engagement.
A 2016 study looked at how likely visitors are to actually use hidden navigation options, like those behind a hamburger menu. They found that desktop users only did so in 27% of cases, and that they used more visible menus almost twice as much. On mobile, hidden navigation options fared better, but were still outperformed by websites that used a combo of hidden and visible navigation options.
Should you use a hamburger menu on your website?
Knowing general pros and cons is useful in measuring the choice for you, but ultimately it depends on what makes sense for your audience. And if you’re not sure, the best option is to test.
While the study found clear evidence for avoiding hidden menus, a more recent test reported in CXL found that use of a hamburger menu actually increased revenue for an ecommerce business. In this particular case, the website’s visitors predominantly used the website on mobile devices. And they found that putting the icon on a pink background and adding the word “Menu” got even better results.
Does that mean you should add a pink hamburger menu on your website right now? Nope!
They decided what menu variations to try out based on their current website’s design and data on how people were viewing the site. To figure out what makes sense for your website, take these 3 steps:
- Look at what your current analytics tell you about your visitors: who they are, what devices they use to visit your website, and how they interact with the site now.
- Based on your current data, develop a hypothesis about what menu options you think may perform better than what you have now (if any).
- Set up A/B tests to see if your hypothesis is right.
You never want to add a design element to your website because you heard it’s trendy or you feel like you’re supposed to. Always consider what makes sense for your particular site and, even more importantly, your visitors.
Alternatives to the hamburger menu?
You must know that user-experience is the key to the success of a mobile app, wherein every single usage on the app or website gets elevated further. If you think user experience is only about the features and functionalities then you are hugely mistaken, as design elevates every aspect to another level.
There are multiple options available in the design space to pick from, which can help the design world to experience the best of the strategies.
- Tab Bar Menu
- Full-Screen Navigation Menu
- Scrollable Navigation Menu
- Progressively Collapsing Menu
Tab Bar Menu
You should know that the tab bar is a navigation menu, that helps in organizing content or landing pages by tabs. Within the web design and apps, this menu option has become super popular. It allows visitors to see the navigation options right from the start. However, there are few guidelines to be followed for creating a Tab Bar menu…
- One of the options in the tab bar menu must be active;
- To stand out the active tab, include some contrasting color;
- Keep the first tab as the home page;
- There should be an order of the tabs;
- UI/UX designer needs to arrange tabs logically and related to the content;
- With every navigation option, use icons with labels.
Although, the tab bar menu is similar to the hamburger menu, in the context of hiding content. But, with the tab bar menu, users get 4 or 5 visible top-priority navigation options on the screen all the time, which elevates the experience.
Full-screen navigation menu
A good question indeed! The full-screen pattern menu is solely devoted to the home page designed for navigation. Such a menu is hugely beneficial for unleashing in-depth information without disturbing the user experience. Within a full-screen navigation menu, to view other options, users need to tap or swipe while scrolling up or down. You should know that this type of menu is the perfect choice for the websites focusing on a task or direction.
Scrollable Navigation Menu
Are you catering to the long lists? Then the scrollable navigation menu is suitable for you. It allows your design to get different navigating options without creating a big distinction in priorities. If you are offering a service for the on-demand food delivery app, and willing to list the differences and larger list of restaurants, then a scrollable navigation menu will help you scale it further. It also allows your users to access the options to move from side-to-side. It goes without saying, but such a menu option is a perfect fit for the news, music, eCommerce, or restaurant categories. As it allows the users to explore more content with the scrollable navigation menu effortlessly and access services.
Progressively collapsing menu
Yes, this is another alternative to the hamburger menu, which is also referred to as the priority+ pattern menu. The reason it is picked by the UI/UX designer is due to the fact that it easily adapts to the screen width and allows users to view as much of the navigation as possible. It works just like the tab bar menu and lets the designers hide other tabs through a more button.
Wrap up
Every website is different, and deciding what will work for yours is up to you. Hamburger menus are one more design element to add to the possibilities for your site. They may help you do more with less in the space you have available, or you may determine they’re likely to be more confusing than they’re worth for your visitors. Whatever choice you make, keep your visitors top of mind and make sure you’re building a website that will work for them.