*Don’t hate the hamburger, hate the designers who implement it poorly.* *Image credit*

Is the Hamburger Our Enemy? News at 10

The hamburger icon is neither good nor bad; what’s important is a strategic approach to how you prioritize and surface content.

Rainne Wu

Follow

Published in

square360

6 min readNov 20, 2018

--

TL;DR The hamburger icon, a well-known UI icon whose usage has drawn much controversy, can be a clean and simple way to inform users of additional (and non-primary) navigation and functions. Just make sure that’s what you’re actually using it for, and that its location and visual design are prominent and noticeable. Adopt a mobile-first strategy to your information architecture by paring down content to only those that add value, and design on top of this foundation.

Alternatively known as a “sandwich,” “double Oreo,” “stack of pancakes,” “tribar” (or “triple bar”) and (my personal favorite) “a stack of three hot dogs,” the rather unassuming icon has drawn a fair share of detractors over the years. Some outright despise it, like TechCrunch who call the three-lined icon “the devil” and declares “Kill the Hamburger Button”, or James Archer, who simply states “The hamburger menu doesn’t work.”

*If we dislike something, why are we giving it the same name as a delicious thing?*

History of the hamburger icon

Where did this icon come from? The hamburger icon can actually be traced to 1981, used for the Xerox “Star” personal work station’s graphical interface, where the 3 lines were meant to represent a menu list of additional items. The designer, Norm Cox, was working with a very limited space, 16x16 pixels, and had to effectively communicate in that minimal space — a “container for contextual menu choices.”

*From Jake Rocheleau’s* *article* *about — you guessed it — hamburgers!*

Since then, the hamburger has become widely used on mobile devices, and has started appearing on some desktop sites and applications. Icons, unlike words, transcend language barriers and take up comparatively less space, which helps reduce visual complexity. The ubiquity allows it to serve as a consistent navigation icon, one easily recognizable and thus effective in communicating its function.

Why then, for all the ire?

Detractors point out that the icon hinders discoverability. The content of a site is unclear if the navigation sections are hidden. By nesting navigational context in a menu that can only be seen when a user searches, we obscure site offerings and remove the ability to get a quick overview of a site’s or applications’ value.

*Your burger menu should be simple and elegant. Avoid burger-ception.*

Obscured navigation also increases interaction cost. Every time a user wishes to navigate to another section, the hamburger menu must first be opened before the menu item can be found and activated, effectively doubling the number of steps. Furthermore, nesting secondary and tertiary navigation items within a hamburger navigation compounds that interaction cost on a user’s cognitive load, and that’s just for sighted users. Imagine the frustration of this experience for a vision-impaired person! Not exactly a way to communicate professionalism and trust.

Should the hamburger icon ever be used at all then?

A resounding yes, with an even more resonant caveat: make sure your site architecture is well groomed and logical. Even ardent naysayers admit that many of the problems with the icon stem from misuse.

“The Sidebar Menu pattern welcomes bad IA because you can simply add one more thing to it without a direct consequence — that is until people actually use it.”

A mobile-first approach is supposed to force designers to take a hard look at the site’s content and ask, “Does this add value? Do our users really want or need this feature?” The limits of a significantly smaller screen size, and thus attention span, forces designers to Kondo-Marie the architecture of the site and ask “will this bring joy?”

Be strategic about not the interface, but the content, the bones of the site. When approaching a design project, take a look under the hood and start by redefining the IA: Do users really need both a product and a department category for this medical equipment website? Is there a better way to architect this content? Is our taxonomy easy to grasp, or a tangled mess?

Don’t be lazy

A hamburger menu shouldn’t be a catch-all. It shouldn’t be an excuse to throw strategy to the wind. “It becomes far too tempting to add ‘just one more thing’, because technically there’s nothing stopping us…There’s no incentive to consolidate or prioritize.”

True hamburger enlightenment is indeed a difficult, but worthy, endeavor.

The most egregious of cases are when a hamburger menu has secondary and tertiary navigation tucked within, forcing a user to dig. A hamburger menu should ideally be direct-access (i.e., items users can access with ease and speed) versus sequential-access (i.e., items that can be accessed only via another nav item). Basically, don’t add a sub-sub category nav item tucked within a sub-category nav item tucked within a category nav item. If you’re going to hamburger, hamburger right.

What are possible strategies?

Chris Myhill of Just UX Design suggests a mobile-first approach, because it forces designers to prioritize. He points out that the advent of responsive design is partly responsible for bloated websites, because users now (rightly) expect a consistent experience across all platforms and browsers. So, be efficient in conveying your value proposition; show only what’s necessary and don’t bloat your site. Remember that “perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Another strategy is to prioritize your content into “musts” and “nice to haves.” Uber realized that over the years, their app had become convoluted with added features and, in November 2016, redesigned their app to harken back to their simple original premise: push a button, get a ride. Their interface surfaces the primary tasks (Select most frequent destinations, or enter a new one), with other, less important tasks, hidden in the hamburger menu.

Other alternatives include using a tabbed navigation, either top or bottom-locked, where the most frequently used features or visited pages are surfaced, with less-frequently used navigation items tucked into the hamburger menu.

Final thoughts: A well-crafted burger is a thing of beauty

A well-crafted hamburger makes me happy too, Cas.

The hamburger has been an important icon in our design arsenal for over 35 years. With the widespread adoption of responsive design, it has become ubiquitous in providing a consistent experience across all platforms and browsers, minimizing visual clutter and allowing users to focus on content. But hamburgers also have a dark side: hiding cluttered IA, or providing excuses to be lazy on content strategy. Although the hamburger will likely remain a mainstay of our design diets, it should not replace our design sense and ability to cut through the noise.