Written by Natasha Kosareva, Head of Design at Idealogic
It was a rainy autumn day, and I was developing a website design for a client. At some point, a question came up to my mind: should I use a hamburger menu in the project?
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.
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.
Since its inception, lots of research has been done on hamburger menu usability. Here are some of the most prominent findings:
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:
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!