Forms are an important aspect of any website as they are the primary source of business and business leads. Usually forms are required for sign-ups, subscription and payment completion all of which are vital user-website interactions that make or break businesses. To enhance conversions and success in the online arena it’s necessary that forms are well-designed and user friendly. Forms create one way communication if they do not provide any feedback to the user, thus form validations are a necessity to convert these one way communications into dialogues and to make forms more user friendly.
So, What Is Form Validation?
It’s a process where the web form is accessed and each field submitted is checked for errors and if there are any errors they are stated to the user or else the user’s form gets submitted and he/she receives a success message.
There are two types of forms, one that provide form validation after you fill all the fields and hit submit and the others that provide validations as you fill in the form fields, they are called after submit form validation and inline form validation respectively. Forms with inline validation are preferable as they provide real-time feedback to users creating two way interactions between the user and the form and reduce the user’s work. Well-designed forms with inline validation can make substantial difference to conversions and UX.
With this post the Monks have put together insights on how websites can build great inline validation forms for better usability and business.
Points to Consider When Designing Inline Validation Forms
There should be absolutely no space for confusion in the users’ minds when it comes to filling forms. Not because users are not capable of understanding instructions but because users are smart beings who do not have any time to waste on filling a form that’s acting difficult. The essentials that you need to keep in mind while designing form validation messages are:
1. Timing
2. Placement
Timing
The best time to display inline validations is after the user has typed in the response for a particular field. Displaying them before the response is typed in can be confusing and annoying. You can state the instructions for the field before hand but the validations need to come post the response. For instance, the instruction that a password needs have at least a specific no. of alphabets, numbers and special characters should be present near the password field but the validation regarding password strength and length should only be displayed once the user is done typing.
In the example above, the instructions regarding the password are displayed constantly whereas the validations are displayed post typing the response. The validations remain in place till the user makes a correction; upon entering the correct response a green icon with a tick mark is displayed till the submit button is pressed. Also note that when the field is empty or when the cursor is placed inside the field validations do not appear, this is important as including validations when the cursor is kept inside the field or when the user is typing will confuse the user.
Placement
The placement of the validation is also important. You need to place the validation near the field to ensure prominence, colour coding also helps a long way for doing the same. Use red for wrong responses and green for correct responses as people usually associate with these colours in this manner. Preferably place validations next to the field instead of placing them below, above or inside the field. Place instructions below or above the field. Placing validations inside the field can get inconvenient at times as some fields might require the users to choose an option from a drop down list and in such a case placing the validation can become tricky.
In the above example the validations have been neatly placed next to the fields making them highly noticeable, whereas the instructions/information are placed below field to ensure they don’t become an obstruction to the user and still remains noticeable.
Some other inline form validation examples to inspire you:
Basecamp has one of the most efficient and exclusive inline validation forms. They have used an animated man who points to the field users are supposed to fill-in next. Upon filling the correct response the man smiles and moves to the next point whereas, in case of error the man opens his mouth in an “O” and keeps pointing to the erroneous field and a error message is displayed below the erroneous field in red. Neat, huh?
Zendesk’s sign-in form is very neatly designed, minimalistic and UX friendly. Though they break most of the conventions of inline form validations they have come up with a form that is extremely functional.
Takeaways
Here’s a link to find some good scripts for designing inline validation forms - http://dzineblog.com/2009/11/18-impressive-web-form-validation-scripts-to-enhance-user-experience.html.
Inline validation if used efficiently can make form filling a more interactive and less time & effort consuming activity for users. Thus, web designers and developers should move towards making such forms for user ease and convenience.
That’s all from our side on inline validation. If you have any other tips, suggestions or comments keep us posted!
Webby Monks
Latest posts by Webby Monks (see all)
- Slower WordPress website? A few quick fixes! - January 29, 2024
- Take Your Pick From This Amazing Range Of Date Pickers Hand-Picked By The Monks! - January 19, 2024
- Lazy Loading – Enabling Better UX & SEO Using Simple Plug-ins - January 12, 2024
