In my spare time, I enjoy researching how best to format phone numbers. That should give you some indication of the depths of the problems in my social life.
Seriously, how many different ways are there to write down a phone number? If truth be told, I don’t even know how I do it most of the time.
- 800-555-1234 (50.8%)
- 8005551234 (28.3%)
- 800.555.1234 (5.1%)
- 800 555 1234 (4.3%)
- (800) 555-1234 (3.9%)
seem to be the most common ways.
The percentages are from the dataset of pubic website users for a small project I just had normalizing one of my client’s phone numbers. In SoftSlate Commerce, we just provide one input box and the user can enter the number however he likes. And you’d be surprised at how some people do it:
- 1-800-555-1234 (0.18%)
- 18005551234 (0.16%)
and even
- 800+555+1234 (0.01%)
- 800*555*1234 (0.004%)
And this is just US/Canadian style numbers.
On a website, then, it would make sense to enforce a format by making the user type it in the same way as everyone else. Just have three input boxes:
But now you’ve got some annoying usability issues. If the user doesn’t know about tabbing to different form fields, you’re now asking him to pick up his mouse, point to the first input, fill it in, pick up his mouse, point to the second input, fill it in, pick up his mouse, point to the third, and fill it in. Surely that’s going to take easily twice as long as single input box.
No problem you say, just add a little magic Javascript. When he’s finished entering the first three digits, automatically hop him over to the next input box, and ditto when he’s done entering the second box.
That’s great for users who don’t know about tabbing, but it sucks for users who do. I’m in this category and now whenever I’m faced with the three little input boxes, I hesitate. Is it going to hop me over to the next one automatically, or am I ok to tab? Heaven forbid it hops me over and I tab at the same time and skip right over the second box! Remember it’s the little things in life that contribute to high blood pressure and can shorten your life significantly (not really).
So now, I’m back on the one-input box bandwagon. Let them enter it however they wish. as this post explains, it’s better usability:
Be reasonable; are we so afraid of regular expressions that we can’t strip extraneous characters from a single input field? Let the users type their telephone numbers in whatever they please. We can use a little quick programming to filter out what we don’t need.
I discovered with this latest project that you can format the numbers after the fact using the following algorithm, and it correctly formats 99.6% of the numbers:
- Strip all non-digits.
- If the result is 10 digits, you’re set.
- If the result is 11 digits with an initial 1, strip the initial 1 and you’re set.
- If the result is anything else, go with what they entered originally because who knows what else is in there (probably an extension number or a little note like “(Home)”).
No fuss, no muss, no fancy Perl regular expressions. Yeah, it’s not 100%. You have a better idea? Let’s hear it.
