With the arrival of “Web 2.0,” proper form validation has become increasingly more important. Rather than just reading websites, we are actively helping to create them. We’ve become a community who shares information and contributes to our social networks on a daily basis. Sites like Twitter, Facebook and MySpace are entirely user-driven, meaning all of the content comes from the users. How much more important is it then to make sure your forms accurately assess whether the information entered is correct?

Here are five ways to build safe, accurate and usable forms.

FORM DESIGN

1. Make ‘em easy to read
Designers can take steps to minimize form errors before they’re even validated by designing usable forms. A usable form guides the user effortlessly, both visually and contextually. Most users don’t like to take the time to read if they don’t have to, especially online. This means that they’ll most likely skim through forms very quickly. This is something everyone should keep in mind when creating a form.

2. Don’t forget the Tab key
Forms should be easy to digest, easy to scan, and easy to navigate. If you’re like me, you probably use the Tab key to move between fields, so it is important that the ‘tabindex’ is correct and intuitive on each field.

Most of us typically also assume what the next field will be and mentally prepare to enter the next set of data ahead of time. It’s bad form (pun intended) to have the Tab key take you to a field you weren’t expecting. Forms should be laid out intuitively; fields should be linear and put where users would expect to find them.

3. Keep it short
Finally, use short, common descriptions for the requested data and clearly mark required fields. A good form is one where a user can quickly see what’s asked and what’s required. There’s nothing more frustrating than not being able to distinguish required fields from optional fields. We all hate being slowed down by forms that aren’t clear.

FORM VALIDATION

4. Clean your data
Once the user has entered data and submitted the form, it’s necessary to check the data for accuracy and “cleanliness.” Most of the time, data’s stored in a database for later retrieval. Any time data is stored, it’s imperative that it’s kept safe and secure. The likelihood of anyone obtaining access to the database is slim, but code can easily be entered into forms that can wreak havoc from the outside in. Because if this, it’s important to make sure the data is “clean,” meaning it doesn’t contain any malicious code. Ultimately, you want the entered data to be as specific as possible; validation is used for this reason.

5. Use validation
There are two types of validation: client-side and server-side. Client-side validation uses software in the browser such as JavaScript to check the data before it’s sent to the server for processing. Nine times out of ten, client-side validation ensures properly formatted data. With it, you can make sure phone numbers are formatted properly, e-mail addresses and website URLs are in the correct format and that no erroneous data was used. Then, once data fits the specified format, it’s sent to the server for processing.

Once the data gets to the server you can perform server-side validation. This uses code, such as ASP or PHP, to double-check the data before entering it into a database or before it’s sent out in an e-mail. While the two methods can be used apart from each other, it’s always smart to use them together.

In a world where the web is made up of information we create, proper form design and validation is incredibly important. And since the web has become increasingly personal, with credit card information, telephone numbers and addresses, it’s important to design information that’s kept safe and secure.

» Add a Comment

About the Author

Chris Rodriguez Creative Services

Filed under: Design, Resources

Tags: usability, user experience, UX