3

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?

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

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.

5
  • 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. 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
  • 1
    Even if users have seen their country code somewhere, they may not know that it is the country code or know exactly which digits constitute the country code. For example, in Ukraine it is common to write phone numbers like this: (38)0 XXXX XXXXX. This makes it look like the country code is 38, but it actually is 380. But it is written that way because 0 is also the signal digit for an inter-city call. So within Ukraine you dial it 0 XXXX XXXXX.
    – David42
    Sep 17 '21 at 13:02
  • @David42 Never heard that before & technically that is not national standard in the ukraine. We work with companies over there and never have noticed that before. By Ukrainian standards, which follow international standards, it is like this, for Kyiv a.e.: +380 38 xxx-xx-xx for int. calls to Khmelnytskyi. The phone number in a correct way is still 0 38 xxx-xx-xx from elsewhere in Ukraine to Khmelnytskyi and 0 xxx-xx-xx for local calls. a.e, the museum writes the phone number like this (0382) 79-42-73 for ukrainian/national calls.
    – marvinpoo
    Sep 20 '21 at 13:30
  • @David42, but yes. Some user only know local ways to write phone numbers. Especially with your example, which is pretty rare but still exists. For germany as example, you might have a number that would start +49 (0) 49x xx xx xx. And special with the Ukraine is, that the +380 wwas basically occupied before (+38) from another country an some haven't probably fully switched the international way (implemented 2009) to write numbers, especially the older ones.
    – marvinpoo
    Sep 20 '21 at 13:35
2

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.

0

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.

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