When icon and type conflict, people follow the type

What it is

A trash can next to Archive, a paper plane next to Delete, a check next to Cancel: when icon and type point at different actions, most people predict consequences from the type. Conflict is not averaged into a middle meaning; the verbal channel wins. Designers who think the louder icon will win reverse the action they believe is being executed from the one that actually is.

Why it happens

Words are the precise learned channel for naming actions; graphics are approximate. Under conflict, the precise channel does the final check, akin to reading the word instead of the ink in a color-word clash. In the scan an icon may pull the eye to the wrong key; in the check, type pulls the action back—so people hit that key and execute the type, not the icon. If the check is skipped (speed, tiny type, not the user’s language), the icon may win briefly, and the outcome is the wrong key rather than a compromise. Screen readers speak type (or the accessible name); conflict does not exist on that channel, only the words remain. The main casualties are sighted people who scan icons: pulled to the wrong key, then talked into pressing it.

Studying it

Run conflict trials: icon means delete, type means archive, task “archive this item.” Log which control was hit and what people thought happened. Contrast with congruent trials.

Independent variables: conflict direction (icon-delete/type-archive vs the reverse), type size, time pressure. Dependent variables: acting on type, acting on icon, hesitation.

Asking “what do you think the icon means?” pushes people onto the graphic channel. The task should be to perform a named action, and see which side they trust.

Where it stops holding

If people cannot read, or localization failed, the verbal channel is weak and the icon is likelier to win—that is failed translation, not a more reliable icon. A huge icon with footnote-sized type may make the check impossible. Icons in legal prose carry almost no weight. Treating conflict as an Easter egg destroys trust in every other labeled button in the product.

Applying it

• When icon and type do not co-refer, change one of them; do not let one “explain” the other.
• In review, cover icon and type separately; both sentences must name the same action.
• Do not keep a conflict on the claim that “people know the icon.” Measurement shows type wins, and accidents follow type.
• Verify with a deliberately conflicting button (in a test only) and ask people to perform the typed action. If they press and then describe the icon’s consequence, or refuse to press, conflict is already interfering. Production should contain no such trial.

Related

• Within the group: E1.13.1 On a labeled button the icon aids recognition; it does not carry meaning alone · E1.13.3 In a narrow space keep the type, not the icon alone · E1.13.4 Icon-plus-text spacing and alignment need one consistent system
• Adjacent: E1.06 Button labels · F6.01 Icon ambiguity · A5 Attention
• Search terms: Stroop · label-icon conflict · text superiority