Inline Form Validation
At the last Web App Masters Tour Luke Wroblewski gave a great talk on Forms in Action (quick plug -- you can hear him again in Minneapolis, Philadelphia or Seattle as the tour continues in those cities as well as myself and others!)
Luke brought out that on the good side more forms have added interactivity to form field validation. Error prevention is an important design principle. An ounce of error prevention is worth a pound of error handling design and code.
But on the bad side some forms are actually hurting the experience by either being too aggressive or trying to be too clever in input assistance.
I stumbled across two examples to add to Luke's collection. Both come from a very useful tool Its Deductible. I highly recommend the tool for what it does as it encourages me to donate more items and allows me to accurately take them off my taxes each year. Big fan. But two not so good experiences in their forms.
Not Clearing Error Message
Its Deductible Error Message on Login Screen
I entered the wrong account name and got a message bubble warning me about it. Good things about it:
- The bubble is clearly worded.
- Red color got my attention.
- Is nicely placed
Draconian Date Input Handling
How many times have I entered a date in a web form? So I just need to know are you expecting month/day/year format and whether I should type the slashes or not. However watch the video and see how poorly I entered the date![flickr video=4506200458 secret=7e3c420a0b w=400 h=172]
Its Deductible Date Input Handling
Don't even think about entering slashes or not giving 2 digits for the month, 2 digits for the day and 4 for the year. Anything except typing 02092009 will fail.
Here is what went wrong.
- You have to enter 2 digits for the month, 2 digits for the day and four digits for the year. Why? Next bullet point...
- You can't enter 'slashes'. If you do you get two slashes! And when you submit it won't like that.
It is obvious there was some effort put into assisting me in entering a date correctly. But unfortunately it took me about 45 seconds to figure out their algorithm and enter the date in exactly the way they wanted me too.
BTW, You can use SCOTT for a 10% discount on the talks in Minneapolis.