18 Helpful Rules to Create a High-Conversion FormUX
Whenever we surf the Internet, we almost always face the need to fill out forms. Based on our own experiences, we assuming that a large number of these forms contain errors, incorrect descriptions and lack of instructions; which is a shame, because bad forms can cause user stress, frustration and often chases users away from your site. And after an experience like that, you can bet they’re not coming back!
If you don’t want to chase users away from your site, create a UX complaint form. This form will increase conversions among new users and additionally, they will be come return users.
Rule 1: Create clear and adequate labels
The label, or description of what the user is supposed to enter into the field, should be unambiguous and legible. The ideal solution is to place the label above the field to fill, in the form of a header. This is particularly useful for users who use the Internet on their phones where there isn’t a lot of display space. It’s also good practice to place the label on the left side of the field, but close enough so the user knows they’re related.
Rule 2: Shorten or divide
Forms containing an infinite number of fields can effectively discourage a user from completing the form. Whenever possible, eliminate unnecessary items while creating a form, and transfer them to the ‘Edit Account’ or ‘Settings’ pages so the user can update them at his/her convenience.
If the form requires a large number of fields, it’s important to group them. Groups of similar questions don’t scare off users as much because they are given the constant impression that they are reducing their quantity.
Rule 3: Ensure correct validation of errors
Efficient and clear reporting of errors is a key element in ensuring that web forms are properly functioning. If you want users to easily correct their mistakes, let them know by:
- Highlighting the incorrectly filled-in field with a clear color, preferably red
- Describing the error should be located next to the field that it’s referring to
- Communicate graphically, for example using an exclamation mark
- Remember to include a note on how to fill the field in properly, alone with an example
- Communicate in real time: once a user types in their login information, the password field should show that the field contains too few characters, etc. If a user is not aware of this, they may become frustrated and refuse to act again.
Rule 4: Call to Action (CTA)
Any button that completes the form should be clear, visible and clearly communicated so the user is not confused. It is also worth to show the user that the button is a first-order action, and thus should relieve any doubts of where to press.
Rule 5: Supplement the data field
Data supplements can be extremely helpful for users by suggesting what type of data they should enter and how many characters are allowed in that particular field. For example, the post code field should allow you to enter only 2 characters, then a dash, then 3 more characters (depending on where your target audience is). Cursor jump should automatically occur and fields should automatically adjust to a larger size if more information is needed.
Rule 6: Label required fields
Another good practice for creating forms with high conversion rates is to label which fields are required. This allows the user to know what to do or what he/she can skip over if they do not have time. Failing to mark required fields and then showing the user that something was required after submission can lead to a frustrating user experience and effectively chase the user away.
Rule 7: Lose the Captcha
Verifying that a user is a real person and not a spambot is a necessity, however, it often is a hindrance for users. Sifting robots should take care of the verification itself rather than making it a user’s responsibility. Complicated captcha verification frustrates users and increases the number of rejections. Not to mention, such captchas are often a large barrier for the visually impaired.
Rule 8: Use red sparingly
It’s good practice to reserve the color red only for error communication. It’s usually a good idea to no use red labels or headers as to avoid confusing the user.
Rule 9: Don’t be afraid to help
If completing the form is a complicated or multi-step process, you should always provide the user with a tutorial in the help tab. Eye-catching examples with step-by-step instructions will help the user avoid errors and increase the conversion rate of the form.
Rule 10: Be friends with Social Media
To facilitate a smooth user experience and to give them options, you should allow them to log in via various channels. Most users would rather click one button to log in via Facebook or Twitter rather than enter the data again.
Rule 11: Do it safely
Users often, and for good reason, are reluctant to enter their private data into a field, and if they can avoid doing so, they will. When sensitive information, such as a telephone number is required from the user, you should explain why this is needed to the user and a statement that reaffirms your intentions. For example: “The telephone number listed will help the courier contact you. It will not be used for any other purposes.”
In addition, it’s worth reassuring the customer that the data won’t leak out of the database and that it’s safe and secure. You should do everything possible to avoid a situation where users’ data could be compromised and manipulated in any way.
Rule 12: Inform users about benefits
To encourage visitors to sign up for an account and complete a form, you should inform them about the real benefits of doing so. A great example is offering discounts as an incentive to try and take advantage of the impulse to join.
Rule 13: Put it on the tab
To reduce the time needed to complete the form and to increase fluidity, allow the user to move on to the next field by pressing ‘Tab’ on their keyboard. Nowadays, it’s pretty much standard practice and is familiar to most users. By failing to allow them to use the ‘Tab’ button, they must move the cursor and manually move on to the next field.
Rule 14: Auto-complete
Just like the ‘Tab’ button, auto-refill or fill-in prompts greatly improve refilling. Memorizing email addresses or the ability to save passwords reduces time and increases user satisfaction.
Rule 15: Lost password
In today’s world, people have many different accounts on different websites, and each website has specific password requirements. This often forces users to have unique passwords for individual sites, and in-turn users often forget their passwords. Have an option for the user to retrieve their password is absolutely necessary.
Rule 16: Show them what they want to see
You’re not always sure if you typed a password correctly, so giving users the option to see the password that they just typed allows for visual confirmation and enables the user to continue without any problems.
Rule 17: Use understandable language
The user should not be confused as to what to enter in the required fields. The language used in your form should be tailored to your audience. It should be professional and specialized if necessary, otherwise it is preferable to keep things simple and understandable.
Rule 18: Run tests with real users
If you have implemented all of the suggestions listed above, and you are still losing users, you can run tests with users to conduct research. Giving users a chance to explain their frustrations will allow you to see the form from a new angle and create a more user friendly experience, resulting in higher conversion rates.
When creating forms, remember that the user is the center of your universe. A well-composed form that focuses on the needs of your users should allow for high conversion numbers and a higher customer retention rate.
Article written by:
Paulina Skiba – UX Specialist at TestArmy