The Hamburger Menu Everyone Recognizes Is Still Confusing Half Your Users

Cover Image for The Hamburger Menu Everyone Recognizes Is Still Confusing Half Your Users

Cover photo by ready made on Pexels

In 2014, Nielsen Norman Group ran a usability study comparing icon-only navigation to navigation with text labels. Seventy-six users. Standard e-commerce and information tasks. The labeled navigation was 20% faster. Users expressed significantly more confidence in their choices. First-task completion rates were higher. The study was published and cited widely.

Ten years later, icon-only interfaces are more popular than ever. The research didn't change anything. The aesthetic preference did.

Recognition Is Not Comprehension

There are two distinct cognitive operations happening when a user looks at a navigation icon. The first is recognition — identifying the element as an interactive control. The second is comprehension — understanding what it does.

These fail independently.

The hamburger menu is a useful case. Most smartphone users recognize it: three horizontal lines, top-right or top-left corner. They know it opens something. What's in it? No idea until they tap. The recognition is near-universal; the comprehension before interaction is low. This matters because the decision to navigate depends on knowing where navigation leads — and icon-only menus defer that knowledge to after the click.

Text labels solve the comprehension problem before the tap. "Menu," "Profile," "Settings," "Help" tells the user what they'll find. The icon alone says only "press this." For infrequent users, new users, or users operating in higher-stakes contexts — healthcare, finance, forms — that gap is not trivial.

The 2014 NNG study, conducted by Hoa Loranger, found that labels alongside icons outperformed icons alone on discoverability, confidence, comprehension, and task completion speed. The effect was consistent across age groups, though it was stronger in users over 45. This isn't a demographic footnote — users over 45 control significant purchasing power and are frequently underrepresented in designer usability assumptions.

The Icons That Don't Communicate What You Think They Do

Designers maintain a mental model of icon comprehension that doesn't match empirical evidence. A short inventory:

The home icon: A house. Understood as "return to main page" on desktop browsers by most users — because decades of consistent usage established the convention. On mobile apps, particularly non-standard ones, it's understood by far fewer. In non-Western markets, the house icon as "home" is even weaker.

The hamburger menu: Recognized as navigation by users who have been using smartphones for years. Not recognized reliably by new smartphone users, older demographics, or users in low-tech markets. Research by Luke Wroblewski (2016) found that showing navigation items directly increased engagement compared to hiding them behind the hamburger icon — even on mobile where space is a real constraint.

The floppy disk: The universal "save" icon in desktop software. No one under 25 has seen a physical floppy disk. They've learned the icon's meaning — but only because early software displayed the label "Save" alongside it. The icon is a learned arbitrary symbol. The label did the initial teaching.

Share icons: This is where icon comprehension genuinely falls apart. iOS uses a box with an arrow pointing up. Android historically used a branching network graph. Desktop interfaces have used envelopes, arrows, and dozens of other representations. When NNG tested sharing icon recognition across platforms, users in cross-platform studies consistently guessed wrong when encountering the icon from a different ecosystem.

The kebab menu and the meatball menu: Three vertical dots (kebab) or three horizontal dots (meatball) are designer shorthand for "additional options." They register as navigation controls among power users and designers. They are nearly invisible to many casual users — who simply don't see them as tappable.

What NNG's 2021 Research Found

Raluca Budiu's 2021 NNG study on hamburger menus and hidden navigation quantified a cost that's easy to intuit but harder to believe until you see numbers.

Sites with visible, persistent navigation — where categories and sections are displayed rather than hidden behind a menu icon — showed 2 to 3 times more engagement with secondary and tertiary content compared to sites using hidden navigation. The content itself was identical. The difference was whether users could see what was available before deciding to navigate.

This is the hidden cost of the hamburger menu specifically: it hides the information architecture from users who are trying to decide whether there's anything worth exploring. Users who don't know that the "Resources" section exists won't look for it. A navigation bar that displays "Resources" creates serendipitous discovery. A hamburger menu requires the user to already know they want resources before they open it.

The mobile screen space argument — that hiding navigation is necessary to conserve real estate — doesn't survive contact with this finding. The apps and sites that hide navigation to show more content end up with less engagement with that content, because navigation is how users find it.

When Icons Work

The rule isn't "icons are bad." It's narrower: icons work when comprehension doesn't require guessing.

Concrete, physical objects: trash (delete), scissors (cut), envelope (email). These have visual mappings that predate software. Users bring the meaning from the physical world.

System-level conventions with long history: play, pause, stop, fast-forward, rewind. These have been in consistent use since the 1970s, with labels present during the learning period. The convention is now stable enough to survive without labels in most contexts.

Learned arbitrary symbols with adequate training: the save icon works in Microsoft Word because Microsoft Word taught it — with labels — across two decades of consistent use. The icon is now a convention, not a natural mapping.

Icons fail when: the action is abstract (filter, sort, compare, merge, export, configure), the context is new, the user is infrequent, or the consequence of choosing incorrectly is high. The test is whether a first-time user, asked to perform a specific action, can find the control within four seconds without prompting. If not, the label is doing necessary work.

WCAG 2.4.6 requires interactive UI components to have accessible names — aria-labels for icon-only controls. This is minimum compliance, not maximum usability. Passing the accessibility standard means the screen reader can read the control. It doesn't mean the sighted user who doesn't use a screen reader can find it.

The Real Reason Icon-Only Interfaces Persist

Designer preference for clean interfaces is real and not irrational. A navigation bar with seven labeled items is visually denser than a row of seven icons. For designers whose aesthetic vocabulary prizes clarity and space, labels feel like clutter.

But "clean" and "usable" are not synonyms. A form with no labels is clean. It's also unusable. The designer who labels the form hasn't failed aesthetically — they've made a trade-off that serves the user.

The specific failure mode here is that designers disproportionately test interfaces with users like themselves: people who share their platform familiarity, their age range, their tech fluency, their aesthetic sensibilities. When those users recognize icons quickly and navigate without friction, the testing confirms the assumption. The users who struggle with icon-only navigation are underrepresented in designer usability testing because they're underrepresented in designers' networks.

The fix is not "label everything forever." It's understanding precisely which icons communicate without labels, and treating everything else as requiring them until you have evidence otherwise.


Interfaces that look like they were designed for awards are often interfaces that were tested by people who make design awards. Your users are different. Design for them.


Related: Calm UI Isn't an Aesthetic. It's a Cognitive Load Budget.