In User Interface Design, less is not always more. It makes me think, is one of the most commonly used UI components obvious enough? The hamburger menu is one of the most overused UI components. It creates less but does it offer more?
The hamburger menu is a tempting and simple solution to solving complex navigations. Throwing your menu items behind it without a worry in sight. However is it really good practice? and how does it affect user behaviour and long-term usage?
I will admit, the use of the hamburger menu does make your interface much cleaner. It’ll also score you a membership to the ‘minimal interfaces’ cool club. However what’s more important is, how will it impact the level of retention and engagements on your users?
“If it’s out of sight, it’s out of mind”
In product design, we should never overlook these small details. You could argue that ‘users are only a tap away from the menu’. But these small tweaks have significant impacts on usage.
Lets do a quick reflection. Has there ever been a time when you walked into a large shopping mall, and you nearly lost your mind trying to find a particular store? Yep, well it happened to me just over the weekend. I came in from another entrance and there were no signs, no maps, no navigation and what’s worse was the concierge desk was on the other side of the mall. I walked around cluelessly, hoping to find one of those navigation stands.
Not a great experience, at all.
Even when I did find the store I was looking for, I had missed out on exploring other areas because I was not aware of what was available.
“Less is only more, if there’s awareness”
Luke Wroblewski, a figurehead in UX design also shared some insights on how navigation can impact product usage.
As you can see, the design is much cleaner in the ‘after’ variation. However there was a dramatic drop in app usage once they pushed it live. What was the reason? Since the navigational items were not visible anymore, users were less likely to navigate between pages. It’s not the fact that the menu items are only a tap away, it’s because they are out of sight, out of mind.
“It looks cleaner; should never be a reason for making a design decision.”
..Well, what now? What can we use instead of the hamburger menu?
I bet you’re hungry for some navigational inspiration but burgers aren’t on the menu. Yes, life is tough! But don’t worry, I’ve cooked up 8 alternative dishes to the Hamburger menu.
8 Alternatives to the Hamburger Menu
- Tabbed Primary Menu
Make good use of your primary, tabbed navigation. This is the fundamental navigational component for your app. It’s the life saving map to when you enter a new shopping mall. Prioritise the top 5 sections you want users to explore. Use this component as a way to drive the metrics and engagements you want.
- Top Tabbed Menus
You’ve got your primary navigation set but you want to create sub-sections within it? Take advantage of the Top Tabbed menus. This helps you create intuitive hierarchy within your app. They’re simple and obvious. Just keep in mind to not over do menus within menus.
- Top Tabbed Menus with More
Sometimes it’s beyond your control. The business wants to throw a ton of functionality into the app and you just have to make it work. I understand how you feel. It’s ok, come in for a hug. Adding a ‘More’ dropdown can help you accomodate that.
- Expanded Menus
If you’ve only got a few sections, having the menu expanded could be a good idea. It’s obvious and users immediately know what you have to offer. We’re use to scrolling, so a small list won’t do too much harm.
- Activate via Gestures
Tinder is a great example of using gestures to navigate. Another app which I think is incredible and not as well known is SnapSeed by Google. You use gestures (sliding finger up and down) to navigate between photo editing features. Give it a spin.
- Scrollable Horizontal Menus
Can’t fit anymore in your secondary menu? You can add more by turning it into a scrollable bar. Not a preference of mine because it takes more time than tapping a burger icon but still an option on the table.
- Dropdown Menus
Simple and obvious. Dropdowns do work quite well in some cases. The main problem it solves is that, users immediately know what it is. A lot better than a hidden, burger icon.
- Burger with Text
Last but not least, if you have to turn to the burger menu, I’d recommend using the word ‘Menu’ instead or append ‘Menu’ to the icon. There’s been countless A/B tests that have proved having ‘Menu’ visible improves performances.
Also never put anything of high priority within the slide out. Keep all secondary navigational items within the burger menu.
Keep challenging yourself
The concept of ‘less is not always more’ also applies beyond the burger menu. When it comes to interface design, always keep in mind how do you balance a clean a minimal interface with function and intuitiveness.
Don’t just remove things for the sake of it. Create experiences that are seamless but also intuitive.
So how often do you use the hamburger menu in your projects?
Don’t get me wrong. Hamburger menus are not the end of the world in UX practices. However they should only be the last resort. Convenience and just because everyone else does it is not a good enough reason. Think through your specific case of user problems and see how you can tackle it.
Could it be that the overall structure of the app is over complicated for no particular reason? Or are there redundant sections of app which could really be merged together? What sections of the app do you want to bring priority too?
Keep asking yourself questions. It’s the best way to push your creative and design thinking.
Have a terrific week!