by anthony on 11/30/11 at 10:28 pm
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 read and understand why and the research that verifies this fact. 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.