The very first time an input pattern had a float label pattern was in August 2013. The idea was simple enough — animate placeholder text to show an icon beside the input so the user does not lose context.
The beginning of the floating label idea — Icon beside the input
The idea was tweaked a little with time. Icons did not totally serve the purpose. It was frustrating to not know if something is right or not because there’s no label. That’s when the icon idea was scrapped and the text onlydesign was born. Now the float label came into picture with a slight animation for the text. When someone typed into the input box, the float label would animate upwards and change colour to the active state.
Version 2 : Float label pattern with text (Image credits : Derek Torsani)
Float label came up as a solution that saved space, looked clean and clear, and did not forego usability.
Top aligned labels vs Floating label pattern
1. More elements to scan in top aligned labels
In the top aligned form above, there are only 4 fields. But when you scan the form, it feels like there’s more to fill out. This is because there are 8 distinct elements that users have to scan.
The labels and fields are individual elements separated by whitespace. As a result, users process these elements with 8 separate visual fixations. The extra visual fixations give users more scanning to do, and makes them feel like there’s a lot to fill out.
2. Final checking of inputs before submitting
With top aligned labels, cross checking inputs towards the end isn’t quick to do. Users have to sweep their eyes up and down from label to input to see if they match up. The whitespace row and field border gets in the way of their visual path and slows their flow down.
The other pattern, where the labels disappears after the input field is filled, is also problematic. Disappearing labels force users to use memory to recall what the labels were.
With respect to user’s ease in cross checking the inputs before submitting form
With the third pattern (float label pattern) checking user input is quick and easy. The labels don’t disappear, and there are no visual barriers like on top aligned forms. Instead, one visual fixation per field is all it takes to compare label and input.
The text styling also helps users check their input quicker. By making the input text bold and larger, and the label text smaller, users can distinguish them at a glance.
3. Field focus
Field focus is all the more important for mobile interfaces. That’s because users look at the keypad while typing. Only after they are done typing, they look back to check what they have typed and whether it is in the right position.
Comparison of all three patterns of labels in the input field
Here’s what usually happens with the 3 patterns -
- In pattern one (top aligned label), the field highlights, but not the text label.
- In pattern two (label disappears when user types), the field highlights, but the text label can disappear or turn faint.
- In pattern three (floating labels), the border surrounds the field, label and input highlight altogether.
It’s clear that the third pattern (floating labels) are the strongest — Because, users get a clear view on what field they’re on, and what they’re typing at all times.
4. Error messages while submitting
If the form has been filled out, but there are no labels visible outside the form fields or on the top, then users have to go back to each field to reveal the description in order to fix the error.
[IMP] : Test your form interfaces
Honestly, how much ever we talk about the best practices, fads and trends in the difficult of UX, you can never be sure how your users might respond to an interface. The response might vary based on a lot of parameters — you users’ exposure to UI trends, the kind of apps they use, the age group they belong to and so much more… It’s best to design versions of form and test them with your users to know which works best for your brand.
We use CanvasFlip to check heatmaps and user videos on forms. I believe you would benefit from the same. An A/B testing of the same would be quite helpful in taking any decision.
Test forms before coming to any conclusion.
Conclusion
Users can be quite hesitant to fill out forms, so we as designers should make this process as easy as possible. Minor changes — in the way labels are presented — can significantly increase form usability. Usability testing is simply indispensable in form design. Very often, carrying out just a few tests or simply asking a colleague to go through a prototype of the form can give you a good insights in how usable the form is.