How can you reduce your bounce rate by thinking about "form validation"?

Back

Whether it is a website, a mobile application or software, we use forms on these different media without paying attention. Forms are an important meeting point with the end-user and very often allow him to contact a service, edit his customer profile or make purchases.

A form is an issue not to be taken lightly and must be properly thought out from the moment it is designed. To be effective and achieve its purpose, it must have good ergonomics.

This allows the end-user to understand, enjoy the use and be satisfied with the design.

As a UX Designer, I make sure that during each of my UX Design missions or ergonomic audits, I provide the service with ergonomics adapted to the end user. To do this, I refer to the heuristic criteria of Bastien and Scapin and the principles of Jacob Nielsen, which are references in UX Design and ergonomics.

In the articles "Increase contact with the right form structure" and "How can youget more leads by improving the speed of your forms?"I discussed the topic of form design and I strongly recommend that you consider the following elements:

• The structure of a form (formatting, size, type of fields) and the understanding of information (meaning of words, information to help understanding)
• Interactions and ways of facilitating the input of of a form

The understanding, use and effectiveness of a form are essential and are enabled primarily by the items in this list.

However, there is also the validation of the data entered, error messages and the choice of field type to be used. This makes for a more pleasant user experience and more understandable information entry. In summary, it is important to consider the validation of a form, because if your form looks too complicated to enter, it is likely to discourage the user, and encourage them to leave the page.

Do you want to know how to enable proper validation of your forms?

In summary, my minimum recommendation is to :

• Use fields that constrain the value entered (example: email, tel, numeric)
• When a field is entered correctly, change its style (example: green outline)
• When a field is not entered correctly, change its style (example: red outline)
• Display an error message explaining the reason under the incorrect fields
• If you want to use a captcha, prefer a simple version that requires as few clicks as possible (example: reCaptcha)
• Do not make the submit button accessible until the entire form is correctly entered
• After submitting the form, display a validation message, technical error, etc. The user will then know if his data has been taken into account or not.

All these recommendations on validating the fields of a form are very important, but I recommend that to go further, you also take into account the structure and information and then the interaction and facilitation.