I am designing a phone number field for an international audience. Initially I separated the country code with the ability to select ones country from a dropdown. Once a country flag was selected, the country code itself would appear beside the flag, example: +22. The user would then fill in the rest of their phone number.

However, after some discussion with my team, an engineer suggested that most international users already know their country code and should have the ability to automatically start typing it in. Once typed, the default country code would change to the one they've inputted, allowing them to bypass selecting the country code dropdown.

Has anyone had experience with designing phone number forms for international users ? Is it best to separate the selection of the country code from inputting the rest of their number? Does changing ones country code while they are typing undesired UX or do you think it could enhance the experience for international users who may know their country code already?

  • do you have a mock showing your current efforts on this? – Mike M Dec 12 '18 at 14:59

Short answer: No.

Long answer: Most people do not know their country-code, because most users only have contact to people within their country. Tho, it is becoming more and more normal for people to get in contact with country-codes because of the extreme growth in international online-shopping. As a matter of fact, I didn't even knew my country code until two or maybe three years ago. The best way to solve this problem is giving the users a dropdown including flags and the country code. The flag will easily show the user "here, choose me, I am your country" and the country code next to it will tell them why they are choosing the flag and tell them how you are going to use that information, for phone reasons only. I attached you some links towards this topic and also on how to make a good phone mask.

Also: Even if 80% of the people knew their country code, 20% still won't know it. You have to consider if you want to lose this 20% of potential clients/customers just to save some time in making good user experience. What if one of these 20% is a huge investor or maybe a whale customer, ready to spend 1/3 of his or her monthly wage, month for month?

Teaching: By giving the user tiny bits of interaction with country codes or anything un-normal to their daily life, you can teach them without them even knowing. And who knows, in two or three years, they know their country code by heart.

People that know: Even people that know their country code can benefit from such a dropdown. They have a lower inhibition in filling out your form and have to think less which is raising or atleast not lowering the satisfaction while filling out that form.

| improve this answer | |
  • 1
    Thanks Marvin, this post was extremely helpful. I agree with you regarding the 20%, that would be a disaster if I took a risk like that. I think I will implement some sort of hybrid, leaving the dropdown as the main component while also adding the ability for the field to detect if a country code has been written on the backend. Thanks for the links too, I will read them soon. All the best. – Fionn Clinton Dec 12 '18 at 16:34
  • I wish you much success! Glad I could somehow give you some valuable input. – marvinpoo Dec 13 '18 at 8:02

It sounds like what you're looking for is a typeahead dropdown, or, alternatively, an input with some smart auto-fill. (example. You could easily allow typing either the code or country name)

On the other hand a lot of forms online tend to get the country from another input (usually a shipping address) and use it in combination with the provided phone number in the background.

| improve this answer | |

Don't make the user do more work. Is the country code for internal use? You can just add it programmatically in that case (assuming you know their country).

If the country code is used by your internal support team for contacting customers (or even a contact profile for other users), then you can just add it to the data record when submitting, as it can query a library that maps country codes based on the country selection.

Just because the data model (or the UI) requires the field, doesn't mean the user has to input it themselves.

It can be sourced from the country field if there's an address to add.

At the end of the day, a form is a barrier to what the user really wants. The more work you can save them, the better.

| improve this answer | |
  • 1
    Thanks Mike, the country code is for enrollment and is not for internal use. I appreciate the response and it helped clarify the direction I am going to take. I will remember "At the end of the day, a form is a barrier to what the user really wants. The more work you can save them, the better". All the best. – Fionn Clinton Dec 12 '18 at 16:32

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.