Placeholders are Evil

The auxiliary text inside the input fields makes it difficult to work with the form, since the user has to remember the contents of the placeholder of each field. In addition, placeholders create additional difficulties for people with visual and cognitive impairment.

Of course, the hints themselves usually help the user understand what needs to be entered in each form field, which in turn has a positive effect on conversion. And there are many ways to give the user such prompts. One of them is the use of text inside the form elements themselves. Unfortunately, the test results suggest that placeholders rather degrade usability of forms than improve it.

Field Headings and Placeholders

The field header tells the user what needs to be entered in the corresponding field, and is usually located outside the field itself. The placeholder is located inside the input field and is, as a rule, either a heading, or an additional hint, or an example of input into a specific field, disappearing as soon as the user starts typing text in this field.

Placeholder instead of a title

On the Internet, you can often find forms in which field headings are absent, and placeholders play their role. As a rule, this is done to reduce the size of the form itself and to get rid of excess "noise". That is, guided by quite good intentions, designers actually reduce the convenience of working with the form.


Worst case scenario: a placeholder is used instead of a heading.

Below are seven reasons why you should not replace field headings with placeholders:

1. The disappearance of the placeholder text loads the users' short-term memory.
   If the user has forgotten the contents of the tooltip, which often happens when filling out large forms, he will need to remove the entered text from the field, and in some cases also remove focus from the form field so that the placeholder becomes visible again . Ideally, the user should be fully focused on filling out the form. In reality, he can be distracted by other tabs in the browser, by a message or phone call. Therefore, it is important to make it as easy as possible for the user to return to filling out the form.
   Of course, frequently used forms with one or two input fields, for example, a search string or login password, unlike complex forms, do not load the user's memory. And in most of these cases, the user can already guess what needs to be entered. Nevertheless, even with the login field there may be difficulties - should the user enter his login or email address?
2. Without headings, the user cannot verify the correctness of filling out the form before sending it.
   Additionally, the problem is exacerbated by the possibility of incorrect autocomplete of fields by the browser. For verification, the user will have to cut and paste the text in the form fields one by one. Again, in reality, the user most likely simply will not bother with such a double check, which increases the likelihood of sending a form with errors.
3. In the event of an error, it is more difficult for the user to understand what and how to fix.
   If there are no visible prompts, the user will also have to go through all the fields of the form to determine what the error is.
4. If the placeholder disappears with the focus on the input field, this creates problems for users switching between fields using the keyboard.
   Many use the Tab key to quickly jump to the next field, usually without reading its contents before switching to it.
5. Fields with a placeholder are less like input fields. Oculography
   results indicate that the user's gaze “clings” to empty fields more strongly. In the best case, the user will spend extra time defining the input field, in the worst case, he will simply skip it, which can seriously affect the conversion.
6. The user can confuse the placeholder and the automatically filled field.
   When there is already text in the field, the user can skip it as already filled. Some users may take the placeholder text as the default and also skip the field.
7. Sometimes the user has to manually delete the text of the placeholder.
   There are implementations in which the help text does not disappear when moving to filling in the field. And the user has to manually delete the prompt before entering the real data. This, of course, extremely reduces the convenience of filling out the form and creates unnecessary difficulties.

Placeholder in addition to the title

Using a placeholder as an additional hint is already a step in the right direction. Field headings that carry key information are always visible, while placeholders contain more complete instructions for filling out the form. However, even with headlines, the use of placeholders can lead to the problems described above, albeit with a slightly lower probability. If some fields need an additional description, which is critical for the correct filling of the form, it is best to place this description next to the field so that it is always available to the user.


Better: here the placeholder is used as a hint in addition to the title

Placeholders and Accessibility

Another problem with placeholders is that for the most part they are not publicly available:

1. The standard light gray text of the placeholder text contrasts weakly with most backgrounds. For visually impaired users, poor contrast makes it difficult to read placeholder hints, while not all browsers allow CSS to change their color.
2. Additional difficulties for users with cognitive and motor impairment. As described above, this is an additional load of memory and the need for additional actions with the mouse and keyboard to fill out forms.
3. Not all screen readers read the contents of placeholders. Blind and visually impaired users may miss important hints completely because of this.

Conclusion

Instead of risking the user with problems filling out forms or forcing them to spend time understanding how it works, it’s better to make clear, always visible headings for empty form fields.


Best of all: the title and the hint are always visible to the user.

Tips and additional instructions are best given next to the corresponding input fields. Forms are one of the most important elements for increasing conversion, so make sure that the user can fill them out as quickly as possible and with as few errors as possible.