Float labels are problematic

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.

Summary

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.