by anthony on 09/01/10 at 3:48 pm
Imagine a user who is really excited about your product or service. They’re ready to sign up, so they go to your form page and start filling out their information. The way you align your labels with your form fields can affect how easy it is for users to fill out the 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, easy and painless, consider using top aligned labels for your form fields.
Top aligned labels are faster and easier to fill out than left or right aligned labels. This is because top aligned labels require half as many visual fixations than left or right aligned labels. Top aligned labels also allow users to move down the form in one visual direction, instead of two visual directions with left and right aligned labels. This makes filling out forms quicker and easier.
The only drawback with top aligned labels is that they can make the form long. However, on the web, where users scroll often, this doesn’t seem like a big problem. In fact, by reducing the font size of the labels and the 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 long forms simple and easy to fill out. Even though they may make forms look longer, when the user actually uses the form they’ll notice a dramatic difference in the time and effort it takes to complete the form. If users are able to have a better experience with forms, then using top aligned labels is well worth it. The form experience is an important aspect to web design. Designers should carefully think about how they align form field labels because it can often make the difference between a user completing the form or abandoning it.