Is it better to label input fields, watermark them, or both? [duplicate]

Question

When building forms, you need to effectively communicate with the user what information should be placed inside of the text boxes. I've seen a combination of watermarks in text boxes and labels for them.

If watermarks are used, what if the user forgets about exactly they need to enter? For instance they leave the page for a while because they got distracted or for some other reason. They have to remove their info before they can know exactly what they need to enter.

Google for instance uses watermarks for their log in form

But then on their sign up page they use labels and watermarks

So what is the preferred method? Should labels be used, should watermarks be used, A combination of both, or does it entirely depend on the circumstances?

Answer 1

This has been widely discussed, you can take a look a this NNGroup related article, I will sum it up:

Drawbacks of using no labels

1. Disappearing placeholder text strains users’ short-term memory.
2. Without labels, users cannot check their work before submitting a form.
3. When error messages occur, people don’t know how to fix the problem.
4. Placeholder text that disappears when the cursor is placed in a form field is irritating for users navigating with the keyboard.
5. Fields with stuff in them are less noticeable.
6. Users may mistake a placeholder for data that was automatically filled in.
7. Occasionally users have to delete placeholder text manually.
   (and related to accessibility):
8. The default light-grey color of placeholder text has poor color contrast against most backgrounds.
9. Users with cognitive or motor impairments are more heavily burdened.
10. Not all screen readers read placeholder text aloud

Conclusion: Rather than risk having users stumble while filling out forms or waste valuable time figuring out how they work, the best solution is to have clear, visible labels that are placed outside empty form fields.

I would stick with the label's approach unless the form is very simple and familiar for the users, as a login or short form.

Additionally there are new approaches using floating labels that solve some of the problems mentioned above, if you have little space it's a really good improvement compared to have just placeholders as input's reference.

From Mozmonkey's blog:

From Brad Frost's blog

Answer 2

It's a tough call. Typically I'd say it's better to use a label for the very reasons you outline - i.e. that the placeholder or watermark is transient and disappears as soon as you enter something else.

In a recent survey of about 60 sign up forms on most popular English language websites, I found that:

26 used placeholders

27 did not use placeholders

6 used placeholders only to further clarify one or two fields. For example where the label said name or date of birth and the placeholders said first / last / month / year etc.

Clearly, the jury is out on this one.

Consider these questions:

• Does the label add more to the workflow than it takes away? Probably.

• Does the placeholder reduce friction more than it adds in inconvenience? Not if you're the one who got distracted!

• Are placeholders a fad? Maybe. Why not err on the side of caution.

• Do people use placeholders because they can? Maybe.

• Amazon is not the last point of call, but when Amazon updated their signup form for the first time in a decade - did they use placeholders? No.