labels-inside-fields

Labels Inside Fields… What was I supposed to put in here?

Putting the label for a field inside the field itself seems like a good idea – it doesn’t take up any extra space on the page and there’s no question about which field a label is associated with.

BUT. If you’re going to do this, you need to make sure that the label is still visible until the person filling out the form starts to type.

In this form from Shell, the label disappears as soon as you click into the field. So if you’re tabbing through the form and not paying attention to the next field before you hit tab (which is especially difficult given that the form is in two columns), you end up with a blank field wondering what you’re supposed to type in.

The form label disappears as soon as the field becomes active... that's no good.

Also, in-field labels should not look like the actual data being entered. Usually they’re a lighter shade of grey to indicate that they’re temporary.

Here’s a good write-up from UX Movement on how to pull off putting labels inside textboxes.

This form has a few other issues as well:

  • Two columns makes it harder to scan
  • Non-normal order of address fields: Mailing Address, Postal Code, Province/Territory… where does city go?
  • Everything is mandatory except the marketing opt-in. Don’t bother with asterisks, just mark the optional field.
4 replies
  1. jqp
    jqp says:

    note that placeholders are not cross-browser compatible either. I considered using them for a cleaner appearance. After extensive testing I returned to conventional labels. In some older browsers all you’d see is the field with no label nor placeholder text

    Reply

Trackbacks & Pingbacks

  1. Hot Topics……

    […]usually posts some very interesting stuff like this. If you’re new to this site[…]……

  2. […] can be inaccessible even for a user who can see and use a mouse if it is badly designed. Take this form from badforms.com, for example (yes, there is a website dedicated to exposing badly designed […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *


3 + 8 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>