Design Form Layout

Use single-column layout, top-aligned labels, blur-triggered validation, and specific action labels to reduce form abandonment and completion time.

Why This Is Best Practice

Adopted by: Google Material Design, Apple HIG, IBM Carbon, Shopify Polaris, and Atlassian Design System all specify single-column forms, top-aligned labels, and inline validation as their default form pattern; Baymard Institute's Form Usability research (2020) is the most comprehensive empirical study of form UX with 40 guidelines tested across 30+ major e-commerce sites; Luke Wroblewski's "Web Form Design" (Rosenfeld Media, 2008) is the canonical design reference used at Google, Yahoo, and across the industry Impact: Baymard Institute: 26% of US adults abandon checkout primarily due to form friction; single-column forms are completed 15.4 seconds faster than multi-column forms of equivalent length (Wroblewski 2008); top-aligned labels reduce user eye-movement by 50% compared to right-aligned or left-aligned labels, and reduce completion time by 20% (Matteo Penzo eye-tracking study, LukeW 2006); inline validation reduces form errors by 22% compared to post-submit validation (Holst, Baymard 2020) Why best: Multi-column forms feel efficient to designers because they show more fields per viewport — but eye-tracking shows users scan vertically, not in columns; column-jumping doubles eye movement and cognitive load; the efficiency gain in viewport usage is outweighed by the increase in completion time and error rate

Sources: Wroblewski "Web Form Design" (Rosenfeld Media, 2008); Baymard Institute "Form Field Usability" (2020); Penzo "Label Placement in Forms" (LukeW, 2006); NNG "Form Design Garage" (Pernice, 2016)

Steps

1. Use single-column layout

Default to single-column forms. Place one field per row, full width: