U5.02.2Legend arrangement direction should match the graphic's spatial orderdesign

A legend should stack vertically or run horizontally depending on which way the chart's categories unfold

Aliases: legend orientation · vertical versus horizontal legend

What it is

A legend has two basic arrangements — a vertical list and a horizontal row — and the choice is not about leftover space but about the direction in which the graphic's categories unfold: vertically unfolding graphics (line charts' top-to-bottom endpoints, vertical bars) take a vertical legend; horizontally unfolding graphics (horizontal bars, left-to-right sequences) take a horizontal one. When the directions align, "nth item answers nth mark" positional correspondence holds; when they conflict, readers must transpose the mapping mentally before matching can even begin.

Why it happens

Directional alignment lowers cost through the same logic as matched order, but on another axis: sequence tracking runs parallel to the scan direction, so when the legend's arrangement shares an axis with the graphic's sequence, the gaze can complete the correspondence along one line; at right angles, every correspondence needs a 90-degree mental rotation, and matching stops being "along the way" and becomes "changing tracks." Rotation itself consumes resources, and rotated position relations are easily misremembered — a wrong correspondence is a wrong category.

Where it stops holding

Space rarely cooperates: narrow screens cannot fit horizontal legends, short cards cannot fit vertical lists — in those cases transpose the direction and accept the cost, or compress the entries (aggregate, prune) back into alignment. Multi-column legends (two items per row as a compromise) break correspondence on both axes at once and are the last resort. Direction ranks below proximity in priority — secure closeness first, alignment second.

Applying it

  • Read the graphic's sequence direction before arranging: line ends top-to-bottom → vertical legend; bars left-to-right → horizontal legend.
  • When the directions must conflict, split the legend into blocks placed near their chart regions, each block's internal order matching its local sequence.
  • Verification: ask readers to find "the second series from the top"; with aligned directions they should slide straight to the legend's second item — visible pauses and re-scans suggest the axes are crossed.

Related

  • Same group: U5.02.1 Legend-to-chart distance sets the cost of each round-trip · U5.02.3 Above, right, and below placements carry different matching costs
  • Nearby: U5.01.3 Legend order should match the graphic order · U5.02.4 Too many legend entries degrade matching into a linear search
  • Search terms: legend orientation · spatial correspondence · legend layout

Cards in the same group

Quick Actions

Share

Share this page

ios_share

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