On forms, is inline placeholder text better than a label outside each field?

Question

I am familiar with research on label placement to the left or above. I tend to go with right justified with the label to the left of the field for my form designs.

However, inline placeholder text is trending and it does further reduce page clutter. Is there any research out there supporting its use? Has anyone conducted usability studies on their forms that they can share?

Research Links:

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

http://www.lukew.com/resources/articles/web_forms.html

Answer 1

The major problem with inline placeholder text is after filling out a number of fields, it is difficult or sometimes impossible to determine what the original purpose of that field was.

Say for example you are filling out a form and decide to change your input, so you clear it out and then somehow you get sidetracked by a phone call of something else. Is there any way that you will ever know what that field was intended for without refreshing the page?

With a right or top(or left) aligned label it is always clear what the goal of a field is.

Here is a link to an article that discusses the cons of placeholder text. It doesn't talk about whether or not to use it on its own, but it does talk about the complications than can be created by using it. Talking points range from the users not fully clearing out the placeholder text to mistaking the placeholder text as a completed field:

As users work through most forms:

They see a blank box. They type. The box now looks filled in. Each time this happens, users learn that

• boxes they need to fill in are blank
• boxes with text in them are already filled in

Answer 2

There have been some nice developments to widgets since this question was asked.

The old world

• Designers had to choose between placeholder only, label only, or label + placeholder.
• Each has disadvantages:
  • Placeholder only is problematic because field meaning is obscured when it is filled in (see other answers).
  • Label only is problematic because (1) the form occupies a lot of vertical or horizontal space, which is problematic for mobile devices visually massive; (2) the label/input/label/input striping contrast can be disruptive to visual flow, especially when the user first arrives at the form and has to process what the fields are.
  • Placeholder + label presents a wall of text to users, which is a lot of cognitive load.

---

Today

By examining the input micro-interaction, designers have realized that there is no reason a placeholder can't also be a label.

Here is a demo of a hybrid input used in Google's Material Design:

In case that link to the demo breaks in the future, the input looks like this:

In many (but not all!) situations, these hybrid widgets can provide the simplifying layout benefits of a placeholder, while retaining the best benefits of a label.

Answer 3

Form fields can have both labels and placeholder text. These are two different things.

All form fields should have labels. Not all fields need placeholder text.

You can also position a label over the field so it looks like placeholder text, but is still an actual label. You can also hide the label and only show placeholder text, but that would be awkward to a screen reader (as it would read both).

So, all that said, you should:

• always have a label
• if you don't want the label outside of the field, you should position it visually inside the field rather than using placeholder text. And then add the appropriate javascript to make the interaction work.
• remember that the label tag and placeholder attribute are designed for different purposes in terms of content and accessibility. Placeholders are not a substitution for labels.
• Placeholders can cause more problems than solutions

The most common issues I run into that I like to try and fix:

• placeholder attribute used instead of the label tag. If the placeholder text is acting as a label for the field, then that should be an actual label tag.
• Placeholders that pointlessly repeat the label. A common one I run into is, say, a field labelled "Name" and the placeholder text stating "Enter your name".

Answer 4

The answer depends on the frequency with which the user touches the controls:

If the person is going to use the form often, then you can train them what each field is. Muscle memory takes over and they stop reading the labels; internal or external. This is the rationale for gMail using placeholders. People use gMail every day and overcome the learning curve of placeholders.

If a user only sees the form once, then it's imperative that the form utilize the user's a priori knowledge of how forms on the web behave. There are very few use cases where the aesthetic improvement outweighs the usability detriment.