How To Design A Perfect Form With Validation?
Posted by: Prince Pal | Posted date: 25-June-2016Scroll Down
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
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
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.
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.
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.