Where Should You Place Your Labels In Your Form

0 comments suggest edit

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.

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

9 responses

  1. Avatar for Steven Harman
    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. :)

  2. Avatar for Damian
    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.

  3. Avatar for Mark Wisecarver
    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.

  4. Avatar for James Avery
    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

  5. Avatar for Haacked
    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. :)

  6. Avatar for LukeW
    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~

  7. Avatar for kevin
    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/

  8. Avatar for Brian
    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 <><

  9. Avatar for Adi
    Adi April 14th, 2007

    Pingback from On form design