User Experience: Designing Form Validation the Right Way

Today, we’ll be examining what form validation is and why you, Joe Webdesigner, should care about it. Here’s a teaser: it’s one of the easiest ways to improve the usability of your designs and most web designers forget about it all the time! We’ll also showcase some examples of great form validation design. Read on young grasshoppers… knowledge awaits.

What Is Form Validation?

In the context of a human relationship, validation is when you feel the need to be told that you are right; In the context of a web-form, validation is when the form tells you that you’re wrong. To be specific, form validation is the process where a web-form checks to see if the information that’s been entered into it is correct.

For example:

• If a field is marked “Email Address”, the form might check to see if the text that’s been entered is a valid email address.
• If the field is marked “Phone Number”, the form might check for a specific formatting (or a certain number of digits)

You get the idea… validation just makes sure that the user hasn’t made a mistake.

It’s human nature to make mistakes though, and unfortunately, your web form probably isn’t exempt to human error. This is where validation plays it’s part in a user-friendly form. A simple visual reminder to the user that something isn’t filled in properly can make all the difference between the joy of a successfully filled out form and the intense frustration of having to guess what went wrong.

Why Do You Need to Design For It?

The primary principle of good form validation is this: “Talk to the user! Tell when them something is wrong!”

Integrating validation into your web designs isn’t hard… but the vast majority of designers never include designs for it. Why? Because validation is often left for developers to worry about at the last stages of a project.

This creates a scenario where you, Joe Webdesigner, are entrusting one of the most crucial aspects of the user experience to a developer who probably doesn’t know or care how the validation should be designed. Heck, in lots of cases, developers won’t even bother with anything beyond the most remedial form validation… which can leave users frustrated.

This isn’t a dig at developers or anything (and there are lots of great devs that will handle this with flying colors), but let’s assume the dev isn’t paying attention for the sake of argument.

Examine the following graphic:

Something appears to be wrong on this form… but the user is forced to guess what it is.

What’s wrong with this form? Sure – the form is “validating” itself by telling the user that something is wrong… but the user is left to guess what it is.

The primary principle of good form validation is this: “Talk to the user! Tell when them something is wrong!”

Let’s examine the next graphic:

Eureka!

Much better right? Now the user is given the information they need to fix the problem. This is a simplified example, but notice how integrating a basic response system improves the usability by leaps and bounds.

The 3 Common Types of Form Errors

Now that you understand what validation is, you hopefully want to apply this to your web forms. There are generally three mistakes that users could run into in your form:

Formatting Errors

This is probably the biggest problem users will encounter. Have you ever filled in a form only to find out you put an illegal character in the username field, or used a space in a web address? That’s where formatting validation comes into play.

Most fields in a web form are just alphanumeric, however, if you have an email, web address, phone number or password field, you may have a specific formatting required. You can probably guess the syntax of each field. So formatting validation is effective if you have specific information in mind.

Required Fields Errors

These errors happen when a user forgets / neglects to fill in a field that you’ve specified as “required”.

Match Errors

This happens when you need to check if one value equals another. This is so important in login forms especially, because you don’t want to allow users to login if their password doesn’t match the correct one.

It can also be used to make users retype their email or password when it's vital they don't make a mistake.

The Design Solution

While you can style your form a thousand different ways, there are generally three basic steps to helping your user fix the validation problem:

1. Inform the user that there is a mistake somewhere on the form.
2. Highlight the field that’s incorrect.
3. Show them an example of what you are expecting. (ie: email@email.com)

Color is one of the best tools to use when designing validation. Because it works on an instinctual level, adding red to error messages, or green to success messages is incredibly powerful.

Proximity is another important tool – keep specific notifications near to the problem fields and keep messages about the entire form away from any individual fields. If you can create custom “skin” solutions that make these strategies even more obvious (like making the notification look like it’s physically attached to a specific field), you’ll do even better.

It's also a good practice to tell your users in advance where they could create errors. Many websites include a side-bar box with instructions on how the form should be filled in. Others have the correct syntax described under the label. Either method works, just as long as it’s there.

As we’ll mention in the “how validation works” section below, you’ll also want to run “instant validation” when it’s possible.

Examples of Great Form Validation

Now that we’ve gone through the theory of form validation… let’s look at some examples of this in action!

While you look at these, note that the solution is always simple: a tooltip, a boxed in notification, or a piece of plain text. As long as you keep the notifications close in proximity with the problem-field, you can design, skin, or style these any way you want. The only thing to remember is that you actually give the user some advice.

Let’s dig in:

ThemeForest

ThemeForest immediately brings up an error message under the field. Successful entries even get a green “Success!” message.

Frexy

Frexy uses a simple, but effective approach: Color the field that’s wrong, and add bright notification text below. Edit: As Boba noted in the comments, the green color could be misleading to some users, but you’ve gotta balance branding and usability to your own taste.

Twitter

Twitter adds a message to the immediate right of the field to indicate error. It does so instantly… and they even add color to the response system to emphasize the message!

Mint

Mint not only validates the form fields immediately, they also give both positive and negative feedback… it’s almost as if you’re having a conversation with the form!

FancyForm

FancyForm is a form-tool that shows how useful it can be to actually provide in-line feedback in the form of icons.

Virb

Virb adds a bright message when you’ve done something wrong. Bonus Points: Virb won’t even let you type in an unallowed character! Just try it…. they dare ya.

WordPress

WordPress will give you a basic message… but what’s special is that the form itself actually shakes when you enter the wrong information.

InvoiceMachine

InvoiceMachine uses the simplest approach. Instead of textual help, it colors the background in red to signify a problem. Keep in mind that a text-tooltip when the user hovers over the form would improve this even more.

WPCoder

WPCoder shows that a simple Javascript popup can work just fine as well.

Yahoo

Yahoo uses a humorous approach… rather than returning a basic error when a birthday is incorrect, they give you a little bit of attitude.

How Validation Actually Works

From a technological standpoint, there are two different ways to integrate validation in a form:

• Server-side validation is where a user submits the form, and the contact form script will analyze the content and bring up an error if the criteria is not matched
• Client-side validation is the type of JavaScript validation you may see on some modern forms. This is where instant feedback is generated on a field-to-field basis without submission.

Client-side validation offers the most user-friendly alternative because it can show the feedback live and instant so the user can immediately rectify their mistake. However, a major downside to client-side validation is that it generally relies on some sort of JavaScript. Therefore, if the user has JavaScript turned off, they will not see the live validation. So, be sure to still be able to fallback on server-side validation

You can read lots more about the technological side of validation at our network site, Nettuts!

Final Thoughts

The best forms are those that anticipate user-behavior. It's important to plan a form out and understand how a user could make mistakes before it even gets built. Why? Because if you can anticipate a problem spot, it’s easy to design a solution to help users get past it. However, leaving the validation design until the last minute can be expensive to fix once the coding is complete. Taking some extra time to design strategies and styling for your forms will save time, money, and frustration in the long run.