Forms are the main tool through which you have a conversation with your users. If you fail at them, you fail to have a good conversation with your users
Forms are central to:
- Registrations : Having more users
- Revenue : Having more money
- Data input : Having more data
- Tasks and interactions : Actually do something useful
Guiding principles
- Reduce cognitive load
- Help prevent errors
- Make it human
In practice this means :
1. Group your fields
Sorry we had to say this one out loud but yeah, it seems like it is not always a well understood concept in some isolated regions of the internet.
2. Use multi-step forms when you can
Once you’ve grouped them in logical block, try to see if you can split them.
Split it.
Again.
Again!
Until you get to a number of steps where each step is a breeze and people do not get crazy when they see your form.
- Less intimidating - reducing cognitive load
- When you ask for email, phone or any sensitive piece of data at the end, users are more likely to actually answer (sunk cost fallacy principle).
- Progress bar - use them to provide a boost of motivation to finish to complete your form (endowed progress effect)
Side note regarding the progress bar : progress bar are great without a doubt when it comes to trace your origin. However the benefit is less obvious when it comes to describe the future steps.
Sometime it can be intimidating to know how many steps you still have to go. So in some cases, you will prefer to use only breadcrumbs logic while building your progress bar - just to avoid your users to freak out when they see your form has 15 steps…
Extra bonus for : conditional logic in wizard
3. Keep fields to the minimum
It is now common knowledge but nonetheless, you still see plenty of forms in the wild with a crazy amouts of fields that could totally be reduce to a bare minimum.
If you need data for extra convincing check these:
- Case-study for hiding the optional fields
- Lead Generation: Testing form field length reduces cost-per-lead by $10.66
4. One column all the things
The fields, the radio buttons, etc.
Avoid multicolumn, unless there is some logical bound between two fields, like name and familly name, or date of birth has day, month, year fields… but for the rest, just stay away from multicolumn.
5. Labels: top left of input - no inline disapearing on click
Where to put labels have always been a matter of debate.
But consensus has been built over the years that Top Left labels seems to be the best
For sure, disparearing lable inline are really bad (I have used these a lot, but honestly, unless you have a single email form on a landing page, it does not make any sense to use disapearing inline field.)
So are supporting Infield top left, which is basically top left label but inside the field, check the reference for a detail description of this option.
Why Infield Top Aligned Form Labels Are Quickest to Scan
Google Research - Simple is better - Making your web forms easy to use pays off
Also, always display a field label. Even if it seems obvious - just write the label anyway.
6. Radio buttons over dropdowns
Dropdown require extra user action to reveal all the options of the form.
So it is not scan-friendly.
And we know users like to scan quickly information, right?
So, using Radio Button makes more sense. Unless of course, for country list or for any kind of list where the logic doesn’t require opening the list to understand what’s in there.
7. Explain what you will do with the information you collect
This is part of the user experience too and it helps build trust.
Moreover, with the GDPR law and the global lack of confidence in tech, it is a good thing you just be upfront about it, and give people a reason to trust you.
Other obvious stuff but still worth mentionning
- Use auto complete for
- fields with lots of pre-defined options
- post code / zip code
- Be careful when asking for phone numbers on landing page - it reduces conversion rate Clicktale study
- Make sure the key tab navigation is working
- Dont make people confirm their email twice
- use real time validation if you can
- Do not use reset button, please.
- Do not sign up users into your mailing list, if they did not ask too. That’s a douchebag move, seriously.