Where Should You Place Your Labels In Your Form

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.

Eye Tracking
Map

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.

Comments

9 responses

Steven Harman • April 11th, 2007
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 • April 11th, 2007
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 • April 11th, 2007
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 • April 11th, 2007
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 • April 11th, 2007
@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 • April 11th, 2007
Phil, you might also be interested in my recent presentation on Best Practices for Form Design (100+ page PDF):
http://www.lukew.com/resour...
thanks~

kevin • April 12th, 2007
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 • April 13th, 2007
hahaha yea I did see that one, it is freaky,
oh man that who's line is it, was hilarious!!!
Brian <><

Adi • April 14th, 2007
Pingback from On form design