I remember when designers started extensively using placeholders in forms instead of labels. Aesthetically they do look better — the placeholder stays inside the input field until the user starts typing and keeps the design minimalistic.
While this is fine for some forms, it's not the best approach, especially accessibility-wise.
1. Verification before sending
Forms lacking clear labels can create significant usability challenges. Some users check the form before sending. When there are no labels, they are unable to verify their input — especially when relying on browser autofill. This can result in errors and a negative user experience.
2. Navigating the form
Vanishing placeholder text can disrupt user flow. When users forget the hint, they're forced to backtrack and retype their input. This can be especially frustrating for long forms or when the user returns to an incomplete form after being distracted.
3. Keyboard users
Disappearing placeholder text can frustrate keyboard users. As they quickly navigate through forms, they may miss important instructions or requirements — which makes them go over the form again to reach and see the info about the required field.
4. Finding an error
Error messages without context can be really frustrating. Users may struggle to identify and correct issues, especially when labels and instructions are hidden. A visible label gives the error message something to anchor to — without it, the user is left guessing which field the problem belongs to.
5. "Is this field filled?"
The design pattern of placeholder text can sometimes confuse users, especially when it resembles actual data. This can result in incomplete form submissions and simply make your users leave your website.
Working on a form-heavy UI and need a second opinion?
Get in touch