Hamburger Menu: Yes Or No?

Hamburger menu? What?

No, it’s not a burger with french fries and a drink. The hamburger menu, or the hamburger icon, is that button with three horizontal lines you typically see at the top corner of the screen on websites and apps. The icon opens up a side menu with a selection of options or additional pages.

‍

The icon was created by Norm Cox, an interaction designer for the Xerox Star personal workstation in 1981. Initially, it was an easy way to communicate to users that there is a list of items behind it. Almost 30 years have passed since then, and today, those three lines are typically referred to as the hamburger menu.

Why do we use it?

One of the worst things you can do when designing a website or an app is to overload your users with unnecessary icons, graphs, text, and everything else that creates decision fatigue. Thanks to such navigational tools as a hamburger icon, a lot of non-essential but still important information can be neatly tucked away into three simple lines at the corner of a screen. This helps to keep users from getting distracted from the core features and functions you want them to see – and it’s especially important for relatively small mobile screens.

Some research

Since its inception, lots of research has been done on hamburger menu usability. Here are some of the most prominent findings:

• 2007, research by Nadeau. The findings have shown that white space (blank or unmarked portions of the web page) allows for a better user experience while unnecessary elements (images, text, graphics, etc.) only hamper the usability.
• 2012, research by Luke Wroblewski. A focus group of 15 persons (25-55 y.o.) has revealed that the hamburger menu was completely unnoticed and confusing – they preferred to simply scroll down the web page to find the information they needed.
• 2016, research by Nielsen Norman Group. Qualitative usability testing of hidden menus (e.g. hamburger icons) has shown that they cut discoverability almost in half as well as increase task time and perceived task difficulty.
• 2019, research by Nielsen Norman Group. With new data on navigation, Nielsen Norman Group has found that complicated and confusing navigation directly affects website usability for the majority of users – and declines by 0.8% per year.

But there are alternatives!

It’s not a secret that sometimes navigation can be quite “heavy” and cumbersome. Luckily, we don’t need to reinvent the wheel in 2020, and there are some alternatives to not-so-perfect hamburger menus:

• Tabs: users still see all the menu sections and can get to every section with one click⁠
  ‍

• “More” button: if there are a lot of items, and some of them are less important, it’s better to gather them under a “more” button⁠
  ‍

• Scroll: research by Jason Anderson in 2017 has shown that users prefer to scroll instead of trying to understand what exactly they see on the screen

Summing up

The hamburger menu has come under a lot of heat recently and designers still debate how the icon affects website usability. Indeed, it may be suitable to use the hamburger menu in some cases, but the main goal of every designer is to make design invisible – you don’t notice putting up the kettle in the morning, do you? Design, and especially navigation, should be smooth, unnoticed, and as intuitive as possible.

Research in the field has shown that quite often it’s better to limit the usage of the hamburger menu when feasible and employ other navigational tools.

At Idealogic, we understand the limitations of the hamburger menus and believe that the icon can sometimes be detrimental to smooth and pleasant UX. However, users have become well aware of what those three lines stand for and are rarely confused by them – so when you’ve got a limited amount of space on the website, a hamburger menu may well be a viable option. But it’s always up to you, friends!

Good mood and cool designs for everyone!

‍