Top Aligned Labels
EBay
Problem
You need to lay out a form.
Solution
When designing a form, put the labels above the controls.
Context
The time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for instance, entering a name, address, and payment information in a check-out flow).
You are not constrained by vertical space.
Be aware that minimizing completion time is not always the main goal when designing a form. Sometimes the overall design for the page is more important and you are not worried about the user spending some seconds more in understanding the page. Evaluate using other layout patterns like Right Aligned Labels or Left Aligned Labels if they fit your design better.
Rationale
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 need to move in one direction: down.
As the content can expand horizontally the length of the labels can localized and complex input controls can be used without affecting the layout.
Eyetracking studies show that placing a label right over its input field permit users to capture both elements with a single eye movement. Also, if a label indicated data that was very familiar to users—for example, their first name or family name—users did not fixate on the label separately to read it. They were able to view both the label and the input field in the same area; thus eliminating the need for additional fixations.
Implementation
Put the labels above input controls. Keep labels and input controls left-aligned.
To make it easier to identify each input area, the space between a label and the control below should be less than the space between a control and the label for the next control. For example, the space between “Duration” and the combo box with “7 days” is less than the space between the combo box and “Private Listing”.
Evaluate using bold fonts for input field labels. This increases their visual weight and brings them to the foreground of the layout. When they are not bold, labels may compete with input fields for a user’s attention as they have almost equal visual weight.
Examples
The primary example is from Ebay. Note that the labels are on top and also with a bold font.
http://quince.infragistics.com/11b6
This example from Ebay uses this technique in the form they use to sell a new item. The form would be large regardless where the labels are displayed, so having the labels above the input controls is not a problem. Given the fact that the input controls are very different, having the labels on the top helps to give uniformity to the form.
http://quince.infragistics.com/11gc
I've noticed a few newer sites using unnaturally large input boxes on sign up forms, but the point here is that it is a pleasantly straightforward example of top aligned labels.
http://quince.infragistics.com/10xa
Sources
Luke Wroblewski, Web Application Form Design
Matteo Penzo, Label Placement in Forms
Tags
