The way you choose to display field labels on your form will have a direct impact on both usability and conversions. Luke Wroblewski discussed the topic way back in 2008 at the IA Summit in Ireland, were he shared best practices for Web Form Design. His concepts have now been adopted in conversion optimization circles as well, where small form changes can have a huge impact on profitability. According to Luke, there are 4 possible ways to align labels on forms:
- Top-aligned labels
- Right-aligned labels
- Left-aligned labels
- Inline labels
Please note that there really isn’t a guaranteed best approach and as always A/B test these to get the best fit for your industry.
How you display field labels on your form will directly impact conversions rates. Click To Tweet
Top-aligned labels
These work best and have the lowest form completion time (how long it takes to complete a form) because both input label and field can be viewed with a single eye fixation. These are ideal when data being collected is familiar ( e.g. address, suburb, cell phone number, credit card, etc.) and there is more vertical space. Spacing or contrast is vital to enable efficient scanning and there should be flexibility for localization and complex inputs. The down side is that top-aligned labels, take up a lot of vertical real estate.
Usage
Right-aligned labels
These tend to have longer form completion times, though they take up less vertical space. These are perfect where there is a clear association between label and field, and where space is limited. There are more difficult to just scan labels due to left rag (impedes readability), thus they are not ideal for lengthy or complicated forms as right-aligned text is hard to scan.
Usage
Left Aligned
These are the slowest of the 3 to complete because of the number of eye fixations they require to parse (i.e. the number of times you have to look side-to-side to connect the label with its corresponding field). Use these for forms with lots of optional fields or unfamiliar data (such as preferences dialogs). Left-aligned labels enable users to effectively scan labels. In fact, if you want users to slow down and consider each input in a form more carefully, these are the best.
Usage
Best Practice
- For reduced completion times & familiar data input: top aligned
- When vertical screen space is a constraint: right aligned
- For unfamiliar, or advanced data entry: left aligned
Inline labels
Inline labels have become really popular lately – especially as they work well on mobile phones. This type reduces the overall size of the form, however the downside is that there is greater room for error as the label disappears when you enter the field.
In the mobile example above, you can see that once you are in the form field you no longer know what to enter. This happens when you are in a rush and you can easily forget whether it was last name or email or street you clicked on. To manage the situation, UX experts added the label as a background in the form (text that remains as you type), which in itself adds a bit of confusion as well. Another strategy is adding a tooltip above the form field once you’re inside it as a reminder of what to enter.
<img class="alignnone size-full wp-image-1258" src="https://www.hiltonjohani.com/wp-content/uploads/2016/12/tooltip-in-forms cialis en andorre.png” alt=”” width=”470″ height=”258″ srcset=”https://www.hiltonjohani.com/wp-content/uploads/2016/12/tooltip-in-forms.png 470w, https://www.hiltonjohani.com/wp-content/uploads/2016/12/tooltip-in-forms-300×165.png 300w” sizes=”(max-width: 470px) 100vw, 470px” />
The only time I recommend using inline labels is when there is only one form field – an email address like the Gmail example below:
