This content originally appeared on Adam Silver and was authored by Adam Silver
Float labels are labels that start off inside the input. When the user starts typing, the label ‘floats’ up to make space for the answer.
Float labels were designed to address the problem with using placeholder labels – that the label disappears as soon as the user starts typing.
And while they’re certainly better than placeholder labels, they create several usability issues.
Here, I’ll run through them all and I’ll explain what to do instead.
1. They’re small and hard to read
Permalink to “1. They’re small and hard to read”Float labels have small text in order to make it fit inside the input. But that makes them hard to read.
2. They have poor contrast
Permalink to “2. They have poor contrast”Float labels have poor contrast in order to distinguish itself from an actual answer. But this also makes them hard to read.
3. They may be mistaken for an actual answer
Permalink to “3. They may be mistaken for an actual answer”Like placeholder labels, float labels may cause users to think the field has already been completed.
This often leads to users seeing validation errors when the user later goes to submit the form.
4. A long float label will be cut off by the input
Permalink to “4. A long float label will be cut off by the input”Long float label text will get cut off by the input which makes the question difficult to understand.
5. Animation can cause problems for some people
Permalink to “5. Animation can cause problems for some people”Float labels animate into position which can be disorientating and problematic for users who are sensitive to motion.
When zoomed in, the label may disappear off screen as Geri Reid explains:
“I saw first hand what a headache [float labels] can be for a person using a zoom tool as the label can disappear off-screen as it floats up. And the testers who work at DAC are expert users […]”
6. They’re inconsistently located
Permalink to “6. They’re inconsistently located”The float label function only really applies to a text input. They cannot really be applied to checkboxes, radio buttons and select boxes. This can make the label harder to scan across different types of fields.
7. They don’t make room for hint text inside the input
Permalink to “7. They don’t make room for hint text inside the input”With float labels there’s no space inside the input for hint text.
Hint text could be placed underneath the text box but this means that:
- it can be obscured off by the browser’s autocomplete dialog or on-screen keyboard
- it’s further disconnected from the label that it’s meant to be elaborating on
8. Any error message has to go under the input which isn’t ideal
Permalink to “8. Any error message has to go under the input which isn’t ideal”Any error message has to go under the input as there’s no other place for it to go.
But like the hint text issue above, putting the error under the input means the autocomplete dialog or on-screen keyboard can obscure them from users.
Float labels don’t actually save space
Permalink to “Float labels don’t actually save space”Float labels need a place to move to.
Therefore, if float labels were given a legible font size, they wouldn’t really save space at all.
Maybe you could make space as the label animates into position, but that would make the page jump awkwardly as the user starts typing.
Just use a static label above the input
Permalink to “Just use a static label above the input”This means:
- the label can be read
- it’s obvious where the answer goes
- it’s obvious which fields need to be completed
- the label can be as long as it needs to be
This content originally appeared on Adam Silver and was authored by Adam Silver
Adam Silver | Sciencx (2017-05-24T09:00:01+00:00) 8 reasons float labels are problematic and what to do instead. Retrieved from https://www.scien.cx/2017/05/24/8-reasons-float-labels-are-problematic-and-what-to-do-instead/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.