U5.02.3Above, right, and below placements carry different matching costsdesign

Putting a legend on the right usually costs less lookup effort than putting it above or below

Aliases: legend position · legend placement

What it is

The three common legend positions are not equally expensive: the right side usually costs least — it runs parallel to most graphics' vertical sequences and leaves the reading entry point untouched; above costs more — read first but distant from the plot's body; below is worst — farthest from the scan's origin and from the data exactly when memory needs support, and the first casualty of scrolling containers.

Why it happens

The positional cost differences come from reading flow multiplied by memory decay: reading starts top-left, so a right-side legend produces short lateral gaze transfers that align with the vertical sequence; an above legend is read before the chart, and by the time readers enter the plot with the legend in mind, the memory is already decaying — worse still at the plot's far end; a below legend forces every round-trip to span the full chart vertically, the longest path of all, and in a scroll container it may not even be in the viewport. Position is not an aesthetic preference; it is the geometry of flow and memory.

Where it stops holding

The rule has a clear domain: it holds on desktop-sized canvases; mobile widths push legends above or below as a practical compromise, which must be offset by strict entry-count control. For centre-symmetric forms like donut charts the right-side advantage weakens, and proximity plus consistency take over. Cross-product consistency outranks single-chart optimality — users hold positional memory for legends, and shuffling positions costs as much as a wrong position.

Applying it

  • Default desktop legends to the right, close against the plot; consider above only when the right side has no room.
  • On mobile use a compact top legend with a strict entry cap; avoid long legends below a chart inside a scrolling region.
  • Verification: screen-record both placements and time every category match; the right-side version should be visibly smoother — if the gap is negligible, settle by consistency.

Related

  • Same group: U5.02.1 Legend-to-chart distance sets the cost of each round-trip · U5.02.2 Legend arrangement direction should match the graphic's spatial order · U5.02.4 Too many legend entries degrade matching into a linear search · U5.02.5 Interactive legends double as filters, but clickability must be signalled
  • Nearby: U5.01.1 Legends force eye round-trips between chart and key · U5.01.3 Legend order should match the graphic order
  • Search terms: legend position · reading path · chart layout cost

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U5.02.3