Where Should You Place Your Labels In Your Form

• Apr 11, 2007
• 9 Comments
• Print

UPDATE: Luke Wroblewski posted a link in my comments to his Best Practices for Form Design PDF. It is 100+ pages chock full of good usability information concerning forms. Thanks Luke!

James Avery writes about the Art of Label Placement in which he links to a few great articles on form design and label placement.

Web Application Form Design by Luke Wroblewski - This article covers the best ways to arrange labels and submission buttons.

Web Application Form Design Expanded by Luke Wroblewski - Another great article from Luke W. expanding on the same topics.

Label Placement in Forms by Matteo Penzo - Matteo takes Luke’s advice but applies eyetracking to evaluate how usable it is.

Based on these articles, James decides that non-bold labels above input fields are the best for usability. Interestingly enough, a non-bold label just above the form field just happenes to be my personal preference as well.

And now, I know why.

Matteo Penzo’s research using Eye Tracking provides some empirical evidence that this arrangement is more usable.

What others have said

Steve Harman Apr 11, 2007 8:04 PM

# re: Where Should You Place Your Labels In Your Form

Funny... I recently had a conversation with a buddy from my old employer and he was telling me how they just finished a huge usability study focused on this very topic. Their study came to the same conclusion.

Sounds like they could have saved a boat-load of money if they'd done their homework first. :)

Damian Apr 12, 2007 2:46 AM

# re: Where Should You Place Your Labels In Your Form?

The study doesn't seem to take fully into account the situation where the user is repeatedly shown the same form i.e. multiple times a day, every day. I would hypothesise that in such cases, the user will learn the meaning of each field and simply never look at the labels again and thus, it's would be more important to have the fields closer together so the user could review their input more quickly. In those situations right aligned labels make more sense.

Also, if there are more than say 9 fields, the form area would be too long. People can absorb width better than height (otherwise I'd have my 3 monitors stacked :).

Nice blog btw, I enjoy your writing.

Mark Wisecarver Apr 12, 2007 5:29 AM

# re: Where Should You Place Your Labels In Your Form?

This is undoubtedly a beneficial post.
I do agree the method is subjective.
Take for example an Intranet where customer information is collected...the input areas are many and in that case labels are most likely going to serve best to the left of each.

James Avery Apr 12, 2007 6:59 AM

# re: Where Should You Place Your Labels In Your Form?

The forms I am doing tend to have a large number of fields and I still think they look better with labels above the input. Having the labels above makes it much easier to spread your form horizontally as well as vertically.

-James

Haacked Apr 12, 2007 9:38 AM

# re: Where Should You Place Your Labels In Your Form?

@Damian - In that situation, I'm not so sure why having the fields closer together would matter? In fact, it might even be problematic if it's a large form with lots of fields.

I've run into the situation where each form field is a one on top of each other and I sort of forget which field I'm on and have to look left for the label.

If you mean because mousing to the next field is faster, hopefully users are using the tab key for a form they see every day. :)

LukeW Apr 12, 2007 10:17 AM

# re: Where Should You Place Your Labels In Your Form?

Phil, you might also be interested in my recent presentation on Best Practices for Form Design (100+ page PDF):
http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

thanks~

kevin Apr 13, 2007 5:49 AM

# re: Where Should You Place Your Labels In Your Form

always good to see some usability stuff in here mixed in with your great asp.net articles. thx!

and this is also the kind of stuff we need from the .net community - more members thinking about good design. Maybe MS will take this into consideration when building their next gen web controls/

Brian Apr 13, 2007 3:40 PM

# re: Where Should You Place Your Labels In Your Form

hahaha yea I did see that one, it is freaky,
oh man that who's line is it, was hilarious!!!
Brian <><

Adi Apr 15, 2007 9:30 AM

# re: Where Should You Place Your Labels In Your Form

Pingback from On form design

What do you have to say?

Title:

Name:

Email: (never displayed) (will show your gravatar)

Website:

Comment: Allowed tags: blockquote, a, strong, em, p, u, strike, super, sub, code

Please add 3 and 6 and type the answer here: