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.

Mandatory Optional Fields – Good Job, LinkedIn

I was trying to connect with a new colleague on LinkedIn. They know who I am, I know who they are, so I didn’t feel the need to include a “personal note”.

Handily, LinkedIn makes including a personal note optional – see the little grey “(optional)” beside the field label? This is the right way to do it, too. Rather than marking required fields, mark optional ones.

So I left it blank. And got an error.

Generally, I find telling people that something is optional and then surprising them with it being mandatory isn’t all that nice. Good job, LinkedIn.


This Field Is Really Really Required

I’m going to throw it out there – what is the point of non-required fields? Obviously the company that you’re submitting information to doesn’t really need whatever the field is asking for, so why ask for it?

The only time I can see it being necessary is for extra address information – you know, second floor, apartment number, etc. I can’t think of any other time an optional field would be useful (leave a comment if you have ideas).

So marking required fields should really not be necessary either. Best practices suggest that if most of your fields are required, you should instead mark the fields that are optional.

However, if you feel the need to mark your required fields, you really only need one asterisk. But that’s not good enough for H&M. On a contest they ran recently, they decided that you might not notice a field was required unless they used two asterisks:

H&M really really requires fields with two asterisks.