Labels in input fields aren’t such a good idea

This content originally appeared on Laura Kalbag’s Blog Posts and was authored by Laura Kalbag

There’s something that’s been bothering me lately. It seems to be some kind of form interface trend where the labels for text inputs are placed inside the fields themselves.

Example:

There might be some pros

Admittedly, this makes an interface slicker. It saves space where you’d usually have a label, then some padding, then the input field and probably a load of padding around the lot.

But what you’re gaining in a clean look, you’re completely losing through a total lack of usability.

So, I’m an interface idiot

You know the lowest common denominator, idiot users that we design easy interfaces for? The ones that need to be led by the hand, step by step, across your design to get to the call-to-action?

That’s me, that is. I am an incredibly naïve user. I skim read, I’m forgetful, I barely pay attention and when I do I’m easily confused.

This is what I see

Here’s an example from a site that is otherwise a shimmering beacon of awesomeness over the wasteland that is the web:

Project Noah

As part of Project Noah, you upload photos of nature. The aim is to identify the creature or plant in your photo, and part of that is providing the relevant links to that species’ page on Wikipedia and the Encyclopedia of Life.

It’s a beautiful interface, but I have an issue. I’ll go and paste in a URL, then I’ll select the other text box:

Then I have this thought:

Did I put the URL in the right box? Is Encyclopedia of Life the top input or the bottom input? How do I find out?!

It seems pedantic, but I genuinely do get this sense of panic that I’m entering it wrong and there’s no way to check that I’m doing it right. I have to click back outside the input box, so it no longer has focus, to check what the label was again.

WordPress

Another example from an interface that I use on a regular basis and generally love. In the 2.8 redesign of the WordPress admin, which is generally a huge amount better than before, the post editor title lost it’s label.

Before:

After:

The problem is that the first input box you’ll click into is the top title input. It actually auto-focuses, and some clever script means that it puts the label back in after the auto-focus, but then the second you start typing you’ve lost that label. If you start typing, then backspace because you made a mistake, you’ve lost that label:

Designers often make assumptions

It’s all very well to assume that the user will remember that the title belongs in that box, but what if it’s somebody has cognitive difficulties? What if it’s someone that’s just an idiot like me who clicks into boxes without paying attention to the label first?

It started as an example

Originally we used pre-entered text in an input field as an example, to help users understand the input required. WordPress itself has a great example of this on the Writing Settings page in the WordPress admin:

These fantastic triggers mean that users who aren’t necessary technically minded can see the type of input that’s required to set up post via email, match that to the information they have and easily enter it into the boxes.

When did these useful triggers become a way to hinder users, instead of help them?

The rise of the HTML5 placeholder leaves room for abuse

HTML5 has a fantastic new form input attribute for adding placeholder information into the input boxes so that you can easily give your users cues without the need for JavaScript or CSS hacks:

Edit: “name” should actually be “id” here in the text input, I always get those two mixed up! (Thanks Mike, for the heads up)

But it’s not the same thing!

A label tells you what a form input requires, a placeholder gives you an example of the input required.

I’m no accessibility expert, but I can imagine the loss of a label isn’t going to help with screen readers. Forgetful people and people with cognitive disabilities will also struggle.

Please think of daft people like me

It might beautify your interface and make you look modern and cool, but a label isn’t the same as a prompt. We need to keep our forms as clear as possible and not let cool technology take over the understanding of basic user behaviour.

I don’t know if I’m alone in struggling with using these inputs, but I’d love to know everybody else’s opinions.

48 comments

1. David Bushell
   Great post Laura! I’ve experimented with placeholders instead of labels but any aesthetic gain is totally lost in usability. I have exactly the same problems you’ve highlighted. If us web designers/developers can’t handle it –; what about everyone else? I say use both labels and placeholders.
   • Westley Knight
     I agree that the use of both labels and placeholders is the way to go. If you are going to drop one, it should be the placeholder and the label should be more descriptive. But ALWAYS have a label. And don’t forget the ‘for’ attribute.
   • Cliff Huizenga
     I’m definitely on the camp of using both labels and placeholders, but not placeholders by themselves. I recently tried manipulating a search field on my blog to remove the search button and place the word “Search” as a label inside the field. While it looked clean, it was confusing as to what it was after you click inside the box, and it wasn’t obvious how to send the search query (mainly because…well, there was no longer a search button).

     Not everything is obvious to everyone. Even though the design could look nicer without labels, a true designer will find a way to make them work visually.

   • Pete Fairhurst
     As an Interaction Designer, I’ve been tackling and retackling this very problem in my forms for a while now.

     The current solution to the “activated, anonymous” problem involves standard HTML features, with a dash of jQuery to smarten things up.

     1. Layout your form with paired label and input combinations as normal.

     2. Use a safe offscreening technique on your labels to maintain accessibility and satisfy your visual requirements.

     3. Add the label text to each input as a ‘title’.

     4. Add a class of “hint” to each input.

     5. Use a bit of jQuery that, on load:

     a) sets the “value” of all your “hint” inputs to their title text,

     b) adds a class of “hinted” for that light grey text effect,

     c) set the “focus” event to remove the “hinted” class and clear the “value” if it’s the same as the title on focus,

     d) set the “blur” event to reinstate both the “hinted” class and the “title” as value only if the value is empty.

     It’s a little bit of faff, but I think it’s worth it for the experience benefits. If your user mouses over an input, they’ll get a tool tip (because of the title). And if they click out of the input without entering anything, they’ll get the hint back again.

     And, for an added nicety, you could set a corresponding icon as a background on each input on focus, too –; particularly effective if you need to have several hinted fields close together.

     Anyway, hope some of all that is of use. :)

   • Pete Fairhurst
     Oh, and one final step!

     6. When your form submits, make sure you empty every “hint” input if its value matches its title; otherwise you may cock up any validation you might otherwise have on your form.
     • Laura
       Thanks Pete, that’s brilliant. Definitely something I’ll think of using in the future!
     • Mike Little

       Hi Laura,

I’m passionate about accessibility and usability, and I agree completely; this trend for ultra clean interfaces is causing problems for people who might struggle with this thing called the web.

These days some of the newest users are those who have been reluctant to do this “internet thing” because it is “complicated and scary”. We shouldn’t be making it any harder than it is. There is huge value in keeping things familiar, especially when it requires non-trivial interaction from the user.

Thanks for raising the subject, it’s important not to forget the user in the pursuit for beauty!

Mike