Left labels save height but add saccades
Aliases: horizontal label · side label · label column
What it is
A left-aligned label puts field names in a column and input slots to their right, sharing one row of height. More fields fit on a screen and scrolling drops. The cost is a horizontal saccade on every answer: read the name on the left, then land in the trough on the right, with a jump that still changes when names vary in length. The trade is height versus scan, not the short vertical path of a stacked label, and not whether a screen reader can hear the name.
Why it happens
A left column of names can be scanned quickly as a directory of “what is on this page,” a second benefit besides saved height. Filling is not directory scanning: each answer must carry the just-read name across a gap into the slot. Right-aligning the names and pulling the trough’s left edge close shortens that jump; eye-tracking in the Penzo tradition often finds this faster than left-aligned names, at the cost of a ragged right edge and a weaker directory. Left-aligned names look tidy, but the gulf to the slot is sized by the longest label, so short names face a void, the saccade lengthens, and people look back. Density on a wide screen is bought with that unstable horizontal path.
Studying it
Build the same form as left-aligned-left, right-aligned-left, and top-aligned. Track saccade amplitude from name to slot, look-backs, time, and fields per viewport. Factors: variance in label length, column gutter, required markers crowding the name. Outcomes: jump distance, wrong slot, scroll count. Time penalties shrink for experts on internal tools who already know the names and click the slot directly; split novices from experts rather than treating admin completion time as evidence for public forms.
Where it stops holding
On a narrow screen, left placement splits name and slot or crushes the slot until it cannot show expected length, so the height-saving premise dies. Long labels wrap, row height breaks, neighboring names and slots fall out of alignment, and the jump becomes a hunt for the row. Screen-reader users do not take saccades; the visual cost is irrelevant to them. After translation into German or Finnish the left column explodes, and a gulf that was acceptable in English becomes unusable. Narrow slots for numbers and short codes leave a large void in the middle and magnify the jump.
Applying it
- Use left labels only on wide desktops, with short near-even names, on internal forms people will fill repeatedly, trading height for on-screen density.
- If you do, right-align the names and pull the slot close so the gulf can be crossed in one glance; do not shove the trough to the far side to keep a flush left column.
- Cap the label column; when a name wraps, vertically center it with its own slot so neighboring rows do not misalign.
- Verify with gaze tracking or per-item think-aloud of “read the name, point to the slot.” A pause mid-jump, a look-back, or a point at the neighboring row means tighten the gutter or stack the labels.