1. The Hamburger Menu
In the early 1980s, Norm Cox and his colleagues at the PARC research center found themselves with a difficult challenge. It was up to them to design a new way of navigating machines.
“The challenge was daunting, but the creativity, the free exchange of ideas, and the opportunity to change the world was infectious,” says Cox.
Since then, the hamburger menu has risen to ubiquity and become a highly recognizable affordance. Its rise to popularity is a result of its ability to reduce clutter, group secondary and tertiary content in a single place, and extend real estate for product managers.
However, like many champions at the peak of popularity, the hamburger menu has become the juicy whipping boy of modern design discourse. To temper the charbroiled backlash, I’d like to share the ways in which it can be beneficial when appropriately applied, discuss how some designers have been led astray, and share some tips for responsible hamburger usage.
2. How it can work better
A common critique of the hamburger menu is that it hides important content from users. The principle of “out-of-sight out-of-mind” makes discovery difficult and causes usability to drop through the grill like an unbound patty. Still, this obstacle is a direct consequence of menu designers’ failing to take the user navigation experience into consideration. In the most problematic cases, the menu acts as a “dumping ground” for navigation and additional content rather than a purposeful navigational surface. When structured well, the hamburger menu can serve as a delicious life raft for users who want to travel elsewhere, like the fat footer of a few years ago.
The hamburger menu is useful because it draws the user’s attention to the site content they came for. Users arrive to a site or open an app-hungry for a bite of the available content. They’re looking to receive value from the product. While navigation is helpful, it’s secondary to content. It becomes the meat of the user experience only after the visitor has received value from site exploration and chosen to return to the barbecue for a second helping. Over indexing the navigational experience diminishes the content experience that initially brought the user to the site — whether it’s a news article, photo gallery or content feed. It’s putting the sizzle before the patty.
Troubleshooting aside, the hamburger menu has gained an impressive amount of traction to date and will likely continue to become part of the shared vocabulary of UI design. Friction is normal when introducing a new technology: think about the affordances we use every day. A 3.5” disc for save or a physical clip board for copy. Had these conventions not already been a holdover mainstay of the 80s and 90s, they’d likely be in the same situation today. As time goes on, the inconsistencies in the interaction will lessen and we’ll develop a shared expectation of outcome when we click that tantalizing icon.
3. How some designers are led astray
The biggest misstep I see when using the hamburger menu comes from accepting it as standard practice without fully considering its specific user base. Like any tool in our designer toolbox, it should be deployed to the right audience under the right circumstances. Responsible and informed designers can and should validate the hamburger menu as the correct solution for their specific product and audience. You wouldn’t grill up a 12 pack of prime rib patties for a group of vegetarians, now would you?
The next big misstep I see is a lack of purposefulness in the menu. The hamburger menu is not an additional space for marketing, social media, navigation, or any other features that “fit”. It must have a clear purpose and set of principles for product managers and stakeholders to align to post-launch. By setting a clear purpose for the menu, users will form clear expectations around the menu’s purpose and use.
The last large issue I see is one of interaction design. Designers need to ensure the menu’s hit area is large enough for clumsy thumbs, shaky streetcars, and any other environmental variables.
4. Tips for responsible hamburger usage
To help address this wide range of obstacles, I’ve put together a few tips for designing the juiciest flame broiled off-canvas menu possible:
– Most importantly, know your audience. Think deeply about whether your audience will know what the hamburger menu is and how it works. Test it with actual users. Be certain it’s the right tool for the job.
– Develop principles for the menu just like you would the overall site. Provide guidelines and name the menu if you can. Get buy-in on the philosophy behind it — that’s the best way to prevent pollution of the menu.
– Finally, test the design in context. Get away from your quiet desk, test it walking down the street or on the bus. Ensure it’s snappy and responsive, delivering hits only when you want it to.
The problem isn’t the hamburger menu. The problem is undisciplined, inappropriate application. Thoughtful designers consider their audience, test its implementation, and ensure it’s executed with a clear understanding of the menu’s intent in the customer’s journey.