The UX behind designing better forms
Forms are omnipresent on the internet these days. We all come across them, be it before purchasing items, signing up for subscriptions, social networking or joining a discussion forum. It’s hardly an overstatement that they’re an indispensable element for information sharing today.
However, signing up is often perceived as an unavoidable evil for businesses, as maximum drop-offs are witnessed at this page. They’re mostly time consuming, complicated and sometimes get too personal.
Well, let’s see how this humdrum experience can be made more intuitive and effortless for the users.
#1. Forms should be one column
Multiple columns disrupt a user vertical momentum.
#2. Tag align labels
Users complete top aligned labelled forms at a much higher rate than left aligned labels. Top aligned labels also translate well on mobile. However, consider using left aligned labels for large data-set entry with variable optionality because they are easier to scan together, they reduce height, and prompt more consideration than top aligned labels.
#3. Group labels with their inputs
Present the label and input close together, and make sure there is enough height between the fields so users don’t get confused.
#4. Avoid all caps
All caps are more difficult to read and scan.
#5. Show all selection options if under 6
Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are over 5 options. Incorporate contextual search within the drop-down if there are over 25 options.
#6. Resist using placeholder text as labels
It is tempting to optimize space by using placeholder text as labels. This causes many usability issues.
#7. Place checkboxes (and radios) underneath each other for scannability
Placing checkboxes underneath each other allows easy scanning.
#8. Make CTAs descriptive
A call to action should state the intent.
#9. Specify errors inline
Show the user where the error occurred and provide a reason.
#10. Use inline validation after the user fills on the field (unless it helps them while in the process)
Don’t use inline validation while the user is typing — unless it helps them — like in the case of creating a password, username, or message with a character count.
#11. Don’t hide basic helper text
Expose basic helper text wherever possible. For complex helper text, consider placing it next to the input during its focused state.
#12. Differentiate primary from secondary actions
There is a bigger philosophical debate regarding whether a secondary option should even be included.
#13. Use field length as an affordance
The length of the field affords the length the answer. Employ this for fields that have a defined character count like phone numbers, zip codes, etc.
#14. Ditch the * and denote optional fields
Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields.
#15. Group related information
Users think in batches, and long forms can feel overwhelming. By creating logical groups, the user will make sense of the form much faster.
#16. Make it fun
Life is short. No one wants to fill out a form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.