Forms are one of the most crucial constituents of the web. Designing and implementing them is both a delicate challenge in its own right. There are whole books available on form design but we rarely come across something which is functionally and visually as striking as the float label pattern by my colleague Matt D. Smith.
To get our hands dirty, in an attempt to create interactive float labels, we first need to understand why float labels are so important in the first place. For those who’ve missed it, here is what it looks like:
One of the main problems of forms solely relying on placeholder text is that the user loses the ability to validate his own input once he’s finished typing. How can you make sure you didn’t accidentally put your first name in the last name field? Glad you asked, you can’t.
The portrayed HTML & CSS implementation as seen on css-tricks therefore completely misses the point, as the labels disappear after typing.
On the other hand, the float label pattern as seen above solves this very problem by always providing a label and its corresponding value to the user. After all, every input field needs explanation right? Well… no and yes.
There is one input field which is fundamentally different than any other, representing one of the always recurring frustrations of online forms: The password field.
A better context for passwords
How many times did you come across the “Please repeat your password” field? Remember how it feels? It feels stupid.
Giles Colborne talked about delightful user experiences at this years UXLS in Switzerland. One of the things he learned, was that revealing passwords dramatically reduced the number of password reset requests and support calls. Since the users has learnt from thousands of forms that the asterisk sign stands for a hidden input, a filled out password field provides context on its own.
So how about adding an interactive label that allows users to reveal the password right away?
The user now gets an immediate chance to see what he’s typing. There are many possibilities. Perhaps the password could be shown from the beginning and the label would hide it instead but you get the picture. We can achieve this without adding any additional UI element to the form. However, we do need to make sure the touch target size is big enough.