Float labels are labels that start off inside the input like placeholder text. But when the user starts typing, it floats upwards to make room for the answer.
They’re often used for their space-saving and minimal aesthetic but float labels are problematic and don‘t really save space anyway.
Here I’ll explain why that is what we can do instead.
# 1. They’re small and hard to read
Float labels have small text in order to take up as little room as possible. But that makes them hard to read.
# 2. They have poor contrast
Float labels have poor contrast in order to distinguish itself from an actual answer. But this makes them hard to read.
# 3. They may be mistaken for an actual answer
Like placeholder text, a float label could be mistaken for already being filled out.
When the user submits the form they‘ll get an unexpected error which causes friction and frustration.
# 4. They may get cropped by the text box
Long labels may get cropped by the text box which means the question may not be clear.
# 5. Animation can cause problems for some people
Float labels animate into position which can be disorientating and problematic for users who are motion sensitive.
And 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
Text inputs can fit a float label inside, but other controls like checkboxes and select boxes cannot.
This results in an inconsistent label position and experience throughout the same form.
# 7. They don’t make room for hint text
Float labels are designed in such a way that means there’s no space for hint text.
You could put hint text underneath the text box but that means the hint text is far away from the label it relates to. And the text may get cut off by browser autocomplete dialogs.
You could put hint text above the input but that would put the hint text before the label which is confusing.
# 8. They force error messages to go below the field which can cause problems
Float labels are designed in such a way that means the error message has to go below the field.
You could put the error above the field, but it would look strange as the error comes before the label and answer.
# 9. They don’t actually save space
Float labels need space to move in to. If they were given a large enough font size to be read, then they wouldn’t really save much space at all.
You could make space as the label moves into position, but that would make the page jump awkwardly.
# What to do instead
Put a static label above the input and leave space for the answer. Boringly simple with none of the above problems.
Float labels promise to save space, but in reality, space should not be saved at the cost of usability – and in any case, float labels don’t actually save space.
Instead, put labels above the input where they can be seen, understood, accessed and located easily.
More on good form design.
Sign up to Good Design
I’ll email you once a month on nailing the basics, avoiding complexity and making things that work for everyone.