December 16, 2006

Don't show errors - Prevent them

Posted by Sudhindra Rao

One of my colleagues Josh Evnin recently did a User Centered Design study for the application we are building at a client.

We were trying to build a web application where the user interacts with the system using the well known html forms.
We were doing the traditional form validation where the user is required to enter information/select the required fields.
When the user clicks submit the application does a validation routine and displays errors next to the error fields.


This is one way to make sure that no erratic information enters the application. I would call this method as 'trial and error'.

With the new UCD that Josh came up with - he gave a new direction of thought to error handling and error perception to the user.

The philosophy was why let the user make an error and submit in the first place.
Why not just stop the user from submitting ? - (by being more proactive) - that way the user already knows something is missing and he needsto fill out/select the required fields or else he will not be able to proceed.

Essentially what my UCD expert wants to tell me is why let the user get into error conditions at all.
I as a developer think -Let's do preventive design and minimise the number of round trips to the server and make sure only valid data gets to the server in the first place.

This saves me not only the time to build code for all the errors that the server gets and also adds confusion to my user. (Also I should mention that all the analysts on the project had their own opinions about the error text that should go on the page - but that is a funnier discussion in its own right)

The new design of the above page would look and behave as shown below.


Notice the difference.
As a developer I don't have to use server side validation - which at most times is desired - also with the different types of validation required today the number/string validation that comes standard with frameworks is hardly of any use. So I write my own regex based validation in javascript anyway.


As a user - this is what is more pleasing because I know that I have not completed this page correctly till the submit button is clickable.

Some sugar around training/informative messages on the screen make the screen more friendly to the user.

Get your Agile UI/UCD/Human Computer Interaction earlier in the game... and make friends with him/her..- It can save u a lot of code and make the application look slick....

Welcome