When You're Not Helping.

- -

Designing usable forms is not easy. Forms have to be arranged in such a way the user will intuitively know what to enter where, with inputs labelled appropriately and, hopefully, some kind of validation that helps the user format their inputs correctly and helps minimize mistakes. Interactive form validation is a great thing and gives the user instantaneous feedback about which parts of their form the site will accept and if they've possibly screwed up. A telephone number input field can tell the user if they've included a character that's not allowed in phone numbers, like $ (perilously close to the # symbol), or if they've entered the wrong number of digits, but some go too far. This entry is about those sites whose valiant efforts to make the user's form input process as streamlined as possible to the detriment of use cases the sites' designers hadn't anticipated.

The typical field for inputting a phone number is just a plain text field, possibly with some validation to make sure the phone number entered looks like a phone number. Many sites embellish upon this by separating it out into three text fields. This is an understandable but undesirable thing. It assures absolutely that the form input will be valid, by restricting the number of characters in each of the three fields, but it requires the fields to be concatenated before submission or perhaps worse yet posted as three parameters and concatenated on the server side. Posting as three parameters means tremendous bloat on the POST query size, possibly slowing performance by a bit, and concatenation on the server side is just one more thing that needs to be done every time a request is handled, resulting in a performance hit. That's not even what this is about though. It's also annoying to the user.

It's helpful to think of usability in terms of the number of mouse movements/actions and keystrokes it takes to accomplish something. Consider entering a telephone number into an input field in the format /\d{10}/. Entering a phone number in takes ten keystrokes unless the user chooses to embellish their phone number with parentheses or hyphens, as I know some do. This is already pretty user-friendly. Most people know their own phone number and they know how phone numbers are typically formatted. An efficient solution for validation is to ensure it matches the above regular expression when hyphens and parentheses and other punctuation characters are removed and any letters are translated to their phone keypad equivalent, which can be easily and efficiently implemented client- or server-side. For the three input fields, you must click or hit Tab after each field to go to the next one, resulting in two extra keystrokes or two extra clicks (or, I suppose, for contrarian users, one of each), depending on the use case. This is already worse than the original case, but many sites make it far worse by trying to eliminate those two extra user actions. They make it so that after you enter three digits into the first field, your cursor magically transports to the second, eliminating the need to hit "Tab" or click in between. This is an attractive solution, I think, particularly for managers. It looks neat and for the use case of entering something in one digit at a time it is impressive and works great, especially if the developer was savvy enough to make the behaviour of the Backspace key correct. Not every phone number gets entered in digit by digit—many are copied and pasted or autocompleted by the browser—, and there are a lot of form inputs on a lot of sites for things other than phone numbers that work this way when they absolutely should not.

The worst I've seen so far was yesterday, when I bought an Xbox Live Arcade game via Amazon (Duke Nukem 3D; it's time to kick ass and chew bubblegum... and I'm all outta gum), which was way easier than buying xbox live points and buying on the Xbox site. Xbox live points (at the bizarre conversion rate of 800 points to 10 US dollars) are a whole other set of bullshit I can't even get into here, so it was cool being able to use Amazon to use actual money to pay for a game and have it downloaded to my Xbox. There was just one problem: Microsoft's overly helpful and frankly obnoxiously difficult form input.

When you buy an Xbox Live Arcade game on Amazon, you get a code that you can redeem on your xbox or in the Xbox Live website. The code is 25 alphanumeric characters, entered in groups of 5, and Microsoft chose to make it auto-tab between five text input fields. I got through it, obviously, but I can't imagine a more obnoxious way of inputting something. The use case they must have been imagining was where someone printed something out or had written the code down by hand and entered it digit by digit for some reason. If the code is being entered on a web site, don't you think it's safe to assume anyone who is inputting it probably copied and wants to paste it? I opted for the slightly inefficient method of copying each group of five and pasting them into each input box. If I could've just copied and pasted the whole thing it would've taken 1/5 as long.

That input form on the Xbox Live site wasn't helping. In the goal of making my use of the site as quick and painless as possible it utterly failed, and it failed because no one considered that a user might want to copy and paste. The same is true of websites with the difficult phone number forms: they didn't anticipate someone using their web browser's autofill feature.

The moral of the story here: always consider more advanced users in your testing and QA, and consider if there are cases where your convenient features become inconvenient or where you're obviously favouring one particular use case. Okay. Rant over, space cadets. Carry on.