form labels and placeholder textlet's talk about usability

When was the last time you thought about forms? I mean really thought about forms. What makes a great form? What makes a shitty one?

Forms blend in. Just about every user interface has one, likely a lot more than one. But we rarely notice them. While that’s usually a good thing, it can make it challenging to decipher a good form from a bad one.

Form labels

Form labels are important. This cannot be understated. While a form label primarily informs a user what type of information should go into a particular field, it goes far beyond that too. To understand their importance in modern design, we need to take a trip back to Web 1.0, the internet of the 90s and early 00s.

Back then, user interfaces had a sort of three-dimensional look. Buttons were shaded and textured to appear like they bubbled off the page. Form fields were shaded to appear like sunken trenches. Sure, forms still had labels, but the 3D design created easy-to-spot visual cues. What was or wasn’t clickable, or could or couldn’t accept an input on the page was always pretty clear.

A well contrasted, sleek, accessible form on one browser might default to a janky mess on another

Today’s flat user interface design doesn’t have the same visual cues as the old input trenches. Thank goodness for that, but it means that users aren’t afforded the same visual cues they once were. Labels are still popular (as they should be), but I’ve seen them replaced with placeholder text in a few instances, and even done it myself a few times. Yikes.

Do forms with placeholder text instead of labels look slick? Sure, they do. Are they hurting your conversion? Almost certainly.

With that in mind, it’s all right to have fun with forms, and break conventions. But you’ll need to weigh the impact of that form carefully before doing so. Jazzing up your contact form could have a very different impact than doing the same to your checkout form.

If users struggle with your contact form, they might try again, or reach out through another channel, like social media. But if users run into trouble while in a checkout? It’s almost certainly goodbye.

Form labels are more than just an alternative to placeholder text though. The fact of the matter is, placeholder text isn’t a label. And labels are exactly what screen readers are going to be looking for.

And if you don’t have labels, then completing the form becomes virtually impossible

An I’m feeling lucky Google search mentions that in the United States alone, 7.3 million Americans use screen readers or similar assistive technology. At the time of that stat, the US had a population of about 325 million. That’s more than 2% of the population!

Roughing that out to the approximate 7.5 billion people across the globe at that time means that around 161 million people use tech like screen readers. Of course that incorrectly assumes a bunch of things, including that internet access is evenly distributed globally, which we sadly know is not the case. However the point still stands.

When you build forms without accessibility in mind, you’re excluding a significant portion of the population, maybe even some of your best customers or biggest fans.

Form placeholder text

What about placeholder text, though? The fact is, it isn’t great for screen readers, even with a label. The label will ensure the field is correctly identified, but placeholder text can have all sorts of different outcomes from screen reader to screen reader, or browser to browser.

While still considering accessibility, let’s set the whole screen reader thing aside for a moment.

In most browsers, form fields are white, and placeholder text is, by default, a light grey. Often times you can style the field and placeholder text, but those same stylings aren’t consistent across all browsers.

A well contrasted, sleek, accessible form on one browser might default to a janky mess on another. Should that happen, and the user viewing the form isn’t using a screen reader, but still has a visual impairment, then the defaulted grey on white placeholder text might be unreadable. And if you don’t have labels, then completing the form becomes virtually impossible.

So we know that placeholder text isn’t a suitable place to convey any information the user actually needs. But it’s not the only reason either. Using placeholder text to convey important information is a drain on the user’s memory (their brain’s memory), and therefore the amount of attention they can devote to your content.

Hold up. Placeholder text is a drain on the user’s memory?

Placeholder text typically disappears when the user clicks on the text field or starts typing. That’s fine for a simple email and password login form, but becomes unsuitable as forms grow in complexity.

If the user needs to refer back to the information, to better understand what they should be filling into the form, then they must first remove their text to resurface the placeholder. Doing that once sounds awful. Doing it more than once sounds like the user has already bounced.

That’s not to say it must be avoided. Go ahead and use placeholder text, but keep it simple. It should compliment your design, not be imperative to it. Instead, rely on labels using short recognizable keywords.

Remember the goal of your form, and that ultimately, forms are friction points. Anything you can do to reduce that friction is a step in the right direction.