Hamburger Menu Abuse
No, I’m not talking about going to your favorite restaurant and destroying their menus. Hamburger menus – icons comprising three little lines at the top right of so many apps and digital products – are wildly popular and used to hide a software application product’s navigation. UI Designers will be more swayed to love hamburger menus, whereas UX Designers may be more prone to hate them.
These icons are not just design industry controversy. While trendy, they can have real consequences for your application product’s user experience (UX) if not applied carefully.
What’s wrong with this hamburger menu?
Hiding all of your product’s navigation behind one burger icon is convenient and makes for a clean user interface. It’s especially enticing for designers working on mobile products, or web apps that need a streamlined user interface design.
Unfortunately, it can also be confusing. Hamburger menu icons usually have no accompanying text—they were originally invented for users who already instinctively know what’s behind them. This works for small menus or simple applications / websites. Facebook was the first to successfully adopt the hamburger menu because the app’s purpose – social networking – is common knowledge and user research demonstrates that most users are already familiar with the options hidden behind the menu.
But, if a website or application design had 20 or more sections / actions hiding behind this icon, it could do more harm than good for the customer experience.
Unfortunately, I’ve witnessed this user experience design flaw to be epidemic, especially at ad agencies. They tend to prioritize user interface designs that are more visually polished and flashy over usable and relevant.
Take, for example, this agency website – it’s beautiful and includes a hamburger menu that hides four navigation options. Does this add or detract from the usability of the user interface design? It’s possible that the agency didn’t thoroughly think about supporting its user groups’ actions.
One user group may consist of potential clients who need to see portfolio work in order to make a judgement about working with that agency while another group, possibly job seekers, are looking for quick information about career openings. The flashy homepage is visually enticing and maybe it was decided that the hamburger would not detract from that as much as a top navigation bar, but this ultimately hurts the user experience.
It’s easy to invision usability testing that would demonstrate that hiding too many options in the hamburger menu leads to increased time spent trying to make a decision on where to go on the website or abandon the website altogether out of frustration.
Before your UX design team decides to slap a burger menu on that app or website design, have them think about how this will actually help the experience. What’s popular isn’t always right.
What can you do to fix or prevent hamburger menu abuse?
A more strategic approach to producing a great customer experience would be to ask:
- What does my application accomplish?
- What icons intuitively resonate with our users based on our usability testing?
- What are the user’s priorities and how do we structure and sequence this page’s user interface hierarchy to reflect these user requirements?
Large applications that are also getting a navigation redesign – that is, completely redoing the menu and its features – would probably benefit from a menu exposing more options than hiding them. Even user interfaces with more constrained screen space like mobile apps can still have a navigation menu at the top or bottom of the app. The term “hamburger menu” may amuse, but be careful not to abuse!
Get The Latest UI/UX Trends and Best PracticesGET WHITEPAPER
Abdul is our founder and CEO. He’s helped over 40 Fortune 500 companies make informed user-centered design decisions through evidence-based user research and UX best practices. As an Adjunct Professor, Abdul has taught in DePaul University’s graduate UX programs and for nine other universities.