Web Design Debate – Are Hamburger Menus Grilling Your Website?

Let’s talk business. There’s no easy way to say this, but the humble hamburger menu on your website is causing more problems for your site than you think. Not only is it figuratively flame-grilling your SEO efforts, but it’s also making a meal out of your UX, too. Music giant Spotify recently dumped their hamburger menu on their mobile app and had some pretty frank things to say about its relevance. So, what does that say about web designers and companies who are choosing to lead with the hamburger menu on desktop sites? (Have they done sufficient UX research?)

A trend on desktop design that started back in 2016 (which actually originated in Xerox Star from 1981 and saw web designers utilising hamburger menus in exploratory fashion in the extremely new era of website design) has reappeared now, apparently in vogue. In a bid to be part of the ‘mobile-first design‘ movement, web designers quickly jumped on board the hamburger menu bandwagon for desktop websites, and at the time, it was considered innovative and progressive. But now, it’s just hurting your SEO and making for a poorer user experience.

If you don’t know what a hamburger menu is, it is a navigation menu substitute that is often found in the top corner of mobile versions of websites and apps. Given mobile and app sites don’t have the screen size to account for several navigation titles like a desktop site does, screen navigation is condensed into an icon that hides the titles. Presented as three horizontal lines, the hamburger menu allows for a clean display and efficient browsing for the user on a mobile, app or tablet device.

Now that we know what a hamburger menu is, let’s discuss the five reasons why it hurts your SEO and disrupts your UX.

1. Google can’t see your navigation titles

SEO is more than just words on a page, just ask your web development company. Google takes into consideration content, relevance and UX. That means your navigation (menus and internal links) contributes to all three key pillars and all must work in symbiosis for users to rank well in SEO. If content relevancy is a flesh wound, then UX and navigation is a headshot! If Google can’t see the navigation titles and there is not much supporting text, then the keywords on your website might as well be invisible. As the saying goes, ‘out of sight, out of mind’ and in this case, it’s out of sight, out of mind and out of search efforts. 

2. You are hiding what the user can find on your website

A great case study by Nielsen Norman Group (NNG) with 179 participants found that hidden menus, such as hamburger menus led to worse discoverability on both desktop and mobile devices. Put simply, a website should enable, empower and educate a user, not confuse them. Whilst a hamburger menu might look elegant and minimalistic, it is also harder to find. With web designers really testing the boundaries of creativity nowadays, menus are even being placed in the obscure corners of web pages to promote an illusion of bigger visual real estate. A confused user is just going to bounce off your site quicker than they arrived and that’s like slamming the door in the face of a sale or business lead. Which leads us to our next point.

3. Higher bounce rates, lower dwell times

Two key top-level metrics in tracking the performance through Google Analytics are bounce rate and dwell time. A bounce occurs when a user lands on a page on your website, and navigates away from the site after viewing only one page. Dwell time is also referred to as the average time on site, and it shows the average time a user spends on a website. It is the duration between the time the user clicks on a website and when he/she leaves. Therefore, if a hamburger menu is confusing a user as per above and causes them to leave sooner than expected, it’s going to hurt these two key performance indicators. For businesses and marketing departments who use those metrics to measure success, it’s worth noting hamburger menus can seriously impact those measures.

4. You are adding an extra step to the process

Any additional steps involved in website navigation often tends to remove the intuitive nature of its purpose. Sure, a hamburger menu looks cleaner and keeps things tidy, but you’re essentially demanding an additional click for them to view the vital content, prolonging the navigation journey. Think about those on the go or on the rush, they don’t have time for the hassle!

Allowing a user to view the primary navigation, and hover to reveal a secondary menu or even a mega menu for larger-scale websites allows a user to take immediate action, which is often an intuitive one. Websites should aid user journeys and streamline the navigation to the appropriate call-to-action, effectively increasing the chances that a user has a good experience and feels more inclined to go with your service or pick your product. Remember, content hierarchies exist to simplify the process of locating content, not displace it.

5. There’s a demographic out there who don’t know about the hamburger menu!

Consider this statistic: Only 52% of users over the age of 45 even know what the hamburger icon means. That means for almost half of that demographic, those three little lines have absolutely no significance. Don’t discount this demographic and their importance for traffic to your website. So as you can see, this really is the hamburger with the lot…of issues! That is, there are a lot of SEO and UX limitations to consider. We recommend reviewing your analytics and even consider conducting user validation testing to see if your hamburger menu is working for you.

Now, we must point out that we do understand for some businesses and companies that the hamburger menu is relevant. Particularly if SEO is not important or if you’re going for more for a minimalist, designer or portfolio website. To be clear, “mobile-first design” itself is not the issue. It is, and it does serve a purpose. All websites should be built with mobile responsiveness in mind. The issue however, has been good mobile design, being transplanted into a desktop design, where it does not belong. Screen space on mobile is a commodity, but that’s not to say the same logic relates in the desktop space.

In short, ‘mobile first’ does not mean ‘mobile only’. Just like fast food chains, hamburgers are convenient.

They just might not be the healthiest for you, or your website.