8 reasons float labels are problematic and what to do instead

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 soo…


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.

Float labels have small text in order to make it fit inside the input. But that makes them hard to read.

Float labels have small text which is hard to read

Float labels have poor contrast in order to distinguish itself from an actual answer. But this also makes them hard to read.

Float labels have poor contrast

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.

Float labels make the input looked filled out

Long float label text will get cut off by the input which makes the question difficult to understand.

Long float labels get cropped

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 […]”

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.

Float label location is inconsistent across different form controls

With float labels there’s no space inside the input for hint text.

There’s no space for a hint when using float labels

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

Any error message has to go under the input as there’s no other place for it to go.

There’s no space for an error above the field

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 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.

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


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » 8 reasons float labels are problematic and what to do instead." Adam Silver | Sciencx - Wednesday May 24, 2017, https://www.scien.cx/2017/05/24/8-reasons-float-labels-are-problematic-and-what-to-do-instead/
HARVARD
Adam Silver | Sciencx Wednesday May 24, 2017 » 8 reasons float labels are problematic and what to do instead., viewed ,<https://www.scien.cx/2017/05/24/8-reasons-float-labels-are-problematic-and-what-to-do-instead/>
VANCOUVER
Adam Silver | Sciencx - » 8 reasons float labels are problematic and what to do instead. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2017/05/24/8-reasons-float-labels-are-problematic-and-what-to-do-instead/
CHICAGO
" » 8 reasons float labels are problematic and what to do instead." Adam Silver | Sciencx - Accessed . https://www.scien.cx/2017/05/24/8-reasons-float-labels-are-problematic-and-what-to-do-instead/
IEEE
" » 8 reasons float labels are problematic and what to do instead." Adam Silver | Sciencx [Online]. Available: https://www.scien.cx/2017/05/24/8-reasons-float-labels-are-problematic-and-what-to-do-instead/. [Accessed: ]
rf:citation
» 8 reasons float labels are problematic and what to do instead | Adam Silver | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.