3

I'm designing a registration page for a portal which which will be used all over Europe. Users have to provide their phone number.

A user can select their country / country code via a drop list, and enter their phone number in a text field.

My question is how to best indicate the format I want the user to enter for the number - area code respectively without the (0).

+<country> [(0)]<area>

Alternative 1: Add a text field label which shows an example (Please use the following format: (030) 123456789)

Alternative 2: Prefill the text field with a zero.

Screen shot of the two alternatives

4

Don't bother. Instead of trying to coax the user to get it right, just clean up. For robustness, do so both in Javascript (so the user can see your auto-correction) and in the backend (for users with JS turned off)

1
  • 1
    I'd suggest that the JavaScript "Autocorrection" should not "reformat" the number. The user knows best how it's traditionally written! Instead, check in the background that the number 1) has a country code, 2) has the right number of digits for that country. Disregard non-numeric characters except +. Ask the user only if something is wrong/missing. Before asking the user, correct everything you can, so you don't need to ask again and again. E.g. where the country code is missing, guess it by IP and ask the user to confirm.
    – Erion
    Aug 11 '12 at 9:08
2

I'd go with option 2, out of the options presented. I don't like the first example because people generally don't understand other country formats so that may not add any more clarity for many users.

As a third option, have you considered simply not bothering the user with formatting and calculating it server side? We know that all euro numbers begin with a 0 unless using the country code when it is replaced with +CC, so we know that we can truncate the 0 if the user has typed it.

Potential downfall - people are so used to being told which format to use they might not understand that either is OK.

Potential option 4

Combine your first and second idea and refine it slightly by adding in a full example phone number which matches the format of the country selected from the list. This way you get an example the user is familiar with. Example:

example UK number


EDIT:

Why does the drop down need to say (+44) etc? Maybe if that bit was removed people would just type their numbers as normal and there'd be no confusion

3
  • 1
    Really good point about the (+44) part. I think it just complicate matters. +1
    – Alireza
    Aug 9 '12 at 15:12
  • If I were to enter a phone number, and there was no (+44) prefix show, I might very well enter it myself.
    – MSalters
    Aug 10 '12 at 8:04
  • Good point - no reason the server side processing can't detect this too. UX-wise that would be ideal
    – TJH
    Aug 10 '12 at 8:08
0

the best ux is when you take the time to find out the conventions (both landline and mobile) for each country number format. This includes the correct grouping and number of digits etc. Thus when a user selects their country, the correct looking text entry boxes come up. The country code gets displayed just in front of the entry boxes and is disabled. Area code entry box is surrounded by round brackets by convention. The separate entry boxes for each grouping of digits has a faint outline, so it looks like a continuous entry of the full number in a subtle way. All this effort affords users to enter their number naturally without having to study instructions on a form.

0

I can't remember any one time that someone has gotten this right. They just expect you to know the format to input. This really sucks when someone's new to a country and not really well versed on how phone numbers in a country look like.

Now, I sort of agree with @MSalters' answer, you should use JavaScript to clean up the input. But, I find that forms that aren't clear about the correct phone number format are mentally jarring. This makes finishing the form even more of a chore than it already is.

So please, don't disregard the design portion of this input field. The easier your form is to understand the quicker users will finish it. Which, I'm guessing, is what you want, no?

Oh and Alternative 1 is the best option for me. You could also make it so that the suggestion is inside the field (using placeholder attribute)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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