Alternatives to Placeholder Text
Improve form usability by addressing the perils of placeholders
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
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
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 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)
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
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
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
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.
Want to build better UI?
Get the free design system I’m building.
