Member-only story
Maybe it’s time to let the floating labels die
Floating labels offer no significant value to the user, inject needless confusion, and are ultimately pointless.
Introduction
The floating label pattern was a clever way to address the lack of visual space available for mobile devices, but it bled over into desktop web pages, where it never needed to be.
In a previous article, I explained why developers should stop using placeholders altogether. Some have argued in the comments of that article (as well as others) that the floating label addresses those concerns — namely, the issue of placeholders disappearing when the user is typing in the control.
Unfortunately, it still doesn’t address several of the other problems, and it introduces a few, as well.
Let’s go over what the floating label pattern is, how it came about, and why it needs to ride off into the sunset, never to return.
Background
What is the floating label pattern?
The floating label pattern is generally a text box that styles its label similar to a placeholder. Upon focus (or the user starts typing — depending on the implementation), the label:
- Moves above where the user’s entry goes