Web Application Form Layout

by Luke Wroblewski January 15, 2005

Quite rare is the Web application that doesn’t make extensive use of forms for data input and configuration. But not all Web applications use forms consistently. Variations in the alignment of input fields and their respective labels can support different aspects of user behavior.

“Input elements should be organized in logical groups so that your brain can process the form layout in chunks of related fields.” –HTML: the Definitive Guide

For instance, when the time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for example entering name, address, and payment information in a check-out flow), a vertical alignment of labels and input fields is likely to work best. Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time. Users only move in one direction: down.

When the data being collected by a form is unfamiliar or does not fall into easy to process groups (such as the various parts of address), left-justifying input field labels makes scanning the information required by the form easier. Users can just scan the left column of labels up and down without being interrupted by input fields. However, the distance between the labels and input fields is often elongated by long labels, and as a result, completion times may suffer. Users have to “jump” from column to column in order to find the right association of input field and label before inputting data. This layout has the added benefit of requiring less screen height than the vertical format mentioned above.

An alternative layout, right aligns the input field labels so the association between input field and label is clear. However, the resulting left rag of the labels reduces the effectives of a quick scan (to see what information the form requires). In the Western world, we read from left to right, so our eyes prefer a hard edge along the left side.

In each of these examples, the primary action associated with the form (most commonly “submit” or “save”) needs to carry a stronger visual weight (in this case bright color, bold font, etc.) than the other form elements and align with the input fields. This illuminates a path for users that guides them to competition.