Validation Error Optimization

Introduction

If users fill any wrong data in the form field then system show a validation error message [e.g. “email is not valid”]. Users can correct the wrong information with the help of this error message.

Some websites show this message on the top and some show it with close to the respective form field and some show it in red color and some show it in yellow color.

So error message location, color, text, size, special signs, timing may affect your conversions rate. I will explain to you how you can make this error message user friendly and increase form submission.

Tip #1. Use Inline Validation

If you show all the validation error messages on the top then the user may confuse to find which error for which field and they have to struggle to correct the error. The other hand if you display the message close to the respective field then the user can easily rewrite the wrong field. We call it inline validation. If your form is very big and complicated then inline validations play an important role in filling the fields.

Tip #2. Use Red color for validation errors

This is a standard method of website designing that always show your validation error messages in red color so user can easily understand that there is something wrong and need to correct this. You can highlight the background in red color (see this in the image). This is a very small thing but it may increase your conversions a bit.
But other hand experts says that red color can increase human’s heart beats and Yellow or Orange color for validation error message keep calm users.

Tip #3. Write a specific message

Make your validation error message be specific and simple. Let’s see it by an example…
Suppose user forget to enter a ‘@’ in the email field. (xyzgmail.com)

Case.1 – Email is not valid
Case.2 – Email is not valid, please include ‘@’ in the email or Please include ‘@’ in the email

The user can easily understand this and easily make the changes.

Tip #4. Use Right Wrong Sign

Right or wrong sigh with validation error click frequently in human’s mind. Users can easily and quickly understand that there is something wrong. If you show this before submission then it will help much. If you show right sign after filling the correct field then users feel good and they aspect that everything is going good and they encourage for filling the other fields.

Tip #5. Don’t Show Error in Real Time

Generally, Users don’t like real time validation error message. If a user is typing and you show an error message before completing the typing then the user may irritate. You can show it after the typing when the user on the other field. You can show password strength in real time (while user typing)

But you can show suggestion or error message in real time for password field.

Tip #6. Error Message Should be Neat & Clean and in Small Size

I saw it in many websites that website owners don’t test error messages design and layout, sometime message overlap on the form field and some time an ugly background display on the screen. These small things may irritate your users and encourage leaving your website.

Tip #7. Don’t Use “Negative Words in the Message

People may confuse and scare if they see negative words because they may think that your website form is not in working or there is something big problem in the website and user may leave the website. Some negative words’ examples are given below…

Tip #8. Don’t Hide Data After Submitting the Form (with Validation Error)

Suppose user filled 5 fields correctly and one field wrongly and then the user submits the form. Then the system will validate the information and show an error message “something wrong” and also remove the rest of 5 field’s data which you have entered correctly then the user may frustrate and leave the website so make sure correctly entered data is not removed after form submission with the error.

Tip #9. Show Validation Error Before form Submission

If user clicks on the submit button then query verified by the system and then show a validation error and this process takes some time. But if you show the error message just after the filling field then the user can correct the data and this process can save the user’s time.

Tip #10. Highlight Field Box Border

When a validation error encounter then shows an inline validation error message and don’t forget to highlight the field box border in red or something a different color.

Saurabh Rawat: I am SEO Analyst having 10 years of experience, Help to improve website ranking and organic traffic.