Introduction
Forms are an inseparable part of our lives & play a crucial role especially in the digital world. How many forms are filled out each day across the web? Billions of them, for sure. It’s hard to imagine a digital product without at least one form. The different ways a user interacts with forms are when they:
- Register themselves
- Subscribe to newsletters
- Fill up contact form
- Share customer feedback
- Perform online transactions
- Book tickets
- Shop online
- Input data or
- Share information, etc.
However, the funny thing is that most people hate filling forms, no matter how inevitable they are! Ever wondered why? Well, at least I find forms bizarre, boring & non-human. And I’ve spoken to many users over the years, most of whom share the same sentiment as me. They complain of bad user experience on most forms which results in them dropping out mid-way.
Why are forms even needed?
From a business point of view, brands work hard on lead generation campaigns everyday to convert users into potential customers. Companies often suffer from lower conversion rates that’s when importance of user contact forms comes into the picture.
If you truly want to boost your conversion rates then you should focus on the right approach — design forms that convert better!
How to design forms that convert?
A simple thumb-rule while designing forms is — SIMPLICITY!
In today’s post, we’d like to go over some practical tips and recommendations backed by research and experiments that will help you Design high-conversion forms.
1. Break down the input process into logical steps in the right order
Breaking your forms into multiple steps almost always simplifies the process for users and increases the chances of completion. Too many input fields on a single page can increase the cognitive load of the users and they are more likely to leave the form. According to endowed progress effect, users feel more motivated to complete the action when they feel they’re reaching towards a certain goal, e.g. progress bar, collecting rewards, etc.
Also, when we arrange our input fields logically, for instance, from easiest to hardest and ask for more sensitive information (phone number, email) in last steps, there are higher chances of users completing the forms as they have already invested their time in it, as per the sunk cost fallacy.
2. Fetch only what’s important
Asking for unnecessary information can frustrate your visitors and you might lose a potential client. Hence try to reduce the number of input fields as much as possible.
It’s proven that more number of input fields in a form minimize the conversion rate. Don’t ask it until it’s absolutely necessary. Think how many times have you filled your PIN code only to fill your city next. It’s only logical for a user to expect the system to be self-learning and fill up everything that’s logically connected on its own.
3. Autofill the data
The previous point brings us to this tip. Most web browsers now-a-days have this great feature where they capture user data entered in forms and auto-fill when needed. By integrating this feature during development phase, you can save a lot of your visitors’ time. It’s particularly helpful in case of login and payment forms.
4. Single column and appropriately sized input fields
Avoid placing input fields side by side horizontally. An eye-tracking study shows that its hard for users to scan information when placed in that fashion; in extreme cases they might abandon the form completely. A study by CXL Institute found that participants were able to complete a single-column form an average of 15.4 seconds faster than a multi-column form. Single-column layouts are easier to understand and more importantly, readable.
To achieve higher usability rates, the size of input fields should always be proportional to the size of input data. For example, as depicted in the image above, we should use smaller fields for inputs like PIN code or CVV. If we create too big or too small input fields, users find it challenging to understand what is to be entered there. So, in order to avoid any kind of confusion we should match the field sizes to the input data.
5. Clear input field labels and placeholders
We should always left-align input field labels and place them on top of the field because users scan things from left to right on the screen. The input field label should never be written inside text placeholders; they are best used for providing hint copy.
At times, designers do that in order to make the forms appear cleaner. However, in such a case, when the user starts typing inside the field, the placeholder disappears and it increases the cognitive load of the user to recall what they were trying to fill.
Although, a new style of floating placeholders is trending nowadays, which has being implemented by Gmail and other big organizations.
6. Intuitive error messages
As humans, we can’t expect users to be perfect and we should keep in mind they are sometimes prone to errors. As designers, we should create designs that minimize the possibility of errors. Whenever an error is made, the user should receive clear error messages. Many times users drop out simply because they don’t know why the error occurred, neither there was a clear notification about the causes.
As a best practice, we should educate users about the error as well as provide possible prevention and hints to correct it. The error field should be highlighted to draw the user’s attention to the problem.
7. Avoid Captcha
You may have seen some random numbers & shapes at the end of some forms that you can hardly read, those are called captcha codes. Captcha was introduced to prevent any kind of spamming and to secure user’s data, but it’s annoying and time-consuming for users. It also affects conversion rates; and in recent times many studies & surveys have shown that removing captchas from forms increased their conversion rates a lot.
8. Prominent Optional fields and Clear CTAs
Many times brands guardians find themselves flooding the form with too many fields, many labelled as ‘optional’. Ask yourself- If it’s important, it better be mandatory. Optional fields are best avoided. Too many fields in your forms might frustrate your users. They should be able to differentiate between optional and mandatory fields. Use visual elements to provide the distinction. And no, don’t just put an asterisk (*).
At the same time, your CTA should stand out and draw users’ attention. You should always add a personal touch to your CTA labels. e.g., instead of writing ‘send’, ‘submit’ etc try ‘login’, ‘let me join’ etc. Use contrasting colours for your CTA so that it can easily grab users’ attention.
Summary
Sometimes forms feel bizarre and mechanical, hence users don’t hang on till the end that leads to lower conversion rates. A badly-designed form can often be reason enough for businesses to lose their potential customers.
A simple thumb-rule is to keep form design as simple as possible.
- Single column and appropriately sized input fields
- Break down the input process into logical steps in the right order
- Ask only important information
- Single column and appropriately sized input fields
- Clear input field labels and placeholders
- Autofill the data
- Intuitive error messages
- Avoid captcha
- Prominent Optional fields and Clear CTAs
Originally authored by Aniruddh Nandwana posted on 17Seven.co on 02nd Aug, 2019
