Hamburger menus have become very popular among designers and web developers. Simple concept of (sometimes really huge) menus hidden behind a small icon started to sneak into more and more web and mobile applications. But is it that good?
A bit of history
Hamburger icon is older that we might think. It was designed by Norm Cox for Xerox Star – a personal workstation. It was one of the first graphical user interfaces. Since then, the icon was occasionally used in some desktop applications. But when did it slip into web and mobile apps? Increased usage of hamburger menu in recent years started when Google and Facebook introduced them in their applications.
What’s the buzz with hamburgers?
Even though hamburger icon is now widely recognized, it receives a lot of criticism. Some time ago its meaning wasn’t very clear and obvious. Users kept looking for menu options and bypassed the 3-stripe-icon. Now most of us got used to this solution, but it’s still less effective than full menu displayed. Out of sight, out of mind – this proverb shows perfectly what’s the problem here. If users don’t see the menu content, they won’t be curious and look for it, unless they really need to find something.
What’s the solution?
Since using hamburgers over more direct menus clearly shows drops in user engagement on websites, the developers and designers were forced to come up with new solutions
Solution #1: Keep the full classic menu if possible.
Most of hamburger menus are used in mobile apps, where there is little place to have full menu. Recently more and more desktop pages started using hamburger menu to provide clear and minimalistic design. In this case, we should decide either we want to put design over usability.
Solution #2: Use navigation bar.
If it’s a mobile app, then a navigation bar either on top or bottom of the screen might be a good idea. It’s always there and uses icons or/and labels. The main problem of this solution is limited capacity. But that problem can be easily overcome by applying More option to it, or using scrollable bar.
Solution #3: Change the icon.
Sometimes the icon is the problem. Maybe it’s too small or located in poorly visible place. Then it may be a good idea to apply a different icon or label instead of hamburger menu. A simple MENU label could do. Some users require more direct ways of communication. Hamburger works with up-to-date people, who already got used to that concept. New users (especially older people) may find the hamburger icon not obvious.
Is it really that bad?
It sounds like the hamburger is the incarnation of evil, but is it really like that? Not necessarily. You should avoid it when the navigation is crucial and creates the main corps of the application. But there are still many types of websites and apps, where hamburger menu will do its job. First example is content-focused app, where most important features are visible and hamburger only hides some preferences and less-frequently used options (e.g. Google Maps). Another case, where hamburger is a good choice is simple one-page website, where everything is easily accessible and meant to be scrolled down completely by user. Hamburger works as an additional way to quickly find the desired section (usually after we already get the site to know).
Make it move!
Considering the popularity of the hamburger icon, we can make it more attractive and innovative by using animation and creative transitions. More and more designers try to make hamburgers more appealing and eye-candy. Morphing is one of the most popular techniques to smoothly transit from one icon state to another.
–> Learn about how to do a smooth animation<–
We shouldn’t expect the hamburger icon to disappear quickly. It has become very popular and will unlikely vanish from apps. But we may see trends of using some alternative solutions more often. The most important thing is to focus on the user and clear interface.
–>Read also: Are you sure that your website is accessible–>