Design Notes: Numbers and other user input

I’m starting a new blog section on design for the web. I’ve been using the web and creating websites for almost 20 years now (hands up those who knew it’s been around that long), and have learnt a thing or two. But it bugs me that web designers are still overlooking some pretty basic design issues. And by design, I don’t mean graphic design. I mean design in the sense of how something is constructed, with a view to how it’s used.

If you’re a programmer and don’t think you’re a web designer, think again. You are the one implementing the design and so you are essential to making things work for the user.

So, today: numbers.

Many websites that require input of numbers have all sorts of validation rules that:

1) make the page fail to work in simple cases where it should work, and/or

2) send the page back to the user to fix input “errors” that the programmer could fix themselves.

A good example that combines the two of these is handling numbers. Bank account numbers, phone numbers, etc.

I get an email with bank account numbers, they are usually written it like this:
BSB: 012 345
Account Number: 123 456 789

Leaving aside the fact that spaces make it easier to read but copying more difficult (and if you’re reading them instead of copying-and-pasting, then you have a problem), we copy them and then attempt to paste them into, say, our internet banking program, where you usually end up with this:

The designer has helpfully made the box quite large but unhelpfully set the maximum lenth at 9 characters, because hey, that’s the maximum length of an account number.

Design Error.

Why create a long field and only allow half of it to be used? That’s just teasing. And if you don’t want anything other than numbers, just filter the input to take out anything other than a number.

Another couple of examples:

Enter Amount:

Enter Phone Number:

Often these bounce back with an “error” saying “Enter the amount in the format 1234.00”, or “Please enter your phone number in the format “0312345678” without any dashes or spaces”.

Please!

Programmer, if you want the numbers in a specific format, just do it yourself. It takes one or two lines of code, and you’re not unnecessarily annoying the hundreds, thousands or even millions of people who use your website. Why aren’t you doing everything you possibly can to make it easy for your users?