Uneven visual weight between filled and outline icons in one row fakes a hierarchy
Aliases: false hierarchy · outline filled weight · ink area
What it is
In one toolbar, a solid fill carries more ink than a hollow stroke. The inkier glyph is seen first and is taken as "more important / recommended / primary", even when the product set them as peers. This is a hierarchy illusion from weight, not a mis-taught selection grammar: even with none selected, filled area is already ranking on the product's behalf.
Why it happens
Visual weight tracks inked area. A stroke is almost only its outline; a fill counts the interior too, so ink at the same edge length can differ by a factor. A scan jumps by weight, not by the spec that says this row is flat. After the jump, people invent a reason: probably the main button. The illusion runs both ways — the heavy one is promoted, the outlines beside it are demoted to accessories. It can co-occur with the "solid = current page" state grammar, but even with selection colour gone, even when the user knows they are not on that page, the weight gap still ranks. Split the two failures: one is being read as state, the other as grade. This is the latter.
Studying it
Build a row of peer actions. Vary only outline versus fill — no colour change, no edge change, no current page — and ask which is the primary action or which was noticed first. Dependents are first notice and primary nomination, not preference. Ink area (filled pixel count) can be correlated with being named primary. If nominations even out after everything is converted to outline, weight was the needle.
Where it stops holding
- If the product truly uses weight for primary versus secondary (solid main, outline secondary), it is not an illusion — it is speaking with weight. Only one glyph in the row may take that privilege.
- In dark mode, fills go blacker and strokes paler, so the gap grows; on a light field it may be milder.
- Bounding-box alignment and part density making a glyph "go dark" are two other weight ledgers.
- When state grammar (hollow idle, solid current) is leaking, clean the grammar first, then see whether a peer-weight gap remains.
Applying it
- Peer entries: all outline or all filled. If weight must mark primary, one main action takes the fill, the rest stay outline, and the row is admitted as a hierarchy, not a styling variation.
- Recheck on a dark field: fills often shout more there. Reduce fill contrast rather than matching only the light mock.
- How to check: strip the current-page marker and ask someone who did not build the page which item is most important. A stable point at the solid glyph means weight is already forging a hierarchy.
Related
- Same group: F6.08.2 Perceived icon size needs optical correction, not bounding-box alignment · F6.08.3 Dense icons look heavier than simple ones at the same size · F6.08.4 A set only reads as even when stroke and padding share one rhythm
- Nearby: F6.03 Icon style consistency · F3.01 What constitutes visual weight
- Search terms:
visual weight·filled vs outline·false hierarchy