Forms are one of the most important conversion components of UX design. In this article I will be focusing on common dos and don’ts of form design. Keep in mind that these are general guidelines and there are exceptions to every rule.
To Many Fields
One of the most common errors made is requiring more information up front than is absolutely necessary. For every field, ask yourself if the value of the data is higher than the loss of the user.
The questions I ask here is: Am I happy to loose 10% of the users to get this info?
This means that of the 100 users that started your form only 53 will submit the info after 5 fields.
Other things to consider here are high risk fields like phone numbers, date of birth and weight. Try to remove the need for fields like these or only display them to your most engaged users.
Aligning Field Labels
In the Western world we have been conditionedto read from left to right and from the top down. For this reason you will see much higher completion rate with top aligned labeled forms than left aligned labels. Aligning your labels above the entry field will also translate well on mobile.
That said, you should always consider your audience:
Are they only using desktops?
Where are the from?
How computer literate are they?
The big downside with using a top align label is the level of consideration users give to each input. Left aligned labels mostly have a higher level of consideration to the data entered. Also for large data-sets it can make the form look smaller. This gives the appearance that the user requires less effort to complete the form.
One Column
We live in a world of long scrolling. Multiple columns disrupt a users momentum both loosing the context of where they are and adding to the cognitive load required. This also applies to Checkboxes and Radio buttons.
Grouping and Labels
Reduce the concentration a form requires to complete by placing the label and input fields close together. It is a good rule to allow at least half the field height between each label and input group.
Also group batches of content into similar types. This will have the effect of making your form feel less overwhelming and will be clearer to your user, allowing them to complete the form much faster.
Avoid All Caps
All caps can be difficult to read especially at a glance. Try using title or sentence casing. But this can also raise some issues. Check out this article for how to title case: http://www.onlinegrammar.com.au/title-and-sentence-case/
Show Selection Options
Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are under 5 options. If your drop-down is more than 5 options you should look at adding filtering or sub-groups as it is better to show 2, 10 option drop-down fields than 1, 20 option drop-down field.
Placeholder Text
It is always a tempting option to use placeholder text as your labels. We all have done this at some point and it can make your design look far cleaner and your form look shorter. Unfortunately this will make it difficult for people to remember what information belongs in a field, and to check for/fix errors. It also poses additional effort on your users' visual and cognitive load. In short this will kill your completion rate.
Inline Errors
How often have you got to the end of a form only to find it will not submit and the only indication of this is a little red message at the top of the form, that is almost always not displayed in your current page view.
When displaying errors, always show the user where the error is, provide a reason in clear easy to understand text that is placed in the location of the error. Also indicate that there was an error around the submit/next/save... button.
Try to not use inline validation as the user fills out the field unless it helps to complete the process ie. a multi-line text box with a character count. Having a field change as the user is typing will distract your user, increase the difficulty of the task and reduce the complication rate.
Helper Text
Ditch the “i” button at the end of a entry field. It is always better to display helper text wherever possible. You will get much better quality inputs by showing short well written helper text than long detailed helper text hidden under a button/hover state. If complex helper text is needed, try only displaying it when the field is in a focused state.
Field Length
The length of the field should indicate the length the the information required. Think about fields that have a defined character count like phone numbers and post/zip codes.
Field Type Restrictions
It is also tempting to only restrict the data entry type to number or character count in phone numbers and post/zip code fields. It is worth noting that many modern phone numbers and post/zip codes have special characters or text in them.
Mandatory and Optional Fields
We always seem to add a (*) to indicate a required field. It is worthwhile considering that users may not understand what this means. Try adding optional (yes the actual word) beside optional fields as users know the need to enter information. But if it is up to me an optional field equals a field that is not required so why are we displaying it again?
Why ask?
Wearables, Mobiles, Browsers and Password Managers collect large amounts of data without the user’s consciously aware.
Think of ways you can leverage this data through: conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.
Call to Action (CTA)
A call to action should state your intent but this should not be at the detriment of your site or apps personality. It is always a good rule to think about the reaction and perhaps try being less confronting. For example, instead of a Read More button try using Continue Reading.
Personality is Key
No one, Yes absolutely no one wants to fill out forms. Try being conversational, funny and gradually engage the user. If done correctly, it will increase completion rates. That said it not worth doing this if it breaks the rules outlined above.