Why The Hamburger Menu Creates A Poor User Experience
When it comes to a barbecue, a hamburger is my go to. When it comes to building a desktop or mobile interface, it’s not. The “hamburger menu” has become very popular lately but the reason has more to do with laziness than success. Designers have less real estate to work with on mobile screens, so why not use three lines to symbolize a menu to save space? Unfortunately, the hamburger menu has also transferred to desktop, which doesn’t have much benefit since there is plenty of space for a traditional or visible navigation. Designers and developers may like it because of its ease but users actually don’t.
A hamburger menu is a hidden navigation. Users don’t know what three bars symbolize or what it contains until they click on it, and once they do it may or may not contain what they are looking for. This often leads to frustrating or deceiving the users as well as keeping them from completing their task. According to Nielson Norman Group, discoverability is cut in half simply by hiding the navigation on a website by using the hamburger menu . So here are a few reasons why it’s not a great choice for your website or mobile application and four alternatives below.
A hamburger menu creates a worse user experience because:
It’s less noticeable.
Because users start scanning the screen for "menu" or the the specific topic they're looking for, the small symbol is easily overlooked. It decreases discoverability, especially on desktop.
It contains less information about its contents.
The hamburger menu disguises the breadth and depth of the website/app. Users are not getting the information they want or need.
It makes the user do more work.
People are lazy and if the design makes them click four more buttons than they need to, they could feel like it's taking too much time.
It’s inconsistent across mediums (desktop to mobile).
Users don't know whether to look for the hamburger menu or the word menu which takes more time and effort.
It’s less familiar.
Just because the hamburger menu may be recognized widely amongst some of us, doesn't mean everyone knows what it means.
It's hard to reach on mobile.
Physically speaking, it's small and in a position on the screen furthest from your thumb (top left corner). This makes it harder for the person to use.
It increases the amount of time and difficulty for users to complete tasks/reach goals.
Because of all the reasons mentioned above, the hamburger menu not only forces the user to do more work but it also makes it harder for them to complete a task and in a much longer amount of time. Overall, the hamburger menu creates a poor user experience for both mobile and desktop.
Solutions:
Drop down Menu and say "menu"
Top level navigation with a “more” tab (traditional)
Scrollable Menu
Slide back and forth with your finger on mobile.
Click the forward and back arrows on desktop.
Collapsible Menu
Thank you for reading!