Collapsing to icons must keep items recognizable
Aliases: navigation rail · collapsed sidebar
What it is
After a sidebar collapses to a rail, labels vanish and each item is an icon. Icon rail recognizability asks whether, given that people already know these destinations exist, they can still tell them apart from graphics alone and land on the right place. It is not asking what sits behind three bars. Rail icons are still exposed destinations; they are only missing their names.
Why it happens
Reading a picture and reading a name are different channels. In a full sidebar the name carries discrimination and the icon only speeds it up. On a rail the name is gone, so discrimination sits entirely on shape: items must differ pairwise, map onto the right destinations, and survive selected, unread, and disabled overlays. Many business destinations have no stable visual convention — Billing, Tickets, and Asset Library drawn with a generic cog, folder, or document become a row of similar squares. People hover for a tooltip or expand the rail again, and the width saved by collapsing is spent on the round trip.
Recognizability also depends on learning. Three frequent items can be remembered by place, but place shifts under personalization, permissions, and experiments, so location memory is shaky. New users, rare entries, and look-alike neighbours produce taps on the wrong neighbour. A badge can say “something is waiting”; it cannot say which item this is.
Studying it
Use blind naming: shuffle a rail screenshot (or suppress tooltips) and have experts and newcomers name each item. Independent variables: presence of text, whether icons form a set, item count. Dependent variables: accuracy, neighbour confusions, and how often the sidebar is expanded.
A harder pointing task names a destination and asks for a tap on the rail. If experts still expand, the graphic channel never connected, and collapse only works for the designer.
Where it stops holding
A rail can work when destinations follow stable cross-app conventions (house for home, bubble for messages, cog for settings). Internal business objects, workspaces whose names change, and user-defined lists almost all fail after collapse. With very few items (three or four) in fixed places, position can patch weak graphics. Screen readers do not read the pictures and still need names; recognizability is a visual-collapse problem and cannot be declared solved by accessible names. Hover-to-reveal the full name is pointer-only; a touch rail has no equivalent.
Applying it
- Before collapsing, run a no-text identification: labels off, icons only, people who did not draw them matching destinations. Failures must keep text on the rail, or must not collapse.
- Collapse first the items with stable conventions. Business objects and a cluster of look-alike icons stay full-width or keep a short word rather than being forced into glyphs.
- Give the rail a full name that does not depend on hover: a long-press, a visible name on focus, or one-tap expand. Do not treat tooltips as labels on touch.
- How to check: when a fluent user going to an item expands the sidebar more than once to find it, that item’s collapse has failed. Log neighbour misses; a pair that keeps swapping should be redrawn, not given smaller type.