3

This question already has an answer here:

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 Google Login Form

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

Google Sign-up Form

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?

marked as duplicate by tohster, Vitaly Mijiritsky, JohnGB Jul 4 '15 at 18:36

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • "First Name" and "Last Name" contain diffrent Information than just "Name". They're not showibg the information twice but rather split the Label into 1 Label and 2 Watermarks – BlueWizard Jul 3 '15 at 4:06
  • They are usually referred to as placeholders rather than watermarks – tohster Jul 4 '15 at 3:37
5

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: enter image description here

From Brad Frost's blog enter image description here

  • 1
    "Placeholder text that disappears when the cursor is placed in a form field is irritating for users navigating with the keyboard." This is implementation-specific. Safari, Chrome, and Firefox on OS X do not exhibit this behavior. – bjb568 Jul 2 '15 at 22:54
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.

  • Personally, I find that the watermark can be confusing. I've seen a number of sites that were so badly formatted that I assumed the watermark box was a label, and spent minutes trying to find where to enter the information. As for instance, the search box on this page :-) – jamesqf Jul 2 '15 at 18:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.