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?

Here be dragons!

Trying to resolve an issue I’ve been having with the Adobe Flash plugin for Firefox. I found some useful tips at MozillaZine.org which at one point directed me towards the about:config page in Firefox.

Accessing the about:config page then brought up this delightful warning message.

There aren’t enough dragons in the software industry! Or humorous warning messages for that matter…

Humour aside, this is a great example of an easy to understand warning message. No redundant ‘Cancel’ button. No verbose jargon that would just get ignored. A Submit button that is related to the action, and thus might be read rather than immediately clicked on in a Pavlovian response.

Information you shouldn’t display to users

Received an email newsletter from some company, and decided to unsubscribe. Clicking on the link gave me this page:

For some reason, Senior Send have decided it’s a good idea to output what SQL they’re using to delete me from their client’s mailing list. This sometimes happens, especially with Coldfusion, when you accidentally get an error. It’s not a good idea to display this much information even then. It’s an even worse idea to display this to any or all of your users.

SELECT id,status_id, mail_subscriber.name FROM mail_subscriber WHERE id = 94523

found 1

And the URL looks like:
http://internal.seniordev.co.uk/mailer/mail_unsubscribe.asp?id=696&subscriber=94523

I wonder what happens if I just change the subscriber ID to anything else? How long would it take to write a script to loop from 1 to 94522 deleting all users?

Maybe they should have just passed my email address, or a UUID, or an encrypted version of my ID. Maybe they shouldn’t have output their SQL.

How not to display images

Trying to register at xbox.com. For some reason their Flash detection seems not to work for me (using Firefox 3.04, Flash 10.0 r12). So they display an image telling me to "Please download Flash Player". If you look at the fullsize version of the screenshot, you’ll see the image looks sort of distorted.

It seems that Microsoft in their infinite wisdom, are stretching that image to fill the screen. This makes the text all fuzzy, and the female character they’ve used seem somewhat wider than her designer originally intended.

It’s kind of an amateur web technique. Often you’ll see it being done the opposite way, where a much larger image is squashed down to fit into a smaller space. In this case, the image often looks ok, but with the effect of increasing download time. If the end user is on broadband, they probably won’t even notice. However the amount of bandwidth your site uses will be higher than it should be. I saw a particularly bad example of this recently where two small logos on the page were actually very large .bmp files. The cumulative filesize of those files was over 750Kb. I converted them to .gifs, grand total about 10Kb.

The original image for comparison:

A separate discussion could be had over whether they even need an image on this page anyway. A simple text message telling me to download Flash Player would have sufficed.

Why you need to test your code – Racing Green

After bemoaning the lack of personal touch from House of Fraser greeting me as [ncgi::value emailaddr_], I got the following email from Racing Green:

I love it when you call me NULL!

Also you might notice a distinct lack of images showing up in this email (in Gmail). It seems to be because they haven’t properly formatted the URLs of the images. Looking at the source, it’s full of HTML like:
<img src=”http://srg-cms.snowvalley.com/upload/email_assets/NL RG Accessories Banner 11th Nov 08.jpg” alt=”Accessories Offer” style=”BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none” />

I’m guessing Gmail baulks at the unescaped spaces in the URL.

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:

Web design survey

Last year, the excellent web design site A List Apart ran a survey of web designers/developers. They hired a couple of statisticians to analyse the data before publishing the results in a very detailed report.

They’re running the survey again this year. They say they’ve improved on the survey from last year. If you work in the web, you should fill it out.