8

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.

Improve this question
3
  • 2
    Officially the London prefix is 020 - Followed by either a 7 an 8 ....or a 3 - thisislondon.co.uk/news/…
    – PhillipW
    Feb 20, 2012 at 16:10
  • 1
    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, 2012 at 12:55
  • Yes, option B is probably best. Don't ask for area code. I only have a mobile (no work/home landline), so never know what to put for websites that insist on an area code.
    – Steve Jones
    Mar 18, 2016 at 15:51

6 Answers 6

Reset to default
13

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.

Improve this answer
1
  • 5
    +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, 2012 at 14:51
5

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.

Improve this answer
4
  • 1
    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, 2012 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, 2012 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, 2012 at 1:40
  • 1
    @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, 2012 at 12:50
4

enter image description here

I agree with Paweł & Denis for Option B

Improve this answer
5
  • 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, 2012 at 17:42
  • 1
    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, 2012 at 17:43
  • The Country search drop-down should also support numeric prefixes, e.g. +43. It should support their input with and without leading zeros or plus signs or parentheses.
    – Crissov
    Oct 22, 2014 at 16:48
  • @Crissov As soon as you display the country prefix, some of the users will no longer enter the leading zero for the next field. Or they are used to the older double-zero-prefix and will get confused. In my opinion, most people don’t care that you need the international version of their phone number, or whatever notation issues you think you need to solve. But this may change over time. (So option B is best of the four.)
    – user109724
    Aug 4, 2018 at 11:01
  • My point was not about displaying the country code but about entering it in the Spotlight-like field.
    – Crissov
    Aug 4, 2018 at 11:17
2

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...

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

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.

Improve this answer
1

For data entry and table use a text box instead of numerical. On the lookup convert it as necessary. Convert the text to numbers and if there is a leading 0 add that back in. Seew this thread. https://www.pcreview.co.uk/threads/how-do-i-allow-a-leading-zero-in-an-access-number-field.3692368/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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