In a narrow space keep the type, not the icon alone

What it is

When width runs out, an icon-plus-text button is often collapsed to the icon. What should go first is the icon, not the type. Type is the name; the icon is an accelerator. In a narrow space the accelerator loses value first; the name must not. Keeping only the icon is demoting the control to an unlabeled icon button on the crowded surface where the action most needs to be readable.

Why it happens

Search is already hard when things are packed. The icon’s locating advantage is cancelled by a row of equal squares, and distinction falls back on metaphor—which unlabeled recognition does poorly. Type, even smaller or shortened to a verb, still uses the precise channel. Responsive “drop type, keep icon” happens because a square icon packs a grid and words blow the grid; the name is sacrificed to the mesh. After a narrow viewport, a toolbar overflow, or a longer locale, the users least familiar with those icons (often the ones who needed type) meet the hardest form. Keeping type and dropping the icon narrows less elegantly, but every key stays readable. Dropping type makes every key a riddle.

Studying it

For the same actions at wide, medium, and narrow widths, compare drop-icon-keep-type, drop-type-keep-icon, and shrink-type-keep-both. The task is first-time finding of a named action.

Independent variables: collapse strategy, experience with that icon set, string length. Dependent variables: time to first hit, wrong presses, abandonment.

Internal staff who have memorized the icons will conclude “keep the icon.” Use people who have never seen that toolbar.

Where it stops holding

The few cross-product consensus glyphs (search, close) may drop type at the extreme. A brand mark in a nav bar is not an action name. Watch-class micro-screens may fit neither; change the architecture (fewer co-present actions) rather than defaulting to icon-only. Type that truncates to indistinguishable “…” has not been kept—change wrapping or drop buttons from the row.

Applying it

• Spend width first on a complete short verb; add the icon as an option when there is more room.
• On overflow, put secondary actions in a labeled menu; do not collapse a whole labeled row to icons.
• Check the narrow breakpoint in the longest language, not only in short English.
• Verify on the narrowest target width with someone new to the product naming every button. A row of guesses means the collapse dropped the wrong part.

Related

• Within the group: E1.13.1 On a labeled button the icon aids recognition; it does not carry meaning alone · E1.13.2 When icon and type conflict, people follow the type · E1.13.4 Icon-plus-text spacing and alignment need one consistent system
• Adjacent: E1.04 Icon-button ambiguity · E1.15 Button width and flex · K4 Watch and micro-screens
• Search terms: responsive toolbar · icon-only collapse · keep the label