Right Aligned Labels

Example of the Right Aligned Labels UX pattern.

Problem

People don’t like forms and want to get through them as quickly and painlessly as possible.

Solution

To make relationships between information clear, right align labels up against the information or fields they describe, leaving a consistent small amount of space between them.

Context

You are laying out a form or similar presentation of fields with associated text labels.
The length of the textual labels may vary greatly.
It is more important for users to fill out a form from start to finish, than to find specific fields somewhere in the form. If instead it is important for users to find specific fields, consider using the Left Aligned Labels pattern instead.

Rationale

Objects that are closer together are perceived as being related, more so than objects that are further apart. Because you want fields and the textual labels that describe them to be perceived as being related to each other, you should place them close together. When this pattern is applied to a long list of pairs of textual labels and fields, it becomes easier to notice that each textual label describes each field that is next to it.

Implementation

Simply right align each textual label up against the field it describes, leaving only a consistent small amount of space between the label and the field. Likewise, make sure that each field is left-aligned up against this space next to the textual label. The left and right sides of the overall list of pairs of labels and fields will probably look ragged, but that’s ok; the overall pattern of each label being related to each field next to it is what you are after, and this allows users to get through the list, or form more efficiently.

Even though the left and right sides may be ragged, the consistent small amount of space between the labels and fields all of the way down the list will create a symmetrical, or centering effect that will aid in the list being perceived as being visually pleasing and easier to understand as a whole.

Examples

The primary example for this pattern comes from Macromedia Contribute. Labels for data entry fields are right-aligned up against the fields to make it clear which label goes with which field.

http://quince.infragistics.com/117h

Example of the Right Aligned Labels UX Pattern

This pattern is useful in general for information design (i.e. not only for forms).This example shows a Mac OS X address-book entry that uses Right Aligned Labels, as well as differences in font weight and colors for the labels and information.

http://quince.infragistics.com/118t

Example of the Right Aligned Labels UX Pattern