Alternatives to Placeholder Text

Improve form usability by addressing the perils of placeholders

Placeholders cause problems

Placeholder text can be used as an attribute for almost every HTML input type, and misguided designers and developers don’t hesitate. It is tempting to provide text help for complex forms or omit input labels to improve aesthetics. However, employing placeholder text to do so causes many usability issues.

This article illustrates common bad practices and proposes alternatives.

Placeholder as a label

Place a label above the input instead of using a placeholder as a label

In an attempt to shorten the length of a form or reduce visual noise, designers use placeholder text as an input label. This practice places a burden on short-term memory. The label disappears as soon as the user clicks and/or types. The entry must be deleted to expose the label again.

It is better to include an input label directly above the input field. The blank input field acts as an affordance to enter data. Users look to the unfilled boxes to determine what they need to act on.

Placeholder as an example

Include example text outside of the input instead of as a placeholder

Providing an example of the needed input helps a user understand the request. However, incorporating the example as placeholder text causes issues including disappearance on focus, confusion regarding what has been entered, and reduction of the input acting as an affordance. As an alternative, example text can be placed below the input field.

Placeholder as help text

Placeholder text should not be used as helper text

Placeholder text is often employed to provide more information on what is needed to complete a field. This practice is bad for the same reasons stated earlier, and even more dubious because of the amount of text used. Misguided designers and developers often make the mistake of using a placeholder to communicate lengthy messages. There are many good alternatives to this erroneous practice like the 3 illustrated above.

Placeholder as a secondary label(s)

Employ secondary labels as labels, not placeholders

It is tempting to use placeholder text for secondary labels like shown above. However, the usability of the form will increase if a regular input label is used instead.

Forms have fewer usability issues when placeholders are omitted and/or substituted for the alternatives mentioned earlier.

But if you must…

Appropriate placeholder use:

Placeholders should be of a lighter value than input text

Light input text communicates its fleetingness and differentiates it from entered text

Users fill in the blanks. A blank input is an affordance to enter text. Placeholder text can diminish the actionable element of an input. This is especially true when placeholders are high in color value because users can mistake it for a prior entry.

Placeholders should be visible on all screens

If placeholder text color is too light it may not be completely visible on all screens

Placeholder text also causes issues if the color value is too low because the placeholder may not be clearly visible on certain screens, leading users to squint.

Placeholders should not disappear when a user clicks into the input

Keep placeholder text until a user begins to type

Disappearing placeholder text places a burden on a user’s short-term memory because the aid is omitted on focus.

In general, forms are usually more usable when placeholder text is omitted.

For more information on the common issues placeholder text causes, read Katie Sherwin of Nielsen Norman Group’s great article on placeholders.

Find me on Twitter, and Dribbble.