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.
Non-glanceable
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
Tabbed navigation
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.
Takeaway
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.
