3

How input placeholders should be used? Should examples be used or is it better to use suggestions? Many times the field label is not sufficient to describe the type of data. I think sometimes the suggestion is redundant or the label is ambiguous.

There are any best practies?

Example:

enter image description here

Suggestion:

enter image description here

||improve this question
  • 1
    The second option is better it gives an idea about what to enter. – Prasad Gayan Feb 13 at 9:52
  • 2
    Improve the labels first: Name could be Full name and Position could be Job title. Email could be Work email and Phone number could also be more specific if that is important (home phone, work, mobile?). Test the labels, ask users, and adjust accordingly. – gerstemout Feb 14 at 21:13
5

Placeholder text should only ever be used to hold a placeholder value which provides an example of the data to provide. If you need to provide helper text, position it either above the field under the label or below the field. I tend to prefer placing it below the field and then replace it with error text when validating the field.

In your second example, the placeholder text is completely redundant. The label tells the user what to enter into the field and the user should already be familiar with the idea that inputs need to be filled in so there is no need to explicitly tell them to do so for each field.

||improve this answer
3

I would use the first one. It shows the example which the user can easily relate to and it also shows the format in which the data is anticipated.

The 2nd example has multiple redundant data.

||improve this answer
2

Another option I use often is floating labels. It places the inputfield label within the inputfield itself and moves up as label above the field once you start typing. It's a pattern derived from minimal mobile design but I think works gracefully for web as well.

enter image description here

Another example:

enter image description here

||improve this answer
  • 1
    This is what Material Design suggests. I am a fan. – Lisa Tweedie Feb 14 at 14:34
1

Use placeholders only for visual appeal as they are useless as label or help text.

Main reasons are:

  • Placeholders are possibly ignored by screen readers
  • Low contrast text is not easy to read for some people
  • The text disappears as soon as the field has input

So add the label, examples and instructional text always outside the field making good use of accessibility practices like adding aria-describedby. You can still add a placeholder as a bonus, but what it contains shouldn't make a difference. An example is in most cases the best placeholder, but if such example could really help someone too, also add one to the instructions. This may sound redundant, but it isn't.

This article explains it all very well:

https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/

||improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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