Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 12 down vote favorite

Currently on my website users are required to input their phone number in a very specific format (555-555-5555). If you forget the dashes it breaks. Does anyone have a good suggestions for how to be more flexible with allowing users to input in any way they choose, but still allowing the system to validate if it is a real phone number. How are phone extensions handled?

share|improve this question
1  
Also don't forget that some of us dont have 10 digit phone numbers. Here in little ol' New Zealand landlines only have 9 digits :) – Nathan-W Nov 6 '10 at 4:25
2  
* Currently on my website users are required to input their phone number in a very specific format (555-555-5555). Your site cannot cope with UK numbers such as (020) 3000 9000, (01750) 82000 or (016977) 3000. Is this a US/Canada only site? – user16193 Jul 6 '12 at 9:30
1  
+1. It gets extra interesting when you have users in different countries typing numbers without the country codes. To dial any of those numbers from anywhere on the globe, I found it impossible to figure out which country code to use. – JOG Jul 6 '12 at 14:37

9 Answers

up vote 13 down vote

Ideally you'd let them type in the phone number in any format and you'd have client and server side logic that could parse it out.

Barring that--if you're just looking for a quick fix--look at using field masking. If you're using jQuery, this is a decent one:

http://digitalbush.com/projects/masked-input-plugin/#demo

share|improve this answer
up vote 9 down vote

I'd steer away from using anything propriatary and instead refer to something standardised, like E.123.

Because it's a recognised international standard, I would expect to find code examples - or even complete libraries - that you can plug into your validation process.

share|improve this answer
up vote 4 down vote

The best approach for user experience is to let the user type in the phone number using the format they are most comfortable with. Don't break it into separate fields, don't force a mask, let it be typed freeform. Then, after the user has finished entering the field (by leaving the field for submitting the data), format the number into a standard format for your purposes.

Since you are talking about a Web site, you can do the format on the blur event using the Google libphonenumber http://code.google.com/p/libphonenumber/ project. This tool handles international phone numbers and a wide variety of formats. Here is an example in JavaScript: http://libphonenumber.googlecode.com/svn/trunk/javascript/i18n/phonenumbers/demo.html

The reason this approach is better for the user experience is that it allows the user's mental model to remain unchanged and allows them to say, "Don't Make Me Think." Masking and separate fields force a mental model of phone numbers onto users and requires more thinking.

share|improve this answer
sorry for commenting on something this old, but the above code-library breaks on German numbers. – DKOATED Mar 5 at 12:09
@DKOATED In my experience, it works fine with German numbers, but a bug may have been recently introduced. You should work with the libphonenumber team to get that figured out. code.google.com/p/libphonenumber/issues/list – mawcsco Mar 5 at 15:05
nevermind. not a big fan of code.google and have my own working libs in place ... may add these to Github whenever I get to it... – DKOATED Mar 5 at 15:21
up vote 2 down vote

You should just use a plain old text box and use your back-end code to parse it if you really need to. I personally don't see a need to require any specific format whatsoever. If a user wants to be able to just enter the 10 digits of their phone number really quickly, then let them.

You also need to remember that there isn't just one format in the world to deal with, and you may also need to deal with weird cases like extensions.

share|improve this answer
1  
+1 Recently dealt with this issue in some software of ours and people are loving it when done this way. – Matt Rockwell Jul 15 '11 at 19:18
up vote 2 down vote

Edit: 18 November 2010

Found one more good article today

http://formulate.com.au/research/mobile-phone-numbers/

Keep in mind the ability of iPhone also http://hjacob.com/blog/2009/07/making-a-phone-number-clickable-for-iphone-users/

share|improve this answer
up vote 1 down vote

Let users enter numbers as well as '-' and spaces, so you can enter the number the way they prefer. As long they enter sufficient numbers, it can be a valid phone number. You can use client-side validation to count the numbers and show a message if there are too few. You will never be able to verify if the phone number is really activated, so typing errors are unavoidable.

The server can parse the other characters out and just store the numbers in the database (and parse it back to your preferred formatting for display purposes).

share|improve this answer
up vote 1 down vote

The most friendly format is a format that will accept everything and doesn't do any validation.

We are talking about phone numbers here, not credit card information. How many people are mistyping their phone number? Unless this is a site for the International Dyslexic Association, probably no one.

The only thing you can validate is a format. You still don't know if the number is correct.

share|improve this answer
1  
"The only thing you can validate is a format. You still don't know if the number is correct." very good point. Just like with an address - you can validate the format all you like but it isn't truly valid until the parcel lands on the doorstep. – JonW♦ Jul 6 '12 at 15:30
@JonW, True, but the OP asked about format, not validation. – mawcsco Jul 6 '12 at 15:57
@mawcsco: "but still allowing the system to validate if it is a real phone number" – Jeroen Jul 9 '12 at 10:42
up vote 0 down vote

The simplest UI approach is to break the number format into three limited text boxes.

Alternatively use a RegEx to parse the entered phone number into what ever format the system needs to accept a phone number.

i.e. accepting - 0-9 +()-

share|improve this answer
2  
Ugh, Matt, that is the absolute worst. As a user, every time I see a phone number field split up (or Social Security Number, or anything else like that), I just want to go and slap the designer of that site. – Charles Boyung Nov 5 '10 at 13:40
I respectivly disagree. Given that Rusty asked for a solution while implying the constraints of the current system. This solution would fix his UI/Usability problem. As he also asked for a more felxible approach to ensure the information is accepted in any format That's also why i suggest a the RegEx Fix. I didn't suggest jQuery or any other framework becayse i didn't know what platform. – Matt Goddard Nov 5 '10 at 16:25
1  
That solution would not provide for a more flexible solution, which is what his entire question was. Yes, it would prevent the error of different formats, but it would cause more problems than it solves. Like he mentioned, how would you handle phone extensions. Three text boxes absolutely does not allow for that. And it may solve the immediate usability issue of errors if you enter an invalid format, but then it just exposes the new usability issue of having a crappy interface that annoys people that have to use it. – Charles Boyung Nov 5 '10 at 17:41
You're right to break the phone number into multiple text boxes wouldn't provide a more flexible solution. Defensive design is always the best approach. If for some reason this isn't achievable then it is an entirely legitimate approach to break phone number, credit card number etc into multiple input controls, Although not desirable. When i've conducted users test using these different approaches i've never had a participant say "I wish there was a single field there for me to enter xyz". When the task is complete. i.e. the form flows no one gives a crap. – Matt Goddard Nov 5 '10 at 21:19
1  
Matt, I've done tests where users explicitly did say that they wished the phone number was a single field (never tried it with credit card numbers because that would be a nightmare and I don't think I've ever seen CC# split). Also, even though I haven't been the subject in any usability test, I AM still a user as well, so wouldn't the fact that I hate that be at least some evidence that it isn't desirable? – Charles Boyung Nov 18 '10 at 15:31
show 2 more comments
up vote 0 down vote

Another option is what I did on one of my sites:

  • Free text input field to allow the user to add the phone number as he likes.
  • I then take the number, reformat the number as I need it and display it back to the user in several ways to ask for confirmation.

Example:

User enters this into the field: 055 (0)555-555 55555

I display radio boxes underneath the form to ask for confirmation:

How do you call your number from another country?
+55-55555555555 (+55 is my country code)
+55-055555555555 (+55 is my country code)
+1-55-55555555555 (+1 is my country code)
+1-055-055555555555 (+1 is my country code)
etc.

That way I can confirm the user's phone number and know exactly how to deal with it, since I need to know the user's country code...

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.