Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

Left Aligned Labels

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:

Right Aligned Labels

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.

share|improve this question
5  
The short answer is that people don't scan the list of labels, so any win from having them left-aligned is lost. People look at one label, then enter text, then look at the next label. –  Alex Feinman Jul 11 '11 at 14:14
    
Also worth considering mobile when designing forms for the web uxbooth.com/blog/mobile-form-design-strategies Hope that helps :) –  user6419 Jul 11 '11 at 15:57
add comment

8 Answers

up vote 84 down vote accepted

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.

share|improve this answer
3  
Thanks for those links - very interesting reads. –  Bevan Jul 11 '11 at 0:31
1  
In Luke's latest book "Web Form Design" (chapter 4) he says top-aligned is the fastest, right-aligned is second fastest and a good choice if vertical space is an issue, and left-aligned is slowest but a good choice if you want people to read the labels carefully. –  tajmo May 18 '12 at 18:40
    
in the web it's generally horizontal space that is scarce rather than vertical since most people expect to be able to scroll vertically, rather than horizontally. In small mobile screen this become even more pronounced. I almost always top-align unless there is a reason to do otherwise. –  Lie Ryan Feb 27 '13 at 9:22
add comment

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.

share|improve this answer
    
I don't buy the imbalance argument - there are plenty of succesful websites and other applications with asymetric layouts. Plus, if usability and style ever conflict, usability should win. –  Bevan Jun 5 '12 at 8:14
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
4  
Is this published anywhere? –  patridge Jul 12 '11 at 15:44
add comment

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.

share|improve this answer
add comment

In this case the right aligment is the better alternative. But be sure, that the horizontal alignment in your application is consistent.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
Right: the user isn’t scanning the labels trying to pick out a specific one; they’re looking at each field and trying to figure out what they have to do with it. –  Paul D. Waite Jul 16 '11 at 11:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.