Hamburger menu | To use or not to use
Even though it might seem like a contemporary design element but Hamburger menu is as old as our personal computers. It was designed by Norm Cox, design lead for the first ever graphical user interface made for Xerox Star.
Since then Hamburger icon has become synonymous with menu and a way to make the screens clutter free. Almost all of the internet recognizes it as the menu icon.
But as ubiquitous as the hamburger is, it is not going to stay that way. Here’s why
Makes feature discovery a task
Practically every designer has used hamburger menu as a goto navigation component. What a lot of people miss is the fact that it’s hidden and whatever is out of sight, is out of mind.
It’s proven that using hidden menu adds to the friction and user would rather skip than go through the difficulty of revealing and discovering hidden features.
Besides, people are more likely to use visible navigation than a hidden one.
Conflicts with system navigation
When smartphones sacrificed the capacitive and solid buttons for screen real estate, on-screen and gesture navigation had to make their way in the UI.
iOS apps have been struggling with hidden navigation long before no-buttons-all-screen went mainstream. Designer can only put so much in a navigation bar. It’s either menu or back button for navigation because none or both are a bad option for usability.
Adding a layer of difficulty just so that interface looks cleaner is bad for engagement and conversion. Visible menu such as tab bar lets the user see right away what’s what. It also makes notifications more contextual.
People find it easier to switch between tabs than discover hidden features via menus.
It’s just like choosing what to order when you’re hungry. What are you more likely to order, a dish for which you can see the ingredients for or a dish for which you can’t?
The former, of course, nobody likes to experiment on an empty stomach.
Now that the hamburger is out, what are your options
This menu is prominently used in mobile phones. Smartphone screen sizes have increased substantially and single handed usage has become more difficult than ever. The hamburger which was easily approachable once with smaller sized screens is now even out of the stretch zone of the palm.
Tabbed navigation at the bottom brings the navigation down where everything is easily reachable within the reach of your thumb.
If you look at the Android UI Guidelines you will find that the Tab Bar is now a main navigation component. Which means that it’s more suitable for current and upcoming devices.
Progressively collapsing menu
This is a progressive approach towards hamburger menu. But unlike hamburger, this navigation adapts to screen size without hiding the features.
This menu utilizes familiar iconography to collapse the navigation according to the screen size without losing much information.
Combination of tab and hamburger
Combination menu comes in handy in the scenarios where the design calls for more than 5 menu items. Phone screens are big but they can only be as wide as the grip of the palm. There is no way to accommodate the amount of items that a hidden menu can house.
A combination menu has four tabs and a hamburger to house more items.
Hamburger menu has its share of good and bad. A bad implementation doesn’t necessarily mean that the UI component is bad. There are apps where hamburger makes for an ideal choice and in other cases it causes friction in user experience.
It all boils down to what’s more suitable for your app or website. Any of the hamburger alternatives will work for you as long as it’s not hidden.
By Aaditya Mandloi
About Galaxy WeblinksWe specialize in human-centric user experience design services to our clients across the globe. Our innovative ideas, creative designs, industry best practices, and processes help us improve user satisfaction and solve complex design problems. Contact us for a free consultation!
At Galaxy Weblinks, we build high-performing software solutions that help teams scale. And write about it in the process. You may have spotted us on…Best Practices Design Ecommerce Web
The most important question that project managers should ask themselves is, “How do I help my customers achieve their goals on my website while still…UX Web Design
There’s a popular user experience quote: “A user interface is like a joke. If you have to explain it, it’s not that good.” While clever,…Design UI Design
Incessant scrolling while using an application is perceived as a flaw on both mobile and desktop. To address this concern, a shift to horizontal scrolling…Design UI Design UX
User Experience Design is one of our core competencies. In this blog, we will share with you the best practices of designing buttons for your…Design UI Design UX Web Design
We all love harmony in our lives. Harmony of tones and hues, of perfect shapes and negative spaces. Be it in music, interior design, or…Design Design Process UI Design
Contemporary mobile apps have different ways of onboarding and retaining their users. Duolingo, a very popular language-learning application offers free sessions before they ask you…Design Mobile Design UX
App development frameworks are at the front and center of the development community. Backend and frontend frameworks are continuously taking inspiration from each other to…Web Design Website Development
Did you ever happen to spot some inconsistencies in your product’s design that were not there in your prototype? The color being a bit different,…Web Design Website Development
The appeal of WordPress is simplicity. The debate on Gutenberg and Page builders is much more than functionalities. It’s more about ease of use. In…Web Design Website Development
People don’t want to miss out on the digital era. And accessibility testing is how we make sure that smart devices and computers are accessible…Web Design Website Development
Design System is one of the most excessively used design terms in the software industry right now, so much so that it has given birth…Design Design Process UX
If you’ve looked over these tools before, then you’ve probably wondered how they compare when facing off one with another. What’s InVision’s kryptonite? Why Framer…Design Design Tool user experience Web Design