Web Forms, and How Not to Do It

I'm absolutely passionate about web design. It is more than just a job to me. In fact, it became a job for me because I was so annoyed by the poor quality of interface design that I was confronted by day after day. I think of myself as an internet citizen. All the major events of my life have happened whilst I've been online, and have been broadcast online moments later. The first thing I do in the morning and the last thing I do at night is go online. If there's some effect on a site that I think is cool I dig into the client side code until I understand what's going on.

Forms are my favourite things to design, because I think that data entry is the hardest part of being online for the average user. It should be something quick and easy to do, and not take any thought. (I'm a huge fan of Steve Krug, check him out on Amazon.) I buy nearly everything I buy online these days too, as I'm sure many people do. There's one form that we all have to fill out from time to time if we want to buy anything online, though, and that's the Verified by Visa / MasterCard Secure Code registration form.

The form we had to fill in. Click to enlarge.

I recently had a new card for my current account, and so last night when it was late and I was hungry and ordering pizza, I was confronted with this form to fill out before I could pay for my pizza. I'd forgotten just how much this form annoyed me, and as I watched M fill it out for me (I was ironing his shirts!) I was reminded with a thump and decided that it was such a hateful form that it needed an deconstruction.

Let's start with the text at the top. This is blurb (technical term). No one is going to read it, you've just made a page look very busy.

The frame (or possibly iframe, I didn't check, and quite frankly I hate them just as much, even if they are in HTML5) is tiny. Look at the scroll bar! WTF?! I've got a scroll bar in the middle of page, that (when scrolled up) hides the submit buttons. As if that alone wasn't bad enough, notice there is a help link next to those buttons? Well, isn't it helpful that the user can't see it.

More blurb. When will designers realise that people don't read? They scan at best, and more than a line they won't even bother to do that. How many people do you know that read the instructions? What makes anyone think that they're likely to read the instructions on a web page?

I don't like left aligned labels for input fields as they disappear on smartphones when the browser zooms in. Top aligned fields are much better as the label stays in sight when the zoom happens and the user knows what they're meant to be inputting.

The fixed width font in the fields is weird, but I guess the officious style is an attempt to be official.

I have my card infront of me when I fill out this form, so do I really need the security code and expiry date blanked out? I don't have my date of birth written down infront of me, maybe I would like that blanked out. These date fields annoy me more than anything else on this form. The date of birth field is DDMMYY the card expiry date is MMYYY, a big lack of consistency. Having the expiry date like this doesn't make sense either as most cards have it printed as MM/YY.

Both of the date fields are fixed length, meaning that if the user wants to put in a delimiter to help them ensure that they've entered the date correctly, they can't. This should be the job of the server side code. Let the user enter the date in any way they want, and then make the application handle the format. They should be validating the input on both client and server side, and then handling the data on the server for the format that they need for their database.

I also think that the two date fields should be switched around, as then it would have card details in the first three fields, and user validation fields afterwards. Currently, it switches from about the user's card, to about the user, back to the card, and finally back to the user.

When we got things wrong and hit register we didn't get any validation error messages. Now this may be because we were using Chrome on Mac OS X, but that's a very poor excuse too. When we finally got the form filled in correctly and hit register we had no feedback. At the very least it would have been nice for them to gray the button out, it would only have taken one line of JavaScript.