I have a form such as the following, in which the placeholders have the same exact text as their corresponding labels:

enter image description here

The alternative being leaving each input without any placeholder. I'm not discussing labels vs. placeholders. The labels will stay regardless!

It seems to me that these seemingly redundant placeholders are actually useful, to some degree and to some people. It can save the user from looking at the left to remember which input was he filling (likely in lengthy forms)

I don't see any harm in putting them as the visual impact is very little.

Is there established practice on whether redundant placeholders are helpful/harmful?

  • 1
    I would have the placeholder text show an example (and you could even get creative and integrate some easter eggs/references). – Keavon Aug 22 '15 at 0:06
  • Why not: Email johndoe@example.com Name John Surname Doe? – Bakuriu Aug 22 '15 at 12:46

Typically I find using the placeholder text as an example of the intended content is best. So, the label describes the field, and the placeholder exemplifies the type of content.

Here's a good example, from this article: http://www.pardot.com/faqs/forms/placeholders-and-labels/

placeholder text in field

  • 2
    Using placeholders content examples is not good practice. nngroup.com/articles/form-design-placeholders – Evil Closet Monkey Aug 21 '15 at 20:09
  • 7
    @EvilClosetMonkey, not in this case. Nielsen explicitly states that essential information and "important hints or instructions" shouldn't be put in placeholders. This is not essential information or important enough to be put somewhere else, so no problem. – JotaRMonteiro Aug 21 '15 at 22:04
  • 1
    Oops, your image is broken (because they're broken on the other site). That's why you should always upload a copy of images to the Stack Exchange image hosting site—you can do it easily from within the posting interface by clicking the "image" button on the toolbar. – Cody Gray Aug 22 '15 at 10:46

No point in repeating the same information twice. Use placeholder text to help users understand how the data is expected to be entered.

For example displaying the phone number format. Another example is when there are multiple lines for address the cues can be placeholders.

Research by N/n found that some users mistake the placeholder as the field already being filled in but my sense is that given their widespread adoption thanks to the small screens it is very likely that this issue may not be as commonly seen as before.

No harm in having some fields with meaningful placeholders and others empty. At least the users will not learn to ignore the redundancy.

I saw an article from the Nielsen Norman Group saying that Placeholders in Form Fields Are Harmful http://www.nngroup.com/articles/form-design-placeholders/

However, they seem to have analyzed placeholders that replace labels or provide additional information. That is not the case in your example.

As you say, my personal sense is that these redundant placeholders can look good and be useful. If you wanted to add variety you could prefix "Your" to the text in the placeholders; e.g.:

Email: [Your Email Address]

Name: [Your Name]

  • That's the way to go. You could also use examples, like E-mail: ["john@mail.com"] and Name: ["John Smith"] – JotaRMonteiro Aug 21 '15 at 16:16
  • 1
    I'm a fan of E-mail: [your@email.com], although I prefer the Material Design approach (icon + placeholder and optional floating label): google.com/design/spec/components/text-fields.html – CoDEmanX Aug 21 '15 at 21:56

You could prefix the placeholders with "Enter your ".

That way they

  • stand out more as a placeholder as opposed to content
  • give a little bit more info of what the user needs to do, e.g the action of entering text
  • and also it means you can add this extra prompt without cluttering your label

No, this seems not to be a good practice.

In the article from Nielsen Norman Group, "Placeholders in Form Fields Are Harmful", in the list of seven reasons why placeholders should not be used, the last ones explain not only why you need labels, but why is bad to have not empty inputs:

  1. Fields with stuff in them are less noticeable. Eyetracking studies show that users’ eyes are drawn to empty fields. At the minimum, users will spend more time locating a non-empty field — a nuisance. At the worst, they will overlook the field completely—a potential business-killing disaster.
  2. Users may mistake a placeholder for data that was automatically filled in. When there is already text in the field, people are less likely to realize that they can type there. Some users assume the placeholder text is a default value and skip the field completely.

Placeholder Text in Addition to Labels

Using placeholder text in combination with form labels is a step in the right direction. (...) However, even when using labels, placing important hints or instructions within a form field can still cause the 7 issues mentioned above, albeit with less severity.

On the other hand, I saw that a good solution for the placeholder text is considered by some designers a floating label. The placeholder text is actually the label showing by default, but once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in.

In this article, "Float Label Pattern", Brad Frost has some good pro/con arguments:

The Float Label Pattern

Float Label Pros

User keeps context–The main advantage of this pattern is that the user keeps the field’s context after they’ve focused and entered a value. This provides for a more accessible, less frustrating experience.

Clean and scannable by default–This pattern allows for a clean inline label experience by default, and only becomes a little more cluttered once the user has filled things out.

Elegent–It needs to be said: this pattern is sexy. You usually can’t say that about forms. It looks good and the animations are a nice subtle touch.

Float Label Cons

Still doesn’t provide room for both label and placeholder–Because the label is occupying the same space as the placeholder, there’s no room for additional hinting.

Small Label–The label becomes small and possibly hard to read, but at the same time it’s not as big a deal. Once the user has interacted with the input, the label becomes a reference rather than an instruction. Potential for code abuse–Based on the few demos I’ve seen, there’s the possibility of wrecking accessibility and semantics.

seems redundant to do so...why not get rid of the placeholders or if you must then try something like

  • EMAIL: your best email
  • NAME: first,last

this way you can get rid of the surname all together

  • 2
    I disagree with getting rid of surname. Names are complicated. – Seiyria Aug 21 '15 at 19:07
  • if you separate it by a comma, then it does not matter...unless your parse isn't set up that way. – Stanley VM Aug 21 '15 at 19:08
  • 1
    what if someone screws it up and puts last, first instead of first, last? Even if your placeholder is explicit, once you put text in there there's no indication of ordering. This is not a good solution. – Seiyria Aug 21 '15 at 19:17
  • 2
    @Seiyria, names being complicated are actually a good reason to ditch the surname field. Unless your app needs to handle names specifically, there's no need to separate a full name into its components. – Arturo Torres Sánchez Aug 22 '15 at 1:32
  • 1
    @Seiyria I love the irony of your first comment pointing out that names are complicated, and then your follow-up comment making an assumption that everyone prefers to be called by their first name. – Masked Man Aug 22 '15 at 14:23

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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