are you ignoring the most critical element on your website?

By Jason Sherrill
Posted on Jun 5, 2007

We first wrote this article in 2004 to provide answers to this common website usability problem. I stumbled upon it again today and was surprised to see that not much has changed in the past three years. Not only is the problem prevalent throughout the internet today, but the solutions that we recommended three years ago are still valid today.

Forms drive the internet. Without forms, e-commerce would not exist, online banking would be a silly pipe dream and no one would have to remember a single username and password, because there would be no place to use either. So since forms are basically the heartbeat of the modern website, why do so few website developers create user-friendly, idiot proof forms? I have a few theories:

1) Many developers lack any formal usability training, and therefore they don't have the knowledge nor understand the importance of good form design.

2) Forms aren't sexy, so few stakeholders get excited about spending development dollars to make their website forms user-friendly. Flash? Yeah, spend the dough. Solid form validation? Bah, put more money into the Flash budget.

3) Many developers just don't care.

What are some basic steps you can take to improve your forms? Read on.

Tell Me What’s Required

First, you should always use a clear method to tell your members which fields are required on a form. A common method is to prefix the field name with an asterisk, like on the Research Federal Credit Union Contact Us page.

How to designate required form fields

If I Make a Mistake, Show Me Where

Even with proper guidance, users will still make data input mistakes. Good error handling will help to smooth the ride for these users. Error messages should be clear, friendly and noticeable. If you use a popup alert to tell a user he forgot to input his first name, then return the user directly to that field and highlight it to make it clear, as in this example.

I Like To Do Things My Way – Deal With It

When working with data that has common formats, dates for example, plan for variations and correct the issues automatically. On date fields, accept common formats such as 01-01-1970 or 01/01/1970 and use smart programming to format the data behind the scenes. Don’t place the burden on your members to do this work for you.

Let’s look at an example on the Research Federal Credit Union website. On their contact form, they ask for my phone number. I don’t like to type more than I have to, so I type my number without any spaces or dashes.

When I move to the next field, instead of showing me an error and telling me to correct my input, the website automatically reformats my input to the way that RFCU wants it.

Be Consistent

As we saw in the Dort website example, it can be confusing when a site uses inconsistent error notifications. You should choose a method and use it consistently throughout your site. You should use the same screen location, font size, font color, icons and writing tone for every message. Members will learn to quickly recognize when they’ve made a mistake and will appreciate your effort to help them.