Earlier this week I was creating an online account in order to start a trial for a cloud wireframing prototype tool. The form itself was easy to scan and follow, aesthetically pleasing from a visual standpoint, and was using real-time field validation instead of “on submit.” It was all good until I had to enter, in order, a username and password. Then I encountered an unforeseen hiccup in the validation implementation.
After I entered my first choice for my username, I received the following alert and error messaging.
“Nice error message design”
So I deleted my first choice and proceeded to type my second choice for my username.
“That’s weird. What are the odds”
So I deleted my second choice and proceeded to type my third choice for my username.
Did I create an account once and forget? WTH is going on?”
And other colorful commentary.
Then realization hit through happenstance of clicking away from the field. The form field didn’t recognize that I was typing in a different username after I had deleted the first. It was “stuck” on the original choice I entered. The field wouldn’t “clear” until I tabbed or clicked away, then entered a new choice for username.
Success! I wasn’t losing my mind. I wonder how many users of the same cloud software tried half a dozen usernames and passwords (yep, same issue) before they gave up or (luckily) figured it out. And/or lost their minds trying.
But, lesson learned. When implementing real-time form-field validation make sure legacy messaging validation, specifically in the case of error messaging, clears appropriately in order to better inform the user.