why inline labels suck
Came across a form on a website today. A typical signup form, you see these a jillion times a day. But this one thought it would be clever, and use the hip new style of “inline labels” for its input fields. Observe:
See? The label for the field is inside the field itself. And when you give the field focus (aka click on it), the label disappears, quickly getting out of the way for your personal information. Tricksy!
This can be a handy technique, and I see it being used more and more. When space is valuable on your form, this can save some crucial pixels.
But there’s a problem. Even if you’ve done your job as a responsible web designer and written (or copied) all the necessary javascript and CSS to position/hide/reveal the labels just right, you’ve still got a problem with the form, and you can’t get away from it.
Consider a typical use case; me, trying to fill this form out.
I’m kind of a jerk when it comes to personal information. So, whenever I come across a site asking me to trade my pertinent details in exchange for a freebie of some sort, well, I tend to feed it bogus info. (I’m a jerk cuz I still want the free thing, I just don’t want some marketing dude to know about me.)
So, I dutifully fill out the form the quickest way I know: “a” for everything. Sometimes you get lucky, and the site forgets to perform any input validation.
Well, in this case, I get smacked by a javascript validation error:
Sigh, so they want something that resembles a valid email address. That’s cool, how about a@a.com? Let’s see if that’ll make it happy.
…
Um, Wait.
Can you see the problem? Have a look at the form once again, as I have last left it:
Uh, which one of those is supposed to be my email? I have no freakin’ clue.
And there, my friends, is the intractable problem with inline labels. After you complete the form, you’re left in the tall grass as to which field represents what data.
Granted, my example is a bit of an edge case. You could argue that if someone filled the form out correctly, but made a small slip (say, by forgetting the ‘@’ symbol in their email), they’d be able to cross-reference the phrase “Email Address” from the validation error with their own email address in the form and correct the mistake. No big deal.
BAAMP. Sorry, it is a big deal. Really.
By forcing your users to “divine” your meaning, you’re setting up a barrier between them and the successful completion of your form. Sure, it may only take them a few hundred milliseconds to figure it out, but milliseconds add up. The longer you delay your user from completing the form, the more likely they are to simply give up. Odds are, your freebie wasn’t all that enticing in the first place. Certainly not enough to waste time fighting with a cranky web form. Maybe there’s something new on Facebook. [closes window]
Congrats to you, web designer. You just got your friend in marketing fired. :)
Bottom line, inline labels suck. Just don’t use them.
ADDENDUM:
…Well, most of the time. I think there is exactly one instance in which an inline label is appropriate: a single input field that follows Postel’s Law. Have a look at the “Local Weather Search” on weather.com:
There’s a single field, and you can enter pretty much anything; zip codes, cities, points of interest, etc. There’s nearly zero chance that you’ll need to smack the user with a validation error, and even if you did, there’s only one field to remember!
In this case, I won’t get mad at you if you use inline labels. :-)
This post brought to you by Luke Wroblewski’s new book Web Form Design: Filling in the Blanks [Rosenfeld Media, 2008]. Thanks Luke, for making me pick apart every web form I see.
