Guidelines
Suggest edit

Place labels and annotations next to the marks they explain

For lookup and explanation tasks, use nearby labels and annotations on charts to improve readability and mitigate back-and-forth legend or text lookup for readers scanning a single display.

  • purpose:refine
  • basis:empirical
  • quality:readability:use
  • lever:text-annotation
  • operator:lookup
  • component:label:use
  • component:legend:avoid
  • polish:annotation

advice

Move text to the mark

Put text next to the data element it refers to. For example, label slices directly instead of making readers match colors to a separate legend, and place explanatory callouts beside the highlighted line segment rather than in distant bullets.

reason

Why nearby text works

Readers should not have to hold a color, name, or verbal claim in memory while searching elsewhere in the figure. Nearby labels and annotations reduce extra eye movements and working-memory load.

Mechanism: When the label or explanation sits beside the mark, readers can identify and interpret the target in one place instead of switching back and forth between separated parts of the display.

Evidence: The paper argues that legends hurt performance because they require maintaining features in memory, shows a directly labeled pie example as easier to use than a legend-based version, and recommends placing verbal information near the visual information of interest (Zacks & Franconeri, 2020).

context

Use when readers must match text to marks

  • User Goal: Identify named categories or understand a highlighted claim.
  • Task: Lookup or explanation.
  • Data: Mark identities depend on labels, colors, or callouts.
  • Chart Setting: A separate legend or distant explanatory text is present.
  • Audience: Readers scanning quickly through one display.
  • Success Criterion: Readers answer lookup questions without repeated back-and-forth glances.

exceptions

Do not use when callouts would overwhelm the chart

Break it when: Many items would need labels or callouts at once. Why: Only a very limited number of things can be called out with language without overwhelming the viewer.

costs

Trade space for less lookup pain

Sacrifice: Nearby text uses space around the marks. Risk: Too many labels can clutter the chart and compete with the data. Mitigation: Label the marks or claims readers must identify directly, not every possible detail.

mistakes

Avoid remote lookup aids

Mistake: Keeping a color legend or side bullets even when the viewer must map each text item back to specific marks. Why it fails: The viewer must repeatedly store information in memory and search the chart again.

check

Check whether the reader must look away

Failure Sign: Readers keep jumping between legend, bullets, and plot before answering. Quick Check: Ask someone to answer a named-item question; if they must remember a color or phrase while scanning elsewhere in the chart, the text is too far away. Stronger Test: Compare the current version with a directly labeled version on the same question and see which one readers answer more smoothly.

fix

Bring the words to the data

  • Move category names onto the slices, bars, lines, or points they identify.
  • Move explanatory text next to the highlighted region or comparison.
  • Remove a separate legend when direct labeling can replace it.

References

Zacks, J. M., & Franconeri, S. L. (2020). Designing Graphs for Decision-Makers. Policy Insights from the Behavioral and Brain Sciences, 7(1), 52–63. https://doi.org/10.1177/2372732219893712