Guidelines
Suggest edit

Use pictographic data marks to attract initial attention in chart collections

For peripheral scan-and-select tasks, use pictographic data marks on chart thumbnails to maximize initial engagement and address plain previews that blend into surrounding items for viewers browsing mixed text and chart collections.

  • purpose:refine
  • basis:empirical
  • quality:aesthetics
  • lever:encoding
  • reading-mode:overview
  • communication:resonance
  • channel:shape:use

advice

Thumbnail pictographs

Use pictographic data marks in chart thumbnails when the chart must win attention among competing items. For example, replace a plain bar thumbnail with a stacked pictograph thumbnail in a grid of previews that also contains text and other charts.

reason

Why pictographic previews draw attention

In a peripheral scan, viewers need a reason to stop and inspect one item before another. Pictographic marks create a more distinctive preview, so readers choose that item sooner.

Mechanism: Pictographic data marks make a chart preview stand out during an overview scan, increasing the chance that viewers inspect it first.

Evidence: In the thumbnail-browsing experiment, ISOTYPE-style chart previews attracted earlier and more frequent initial views than plain bar-chart or text previews, and this preference persisted across trials (Haroz et al., 2015).

context

Use when previews compete for clicks or opens

  • User Goal: Get viewers to inspect a chart more closely.
  • Task: Browsing and selecting among multiple preview items.
  • Data: Preview-sized charts or cards mixed with non-chart items.
  • Chart Setting: A small, slightly blurred, or peripheral thumbnail competes with text and other visual items in a grid.
  • Audience: Readers choosing what to open first rather than already focused on one chart.
  • Success Criterion: More early opens or first views.

exceptions

Do not generalize this to focused detailed reading

Break it when: The chart is already being read in focused detail rather than competing for first-glance attention. Why: The evidence supports initial engagement during browsing, not improved detailed interpretation after selection.

costs

Tradeoffs of attention-seeking thumbnails

Sacrifice: You give up some minimalist uniformity across previews. Risk: A more engaging preview does not guarantee better detailed comprehension. Mitigation: Keep the pictograph inside the data marks and avoid unrelated decorative images.

mistakes

Common failure mode

Mistake: Assuming any nearby picture will create the same attention effect. Why it fails: The engagement evidence came from pictographic data marks, while unrelated imagery hurt other tasks.

check

How to test it

Failure Sign: Plain chart previews are opened no sooner than surrounding text items. Quick Check: A/B test a plain bar thumbnail against a pictograph thumbnail in the same mixed grid and count first opens in the opening seconds. Stronger Test: Track the proportion of viewers opening each preview type over roughly the first 15 seconds.

fix

What to change

  • Convert the preview chart’s data marks from plain bars to pictographic marks.
  • Keep the pictograph recognizable at thumbnail size.
  • Remove decorative pictures that are separate from the data marks.

References

Haroz, S., Kosara, R., & Franconeri, S. L. (2015). ISOTYPE Visualization: Working Memory, Performance, and Engagement with Pictographs. Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, 1191–1200. https://doi.org/10.1145/2702123.2702275