We've created Zuko, our next-generation form analytics platform. Explore Zuko Explore Zuko > Hide Message

Errors in forms – a short guide

Conversion Rate Optimisation

Online forms are seen as a necessary evil rather than to be enjoyed, but something that makes them seem more evil and less necessary (leading to higher drop offs and probably swearing), is when mistakes are made. Your reaction to these errors can make or break the start of a new relationship between you and a potential customer.

35tb54

We all make mistakes from time to time when completing forms, for a variety of reasons. Forms are an obstacle to overcome before we get to what we really want, be that to purchase something, sign up for a mailing list or register an interest in a service, so we often rush them and make careless mistakes along the way – TMo Nwe is not my name, but has been entered more times than I care to admit. User errors like this are unavoidable.

Less unavoidable are errors caused by confusing, ambiguous and unclear fields that have to be entered in a certain way in order to be accepted. Passwords are a serial offender here, whereby a certain length or level of complexity is required. Often however, this is not revealed to the user until they have tried to submit their form.

Other fields that can be unnecessarily difficult to complete are:

  • Dates of Birth – if you do not have drop down options for day, month and year, be sure that you state the required format for date of birth – is it 12/04/1976 or 12/04/76?
  • Phone numbers – do you have to include an international code? Can the number include spaces?
  • Credit card/bank details – similar to the above, often fields require that you have no spaces between groups of numbers, others allow it.

The best medicine? Prevention.

The best way to avoid user frustration and help decrease drop offs is by helping users avoid mistakes before they click submit. This can be done in two ways:

1. Give guidance for fields where users may not get it right first time. If passwords have to be a certain length, or contain a combination of letter and numbers, let users know before they start typing:

Field guide picture

If you get this part of the process right, the number of errors a user makes will be drastically decreased and you will see a rise in the number of conversions. Though some errors will be a result of user error and some over zealous keyboard smashing, a lot of the time mistakes are made because it is not clear that field has to be completed in a particular way. If your form has any fields that require information to be inputted in a certain way, tell your audience in advance.

2. If the user does make a mistake in any field, let them know before they click submit, either by highlighting the box in red, or have a red cross pop up next to it, and try to include an explanation as to where they went wrong. This is known as inline validation, and it allows people to correct fields as they go, and not be in the situation where they click submit only to find they have made 15 different errors in different fields:

Errors occured

The above message may be met with insta-rage, computer smashing, and almost certainly drop offs. The above is about an unhelpful as it is possible to be, and gives a terrible impression to your potential customers. The worst forms will also sometimes wipe some of the information you have entered (usually passwords) if you make an error. But we’ll talk about that another time…

Worst, Better, Best.

3 examples may serve to highlight the varying degree to which forms can help users get it right first time by suggesting formats in advance, giving guidance and also showing users where they might have gone wrong instantly.

Worst: TheBusinessDesk.com

The worst of the three by some distance. There is no guidance as to the correct format for each of the fields, apart from the password field, above which I am informed that it must be at least six characters. There is also no indication that I have entered an incorrectly formatted email address before I click register.

But the worst is yet to come. When I click submit, the following appears:

Business Desk 2

So the website has pointed out where I went wrong, but I then have to scroll down to correct the fields. No error message, highlighting or indicating which fields I need to correct, appears when I scroll down:

Business Desk 1

And, to make things worse, the error message cannot be seen on the screen when I am looking at the fields, so if I don’t memorize which fields need correcting and how, I have to continuously scroll up and back down again to continue my corrections. Not good.

Better: Tesco Direct

This form is slightly better, as it lets me know if I have not completed a field correctly as I go:

Tesco Direct

The fields are clearly highlighted in red along with an explanatory message, although it fails to state what a valid email address or postcode should look like. It also does not have guidance before this stage, which may have helped me avoid a scarlet littered screen.

Best: Gmail

Well, it should be, I guess. This gives guidance as to what to pop in the field boxes as soon as you click into them:

Gmail 1 Gmail 2

And if this doesn’t do the trick, a clear error message pops up as soon as you click or tab through the form, along with a friendly and clear explanation as to where you went wrong:

Gmail 3

These simple additions to your web form can make a huge difference, both to your drop off rates, but also to a user’s experience of your brand. An angry error message is far less welcoming than a quick pop up explaining where you went wrong, and no (or at least as few as possible) errors in the first place is even better.

Most forms represent a potential client or customer’s first interaction with your business. A ‘computer says no’ experience is not going to get your new relationship off to a good start or, more likely, any start at all.