Ali Demirbaş - Lab
TRGet in touch

Forms & Signup

Above vs Left-Aligned Form Label A/B Test Example

Left-aligned labels save vertical space but make the eye move horizontally across each field.

  • Forms & signup
  • Form completion rate

Option A vs Option B

Where it sits is the variable; the element itself does not change.

Changed
Placement
Page
Forms & signup
Difference
moved

Hypothesis

Labels above fields create one vertical scan path but make the form longer. On forms with long or translated labels, left alignment also reduces field width.

How to run this test

Primary metric

Form completion rate

Compare successful submissions to see whether label alignment affects completion.

Other metrics

  • Form start rateCompare visitors who intentionally begin the first field after seeing the form.
  • Form completion timeMeasure time from form start to successful submission the same way in both arms.
  • Field-level error rateTrack incorrect-field and formatting errors by field.

What to check before and during the test

  • AlignmentCompare the same form with labels above fields and labels aligned to the left.
  • Keep constantKeep fields, label wording, validation and form width the same.
  • CompletionMeasure form start and successful submission consistently in both arms.
  • ReadabilityCheck that long labels are not truncated, map to the right fields and make sense to screen readers.
  • DeviceReview results separately on devices where the two alignments actually differ.

Setup mistakes to avoid

  1. 1Do not change alignment and field count together.
  2. 2Keep the label-to-field association intact; alignment is a CSS choice, not a semantic one.
  3. 3Do not truncate left-aligned labels with an ellipsis; unreadable labels invalidate the test.
  4. 4Do not roll out the desktop winner to mobile without checking its layout.
  5. 5Do not generalize results from one language to languages with different label lengths.