Float labels are form labels that start off inside the text box. But when the user starts typing, the label floats to the top of the text box to make room for the answer.
Some people like this technique for it's novel and supposed space-saving design.
While this approach is certainly better than supplanting labels with placeholders, its problematic for several reasons.
1. There's no space for a hint
Float labels start off inside the input leaving no space for hint text which some fields need.
2. Small text is hard to read
Float labels have small text so that when it floats, it takes up as little space as possible. But small text is hard to read.
3. They don't save space
For float labels to work, there needs to be space ready for the label to move into. If the font size is of adequate size it wouldn't save space anyway.
You could create additional space as the label moves up. But this makes the page jump which is an unpleasant and disorientating experience.
4. Animation is problematic
Animation can be disorientating and cause sickness. Also, for users who zoom in, the label may disappear off screen as it floats up.
5. They have poor contrast
Float labels have low contrast in order to differentiate it from a real value. But low contrast text is hard to read.
6. They may not be answered
Some users will mistake the float label for an actual value. When they submit the form, they'll get an error message which causes friction.
7. They're inconsistently located
While text boxes can have float labels, other types of fields like checkboxes and select boxes can't. This creates an inconsistent experience.
8. Long labels get cut off
Long labels could get cut off. We should be using patterns that accomodate varying types of content.
Float labels are lauded for their novel, space-saving aesthetic. But in reality they don't save space without sacrificing usability in the shape of small, hard to read text.
If that weren't enough, float labels have several usability issues all of which are unnecessary.
Forms aren't a source of entertainment. Float labels won't make users enjoy using your form. People don't care about your design, unless it stops them from completing the task.
Conventional, ever present labels may take up a few more pixels in height, but they also provide users with a familiar, consistent and robust experience that accomodates different sized content.
Read more about good form design.
I write articles like this and share them with my private mailing list. No spam and definitely no popups. Just one article a month, straight to your inbox. Sign up below: