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.
go bowling or clean gutters

Like Bowling, You Should Avoid Gutters In Forms

“Where should I put the labels?”

This is a frequent question in form design. I won’t review the best practices here (watch for it in the Best Practices section), but suffice it to say that the form below doesn’t do it right.

Why is there so much space between the label and the field?

What is with that huge gutter?? It makes it really hard to move your eyes from the label to the associated field, leaving you to wonder if you’re typing the right information in the right box.

Maybe they took the space that should be between the radio buttons and their labels (just a few pixels would be nice) and added it to the gutter…

What should they have done? Make the gutter as small as possible (10-20px would be sufficient) and, just to make it even easier, right align the labels instead of left.