When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form. But is there one ultimate answer for how you should be aligning labels? Not really, it depends on the specific needs of your form and the design constraints of the page.
Lets take a look at the different choices and see the advantages to each.
Top-aligned Labels
Most information suggests that top-aligned labels will result in the quickest completion times, the least user confusion, and the least amount of extraneous eye movement. Another advantage to top-aligned labels is the amount of horizontal room it affords the label. If your form will ever be translated or otherwise offered in another language, this extra room can be vital. Languages like French can be have labels up to twice as long as their English counterparts.
Top-aligned labels sure do sound like a good way to go, and they are, except when vertical real estate comes into play. If your form is even moderately long, when you start adding up the label, input, and space between (which needs to be a little bigger to separate the fields from each other), you start getting pretty tall pretty quick. Quick completion times will diminish if your form requires extensive downward scrolling.
Left-aligned Labels
Left-aligned labels have the advantage of being the easiest to quickly scan the label values. Since they are all in a nice vertical row and are not broken up by inputs, users can quickly scan each label and get a feel for the form. This can be ideal when the form is asking for unusual data, and the label for each needs to be clearly understood. Left-aligned labels bring the advantage of requiring much less vertical space, since each label and input pair is one one thin vertical row. However these savings in vertical space come at the cost of requiring more horizontal space. The design of your site may very well have the final say.
The biggest disadvantage to left-aligned labels is that research shows they have the slowest completion times. This is likely because of the visual distance between the label and input field. The shorter the label, the further away it is from the input. I would suggest integrating current field highlighting (article/demo) if you choose left-aligned labels. Also keep in mind that slow completion rates aren’t always a bad thing, especially if the form requires unfamiliar data. If you are asking for things like Driver’s License Number or a Serial Number, you may implicitly want to slow users down a bit and make sure they enter things correctly.
Right-aligned Labels
Right-aligned labels share the same space advantages/disadvantages as left-aligned labels do: need more horizontal but less vertical space. Also, the language concern pops up again, there can be spacing problems if the form needs multi-language support. The big advantage to right-aligned labels is the strong visual connection between label and input. For shorter forms, right-aligned labels can have great completion times. Sometimes up to twice as fast as left-aligned labels, which have there inherit problem of less visual connection between label and input.
Right-aligned labels disadvantage comes from scanability and comfortability. Your form will lack that hard left edge, which makes it less comfortable to look at and harder to read. This is minimized with short forms with familiar data though, so it may not be a concern. It certainly would be a concern though, with forms with longer question-style labels and unfamiliar data.
More tips:
- No matter which way you go, it makes sense to make your labels into block-level elements instead of the default inline.
- For all the forms on a single website, choose one alignment and stick with it. Consistency is more important than which alignment you choose.
- If you need to break consistency, you should have a very good reason.
More resources:
- Looking for a simple downloadable form to get started? Download the simple contact form from CSS Karma.
- Many of these ideas came from Luke Wroblewski’s fantastic book Web Form Design
- An article from Luke on label alignment.
- Eyetracking studies on label alignment
SitePoint has an article on how to style forms, a chapter from The Art & Science Of CSS. Although their article is mostly focused on how to use CSS to prettify forms, there are also certain pointers on styling them in a semantic and usable way. Another must-read.
Also, I just came across CSS-Tricks, and will find myself sticking around :)
I really liked this article and would like to thank BoltClock for the interesting link. I really going to keep this in mind the next time I’m going to design a from. Thanks.
What about left-aligned and right-aligned labels when on the right side of the form, after their corresponding input? Your eyes are already scanning in that direction when you enter into the form, so I think it would dull some of the deficits you mentioned while still providing the benefits.
In case I’m not being clear, your comment form is formatted this way – the labels are on the right side of the input.
@Michael: That’s a good point… I feel like that label alignment really works for a comment form and I can’t quite even put my finger on why. That has been the WordPress default on many templates for a long time I think I’ve just gotten used to seeing it that way. I think it might be the perception of what happens to that data after it is submitted. It is actually going to be published, so listing your name right on the top left of the form seems very fitting.
Another possibility I didn’t mention in the article is putting labels within the input itself. This is a possibility for forms as well, when space is really really limited AND the fields are for very familiar data (since you will lose the label as soon as you enter that input field, if things are done properly).
Awesome article Chris! One thing you might find interesting: I will happily use a different approach to label positioning across different websites – however, when it comes to positioning the submit button, I always feel compelled to put it down in the bottom right of the form. Is that weird?
thx man! I was looking for this! :P
Im making a form! :P yay! hehe
Well, I use the left alignment most of the time, until and unless a client specifies his/her choice.
Thanks for other useful resources as well.
Hey Chris,
Interesting article. Just wondering, on what basis are you concluding which of these has the highest and lowest completion rates? Is this just your personal opinion? I do agree with your conclusions, but I’m just wondering if this has ever been studied by Jakob Nielsen or other usability gurus. Thanks.
See also this site here, which has some useful stuff on label positions:
http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
There is a follow up here:
http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
Bibble.
Good article but I’d like to know more about where you handle error in your forms like where do you put error messages, if you highlight erroneous fields, if you just tell the user that the field is in error or you help them with a format sample…
Thanks
This article seems to have been drawn from Luke Wroblewski’s recent book ‘Web Form Design’. Would’ve have been nice for him to receive a credit at least if that were the case…
@Lee: Yep, much of the information on the idea came from Luke’s book. Which is why in the article it says “Many of these ideas came from Luke Wroblewski’s fantastic book Web Form Design”.
Good read as always.
Though i am wondering what do u mean by “Poor Multi-Language Support” i mostly have to flip websites from English to Arabic all u need is to flip the labels and fields and then set the text alignment so its kinda easy.
I Personally always do two types of forms in all big projects and i call one .block_forms where labels Top-aligned and the other .inline_forms where labels r either right or left aligned. this proves to be handy when the project is handed out to development and they end up making there own decisions and you losing control over some if not all decisions. and it doesnt take much css to do both.
Instead of just copying the results of the eyetracking study and making new graphics based on Luke’s diagrams, how about adding value to the discussion by offering tips on how to layout the forms in a semantic way? Burying the links to the source of your entire post at the bottom of it implies that you did all the research and all this just dawned on you. Give more prominent credit where credit is due and add some value to the discussion.