The icon itself does not describe what is inside
Aliases: navicon · three-line menu · semantic opacity
What it is
The graphic on a hamburger button is three horizontal lines. Hamburger icon opacity (opacity here means semantically opaque, not visually transparent) is the fact that the glyph only declares “a container can be opened here”. It does not preview whether the container holds destinations, settings, an account, or filters. Seeing it does not let someone infer the contents; knowing the contents requires opening it, or having already learned what this product stuffed inside.
Why it happens
An icon is recognized when a stable mapping holds between graphic and referent: an envelope for messages, a magnifying glass for search. Three lines come from a pictogram of “a list” and at best map to “there is a group of things”, not to any particular noun. Without a noun, goal-driven search of the form “I want Saves, so I will tap the thing that looks like Saves” cannot start. People either treat the bars as a conventional entry (which needs prior experience) or ignore them. The convention itself splits: some expect navigation, some filters, some more actions. The same glyph points at different containers across apps, so transfer does not help.
Because the graphic carries no inventory, even a clear architecture inside the menu only starts working after open. Until then the icon sits among other icon-buttons and cannot be “read” as they can. Replacing the bars with the word Menu immediately thickens the semantics — not because the container changed, but because the word says “this is a menu”, even though it still does not list the inner items.
Studying it
Use icon paraphrase: show the three bars alone, with no product context, and ask what a tap will do and what will be inside. Independent variables: presence of a text label, placement (top-leading / top-trailing / bottom), and whether participants are heavy smartphone users. Dependent variables: the share of “navigation menu” answers, confusion with filter / more / settings, and the rate of unprompted opens.
A control is essential: put a house, an avatar, or the word Directory in the same place and see whether paraphrase narrows. If only the three bars stay scattered, the problem is the graphic, not hiding or frequency.
Where it stops holding
Long-term users of one product learn the bars as that product’s directory control. Paraphrase then improves, which does not mean the icon has started to depict the contents — they remember place and habit, not three lines that draw “Saves”. If a platform exposes the control to assistive tech as “open navigation drawer”, the role can be spoken; visual users still get no content preview. Animating the bars into an arrow or an X only says the container is open, still not what is inside. When the menu holds a few page-level actions (closer to an overflow), people sometimes guess “more”. A correct guess is not the bars becoming meaningful; it is the control sitting in the page-action cluster.
Applying it
- Do not expect the three bars to carry an inventory. If people need to know “this is a directory”, put Menu or the current section name beside the icon rather than thickening the lines.
- If the interior is a mixed set of entries, prefer controls that point at content over a generic container glyph: avatar for account, magnifier for search, each as its own visible button.
- Let the first screen after open present structure immediately, compensating for the preview the icon refused to give. Do not add a blank state or another collapse.
- How to check: crop the button from the UI and ask someone new to the product what is inside. Answers that scatter across navigation, filters, settings, and more mean the graphic is not previewing content. Then try a labelled version and see whether paraphrase collapses to “menu”.