Why might right aligned field labels be better?

Question

For the longest time, I've used left-aligned labels in my forms, like this:

I did this because I thought having the labels left aligned made it easier for readers to scan the list of labels.

However, I found my axiom challenged recently while watching the video of Billy Hollis' talk from NDC 2011, in which Billy asserts that right-aligned labels are simply better, like this:

I've done a bunch of research and found a lot of discussion, including this UX question, which compares and contrasts the approaches, but nothing definitive.

In particular, I haven't been able to find anything to indicate why Billy Hollis changed his opinion from left- to right- alignment for labels (apparently he switched around 2007).

I figure Billy's too smart to have made the change without evidence - so I'm interested in seeing that evidence for myself.

Answer 1

Luke Wroblewski wrote about this in Top, Right or Left Aligned Form Labels (April, 2007).

In it, he references eyetracking data from an article by Matteo Penzo called Label Placement in Forms (July, 2006). Matteo drew several conclusions from this study, including that right-aligned labels have a lighter cognitive workload for users:

Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.

It's possible Billy saw Luke's article and changed his stance based on it.

Answer 2

Right-aligned, definitely.

You can see this as a function of the Gestalt Grouping Principles: objects that are close together will be visually parsed together and interpreted as belonging together. Obviously, this is useful so people can read smoothly from label to text field. Therefore, by right-aligning the labels next to their corresponding text-fields, you are creating easier readability, because your visual system naturally pairs up the label with the field.

In the example you show, I would even move the labels slightly closer to the text-fields than they are already, since the fields themselves are closer to each other (again, implicit grouping) than the labels and fields are, and we know that proximity is generally the most important cue for grouping (Quinlan & Wilton, 1998). It takes the brain longer to process text than it does to make decisions about where shapes are ("where?" usually gets answered before "what?"), so it's worth making that as easy as you can for the reader, IMO.

Answer 3

Sometimes I'll position my labels immediately above or sometimes immediately to the left of form elements. It simply depends on space constraints of the page I'm working with. But once I make my decision I'm consistent it with it.

There are a couple guidelines I follow for each case:

1. If you place the label above the textbox, make sure you provide ample spacing underneath the textbox. You don't want the user to confuse labels because they're too tightly stacked.
2. If you place the label to the left of the form element, always right align the label. It makes it much easier to connect the label to the textbox at a quick glance. This is especially true when the labels vary greatly in length.

I believe that the most important thing here is not for the user to be able to scan the labels quickly as if they were a list, but rather, to associate the labels to their respective form elements as quickly and effortlessly as possible.

Answer 4

I recently carried out an extensive usability study into the design of web forms and these were my key conclusions:

1. The best alignment is around a central axis (i.e. right-aligned labels and left-aligned fields).

2. A different alignment can work just as well if field highlighting is used (a coloured outline or highlight over the field currently being used).

3. User validation messages should be in-line and integrated with help tips and confirmation - i.e. as a user enters a field, something appears next to it explaining what to do, and as they leave it they either get "there's a problem" or "that's great" (usually in the form of symbols like ticks and crosses).

4. Continuation buttons should be on the bottom right (despite some theories put forward based on eye tracking!), should be in lower case / sentence case, and should show direction (e.g. an arrow pointing to the right).

Of course I learned much more but hopefully these key points above will help you! They're by no means ground-breaking, really just confirmation of what we thought we already knew.

Answer 5

There's a great discussion of all sides of this argument at UX Matters.

The short version is that there are different situations where different methods work best. I'm currently building a very long form where the most important task is scanning the list of fields for the one you want to enter some data into. In this case, I've opted to go left-aligned. For shorter forms or forms where each all fields are going to filled out in sequence, right-aligned is probably better.

Answer 6

Labels closer to fields have always been more usable due to the principle of proximity. This is because "the brain groups together the elements instead of processing a large number of smaller stimuli, allowing us to understand and conceptualize information more quickly."

What's even more usable than right aligned labels are top aligned labels. It gives users closer proximity to fields, but it also helps mobile users see the label when they zooming into a field. And when labels get long from language translations, users will still be able to see the label since it's above the field, not to the side where it can get cut off. See the article below for visual examples.

Another Case for Top Aligned Form Labels

Answer 7

One comment on left aligned labels that like better than right. Most comments have been referring to only the labels and associated fields, the one thing not being considered is white space and balance of the overall form. Using jagged left edges creates a strong sense of imbalance when the user first looks at the form (while processing a user looks at one field at a time, that's true, but when the form first opens, the user scans the entire form and the resulting first impression has a significant impact on whether they "like" or "dislike" the program in general.

Answer 8

The only advantage to left-alignment I can think of is if most fields are irrelevant to each user. In this case, you need to left-align to help users pick out the fields they need (because they read web pages in F-shaped patterns, and find things best when they're 'docked' to the margin).

Then again, if most of your fields are irrelevant, there's probably something wrong with your form. You might split it into different variants for different types of respondent, or look at pruning extraneous fields.