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. 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.
A/B test scenario. This page is a test plan, not the result of a real experiment.
- 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
With labels above the fields, people may read each label with its field at a glance and pause less; left-aligned labels make the form look shorter but squeeze fields when labels run long. On forms with long or translated labels, top alignment may lead on the form completion rate; with short labels, the gap may be small.
Test plan
When to run this test
Look at this test if the label layout seems to slow people down, such as form analytics showing long pauses between fields, entries typed into the wrong field, or session recordings of users going back to earlier fields to recheck what a label asked for. Whichever alignment works better should carry more of the people who start the form through to submission, with fewer field-level errors. If drop-off comes from one required or confusing field, deal with that field first; before launch, also make sure long labels fit uncut in the left-aligned version.
How to measure success
Form completion rate
Compare successful submissions to see whether label alignment affects completion.
Also track
- 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.
How to set it up
- 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.
What to watch when reading the result
- 1Choose the alignment by form completion rate; form start rate, completion time and field-level errors show where the difference comes from. Do not pick an alignment on speed alone if it is faster to fill in but produces more wrong entries.
- 2Read the result only on devices where the two alignments actually look different, and do not apply the desktop winner to mobile and close the test without a mobile result of its own. On a multilingual site, validate a result from one language again in languages with different label lengths before carrying it over.
- 3With only a small gap, enter each alignment's visitors and form completions in the A/B test significance calculator. If it shows no significant difference, record that this sample could not tell the two alignments apart; do not call a winner, and decide on readability and accessibility instead.
Frequently Asked Questions
What should happen to long left-aligned labels?
Do not truncate essential label text. Keep the association with each field clear and verify screen-reader interpretation. An unreadable label undermines the comparison.
Can desktop label alignment be applied to mobile and other languages?
Validate contexts where the layouts actually differ. Longer translated labels and narrower screens can behave differently. Use valid form completion as the primary outcome.
More tests in Forms & Signup
All testsFloating vs Always-Visible Form Labels A/B Test
Forms & signupForm completion rate
The floating label that starts inside the field and rises on typing, compared with a label that never disappears. Setup, arms and completion metric.
One-Column vs Two-Column Form Layout A/B Test
Forms & signupForm completion rate
Fields laid out in two columns against the same fields stacked in one. Explains the zigzag scan problem, perceived length and how it gets measured.
Easiest Field First: Form Field Order A/B Test
Forms & signupForm completion rate
Reordering every field from easy to hard, against leaving the current neutral order. Includes the counter-argument about pushing hard fields to the end.