How To Design A Perfect Form With Validation?

Sometimes designers tend to forget basic ways to achieve usability in designs. And, one of the most common is form validation. Generally, users fulfill the action of completing web forms with the required information successfully. But it is seen that they make mistakes while trying to fill the fields. So, the trouble is how to handle these errors? Well, thanks to web form validation, this can be sorted. The aim of web form validation is to keep a check on the necessity and formatting of the information that is essential for successful completion of an operation. The feature ideally gives validation and points out when the user is wrong while entering information. Web-form sees to the entry of the details and passes it only if it is correct.

As a matter of fact, validations serve the purpose of having conversations with the users and help them during errors and certainty. You don’t have to wait for the entire page to reload in order to check that the form was filled with the right data or not. For instance, if the field mentions an email address, the form will run the control to ensure that the text entered is a valid email address. Thus, a simple visual reminder to the user about an error in the filling field can turn the irritation of guessing wrong entries to mere delight in successfully filling the form. Here, in this post, we shall discuss not only validation but also explore various error feedback approaches that are of great use.

1. The Purpose

The main objective of good form validation is to talk to the user and communicate when the information entered is incorrect. Incorporating validation in web designs isn’t a big challenge but it is usually seen that the designers tend to get laid back with it and leave it onto developers to work at the last stage. This leaves UX at major risk because the developers don’t even know or bother about form validation. Neglecting form validation can actually leave users frustrated and this lack of attention can harm the website a lot.

2. The Methods

It is possible to validate the user’s input both on the server and client. So, we have server-side as well as client-side validation. We will explain the positives and negatives of each.

3. Server-Side Validation

In this type of validation, the server receives the info and validates it with the help of one of the server-side languages. However, if the validation fails, the response is reverted back to the client and the page that consists of the web form is refreshed and feedback is made visible. This validation is safe as it is workable even if JavaScript is turned off in the browser and doesn’t grant easy access to malicious users. On the flip side, users are bound to fill in the information without getting a response until they submit the form.

This leads to a slow response from the server. Note that the exception to this type is validation using Ajax. Just as you type, the Ajax calls can do the validation and therefore, give immediate feedback. It majorly applies to valid rules such as username availability.

4. Client-Side Validation

Server-side validation is sufficient in itself for successful and secure form validation. But if you want to enhance the user experience, you can go for client-side validation. Here the validation is done on the client with the aid of script languages such as JavaScript. Script languages enable validation of the user’s input as they type. This leads to a more responsive and visually stimulating validation. In this type of validation, a form doesn’t reach submission if the validation fails. The JavaScript methods that you devise take care of validation and the users get instant feedback if the validation is improper. The demerit of client-side validation is that it is too dependent on JavaScript.

If users disable JavaScript, they can easily bypass the validation. This is the main reason why validation should be integrated into both the client and the server. By amalgamating both the server-side and client-side methods, we can get the best package, that is, quick response, safe validation and super user experience.

5. The Target Areas

Now the question arises, what all can you validate? The answer is necessary fields, right format and confirmation fields.

6. Necessary Information

Well, it is a no-brainer that the information that should be validated first is necessary information- the one without which operation cannot seek completion. The validation has to be particular that the user fulfills the criteria of providing required details in the webform and it has to object if at least one of the fields is not filled in. The requisite field should be properly marked so as to guide the users on which information has to be filled in upfront. A common way to achieve this is to use an asterisk (*) symbol beside the required fields. But the problem is not everybody is aware of the meaning of an asterisk sign. Beginners and old users are most likely to assume the meaning of an asterisk symbol.

That is why it is important to include a note above the form that mentions that all fields marked with an asterisk are necessary to be filled in or put required field markers, whichever suits you. However, if the form has all the fields that are mandatory then you should save yourself the trouble of placing asterisks or markers in the form. A clear message that all the fields are necessary will serve the purpose.

7. Right Format

Apart from regulating the submission of the required information, validation has to take care that the users fill in the info in the right format. This includes various cases like email addresses, URLs, dates, phone numbers, and others. If the information fails to comply with the correct format then the users must be told about it and guided with the right format. Generally, the simplest way to validate correct formatting is to utilize regular expressions. Remember that it is always better to not force the users to stick with a set input pattern and allow them to enter text in a variety of formats and syntaxes and then let the application understand it intelligently.

The user is usually concerned with getting something done, not about including correct formats or operating difficult UIs. Give the user the freedom to type whatever he wants and if it can be passed, make the software do the right changes with it. This style of design is also called a forgiving format UI design pattern.

8. Confirmation Fields

While using significant data for the system, it is preferable to allow the users to confirm their input with the use of additional confirmation fields. This will ensure the users that the information they have entered is correct.

Usually, the confirmation field is employed for passwords, but it can be created for other cases like an email address. A confirmation field must be included next or below the main field.

It should clearly explain the motive of the field such as ‘confirm your password’. If two values are not identical then the user should be immediately told. In this scenario, you can also use a success indicator if the values are identical.

9. The Feedback

In case of failure invalidation, the system should immediately inform the users through a direct and clear message and provide ways to rectify errors. As it is required for the users to take note of an error message immediately, place it at the top of a web form, above all the other fields. This will give leverage to the screen readers to easily read the message.

The message should be tried to be displayed in red as it is the color that everyone relates to errors and the icon must be sized properly so that it catches more attention. It is better if the icon is globally recognizable like a red circle with a white cross.

This will assist users with visual impairments to recognize the meaning of the message. Furthermore, users will know about the input fields that require accuracy. Besides the error message and a list of invalid fields, the system must highlight the fields that are invalid. This can be achieved through-

• By creating red inline messages or markers adjacent to every invalid field
• By altering the background color or border color of wrong fields to red
• By varying the color of field labels
• By supporting error tips close to each field

If you go for giving error tips or help, make sure to be short, crisp and to the point. For instance, if data does not match the right format, give the users information on how to change it correctly- ‘the date should be in the dd-mm-yyyy format’. Giving these hints as the initial value of your input fields can also be a nice approach. Here, the user’s eye will be caught by the hint inside the input box first and then when he/she will start entering the details, it will disappear.

10. Validation Upon Submit

The standard way to perform validation is when the users confirm their data by hitting the submit button. The validation begins and if any fault is detected, feedback is given immediately to the user. This will encourage the user to fill in the particulars of the form without any interruptions. That said, it can cause inconvenience too as the users will be able to rectify the errors only when they have submitted the form and then get the response back from the server. This is quite the preferred approach for server-side validation but can be used for the client-side as well.

11. Real-Time/Instant Validation

Quite opposite to the previous approach, real-time validation informs the users during the process of filling the form. This doesn’t imply that validation is conducted on every single keypress but during the time when the field loses focus. Through this users get immediate notification about their input, for instance, if a username is unique or if a date supports the right format. And of course, instant validation performs during typing in an input field or after the input field goes vague. Generally, it is accompanied by a text message, tip or a status icon. Instant validation must be applied with care and only in cases where it is required as it can pose a lot of distraction if overused or misused.

12. Errors to Avoid

There are two mistakes which you should take special care while designing form validation. Firstly, single error pages are a big no-no. The single error page implies that the users are taken from the web form that they filled to a page that displays some feedback. Here, users are under compulsion to browse back so that they can rectify errors. When they go back, they have to retain the information you mentioned in the error message and this is when the problem arises. Sam is the case with feedback messages in popup windows. Apart from causing annoyance, popups, when closed, keeps no track of feedback.

13. Keep a Check

Besides pure validation, there are various methods that enable users to make lesser errors. That said, not all these methods can be regarded as validation. They channelize the users and help them to avoid mistakes.

14. Help Hints

If a web form needs complex data, then help hints can serve the purpose very well by helping the users in the task of filling the correct information. By explaining to them how to enter the right info, you enable them to fill the form quicker and prevent common validation mistakes.

Help hints are displayed as simple text adjacent to or above the input field. Remember the design of help hints must vary from the design of form labels. It is generally displayed in smaller, grayed text. The major merit of help info is that it is always available to the visitor even if the JavaScript option is turned off.

15. ToolTips

Contrary to helpful hints, tooltips at first hide the information and then display it on demand. They are usually fuelled by an icon with a question mark. Help information is given by keeping on help icon or selecting it. Once the mouse goes far from the icon, the tooltips vanish. These can effectively help in reducing clutter especially when the help text is lengthy.

16. Dynamic Tips

Just like tooltips technique, dynamic tips do not appear initially in front of the users. Once the user gives input, the related tip becomes visible. Through this, tips are highlighted without creating any clutter any such in the form. Tips should be displayed in a manner that they don’t hide other information present in the form. They are generally placed adjacent to input fields, but you must try to keep them on the right side of the fields as that causes less distraction.

17. The Human Proof

A pivotal part of web form validation is Captcha. It is important invalidation as it detects whether the user of a system is human or a bot. In its simplest set, captcha comprise an image with text, numbers or an expression and a field that requires the content of the image as input.

Nowadays, most spambots can easily identify the text embedded in a simple captcha image, so it is better to use some question that only humans could answer correctly like ‘what color does the Sun have?’ with correct answer ‘yellow’ in all its variations; ‘YELLOW’, ‘yellow’,’Yellow’. A method called Honeypot Captcha can also be used if you want to create hidden form elements and then confirm on the server-side that they remain empty.

Blind, visually impaired or dyslexic face problems or even find it impossible to complete the webform with Captchas. But now there are types like ReCaptcha that enable audio support for users with disabilities.

All said it is a fact that users hate captchas as it causes too much time for the users to read and fill the form. But note, the captcha is for site owners, not users. So, if you can avoid captchas, go ahead and grant the users more accessibility.

Final Word

Filling forms take up time and effort. Correct the users through appropriate error messages and save them from the unnecessary trouble of fixing mistakes. Implement effective form validation in your design so as to make your users stick to your website. There are various techniques to execute form validation, but not all are suitable in enhancing user experience. The above article mentions various methods to aid you in web form design; choose the ones that grant solution and lead to successful form completion rates for your site.