Error detection in Web forms

Can you quickly spot the typo between a form field value ”+2731284325” and ”+2731294325”?

nocue

Now what if the form field had a cue? For example a colour cue on the border colour:

withcue

Colours provide instant visual feedback that there is a difference between the two form fields.

When you enter the same data again and again in form fields like your:

Each one of these “datums” could be associated with a cue. So you would subconsciously over time recognise you entered your details correctly.

This cue idea is useful for accessibility. People who are prone to making typos could use a cue (an additional band/channel) to quickly find mistakes.

I initially thought of form error detection, checksums & cues when I accidentally mistyped a number from a business card three times into my mobile. If that business card had a “checksum”, with the number (for e.g.) mapped to a colour **hash** chances are I would have entered that number in correctly first time into my addressbook. Saved the cost of the misdirected texts and saved an awful lot of time.

So a cue is especially applicable in mobile environs. Anywhere I imagine were copy&paste is not easy to do.

Of course a cue does not have to be a colour cue checksum. A ‘cue’ could be some other easily recognisable symbol like Wingdings, different CSS styling like border styles, Unicode symbols, playing card symbols and so on.

So I encourage you to please try my initial implementation called “Get a cue” with Web form input elements. For the developers amongst you, please look at the BSD licensed code. Feedback and patches are very welcome.

Hopefully a defacto ‘cue’ error detection algorithm rises to the top that will help everyone improve their input quality.

Found any of my content interesting or useful?