Top, Right or Left Aligned Form Labels

by Luke Wroblewski April 1, 2007

In my Best Practices for Web Form Design compilation, I outline several considerations applicable when deciding how to layout form labels online. As the question of top, right, or left aligned form labels comes up often for designers, here’s a short overview of the pros and cons of each method.

For illustrated examples and more details, take a look at the full document: Best Practices for Web Form Design (3.9 MB PDF).

formalignment

Top Aligned

Top-aligned labels tend to reduce completion times (how long it takes to complete a form) the most for familiar data (i.e. address, credit card, etc.) because they only require a single eye fixation to take in both input label & field. Top-aligned labels also work well for forms that require localization or long labels as there is plenty of horizontal real estate to expand/contract the label without negatively impacting the overall page layout. Top-aligned labels, however, do take up a lot of vertical real estate.

Right Aligned

Right-aligned are a bit slower to complete but require less vertical screen space. They do, however, have flexibility issues when the labels change widths. When localizing applications, it is important to note that languages like German or French can be twice as long as English. Right-aligned labels also don't work well when people need to scan a set of labels to see what is required as a left rag text impedes readability.

Left Aligned

Left-aligned forms are the slowest of the three to complete because of the number of eye fixations they require to parse. However, for forms with lots of optional fields or unfamiliar data (like preferences dialogs or advanced settings), they allow users to effectively scan labels. In fact, if you want users to slow down and consider each input in a form more carefully, left-aligned labels are a good way to go.

Note

The eyetracking data referenced here is from Matteo Penzo's article on UXmatters that analyzed my original Web Application Form Design recommendations published in January 2005.