A Hover-Free Explanation for Product Status Icons
A small icon beside a product says something: low stock, discontinued, made to order, new. On a desktop, a tooltip may explain it when the pointer rests on it. On a touch screen there is no resting pointer, so the meaning may never appear. This article proposes an interaction map that makes each icon's meaning reachable without hover. These are design suggestions to adapt and test, not a description of existing behaviour.
Start with the inventory
List every status icon you use, and for each one write its meaning in a short plain sentence. If you cannot write the sentence in one line, the icon may be doing too much. If two icons have nearly the same sentence, consider merging them.
Three ways to reveal a meaning
Visible text label next to the icon. The simplest and the most reliable, but it takes space. Tap to open a small note that stays until dismissed. Works on touch and can also work with a keyboard. A legend elsewhere on the page that lists all icons with their meanings. Useful as a backup, but readers may not find it.
You can combine them, for example a tap note on product cards and a legend at the foot of the list.
The icon-label interaction map
Build one row per icon. Columns:
Icon name Meaning sentence Visible label, if any Touch action (tap) Keyboard action (focus then press a key) Hover action, as an extra only How the note is dismissed Text equivalent for screen readers Where the legend lists it
The rule behind the map is that hover may add convenience but must never be the only route to the meaning.
Branching choices
If space on a card allows, use a visible label and skip the interaction. If space is tight, use a tap note and make the tap area large enough to hit comfortably. If several icons sit close together, consider giving each its own note, and close any open note when another opens. If an icon is purely decorative and repeats nearby text, mark it so it is not announced twice.
A worked example
Imagine a hypothetical shop selling garden tools, with three icons: a clock for made to order, a drop for low stock, and a star for new. On a phone, tapping the clock opens a note reading Made to order, ships after it is prepared. Tapping elsewhere or pressing the close control dismisses it. A legend under the list repeats all three. A screen reader hears the same sentence as the visible note.
Stop conditions
Stop and redesign if a meaning appears only on hover. Stop if a note covers the icon that opened it so it cannot be closed. Stop if two notes can stay open and overlap.
Acceptance checks
On a touch device, each icon can be tapped and its meaning appears. The note can be closed by touch. The same meaning can be reached by keyboard. A screen reader gives the same sentence. The legend matches the notes. Test with the icon at the edge of the screen, since notes may be clipped there. If any row of the map fails a check, mark it open and fix before relying on the icon.