A Guide to using Placeholder texts.

How to significantly improve user experience by solving placeholder text problems.

A placeholder text is a clue, suggestion, or brief description that describes the expected value of an input field. Labels, as shown below, are a form of identification for a text field. They describe the purpose and/or function of form elements. Labels are important because they tell the user what information to provide in the form element.

A visual representation of a label, placeholder text, and an input field (white space).

Using placeholder texts has its usefulness and benefits in many cases, it is also a good addition especially to a form. However, it creates a very bad user experience when used wrongly.

I have outlined some factors you might need to consider if you must use placeholder texts in your product design.

Placeholder texts should be of a lighter color value than inputted text.

Using lighter color values differentiates actual input from placeholder texts easily.

Users should be able to clearly distinguish between actual inputted text and placeholder texts. When placeholder texts are high in color value, users can mistake them for inputted texts, thus they may seem like a prior text entry and may be confusing.

Note that if the placeholder color value is too low, it would be difficult for some users (especially visually impaired users) to see the text clearly. Also, note that not all screen resolutions are the same.

Don’t use a Placeholder as a label or/and an example.

Example text and labels should be outside the input field.

Using a placeholder text as a label or an example stresses some users with short term memory and causes some form of uncertainty as the placeholder text tends to disappear as soon as the user starts to type. In some cases, users have to delete their text entries to be able to view the labels as a form of cross-checking when filling in their information.

Without labels, users cannot glance through a filled form and know if their responses are correct or that the information provided corresponds to the question or need.

Placeholder text should not be used as help text

Placeholders should not be used as help text.

Help texts are useful in providing extra information on what is needed to complete a particular input field. If help texts are used as placeholder texts, it makes it difficult for the users to remember what was asked; especially when they are lengthy messages.

In some cases, using placeholder texts as help texts may work for simple and short fields that require little engagement (e.g Email). However, when asking a user to create a password that must include certain characters, this can cause confusion.

Just like the case for labels, it forces the user to delete their entries just to recall the hint.

The factors outlined above are some of the things you may need to consider if you must use placeholder texts.

You can completely avoid using placeholder texts for a better user experience, instead, focus on creating clear hints that are positioned outside the empty form fields in addition to the labels.

N.B- All visual representations were done by me, using whimsical.