I feel like I’ve been in an endless loop of UX and UI debates of when and where to use burger menus over the past few years, but I can understand both sides of the argument. Are burger menus good or bad, and why?
So I’ll start off this blog with the negatives and then try to redeem myself with positives about Burger menus. A majority of these are UX opinions and facts that I’ve experienced.
- They hide content
Using a burger menu means it requires two clicks to access content, you can’t see what pages are available until you click on the burger menu. This isn’t great for users who want fast access to content and doesn’t help them to immediately understand the page that they’re viewing.
2. They can be missed
A small icon in the top right/left side of the web page on large screens can often be missed or misunderstood. Recent user testing showed that 70% of the users thought that it was just an icon or simply missed it completely.
3. They can be buggy and laggy
Fancy transitions when you hit that juicy burger menu can really liven up your design and they look great when presenting to clients, but in real terms: when the site goes live, users with low bandwidth and dated computers end up hating these transitions and struggle navigating to the pages that they need. A majority of which, often drop off the page as they’re sick of waiting!
4. There’s no flow
Clicking twice each time you want to access a page can be a pain for users who just want to quickly browse from page to page. Once entering an inner page, to find another they have to go back and forth to a burger menu to see what else is in there, which becomes a chore to access content.
So let’s look at the positives then, why are burger menus potentially good? The majority of these points are UI opinions and facts from my experience.
- They look damn good.
They just do. To a UI designer: clearing the space of the cluttered top navigation and condensing it all into one single icon, is heavenly. It gives so much more room for possibilities with the hero, and layout of each page. It guges the freedom to create a truly immersive experience. The icon, although tends to be relatively the same universal icon (3 single lines stacked on top of each other) doesn’t always have to be identical to other apps and website that use it. Change the background colour, add a shaped border, place it in a different corner, add nice transitions to the lines to make it fun – as long as the purpose and functionality is right, you still have complete freedom of how it looks.
2. They’re familiar.
One of the excuses that used to crop up a couple of years ago was the fact that ‘no one knows what the icon means or what a burger menu is” but those days are finaly gone. Every smartphone user knows what the icon represents, with usage on every single app on the App Store, it’s completely clear what this icon does when you click on it. So using it on desktop and tablet designs, people will understand (surely) what it is there for? Right?
Developers and UX/UI designers when working in a responsive modular approach always go-on about keeping things consistent. Material design, GUI kits…etc all lead to the same message of “creating one style and sticking to it for all pages of the project”. So (surely) if on mobile you’re going to introduce a burger menu, then why not keep it consistent and put it on tablet and desktop devices too? No one could become confused when switching devices as they both have the same styling and functionality, right?
4. They’re responsive
You have no issues with screens not being able to fit all of the top navigation items on certain break points when the client keeps adding in extra pages – the burger menu sits snug in the corner, and pins to the edge of the screen, causing absolutely no issues responsively.
5. They’re touch-screen friendly
Depending on however you set your breakpoints and the styling of your top navigation text, it can often be annoying on touch-screen devices (like iPad Mini’s) to tap on links. Burger menus avoid this, click one simple button, and be provided with a screen full of touch screen friendly links.
Overall I suppose it’s just another debate between UX and UI, I don’t think there is a right and a wrong way.
Personally I think it’s a matter of opinion. Mine: the pros do outweigh the cons for me I must admit, I do love a good burger menu!
I suppose in the end it all comes down to the type of website that you’re designing and whether or not it suits your vision for the design.
A) If you’re looking to create an impactful website that’s truly engaging, that takes up the entire screen to immerse the user and create a great experience to pull them into the hero banner, then a burger menu is the way to go because it gives you the freedom to do so.
B) If you’re creating an informational website such as an e-commerce or brochure website, then a full navigation would be best as it provides access to all pages easily for users who want to browse and learn.
Let me know your thoughts and opinions.
Thanks for reading.