By now, most designers should know that top aligned labels allow users to fill out forms faster than left aligned labels. This makes sense when you understand the research. If that reason alone isn’t enough to convince you to use top aligned labels, here are a couple more reasons why they work best for most users.
Better Field Zooming for Mobile Users
Think about mobile users who fill out forms. When a user selects a form field, the mobile web browser automatically zooms in on it to make it easier for users to see what they’re typing in the field. Zooming in on form fields with left aligned labels makes the label disappear off the user’s screen. Users have to horizontally scroll to see the label and scroll back again to fill out the field. And they have to do this for every form field. This is a painful experience that users shouldn’t have to go through.
When a user selects a form field with a top aligned label, zooming in doesn’t cause the label to disappear off the screen. Users can see the field and the label at the same time. This allows users to fill out forms without any horizontal scrolling. Top aligned form labels aren’t just faster for desktop users, but they’re faster for mobile users too. They not only cut the user’s visual fixations, but they also cut the user’s need to horizontally scroll. Altogether, this makes a huge difference on how fast and easy it is for users to fill out mobile forms.
Better Label to Field Alignment for International Users
Now think about international users who fill out forms. Many aren’t fluent in english and have to translate form labels to their native language. This can make the form labels longer, and cause them to fall off alignment with its field. The consequences this brings are more than cosmetic. Users can easily lose trust in forms when they see a broken layout. It can also make it hard to understand label to field relationships, which can lead to users losing even more trust in the form.
Top aligned labels make filling out forms faster and easier for mobile and international users. But one gripe that some designers have with them is that they increase form length. However, there are certain techniques you can use to shorten your form length. If your form gets too long, you can divide your form into multiple pages, or you can use an accordion pagination that puts everything on one page, but collapses inactive sections to save space.
Form length isn’t going to scare users off as much as a broken form layout, horizontal scrolling or hard to scan labels. Even with a longer form length, users are still going to fill out forms faster with top aligned labels faster than with left aligned labels. The pros for top aligned labels far outweigh the cons. And when compared to left aligned labels, there really isn’t a debate which one is better anymore.
Book
Affiliate
What do you think about forms that have the label IN the text field, the ones that disappear when you start to type?
It’s not a good practice, because after finishing the form it’s harder to review your data if the labels have disappeared. The only case is the one-field form, like a search box.
I think they can work well when they’re done right – the label disappears when the user types, not when the user selects the field.
Hi – I’m sorry but it’s not generally a good idea. There are certain instances where it can be less interruptive to use them (say a faint one in a search box – where there is a clearly understood search button).
When you try to replace label function with in field text – you’re messing with two fundamental functions. It does go wrong and it doesnt work for conversion. People lose their place. They drink coffee. They answer the phone. Their session isn’t a 5 minute frenetic click frenzy – when you lose the field label due to input, you’re storing up trouble.
As for using top aligned on mobile – it will hit conversion on some forms as it psychologically makes the page look much longer. It can also mean your call to action button breaks differently on devices when you change this – so test properly!
This is a good little article, so I hate to be picky, but showing an example of good practice is usually helpful when trying to persuade others to stop worse practices.
You don’t know what a top aligned form label looks like?
You missed the point. He showed two bad examples.
The first example (google’s form) didn’t need to show the before and after keyboard picture, just show a good implementation and a bad implementation.
How can we apply these principles to a complex CRM software form where space and speed are important considerations.
How do you feel about forms that mix alignment? Starts left of the field then moves to the top? I think it is too confusing but having an issue proving things to my UX resource.