Good content is sometimes not enough, the users must reach it so they can see it's good!

Form labels

Posted: October 19th, 2009 | Author: | Filed under: Patterns, Usability fail | Tags: , , | 8 Comments »

DON’T put your form labels inside the inputs.

labels

If i start writing into the input and i forget if i had to insert the username or the email address i have to delete everything, pray to god that the programmer made so the label appears again in the field once I click away, and after that complete the field again. It’s not nice.

8 Comments on “Form labels”

  1. 1 Krumel said at 10:59 am on October 19th, 2009:

    Yeah, I have to delete that text before adding mine all the time.

    Actually those labels don`t disappear when clicked. Fail.

  2. 2 Michael Dubakov said at 11:22 am on October 19th, 2009:

    This design violates one common people behavior – interruptions. There are SO many interruptions in real world and there is a high chance to forget what I typed 5 mins ago.

  3. 3 Dmitry said at 4:04 pm on October 19th, 2009:

    What about the implementation at Apple’s Me site? (www.me.com) When you click on the field the label actually fades a bit but doesn’t go away. It then only goes away when you start typing. I think labels inside fields are useful for forms where you only have one or two fields (e.g. a search box or a login form) where there is little room for confusion. Would you *really* forget what you should be typing in that case? I’m not so sure.

    P.S. Your comments form has labels inside the fields! :)

  4. 4 Radu said at 7:44 pm on October 19th, 2009:

    this comment form violates your rule :D

  5. 5 Adrian said at 10:43 pm on October 19th, 2009:

    i know :)

    do as the priest says not as the priest does…

  6. 6 Adrian said at 10:48 pm on October 19th, 2009:

    well, i wrote this post after i had to delete the email address from the field in the picture because i didn’t know if it was the email or username, so it’s at least plausible. The me.com method it’s a little bit better but not the best.

  7. 7 Adrian said at 11:14 pm on October 19th, 2009:

    well, i’ve done some changes to the comment form, it’s embarrassing to preach good practices when you don’t follow them.

  8. 8 Jüri said at 5:26 pm on November 15th, 2009:

    Hi. Good point.

    But certainly there is one good side to such method: it does not require labels which are usually *two, new type of items* for usual login box combination:

    * username [txt input]
    * password [pwd input]
    * submit [button or image]
    * forgot password? [link]

    + sometimes there are also:
    * box title [title, hx tag]
    * sign up! [link]

    you see, this already consists of 4-6 elements (adding two would be quite a lot:) ) and 4-5 different types of elements (adding one would be quite a lot :) )

    Also, I guess that everyone who sees this combination knows what the first and second input are for.

    I just felt I needed to state the “more minimalist view” on this :)

    (I just found your blog. +1 subscription to Reader)

Leave a Reply