Airfoil
Audio Hijack
Farrago
Fission
Loopback
Piezo
Soundsource
Usability Nightmare: Web Forms
Posted By Paul Kafasis on February 7th, 2009
Dear Lazyass Web Developers,
Stop trading my cycles for your own. Your time is not more valuable than mine, and it’s certainly not more valuable than that of all your users put together. You’re ruining the world.
Signed,
The World
How many times have you been on a web site, filled out a form and hit Submit, only to be bumped back to enter additional information? The thing is, you did enter the requested information, the site just didn’t like the way you entered it.
This is most commonly seen with phone numbers and credit cards. Some sites demand that you enter your phone number or credit card with no non-numerical characters, such as dashes. That is, if you enter “123-456-7890”, you’ll be bumped back and forced to enter “1234567890”. Others do just the opposite, demanding dashes. I took the above two screenshots on the very same day, from two different sites1. Holy hell! Computers can handle this.
You might be thinking “What’s the big deal? With global warming threatening the planet, a financial crisis threatening society, and of course the popularity of the Snuggie, aren’t there more important things in the world to worry about?”. And if you are, you’re not entirely wrong. This is a small thing, and it takes perhaps 30 seconds to find the issue, correct it, and re-submit the form.
The real problem shows up in the aggregate. It’s 30 seconds extra for me, and 30 seconds extra for you, and 30 seconds extra for every other visitor who doesn’t get things exactly right. Since the invention of the web, hundreds of thousands of man hours have been wasted adjusting the input for credit cards and phone numbers on web forms. Those lost hours could be used to solve some of the aforementioned world problems. Lazy web developers, you’re killing the future. Stop it. Right now.
Worst of all, it’s the easiest thing in the world to fix this. In PHP, ASP, JavaScript, or any other web language, stripping characters takes about five minutes to get right. When you get phone number or credit card input, just strip out dashes (and dots) if you don’t want them in there. Here’s how to do it in PHP in one line:
$var=str_replace('-','', $var);
If you can’t manage that, you need to get off the web.
Inserting dashes into phone numbers is a bit trickier (due to international number formats), but can still be accomplished easily for 10-digit American numbers and any others where the exact format is known.
This isn’t hard. You can spend the 5 minutes needed to make it right. You should spend the 5 minutes needed to make it right. Save those thousands of hours, and do your part to save the world.
Addendum
As bad as it is, it could always be worse:
Footnotes:
1. Better still, the same site (the Massachusetts’ RMV) which demanded dashes in my phone number also commanded me to leave slashes out of my credit card’s expiration date, as well as punctuation and spaces out of my credit card number.
↩
HM says:
February 7th, 2009 at 5:58 pmAnywho.com–you know, AT&T–pulled this lazy ass programmer crap for years on their reverse lookup service (http://www.anywho.com/rl.html). I used to use this in the classroom when teaching how to avoid lazy ass programming techniques (LAPTs, for short).
Larry says:
February 7th, 2009 at 6:42 pmThanks for putting this up. This sort of thing has annoyed me for some time. Every time I enter something like that on a web for and it gets rejected due to its “improper” format, I’m amazed that people who consider themselves “professional” programmers don’t do this stuff right.
Jens Alfke says:
February 7th, 2009 at 6:44 pmYes! Yes! I’ve wanted to write this post for years, including the sample code for removing dashes from credit card numbers … but I never had time, because it always took me so long to get websites to accept my information on forms.
As soon as everyone reads this and fixes their stupid PHP scripts, I’ll finally have some free time!
Cesare says:
February 7th, 2009 at 7:38 pmI couldn’t agree more, and it’s much worse when one makes the big mistake of not living in the US… Why should I be forced to chose a state from a combo listing the 50 states?
It’s not only about losing time, it’s also about frustration.
Alan says:
February 7th, 2009 at 7:51 pmEver noticed how the bigger the company and/or organization, the more likely it is you’ll see this kind of crap form design floating around? Depending on the organization, this one problem can have up to five people involved
1. The person who designs the forms
2. The person who codes the form processing
3. The person who created the system that’s used for creating forms and processing forms
4. The person who designed the database
5. The person who wrote a report that queries the database where the phone number is stored
At some point, one of these people made a bad decision/oversight, and some piece of code or system needs the CC number/phone number is a specific format.
That leaves all the other people to
1. Get the original person (or the original persons manager) to change their mind and fix their bad decision re: the number formatting
2. Cover their ass, and make sure their part of “The System” isn’t going to pass along/accept data in a “bad” format.
99% of developers in a large organization are going to choose #2, because if they try #1 and something goes wrong, it becomes their fault, even though they were trying to do the right thing.
Adam says:
February 7th, 2009 at 8:34 pmA variation on LAPTs is the site that offers me a choice of Province (in Canada) but doesn’t automatically change the United States to Canada right below that.
Shawn says:
February 7th, 2009 at 9:48 pmYou’d want to do something more along the lines of
$result = preg_replace(‘/([^\d]+)/’,”,$target);
But I get your point. Lazy developers suck.
Bill says:
February 7th, 2009 at 9:55 pmAnd the reason we want to add dashes or spaces or dots as we type phone numbers and credit card numbers it to make it easier to verify them before hitting submit, or to paste them from another source. So failure to allow for punctuation is not just lazyass programming, it’t a poor user interface that increases the likelihood of significant typing errors.
Then there are the dropdowns for credit card expiration dates. I can type four digits faster than negotiating two dropdowns. Especially when the first dropdown spells out the months instead of using the same two-digit numbers that appear on the credit card.
Allan Wind says:
February 7th, 2009 at 10:06 pmWe recently switched a field asking for a year from text to a select after noticing 3000+ variations from our users. If your phone definition number is 10 digits then it is reasonable easy, others made suggestions already, however the general case is not trivial. Is the long distance prefix required, not allowed or optional? Do you accept spelled numbers (1800flowers)? Extensions? What about international numbers (including the +)?
Joseph Singer says:
February 7th, 2009 at 10:13 pmdropdowns are completely superfluous since you can’t just tab to them as you can in winderz.
Max says:
February 7th, 2009 at 10:36 pmNot only is that damn easy to do the right thing, it’s EASIER to do the right thing than the wrong thing. As another example, my university’s admin system requires uppercase student numbers: what kind of programmer would *rather* put in 5 lines of error-handling code than one “.toUpper()”?
rektide says:
February 7th, 2009 at 11:02 pmI thought this was a rant against pushing superflously large amounts of work on the client side to offload the server CPU. But no, its talking about people cycles.
Usually the biggest barrier to programmers doing the right thing in these cases is their relationship with the client who has hired them. When everything flows from requirements, often times the business overhead of implementing a feature like this is 20-100x the code effort required to implement. Proper sites require a bit of a carte blanche for the developer, enabling them to own features like this without having to drag it through tedious requirements stamp outs.
Hanz says:
February 7th, 2009 at 11:32 pmDear Lazyass Bloggers,
Stop blocking my cycles with your ignorant and inane observations of miniscule consequence. Your incessent need to advertise yourself, and by association your lame products, is certainly notvaluable than my time. You’re ruining the world.
John Schank says:
February 8th, 2009 at 1:56 amAlso, please stop defaulting the date for the expiration of my credit card to the current month and year. It’s almost never right. And when it is my card is likely to be rejected.
Charles says:
February 8th, 2009 at 2:53 amYou could have also just read before typing. Lazy users also suck.
Paul Kafasis says:
February 8th, 2009 at 3:17 amHM: It looks like they finally fixed it? LAPTs, that’s a good acronym.
Larry: That’s an excellent point – it really is an amateur sort of thing. The thing of it is, no one will ever notice. And if someone finally does, the original web dev is probably long gone.
Jens Alfke: The sample code is really what kills me. We know how easy it is, but toss up the one line of code that’s needed, and an average reader can pretty quickly see just how simple it is.
Cesare: Definitely, forms tend to be US-specific. That generally doesn’t affect me, but it’s the same sort of crap, with a very narrow view of the world.
You’re certainly correct about frustration, but that’s much harder to quantify.
Alan: I’d wager bureaucracy sometimes plays a role in this, but I think you often see it in forms that were likely made by just one person too.
Shawn: Well, stripping just dashes is different from other sanity checking you can do. There are arguments to be made for various sanity checking You don’t necessarily just want to strip all but the numbers – if you find a bunch of other crap, something more serious may be wrong.
Bill: We being users, correct? Absolutely right. A CC has spaces. A phone number has dashes, everywhere it’s written. Let us enter it that way.
Allan Wind: I debated this with Quentin while writing this. One thing to realize is that for most of this data, it’s not crucial anyway. Our order database has all kinds of erroneous data, but if the name and email are right, that’s all we really need. For your critical data, work to get it right. For the rest, don’t worry about it.
Max: Often times, that’s exactly correct. The right way, the good way, is just as easy to do as the wrong way.
rektide: No, people cycles are the concern, and it’s an important one. The aggregate rarely gets thought of, but it’s huge. I’m skeptical that bureaucracy and red tape are really the root problem though.
Hanz: I can’t fathom why you took the time to post such a comment, but no one’s forcing you to read our site. Please feel free to go ahead and not do so.
John Schank: I saw an even better one recently, where it asked for birthday, and defaulted to…today! That’ll be a real time-saver for the infants registering for your site.
Charles: In one of the two examples, and most of the offending sites, these requirements aren’t knwon before you submit your data. And whether they are or not, it’s just poor form on the part of the developer to expect your users to read instructions of this sort, when the whole issue can easily be handled automatically.
HM2K says:
February 8th, 2009 at 5:23 am$var=preg_replace(‘/[^\d]+/’,”,$var);
Caroline Jarrett says:
February 8th, 2009 at 5:56 amA few years ago, Sarah Allen and I wrote a paper: “Should I use a drop-down?”. At that time, we had quite a few developers around who didn’t really know what made sense in forms controls. These days, I think the paper is still valuable for when you’re faced with a boss or other stakeholder who is insisting on something clueless like your credit card example.
The paper is available free from here http://formsthatwork.editme.com/Articles
(Shameless plug: if you like the paper, you might also be interested in my book – “Forms that work: designing web forms for usability” more details all over my website http://www.formsthatwork.com)
Cheers
Caroline
web development says:
February 8th, 2009 at 6:01 amAlso talking about usability try and avoid CAPTCHAS where are not really required. SEE Is CAPTCHA really required for you web page?
Chris says:
February 8th, 2009 at 9:29 am@Bill: The reason you normally enter expiry dates on credit/debit card transaction forms via a drop down list is to stop that date information from being captured by a keylogger if the worst happens and someone uses a machine with one on.
It’s a small measure, but as far as the trade-off between convenience and security goes, not a huge deal. The example with the entire card number being entered is probably a misguided attempt at protecting the card number itself in the same way.
elric ftang says:
February 8th, 2009 at 11:03 amyou forgot email address fields that tell me its not valid because I included a space after the address, which happens because I use a typeit4me shortcut triggered by a terminal space.
drives me mad
Bill says:
February 8th, 2009 at 12:16 pm@Chris: You’ve sold me on security. I’d like a 1000-line dropdown for the 3-digit credit card security code now. :-)
My real rant is with the sites that translate the two-digit card exipiration month to a month name or abbreviation that does not actually appear on any credit card I’m familiar with. No objection when the site does “Aug (08)” so there’s less room for error matching the dropdown to my card.
Joe Beirne says:
February 8th, 2009 at 1:35 pmI wonder if anyone has systematically analyzed on-line forms use for usability. The process time for each must be measurable.
My own favorite LAPT trope is the drop-down STATE field. In the US, this is a uniform two-character abbreviation, ignorance of which, for one’s own address at least, should logically bar the user from filling out any on-line form. It is easy to see how this aid-to-orthodoxy would have seemed painless to a Silicon Valley form designer, whose state is fifth in the column. But had the Ur-programmer lived in Wyoming and had he or she placed the field at the bottom of a form, they would have seen that this two-character field often took as much time to accurately fill out as the whole rest of the form.
Indeed why not reward the user who is aware of their zip-PLUS address and let them just key in that one number? I don’t believe I have ever seen this.
It is also amusing to see the results from the COUNTRY drop-down. Some perhaps more politically-correct designers make 99.99% of their users search down to the bottom of a list of some 200 nation names to find “US” or “United States”. This involuntary tour of the globe hardly promotes international harmony.
Joe Beirne says:
February 8th, 2009 at 1:49 pmFurther to my comment above, from Jakob Neilsen.
Joe Beirne says:
February 8th, 2009 at 1:50 pmhttp://www.useit.com/alertbox/annoyances.html
…with the Jakob Neilsen link actually included.
Chris Clark says:
February 9th, 2009 at 3:32 am@Chris: I’m not sold on the ‘security’ explanation for those dropdowns. Sites have been doing that since before keyloggers were a threat, and modern keyloggers take screenshots anyway. I’d assume “lazy programmer who doesn’t want to do form validation” over “benficent programmer who is afraid you have a keylogger on your system and doesn’t want you to get bit” any day.
Gary says:
February 10th, 2009 at 12:10 am@ Joe Beirne
The US starts with a “U” which is towards the bottom of the alphabet, so when you list all the countries in apha-order, it naturally appears down the bottom after the 200 countries listed before it, that’s how alphabetical order is supposed to work.
You must remember that there are countries outside of the USA, many whose first letter comes before “U”. I suggest the alternative might be to change your country’s name to America?
Doug Young says:
March 1st, 2009 at 4:58 amWorse is the payment form at Netbank (commonwealth bank of australia) where I once hurriedly pasted an 8 character account number formatted as four numbers a space then four numbers – xxxx xxxx.
The form honoured the space and dropped the last number so instead of stripping the space and using xxxx xxxx my $1500 went to xxxx xxx