Placeholders with the same text as the label - good practice?

Question

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

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?

Answer 1

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/

Answer 2

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.

Answer 3

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]

Answer 4

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:

5. 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.
6. 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.

Answer 5

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

Answer 6

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