From the course: UX for Web Forms

Validation and success messaging - Adobe XD Tutorial

From the course: UX for Web Forms

Start my 1-month free trial

Validation and success messaging

“

- [Instructor] Form validations are meant to have a conversation with users and guide them through the difficult times of errors and uncertainty. One of the most important and often unloved parts of form design is error handling. It's human nature to make a mistake. And your form probably isn't exempt from human error. This is where validation plays its part in a user-friendly form. When done right, it can turn an ambiguous interaction into a clear one. The primary principle of good form validation is this. Talk to the user, tell them what's wrong, and offer help. There are several main principles that should be followed when designing error correction flows. Right time of informing about errors or successes, right place for validation output, right color for the message, clear language for your message, and users shouldn't have to memorize the instructions for fixing the error. People shouldn't have to remember how to fix the problem while they're fixing it. The instruction should be right in front of their eyes. The field, or fields in error, should be easy to locate. People shouldn't have to hunt for the error through the form. Let me show you a couple of examples. Here is a form, and I've only filled out a few of the fields, and one of the fields I've filled out incorrectly. I'm going to scroll down to the bottom of the form, and click Submit Inquiry. You can see that I get a message and I have to scroll back up to find out what it is and then I'll have to enter my last name. And now, if I scroll down and try to submit the form again, it's going to give me another error message and again I have to scroll, and you can see that it's letting me know that I don't have my at symbol in my email address. It completely skipped over the error that I have in the phone number. And if I click Submit Inquiry now, it's going to prompt me to fill out the message. So you can see, every time that I need to try to submit the form, I'm getting prompted about errors that I may have had much earlier on in the process. Users dislike when they have to go through the entire process of filling out the form, and then having to wait for clicking the submit button to understand what went wrong. Let's look at a form that does this a little bit better. Here I have a form. And you can see that many of the fields are required. We know that by the little red asterisk. I'm going to click in the first name field and then just tab over to the last name. Because I didn't enter anything, I immediately get feedback and an error message letting me know that hey, you have to enter a first name. Now that I've touched the last name field, it also is going to give me an indication that I need to fill that field out as well. So any field where I need to fill out some information, I'm going to get some feedback if I have not entered the appropriate information. This is actually called just in time validations. It's very comforting when users are informed at the time they commit a mistake so they can verify immediately before proceeding to the next step. This not only avoids errors and form inputs, but it also helps build user's confidence in what they're doing, which leads to successful form completion without any apprehension. One of the least bothered aspects by creators and most important for users is the interface between what went wrong and how to correct it. This can be make or break situation for a user when he does not understand what the error is about. For example, page not found message on a webpage is way easier to understand than trying to understand what error 404 is on a website. The content of the error message should be such that it does not add confusion and further demoralize the user. The message should be clear and concise and help users and let them continue on with the form. As you can see, the phone number has not been formatted correctly. So when the user clicks on the check in, they're immediately warned that they have an error message. If I click on the error indicator, it's going to give me a message. This message is long and convoluted and could cause confusion. A better solution would be to offer a message that is clear and concise and lets the user know right away what they need to do to fix the error. Form validation is nothing but a way of talking to our users. It's designed to make the user understand the mistake and ways to correct it. Form validation is one of the most important parts of form designing because it helps the user to understand where they went wrong and how they can fix those errors.

Contents