Hamburger menus. Not just a list of succulent and mouth-watering choices with bacon or double patties, the phrase in interactive design refers to that little three bar icon you’ve seen on the top of mobile websites and apps that pops out a menu when you press it.
That is, if you’ve even noticed them at all. There are a number of arguments that the hamburger menu icon is not as uniform or clear to users as design teams might think.
A beautiful example of this was at a former job where I was sitting in the room with designers working on a mobile app. Apprehensions was voiced about the hamburger menu, but the others weren’t having it. The creative director called out to an account manager walking by and asked her to look at the home screen and describe everything she could do on it.
I felt the question was far too broad, but I entertained it and watched as she studied the projection. While she was able to generally name all of the obvious actions, the one thing that went completely missed? You guessed it: the hamburger menu.
Personal anecdotes don’t just tell the story. Spotify ditched the hamburger menu in favor of a menu bar on the bottom of the screen, with internal testing showing that users clicked 30% more on the items on the tab bar versus ones in a hidden menu. Facebook, YouTube and Meetup are more prominent examples of apps that have also moved away from hamburger menus towards bottom navigational bars.
Identification and navigation is not the hamburger menu’s only problem. As mobile phones are getting larger screens, the top menu items are not as easy to access and the hamburger is often out of thumb’s reach.
While the popularity of hamburger menus on mobile isn’t surprising due to the limited screen size, their presence gets truly baffling on desktop websites where real estate typically isn’t an issue. Perhaps the idea there is minifying distractions, but honestly I think they’re incorporated by designers and directors for no other practical reason than the “gee-whiz” factor of the fly out menu.
There is no shortage of arguments against the hamburger menu, but what are the other options?
Alternatives
Tab bar menu – The most popular alternative to hamburger menus, many apps are starting to move their menus to tab bars. Users are far more likely to engage with the tabs (especially with fairly obvious icons), and the tab bar is within easy reach on the bottom.
The tab bar presents it’s own design challenges as you’re typically limited to about four to five items on screen at most, requiring careful choices as to which options will best compliment the goals or actions of the app.
One way some have gotten around this limit is by incorporating sideways scrolling, revealing more options as the tab bar is dragged left and right. Though I’ve seen advocacy for this method, it’s questionable as most people won’t universally be aware of that action and will miss those items. (Procreate for iPad is a good example of this: users were apparently missing the extra brush options hidden away by sideway scrolling and the brush panel was overhauled into vertical tabs in the recently released version 4.)
More commonly, extra items is placed into a “more” tab at the end that brings up a secondary menu / screen with additional options. In a sense, this shares some of the same problems with hamburger menus, but one argument is that the “more” button is more likely to be seen and interacted with.
TABurger Menu – I came across an interesting idea on the web written about by Scott Jensen that combines the tab bar and hamburger menu together, loosely called a “TABurger Menu.” The TABurger menu is essentially a regular tab bar menu with fly-out drawers/menus appearing when tab items are selected.
The concept is not terribly different from typical desktop hover-over menus, and the key advantage over hamburger menus is that it offers information scent: visual cues with a breadcrumb trail to lead users on the right path.
The primary challenge is that the menu structure has to be planned very carefully and laid out in a logical way, not simply tossing them under a “more” menu like with tab bar menus.
The catch to bottom navigation
Bottom navigation seems like a no-brainer in most cases, but there is a gotcha to this as it pertains to websites.
Some mobile browsers – like iOS Safari – pop up their own bottom menu when the viewport is interacted with. This creates a game of “whack-a-mole” with your own bottom navigation as it’s shoved up from it’s original position as the user touches down, forcing them to click at the link again in it’s new position to proceed.
Apple previously offered a way for developers to specify a minimal UI on Safari to prevent the bottom bar from showing up, but this option was removed. Some sites have successfully managed to get around this through various hacks, but these circumvent the native behavior of the browser and is just a bad practice in general.
These kinds of issues are why top navigation may continue to be a better bet for websites for now, even if it’s not the most ideal place for them.
When hamburger menus might be appropriate
It’s not all doom and gloom for hamburger menus. There are a few scenarios where I would consider using them.
One would be is if the hamburger menu isn’t the only place to access important items. For example, key content may already be accessible on the main screen through buttons, call-to-actions or sidebar areas. As users have a more accessible way to find these areas, ignoring their inclusion up in the hamburger menu is not as much as a problem.
Hamburger menus can also be limited to items that are contrary towards the primary conversion goals. If you’re trying to drive sales to your online store, areas like product categories, search and shopping carts should be more prominently featured while anything extraneous like “about” or “press release” areas are safer to place in a hamburger menu.
Your navigation isn’t an afterthought
No matter what form your menu takes, I think the real issue to address is simply not treat your navigation as an afterthought. Hamburger menus are seductive as they offer an easy and lazy way for designers to avoid the constraints of mobile screens, but this can hardly be called a solution at all.
Unless their usage is deemed to be beneficial to the users of your digital product, leave hamburger menus to fast-food chains and start challenging the design of navigation head-on. And who knows? You might just come up with the next ideal alternative.