Forms & Signup
Floating vs Always-Visible Form Labels A/B Test
Floating labels save space and make a form look shorter, but when a field is empty they may be harder to distinguish from placeholder text. Visitors may not know what is required until they interact, and autofill can create further conflicts.
A/B test scenario. This page is a test plan, not the result of a real experiment.
- Forms & signup
- Form completion rate
Control vs Variant
The visual treatment is the variable, not the words or the position.
- Changed
- Visual style
- Page
- Forms & signup
- Difference
- changed
Hypothesis
If labels start inside the field and move up once someone types, the form looks shorter and people may find it easier to begin. An easier start could lift the form completion rate, though if an empty field's label is mistaken for a placeholder, the same rate could fall.
Test plan
When to run this test
A low form start rate, session recordings of visitors scrolling past the form without starting, or survey comments that it feels long can mean the form loses people simply because it looks long. If the floating label works as intended, more visitors reach submission and field-level errors do not rise. If drop-off comes from the number of required fields or from validation errors, address those first, and before launch check that the floating label does not take the place of helper text and that its transition respects reduced-motion settings.
How to measure success
Form completion rate
Compare successful submissions to see whether floating labels affect completion.
Also track
- Field-level error rateCompare format and validation errors for each field.
- Form completion timeMeasure time from form start to successful submission consistently.
- Abandonment at labeled fieldsTrack visitors who leave before completing a field with a floating label.
How to set it up
- Label behaviorCompare fixed labels with one predefined floating-label design.
- Keep constantKeep fields, label copy, validation and helper text unchanged.
- Empty fieldsMake sure visitors know what to enter before interacting with a field.
- Filled and invalid fieldsCheck that labels remain readable in autofilled, completed and error states.
- AccessibilityVerify label contrast and that screen readers identify it as the field name.
What to watch when reading the result
- 1Set any lift in form completions against the field-level error rate and abandonment at labeled fields. If submissions rise while formatting errors grow, the empty-state label may not be clear enough, and shipping on that result would be premature.
- 2Only this floating-label design and this form are covered; turning labels into placeholders entirely is a separate, riskier change that this result does not support. Do not suppress autofill with the testing tool, so filled and autofilled fields are measured as they behave in real use.
- 3Before reading an unclear result, confirm that the animation timing never changed during the test, since a mid-test change mixes two different variants. Then check whether the gap goes beyond sampling noise with the A/B test significance calculator.
Frequently Asked Questions
How can floating labels be distinguished from placeholders?
Users must understand the requested input before interacting. Keep a persistent, correctly associated label rather than replacing it with disappearing placeholder guidance.
How can autofill affect floating labels?
Autofilled text can overlap the label. Test filled states and preserve real browser autofill rather than disabling it for the experiment.
What could go wrong even if form completion is unchanged?
Formatting errors or abandonment at the affected field may increase. Use valid completion as the primary outcome and inspect error states and field-level drop-off diagnostically.
Which accessibility checks matter for floating labels?
Verify text contrast, the field’s accessible name and readable filled or invalid states. Respect reduced-motion preferences and keep animation behavior stable.
More tests in Forms & Signup
All testsOne-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.
All Fields Upfront vs Step-by-Step Reveal A/B Test
Forms & signupForm completion rate
Showing the whole form at once, or revealing fields as each one is filled. Read the expectation-setting argument against the perceived-length one.