by anthony on 09/01/10 at 3:48 pm
Imagine a user who is ready to sign up for your site. They go to your form page and start filling out their information. The way you align your labels with your fields affects how easy it is for them to fill out your form.
Do you want to give users a quick, easy and painless experience or do you want to give them a hassle? If you want to make their experience quick and easy use top aligned labels on your form fields.
Top aligned labels are faster and easier to fill out than left and right aligned labels. This is because top aligned labels only need half as many visual fixations. Top aligned labels also allow users to move down the form in one visual direction. Left and right aligned labels require two visual directions to fill out.
The only drawback with top aligned labels is that they can make the form long. But on the web users scroll often, so this isn’t a big problem. By reducing the font size of labels and whitespace between fields you can decrease the form length. You can also break the form up into multiple pages to make each part of the form shorter.
The difference is clear. Top aligned labels are easier on the eyes and make forms easier to fill out. Although they can make a form appear longer, when users fill it out they’ll notice a big difference in the time and effort to complete it.
If top aligned labels are able to give users a better experience with forms, it’s well worth adopting. Designers should think more about form label alignment. It can make the difference between a user completing the form or abandoning it.