Ali Demirbaş - Lab
TRGet in touch

UI Elements

Adding Text Labels Next to Icons: A/B Test Example

The meaning of an icon depends on familiarity and context.

  • UI elements
  • Use of the labeled function

Control vs Variant

Absent on one side, present on the other.

Changed
Presence
Page
UI elements
Difference
added

Hypothesis

A visible label may clarify an unfamiliar function but reduce space for nearby controls. Add labels to the defined icon set while keeping the icons, actions, and accessible names usable in both arms.

How to run this test

Primary metric

Use of the labeled function

Compare completion of the function represented by the selected icons among eligible assigned visitors.

Other metrics

  • Action completion rateCompare completion of the action represented by the icon.
  • Misclick rateMeasure clicks that do not complete the intended function or lead somewhere else.
  • Function-related support requestsCompare questions about what the icon means using the same traffic denominator.

What to check before and during the test

  • LabelsAdd visible text labels beside selected icons.
  • Icon setChoose the functions in scope before the test and keep the icons unchanged.
  • PlacementUse one fixed label position.
  • SpaceCheck space for nearby controls and content.
  • Device and languageReview layouts where localized labels have different lengths.

Setup mistakes to avoid

  1. 1Do not change the icon when adding its label.
  2. 2Do not count a hover-only tooltip as a visible text label.
  3. 3Do not shrink tap targets to fit labels.
  4. 4Keep accessible names available to screen-reader users in both arms.
  5. 5Do not generalize from one language to languages with longer labels.