Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Ok so I know a similar(ish) question has been asked before re: friendly format for Phone Numbers.

My question however focuses on a more specific part of this question, namely the 'dropped' first zero issue in the city code.

I am looking at redesigning a web form where the user currently enters his/her phone and am attempting to make the whole city/local code issues less ambiguous.

I have included some samples in the attached image.

Phone Formats

Option A is as the form currently stands. In this case the user (assuming from London) could enter a many variants on the city code. I know I sometimes stop and think when I get to this point in at a form 'What is the most appropriate format'?

do I enter the zero or not, so I enter plus sign, brackets, hyphens or any other characters etc..

Option B - has a note underneath the field which displays to the user the preferred format to enter.

Option C pre-empts the city code and enters the initial 0 for the user, so 207 could be entered here.

Option D - a dynamic drop down who's contents change depending on the option the user chooses in the first(country) drop down.

What do you guys think about this? There is an element of guidance/information I like about option C although maybe it is still a little ambiguous in it's own way. Option D I feel simply may not be doable for various reasons.

Or if anyone knows of anyone has any other ideas or knows of any existing patterns that handle this issue well, I would be interested to discuss them here.

share|improve this question
Officially the London prefix is 020 - Followed by either a 7 an 8 ....or a 3 - thisislondon.co.uk/news/… –  PhillipW Feb 20 '12 at 16:10
Option A or B B are the best options, but if you chose Option B perhaps you could have the same phone number in the text box greyed out until the user starts typing, then underneath where the sample field is, have a friendly reminder reminding the user not to forget the area code. Don't forget though, a lot of people have mobile phones where area codes don't apply, so this may cause users to think that a landline is only acceptable. –  R4D4 Feb 21 '12 at 12:55

5 Answers 5

up vote 8 down vote accepted

There was some great research done by Jessica Enders on this subject in late 2009 (focusing on Australian phone numbers). Her research showed that users generally enter phone numbers as one long string of digits

Like the mobile phone numbers, one long string of digits—including area code—was the most common method of data entry: out of 640 landline phone numbers provided by interested research participants, 39% were entered as one long string of 10 digits (i.e. no spaces and no chunking).

But, importantly given your question, many users don't enter their area code, even when explicitly prompted:

Interestingly, in another 11% of cases, the 8 digits of the main part of the landline number were given, unbroken, but also without the area code, despite it being explicitly requested via a caption next to the field. If we had had validation on the field, this means that over 10% of users would have experienced a validation failure.

With that research incorporated, option B seems like the closest fit, especially since you provide an example of how to fill in your phone number. One additional benefit is that you're able to use the HTML5 input type=tel field type to allow user agents to provide input help (especially on mobile devices).

Expect users to enter hyphens, spaces, asterisks, hashes/pound keys and parentheses (at least) if you're supporting regional and international variations. Ideally your implementation should permit any combination of punctuation for input (stripping out punctuation for validation). The ideal being that if someone thinks of their phone number as a continuous value, they're equally supported as someone who thinks of their phone number in pairs of digits.

share|improve this answer
+1 for citing actual studies. I would also suggest that validation errors that are caused by free-typing without adding an area code can be detected and the user informed after completing the field that the number isn't complete. That way you keep it simple for all users, but inform that 10% who miss the area code that they've entered their number incorrectly. –  JonW Feb 21 '12 at 14:51

enter image description here

I agree with Paweł & Denis for Option B

share|improve this answer
Option B offers fewer restrictions, which is a good thing in a case like this where the area code is not necessarily an explicitly defined length (as Gareth mentions above). Just remember to strip out non-numeric characters in the validation. –  Tim Feb 20 '12 at 17:42
I wouldn't auto-advance from number to extension because the latter isn't common but if the area code and the number are separated then there should be auto-advancing. –  dnbrv Feb 20 '12 at 17:43

Option B is the best because it guides users without being too restrictive.

In option A, the format is absolutely unknown, which confuses users. The leading zero in option C can confuse users who have already developed motor memory of entering their phone number with the area code & the leading zero. And option D is outright complicated because there are hundreds of area codes (and some are assigned to multiple localities) so users will have to do some considerable searching.

An alternative method would be separating the area code from the phone number (like options C & D) but clearly indicating the data's mask under the entry box (i.e. giving an example like in your option B) and automatically advancing to the next box (area code to phone number) ignoring punctuation so that users can enter them the way they feel like it. However, you need to be aware that phone number formats change from country to country so your mask needs to change according to the country user selects.

You can add another layer of validation by splitting the first 4 characters off the data users enter & checking them against your list of valid area codes.

share|improve this answer
It's not even that simple within the UK. As mentioned in a comment, 020 is a valid UK dialling code, as is 0131, as is 01483 –  Gareth Feb 20 '12 at 17:30
Thanks, @Gareth! I didn't know UK had such a complicated numbering scheme. However, validation can still be figured out algorithmically. –  dnbrv Feb 20 '12 at 17:53
I agree. I would recommend displaying a valid example (if you know the format) after the user selects their location. This could be prohibitive depending on the number of countries you support. –  Myrddin Emrys Feb 21 '12 at 1:40
@dnbrv Technically yes, but practically, no; it's incredibly complicated, specific area codes may have phone numbers that are 5 or 6 number long, and as seen the length of the area code can vary. –  R4D4 Feb 21 '12 at 12:50

I would add to the answer by @dnbrv, that it will be best if you can guess user's location, so that (s)he does not have to scroll too much.

As for area codes and phone numbers formats, there are so many of them that it might require considerable amount of work to list them all. And that does not take into account that these numbers could change... Unless you allow editing (entering other area codes) for this drop-down, it is just a matter of time to lock-out some people...

share|improve this answer
Just as an example, we're dropping area codes in Sweden as far as I know (an expensive project). –  Oskar Duveborn Feb 21 '12 at 10:18

In french (my native language) there's not extension. I'm used to add area code when submiting forms on foreign websites so in my daily use solution A would be the best.

share|improve this answer

Your Answer


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

Not the answer you're looking for? Browse other questions tagged or ask your own question.