Designing of forms and form validation should also follow proper UX practices. In this article, Form Validation UX And Best Practices, we will discuss the following topics:
One of the best form validations we have seen is Twitter’s, where the form validation is made simple but very informative. Every mistake the user made; Twitter’s form validation is right on point. The “inline” validation helped users fully understand what the typical error is about and how to correct the error.
The experience we had about Twitter’s form validation should be our example of how form validations should be made. As UX practitioners and UX designers, we should create a conclusion form validation that will help users understand informative error messages popped and, at the same time, have a human conversation with them. This way, it will help guide them through the difficult times and ease any confusion or uncertainty.
What is form validation
Before discussing the best practices of creating form validations, we should first know form validation.
The term “form validation” is a technical term used on the web to check if the information entered by the user in the webform is correct. However, we should understand that the process involved here is more emotional than technical.
The form should point out the user made an error or assures the user that the given the log user data is correct.
Types of form validation
We have two types of form validation:
1. After submit validation
This is when the user fills out and submits all the required data in the form. When the user hits the enter button to submit, the information is sent to the server for the form informs to be validated. The response of the “validator” is sent to the user through a confirmation or informative error messages.
2. Inline validation
These are validation messages that are shown immediately after the user types the data in the form fields. The validation message is usually displayed next to the fields, and its purpose is to encourage the user to take immediate action.
The importance of form validation
Form validation serves as the center of communication during the essential processes of interaction between the user interface and the user. Form validation may seem simple and provides a small purpose in the overall interface, but its importance exceeds all of these.
For example, consider the form validation on these processes:
Sign-up/sign-in
Shopping cart and check out
Newsletter forms
Imagine that your users could not get through these forms because of poor form validation? Those are basic forms in your user interface, and it affects your business as well.
In short, if you have poor form validation communication, you will also likely suffer from poor business results.
In his research, the inline validation group compared to the controlled version showed compelling improvements across all the data that are measured:
22% increase in success rates
22% decrease in error message
31% increase in satisfaction rating
42% decrease in completion times
47% decrease in the number of eye fixations
These data are essential primary and should not be ignored. It shows that form validation is critical, and it has a significant impact on your business.
Form validation practices
Before we discuss the best practices of form validation, let us discuss some bad practices first so we can compare them to the best practices for UX designers:
Poor validation practices
It is pretty annoying to experience the entire process of filling up the form, and then you have to wait for the validation after the user clicks the submit button.
You may have seen these kinds of forms in many systems or portals where all validations are just shown (usually above the page) after the form is submitted.
There are also many cases where the validation results are displayed on modal or popups. Even though the user interface of this looks excellent, the context of the error occurring is lost as soon as the modal is closed.
And in this case, the result would be that the user has to revisit the form to find the input form field to correct the error message.
There will be times that the error message will be forgotten by the time the user reaches the input fields and results in losing the path midway, which results in losing the user’s interest in the end. This clearly will have an impact on your business in a bad way.
Form validation best practices
When it comes to the best practices of form validation, you need to remember these things:
Form validations provide information just in time (telling users the right time)
Form validations select the most appropriate place for displaying messages and error messages
Form validations inform in plain and straightforward language for non-technical users to understand
So let us discuss each of the characteristics above:
Just in time validations
One of the best practices in form validation is to inform your users when they make an error so they can immediately verify and correct it before they take the next step.
This way, you avoid error messages in the input field but also helps users build their confidence in what they are doing. All these lead to a successful form completion without any apprehension.
Another best practice is to assist your users by providing them extra information about the fields. This information can be hints, tips, help, etc (confirmation message).
Most appropriate place
Another best practice of good form validation is to keep it very close to the field being validated. This refers to proximity, which is a design principle that must be complied with while deciding the right place.
An example of this is during the sign-up process, where a username is no longer available. You usually see the validation above or below the username field, immediately informs users that the entered username is unavailable. Some form validations even provide name suggestions to help them in the username field.
Plain and simple language
This is part of the best practices in creating a form validation but usually gets the minor importance by most UX designers. You need to remember that the right messaging is fundamental to the users because this will tell them what went wrong and how to correct it.
Your form validation message can make or break a situation for your users when they do not fully understand what the error message is about.
A classic example of this is the 404 error, which is very a technical. process You may translate this error message to Page Not Found so your users can understand the error on their end. Again, the goal of humanizing technical terms is for your users to understand the success messages without confusion or challenge.
Regardless of the type of web form, there is on the site, whether it is a registration form or form for new leads, it is still challenging to get your users to sign up.
These studies post a challenge for all UX designers when it comes to the goal of getting users to fill up a form. This, we need to design the form and form validation to be easy and provides a smooth user experience for everyone.
How to create a form validation (a step-by-step tutorial)
Step 1: Structure and header
We can start with the form structure and the header. The form structure is straightforward. Most of the time, the white part is set for obligatory input fields, while the gray part is for non-obligatory input fields or input fields for additional information.
You may also start by drawing simple boxes just to have an idea of the spacing and give the design a structure.
The following section is the header. You can start with something plain but with a strong visual connection and put persuasive information into a sub-headline.
Step 2: Form fields
The next step is adding the form fields and labels. Tip: to avoid confusion, we recommend that you avoid labels inside the fields. Instead, you can place the labels just above the form fields.
You may also add two sub-headers that explain the kind of information that you need in each field or section.
Step 3: Form field information
This section is often omitted. But, we suggest that you add form field information whenever you can since this input field is very helpful for your users. It also starts a conversation with your users.
An example would be something like, “Why do you need my email” (which builds users’ trust).
Step 4: Error messages
When it comes to error validation messages, consider the following rules:
The perfect time to show the message is right after the error is spotted (inline form validation)
The right place is next to the form input field
The right color is red
Use clear, nontechnical language for your non-tech users
Your error messages should explain and guide your users through the process. Try not to leave any doubt, which can result in users leaving the form without correcting their data or error messages in the input field.
Step 5: Confirmation messages
Finally, your confirmation messages. A tip here would be thinking out of the box, so users do not stop on the confirmation message. Instead, your users should be able to scan through it quickly and go to another field feeling confident about the previous step.
The pros and cons of form validation (before and after submission)
Here are the pros and cons of before and after submission form validation:
Validation rules (server-side and client-side)
Here are the basics of form validation errors and messages: Whenever the user answers and fills up the form or input field, these are all checked for errors in a secured server. On the server-side, this section should be protected against malicious users.
On the client-side, client validation should be added to improve the user experience. Client validation should happen on the browser and should be visible to the users and immediately inform users whether the data is valid or not.
Before submission (inline validation)
Inline validation errors and messages, as discussed, is a particular client-side validation, where answers are checked as soon as they are entered by the user (user input).
The errors from inline validation are usually using a red cross close to the field box. Inline validation on errors and success informs on the incorrect data as well as the correct data, which is usually shown with a green tick near the web forms field.
The pros of inline validation
Sense of accomplishment- Since inline validation also validates the correct steps done by the user, it motivates the user to complete the web forms as they feel a sense of accomplishment in every correct action.
Step-by-step- Compared to a form that only validates the user of the error after submission, inline validation makes it easy for the user to fill in the form with its step-by-step validation.
Breaks the flow- Inline validation can cause users tend to constantly switch between two mental modes: form filling and error-correcting. This may cause users to slow down and increase cognitive effort, which affects user experience and satisfaction.
Frustration from early detection- An obvious example is when you are typing, and then an error appears. This experience can drive users from feeling frustrated.
Confusing- There are instances when some data cannot be validated on the client-side since this will depend on the database. This can lead to several inconsistencies, where inline validation on a specific field is okay and when validated by the server turned out to be incorrect. This can lead to more confusion and frustration.
After submission (classic form validation)
This type of data validation allows users to type freely, even if they are making mistakes along the way.
The data entered is sent to the server only after the user hits the submit validation button. This is a classic way of submitting data and is believed to have a poor user experience. However, it has some advantages as well.
Pros of classic form validation
Easy going with the flow- Compared to inline validation, the classic good form validation consists and allows user focuses on filling up the form by refraining them with corrections in every field (insightful and dynamic thinking).
Fewer mistakes- The classic after-form validation suggests that it reduces users from making mistakes since they are focused on one task only.
Consistency- All data inputs are validated by the server and are guaranteed to be consistent.
Cons of classic form validation
Overwhelming frustration- It can be overwhelming for users to receive all errors in one go, and this can be frustrating as well. Not to mention the cases when the form is unclear on what is wrong or why it comes back empty
Reduces the completion rate- When the user is frustrated, it can lead to a higher dropout rate
The mix and match method
Now that we are aware that every form validation method has its ups and downs, a good workaround for a well designed form validation is a mix and match validation strategies.
If the inline form validation, when implemented first, might cause an increase in user errors, then do not implement this first.
You may apply the following technique for a well design form validation:
First time with the form: Apply the classic after submission form validation. This respects the customer’s flow and reduces friction.
Second time with the form: If input errors are sent back to the customer with all the highlighted mistakes. You can move from a clean form to a form with errors, which then prevents a quick switch of mental mode. This is where inline validation comes to play. The users can feel guided and can quickly identify all errors when they type the corrections.
The take away: extra tips
Regardless of the type of form validation you choose, consider our suggestions below when it comes to deciding how you give feedback to your users:
Be precise: Do not place all the errors in one big square. Instead, place them where they should be, and that is right next to the corresponding field.
Be empathetic: Humanize your words and explain to your users what went wrong. Try to make suggestions and help your users get the correct data quickly and smoothly.
Be flexible: Whenever this is possible. Do not be too specific or rigid with your inputs. Like for example, users can get mad by asking them to write their phone number again, just because they left a blank space. If you want a specific format, try to explain them by using masks, for example.
