User Experience #3: Required Fields and Form Validation

One thing we do for the sake of web usability is we find commonality between the popular sites and copy these conventions for our own websites.  After all, if everyone knows how to use Google, Amazon, and Facebook, then copying their designs will create a familiar experience for them.  For example, it's common to see the log in button in the upper-right hand corner.  It's common to use blue for links.  And it's common to use red asterisks * to indicate required fields in a form.

That last one is what I want to talk about.  First, the whole red asterisk thing may seem like a standard convention.  And it is in fact very common.  But it's not a universal standard.  For example, Amazon.com doesn't use them.  And NewEgg uses asterisks but they're black, not red.  Second, there is an alternative which not only looks cleaner and is easier to understand, but it can actually eliminate problems.

So here's a form with red asterisks...

With this simple example, I don't think most people will have a problem.  However, imagine the form was made up of 50 questions.  When you're using red for validation errors and red for the asterisks *, and you have a long scrollable page, then the validation errors may not stand out on the page enough when it's cluttered with red asterisks.

In fact, we ran into this very problem at TechInsurance.com and we'd occasionally have people call us about it.  Some of the pages on that site can have a lot of questions on them.  And so they thought they had corrected all the validation errors on the page, but had obviously missed something.

Another pain point is that some people are not sure if the red asterisks denote a problem.  They may not remember that in fact they were red even before they clicked submit.

In 2009 I began a large overhaul of TechInsurance.com.  And this was one of the problems I was looking to solve.  I thought, why not denote the exception, rather than the rule?  I mean, since 95% of the fields are required, why not just mark the optional fields with the word "optional."  So that's what I did, and after launching in 2010 all indications show that this solved the problem.

So this new approach looks something like this...
You'll notice a few things about this approach:

1. Instead of red asterisks to mark the required fields, I'm using the word "optional" to mark the optional fields.
2. As another visual cue, I'm using bold for required fields to add more contrast against the optional fields.
3. I made the validation errors themselves more obvious by styling the textbox and making the label next to it red as well.
4. I styled the button red to make it obvious that you've clicked it and something is wrong.
5. I added a note to "please correct the errors above."  This should absolutely be there, especially when the form is long and the user has to scroll through it.