You’ve seen some variation of field label alignment whenever you’ve filled out a form. You may not have noticed as you were completing it but the alignment of the field labels affected how you filled out the form. Field labels and their alignment aren’t merely a cosmetic choice. Form creators typically overlook field label alignment but in this post we’ll tell you **why alignment matters** and **which alignment you should choose** when creating your next form.
But first…
### What Is Field Label Alignment?
Field label alignment answers this simple form design question: where do you want your field labels to appear relative to the fields on your form? There are typically three options (bottom aligned, we hardly knew ye), *Top Aligned*, *Left Aligned*, and *Right Aligned*. In the Wufoo Form Builder, you can find these options under the **Form Settings** tab when editing your form.
_Label Placement In The Wufoo Form Builder_
Now that we’ve got the basics out of the way, let’s dive a little bit into each one and see what they’re good for.
### Top Aligned
This is the default field label alignment setting and for most forms, this is fine. **Top aligned** field labels allow for typically *faster* form completion and is perfectly suited for when you’re asking for information from your users that they are *intimately familiar* with, such as their name, address, gender, and other simple questions. Basically, if you’re asking for really common pieces of information that your users know really well, top aligned works great.
Some drawbacks to top aligned field labels is that if you have a form with a lot of questions and don’t use a page break to break up the questions a bit, your form will *appear* to be fairly long. Even though it might be a breeze to fill out, some users won’t even start as they’ll be daunted by the appearance of your form being too long to complete. So if you need to ask a lot of questions, the other two field alignment options might be a better bet.
### Right Aligned
The next most common field label alignment setting is **right aligned**. This field placement benefits from decreasing the amount of vertical space your form takes, thus making the form appear shorter than it would if you used top aligned field labels. This comes at a tradeoff, however.
Right aligned fields typically take users a bit longer to fill out the same form than if it were top aligned. This is because in top aligned labels, the label and the form field are on the same vertical line so it’s easier to jump from label to field.
So, if it takes longer then why would we choose it? Simply put, since it takes your users a *bit longer* to read the label and find the input to enter in their data, they slow down a bit and it actually decreases the amount of errors that might arise from someone filling out a form too quickly. Since they aren’t speeding through your form, your users will enter in less erroneous data and subsequently you’ll have less bad data in your entries.
### Left Aligned
Finally, if right aligned fields slow down users a bit, **left aligned** fields are the slowest of all three. It takes a bit longer for users to read the labels on the left and connect them to the fields themselves on the right.
Again, why would we ever have this option? The answer is the same as right aligned labels; by introducing some friction to the scanning process, you’ll force your users to slow down and in turn decrease the amount of errors and bad data you receive. Typical use cases for this is when you have a form that is asking the user to enter in data they aren’t very familiar with.
Think of an [IT Help Desk](http://www.wufoo.com/gallery/templates/forms/it-service-request-form/) form that asks your users to input their 25 digit employee ID (that they only use once a year), along with other fields that ask the user to input the serial number and registration number of their devices, and the model number of their device that is on the back of their monitor. All of these are super *unfamiliar pieces of data* (no one looks at or views the serial numbers of their devices on a regular basis) that you need to be correct and accurate so you can fix the problem.
If there was an error in inputting the data, you’d have to contact the user to get the right info, increasing the time to just fix the issue. By making the form take slightly longer to complete, you’re *drastically decreasing errors and bad data* and *saving more time* further down in your day.
—–
### To summarize
1. **Top aligned** field labels are great for most forms and perfect for forms that are asking for familiar data.
2. **Right aligned** field labels are useful for slowing down the user a bit and decreasing errors.
3. **Left aligned** field labels take users the longest to fill out a form but are perfect for slowing down the user when they are entering in unfamiliar pieces of data. These labels also help you decrease the amount of errors and any bad data that you might receive.
I hope that helps you understand the importance of field label alignment and the next time you sign up for a service or fill out a form, I guarantee you’ll notice the alignment of the fields.
Got a comment, question, or not? Leave it below!
Comments
Everyone needs a hug.
Posted November 4th, 2014 by Putra Muar Siboxx.Everyone needs a hug. 🙂
Posted November 4th, 2014 by Martin.Unfortunately they are not being responsive, so, in mobile, there is no difference between them.
Posted November 4th, 2014 by Adriana Tienda.Te top aligned is the best for tis purpose, but not doing well on desktop.
Hope we can have responsive wufoo soon.
@Adriana: you’re right, top aligned is the best method for your forms on mobile.
Posted November 4th, 2014 by Johan Lieu.This was super helpful! I learned quit a bit about design because of this article and you are correct; I will never look at forms the same way again. Thanks!
Posted November 4th, 2014 by Michael.Everyone needs a hug. Join Dr Michael C.Grayson 990 Club Get Hugs Of Credit Worthiness In 90 Days Contact Ms Armey Washington 972-802-6277
Posted November 4th, 2014 by Michelle Samuel , Emmanuel.