Top-aligned labels cost height but scan fastest
Aliases: stacked label · vertical label · label above field
What it is
A top-aligned label sits directly above its input slot, sharing a vertical axis with the trough. While filling, the eyes travel down that axis: read the name, drop into the slot, drop to the next field, with almost no left–right jump. The cost is an extra row of vertical space per item, so fewer fields fit on one screen. The issue is whether the scan path runs with the fill order, not whether name and slot are bound in code.
Why it happens
Filling a form is a loop of “read name → form an answer → land in the slot.” Top alignment makes name and slot one visual column, so the eyes only saccade a short distance down; the field name is still in working memory when the answer hits the trough. A left-side name asks for a jump across whitespace or other controls, during which the name is easy to drop, prompting a look-back. Vertical space buys that short path. On forms whose labels vary in length, top alignment also lets every label start at the slot’s left edge, so alignment and rhythm stay stable. Fewer fields per screen is a trade of scrolling for “I can see what this cell is.”
Studying it
Eye tracking is the main paradigm: the same fields in top-aligned, left-aligned, and right-aligned-left-column layouts; record saccades from label to slot, time to first land in the trough, look-backs, and total time. Form-label eye-tracking work in the Penzo tradition repeatedly finds a shorter label-to-slot path and faster completion for top alignment. Factors: ragged versus even label lengths, field count, expertise. Outcomes: saccades, time, wrong-slot rate. Lab forms are quiet and screens are tall, so the height cost is underplayed; on mobile, also log whether Submit remains on the first screen. Do not replace eye movement or time with aesthetic ratings.
Where it stops holding
Settings screens with many switches, short labels, and a known structure make vertical space more expensive than scan speed; top alignment can turn one screen into three. On a wide desktop, a top label over a full-row slot recreates a jump from name at the left to a caret far to the right, wasting the short path. Top alignment’s vertical coaxiality works in both LTR and RTL, but on a watch or a phone with the keyboard up, the extra row can push the slot out of view. Top alignment does not repair a field with no programmatic name.
Applying it
- Stack the label directly above the slot, left edges aligned, on first-time forms—registration, checkout, applications—whose labels vary in length.
- Do not pair a top label with a full-bleed ultra-wide slot; keep the name and the insertion point in one short column.
- Count fields that fit in the real target viewport with label and submit; if submit falls two screens away, group or paginate rather than switching to a harder scan to save height.
- Verify with eye tracking or think-aloud of “say the field name, then point to its slot.” Repeated left–right search means the coaxial path was not built.