Poor form design

Making a booking on the BFI’s website. What’s wrong with this form design?

Yeah that’s right – how can my credit card have a Start Date in the future?

How not to do input validation

Here’s a screenshot from a form I was filling in on the TV Licensing website. I’d just entered the date as 9/6/2009 instead of 09/06/2009. Obviously it’s too tricky for them to work out how to pad 1-digit numbers with a leading zero.

This falls into the same category as sites that insist you enter your username in either lower or upper case. Or that you enter your credit card without spaces or hyphens. Or that you format your phone number in a particular way.

It’s all putting extra work on the user for something that could be done automatically server-side with just a few lines of code at most. Not good practice!

Why you need to test your code – House of Fraser

For some reason I ended up subscribed to the House of Fraser mailing list. Clicking on the link in their email to unsubscribe, I got this useful error message informing me that "[ncgi::value emailaddr_] has been removed from our mailing list.":

(click image to see full size)

I love the personal touch!

How not to do save dialogs

Creating an artistic masterpiece in MS Paint. Go to close the program without saving, I then get this useful dialog box:

How not to do error messages – Air France

Decided I wanted to find out more about the Self-Service Kiosks for checking in on an Air France flight. Clicking the link gives me the following useful error message, in Firefox 3:

How not to do error messages – Flickr

Added a photo to Flickr. Clicked the ‘Send To Group’ button. Saw the following helpful error:

Instead of dumping out raw XML to a Javascript alert, this might have been more useful if they’d actually output just the msg value from the err element, and ideally into the page rather than a modal dialog box.

How not to do error messages

While trying to get signed into Adobe Buzzword, an online word processor, I ended up having to do a password reset. I typed in a new password, and got the following useful error message:

Well that wasn’t a good start. So I clicked the ‘more info’ link, only to get this delightful message:

Luckily I had a pretty good idea what ‘PasswordNeedsMoreNonAlphaChars‘ meant. But can you imagine this being understood by say your mother, or in fact anyone without even a basic knowledge of programming? How hard would it have been for the developers to have turned this into ‘Your password must be a mixture of letters and numbers/symbols’?