This content originally appeared on Adam Silver and was authored by Adam Silver
The placeholder attribute can be used to put hint text inside text inputs. When the user types, the placeholder text disappears to make room for the user’s answer.
Placeholders are popular because they save space and have a minimalist aesthetic. But using placeholder text for labels or even just hint text is problematic.
Here I’ll explain why that is and what you can do instead.
# 1. They’re hard to remember
Placeholder text disappears when the user starts typing which means users have to remember the instructions while they’re trying to answer.
Users may also need to delete their answer to double check the instruction which is time consuming and is an additional cognitive burden.
# 2. They don’t have complete browser support
Not all browsers support placeholders and so in this case users won’t get the instructions.
# 3. They make the fields lack clarity when they’ve been answered
When a field has been answered it’s not clear what the value relates to or if it meets the formating requirements.
# 4. They make it hard to check answers before submission
Some users check their answers before they submit. As placeholder text won’t be visible, it will be hard to reconcile their answers against the field’s requirements.
# 5. They make errors hard to fix
Labels and hints help users answer questions. An error message without that content makes the error harder to fix.
# 6. Some browsers hide them when the input is focused
Some older browsers will hide placeholder text when the input is focused. This means the user has to read ahead of the current field to see the hint.
# 7. They may be mistaken for an answer
Placeholder text has a lower contrast to signify it’s not a real value. But as the signifier is so subtle many users could mistake the hint for an actual answer.
Once they submit the form, the user will have to fix an error that wasn’t really they’re fault.
Some people do notice the text and try to select it to delete it. But placeholder text cannot be selected which can cause a lot of frustration.
# 8. They have insufficient contrast
Placeholder text has low contrast to differentiate it from a real answer but this makes it ineligible for people with vision impairments.
# 9. Some screen readers don’t recognise them
Some screen readers don’t acknowledge placeholder text making the form especially difficult for screen reader users.
# 10. They reduce the the label’s hit area
Clicking a label sets focus to the related input, which is useful — especially for people with motor impairments.
So fields with the label and hint text outside the input increases the size of the hit area.
# 11. They crop long text
Long placeholder text gets cropped making it inaccessible.
# 12. Some browsers won’t translate them
Chrome, for example, will fail to translate placeholder text.
# 13. They don’t work nicely with the browser’s auto completion routine
The browser’s auto-completion routine populates fields automatically so users won’t know what the values relate to making it hard to check answers.
# 14. They look like real text in Window’s High Contrast Mode
In Window’s High Contrast Mode, placeholder text is given a high contrast color which is easily mistaken for a real value.
# Summary
Placeholders saves space at the cost of usability and accessibility.
Instructional text is crucial content that users need in order to answer questions correctly and efficiently.
Putting that text above the input gives users constant access to the content they need when they need it no matter the situation.
That’s just good design.
This content originally appeared on Adam Silver and was authored by Adam Silver
Adam Silver | Sciencx (2016-06-16T09:00:01+00:00) Placeholders are problematic. Retrieved from https://www.scien.cx/2016/06/16/placeholders-are-problematic/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.