Float labels are problematic

After writing about how placeholders are problematic some people suggested the float label pattern.

The float label pattern works by having the label start off inside the input (just like placeholders do). But onfocus or when the user starts typing, the label moves above the input.

While this is better than supplanting labels with placeholders, this seductive, novel and space-saving technique is problematic for a number of reasons:

1. There is no space for a hint

Float labels start inside the input leaving no space for an additional hint.

2. They are hard to read

Float labels typically have small text, so that as it floats, it takes up a small amount of space. But small text is hard to read.

3. They need space to move into

Float labels needs space to move into. If label text is friendly (see previous point), there would be no saved space anyway—just more white space.

Alternatively, we could create space as the label moves into position. But this would make the page judder, creating a disorientating experience as the user types.

4. Animation can be distracting and cause sickness

Animation can be distracting and disorientating, especially for low confidence or visually impaired users. And when zooming in, the label may disappear off screen.

5. They have poor contrast

Like placeholder text, float labels have low contrast in order to differentiate it. But low contrast text is hard to read.

Depending on the design, when the label floats outside of the field, its colour will need to change. Otherwise the text will be lost against the background colour.

6. They may be mistaken for a value

Users might skip the field thinking it is already filled in already. When they go on to submit the form, they'll get an error which is frustrating.

7. They are inconsistently located

While text boxes can have float labels, radio buttons, checkboxes and select boxes can't. This produces an inconsistent experience.

For example, the user has to look inside a text box for the label but outside select box.

8. The label may get cropped

Long float labels could get cropped by the field. We should use patterns that adapt based on the content.

9. It ignores the standards

While we know that placeholders are problematic, if we're going to put any text inside a text box, it should be a hint, not a label.

Summary

Forms are not a source of entertainment. Float labels won't make users enjoy using your form becaue they don't care about the form. They only care about the outcome, that filling out the form gives them.

Normal labels provide users with a consistent, familiar experience that allows for all sorts of content.

There are more productive ways to design forms, so let's do that instead.