Left Aligned Labels
Problem
People don’t like forms and want to get through them as quickly and painlessly as possible.
Solution
Help people quickly scan the fields on the form by aligning their labels evenly on the left side and aligning their corresponding inputs in an adjacent column.
Context
- The form is not familiar to users or it has several optional fields.
- Input controls are mixed with a lot of text, either because of large descriptions for each option or because they use Fill in the Blanks, like in the Gmail screenshot.
- It’s more important to help people find specific fields than to plow through an entire form to completion. If time to completion is your primary concern, consider using Top Aligned Labels or Right Aligned Labels instead.
Rationale
The main reason for choosing left-aligned labels is to make it as easy as possible for people to scan what the form is asking of them or allows them to modify. This can be useful for several purposes. People can scan to see if they have the information required or perhaps to just confirm that it is the right form. If it is a form used to update existing values, they can scan to more quickly find the value they want to update, or maybe if you have only a few required fields, they can scan your form more quickly to find those.
Implementation
It’s probably best to use a table/grid to implement this alignment because the table will help ensure both vertical and horizontal alignment of labels and fields as well as consistent spacing among all the label-field combinations.
Regardless of how you achieve it, you need to left align your labels along a grid or guide line. Ensure there is enough white space between the label and the field to easily distinguish them and aid in scanning the labels, but don’t use so much that it is difficult to make the connection from the label. The amount of space will usually be in large part determined by your longest label, though you may need to allow for extra space if localizing. Wrapping is another option to deal with this.
Also add enough white space between rows to help guide people to connect the labels with their fields—using the white space as a visual guide. Similarly, if you have groups of values, add extra white space between the groups.
Examples
In the primary example from Gmail, any other layout for the labels will not look good. Having them right aligned or above the input control will make difficult to differentiate the labels from the input controls.
http://quince.infragistics.com/11cr
The Microsoft Outlook 2007 dialog to create a new email account left aligns the text boxes field labels, and groups the fields using bold titles.
http://quince.infragistics.com/11gq
Microsoft Money Essentials groups the fields with group boxes and keeps the input control alignment among the different groups. The amount type and category throw off the second group of values on the right; it might have been better to choose a different approach for them.
http://quince.infragistics.com/10zd
Sources
Luke Wroblewski, Web Application Form Design
Matteo Penzo, Label Placement in Forms
Tags
