Floating Labels Are Problematic

After writing Placeholders are Problematic some people suggested the floating label pattern.

We are often seduced by novel patterns that save space but this pattern is problematic. Here’s why:

1. There is no space for a hint

Floating labels start inside the text box leaving no space for an additional hint.

2. They are hard-to-read

Floating 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

Floating 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 makes the page judder, creating a disorientating experience as the user starts typing.

4. The animation is problematic

Animation, even if it’s done well, could be distracting and disorientating, particularly 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, floating labels have low contrast 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

People may skip the field thinking it’s completed already. When they submit, they will see an error which needs fixing. This is frustrating and time consuming.

7. They are inconsistently located

Radio buttons, checkboxes and select boxes have static labels and legends. Where as text boxes have floating labels. This creates an inconsistent experience.

When looking at a text box, for example, the user has to look inside the control. For a select box they have to look outside of it.

8. The label may get cropped

If the floating label is longer than the size of the field, it will be cut off by the field. We should design for content, we shouldn’t make content fit the design.

9. They ignore the standards

We know placeholders are problematic anyway. However, if we’re going to put text inside a text box, it should be a hint, not a label.

Summary

Forms are not a source of entertainment. The floating label won’t make users enjoy using forms. Users don’t care. They just want the outcome.

Static labels and legends positioned outside the field create familiar and consistent experiences. Two qualities often found in well-designed interfaces.

There are better and more productive techniques for improving form design. Let’s spend time and energy on those instead.

This post was originally published on Adams’s Medium profile.

Designing simple, human and inclusive experiences for the web. Wrote a little book called MaintainableCSS. Follow me on Twitter.

Related Posts

There is a lot of conversation happening around Artificial Intelligence, Machine Learning, and using algorithms to shape the future of Design and the role of the designer. But how is that changing the way we work in the near future? “The end is near”, according to specialists in robotics and artificial intelligence. Not really the end of the world itself, but… Read More →

Last November, I decided to transition out of freelance user experience design. During my job hunt, I found myself needing to answer the same questions again and again. I collected my favorite questions and wrote thoughtful and exhaustive answers, creating a list of frequently asked questions. They served me in two ways: I linked to my FAQs in my cover… Read More →

Have you guys heard of Inktober? It’s a drawing challenge developed by fellow illustrator, Jake Parker in 2009. Every October, artists and art-enthusiasts around the world create an ink drawing daily for the month, sharing their work each day online with the #Inktober hashtags. Sounds pretty easy, right? I mean c’mon, we’re all creatives here. How hard can it be… Read More →