Tag Archives: help

Inline Validation Implemented Badly in Web Forms (Wizard Clear Advantage)

Web forms have come a long way over the last few years, from bland and lifeless labels with input fields barely better than paper forms, to interactive and beautifully designed experiences like huffduffer.  New technologies like inline validation have really helped web forms become far more intuitive and easier to use, providing timely and helpful feedback to users as they move through a form.

Inline validation, when used correctly provides immediate feedback next to the input field showing that the field has been filled out correctly or incorrectly, without the need to press submit and waiting for the error message.  The example below is from audible, having finished typing in the username field and tabbing to the password field, I was informed that my username had already been taken allowing me to immediately select an alternative.  This saves me time and prevents me getting to the end of the form, pressing submit and only then finding out the username was already taken.

Audible do not show the inline validation until after tabbing out of the field

Audible do not show the inline validation until after tabbing out of the field

I am about to go overseas and signed up for a new credit card that provided zero fees when using it abroad, the Wizard Clear Advantage card.  The sign up form used inline validation to verify my password.  However, as soon as I tabbed into the field I was informed that my password “was too short”.  Not surprising seeing as I hadn’t started typing yet!

wizard clear advantage web form implements inline validation badly

wizard clear advantage web form implements inline validation badly

Using new technologies to help improve the user experience on web forms is essential.  However, you have to be very careful to ensure that the implementation is spot on and does not annoy and confuse users with bad and untimely error messages.

You can follow me on twitter

Leave a comment

Filed under User Experience Design