34

I am asked to improve the sign-up process of a double authentication system.

At one step there, we ask users to input their telephone number. Right now users have to click on the flag and choose their country's flag through the dropdown. This is quite tedious.

enter image description here

I am thinking that the name of the country should be somehow searchable, users should be able to directly input the country code as well.

I am trying to find what others are doing but I haven't succeeded in finding anything great. Have you worked on anything like this?

Thanks!

A first thought would be something like this: enter image description here

Improve this question
10
  • 8
    "I am thinking that the name of the country should be somehow searchable...I am trying to find what others are doing" In my experience, the vast majority of country-asking dialogs just present a long list of countries in alphabetic order (sometimes with USA/UK/possibly-detected-country at the top) with no search, which really annoying. (Sometimes pressing a letter takes you to the first country starting with that letter). Kudos for wanting to buck the trend.
    – TripeHound
    Commented Feb 25, 2020 at 15:06
  • 28
    Those dropdowns are annoying as ♥♥♥♥. I can type "+49" in a fraction of a second, but I need several seconds to find the code even in a well-implemented dropdown. So, whatever you do, make it possible to enter the full number.
    – AndreKR
    Commented Feb 25, 2020 at 20:42
  • 4
    There is a bijection between “country” and “prefix” (i.e. they are 2 facets of the same thing), so you shouldn't use 2 separate fields for it. (In an ideal world) Usability shouldn't be impacted by technical difficulty (because, yes, I agree it's more difficult to have a searchable drop-down menu where you could type “44”, “0044”, “+44”, “UK”, “United K”, or “Britain”… and still land on the same entry — but that is what's best (as least constraining) for your users).
    – ebosi
    Commented Feb 25, 2020 at 21:11
  • 7
    @ebosi Actually, no. A country can have more than one prefix, for example, for a geographical area within the country.
    – AndrejaKo
    Commented Feb 26, 2020 at 7:19
  • 4
    Whatever you do, please test your country list. I have seen lists where you had to press "K" for Russia, because it was filed as "Kazakhstan and Russia (+7)"
    – a25bedc5-3d09-41b8-82fb-ea6c353d75ae
    Commented Feb 26, 2020 at 15:18

6 Answers 6

Reset to default
60

Make it effortless for the user.

Firstly you could show the country code auto-selected based on their geographic location.

If that's not possible, make the back-end logic in such a way that it would take both typing in the country name (including the name variations) or prefix code in a single input field that would auto-suggest as the user starts typing.

The flag thumbnail on the left side can help the user as an extra identifier in the dropdown suggestions.

Something like this:

enter image description here

Improve this answer
6
  • 13
    Really like this. One note: it might be worth showing matches within a country name (although perhaps listing those that start with what's typed first). It might not be necessary if you stick to their common short-form names (see this Wkipedia page), but I've seen the UK listed under variants such as "United Kingdom", "Great Britain" or "Britain", so if typing _UN doesn't get near, being able to try BRI would help, and there may be other differences between "official" and "common" names around the world.
    – TripeHound
    Commented Feb 25, 2020 at 15:19
  • I like this concept a lot. One note; the labels should be external to the input boxes so that when the user starts typing (or if the country code defaults to the user's country automatically), the user knows that they are typing their phone number country and not their address country.
    – Ian
    Commented Feb 25, 2020 at 23:11
  • 4
    We can do one better. Like with credit cards and much else, there should be ONE plain field in which it would be possible just to type the whole number (including the prefix). This is the fastest way for those who knows the prefix (which is most of people), and avoids an important problem of "should I drop the initial 0 from the area code, which (presumably?) goes into the main field?". The dropbox should populate the prefix in the main field.
    – Zeus
    Commented Feb 26, 2020 at 0:49
  • 2
    @Zeus in a big plain field I don't type the country code. I just type my phone number, usually this is on sites from my country so they don't need the code anyway. If you want to be sure to have the right number (with prefix) making it mandatory is the way to go.
    – J_rite
    Commented Feb 26, 2020 at 7:04
  • @Jungkook, yes, we can and should make it mandatory - but in the single main field. It's trivial to validate for the prefix presence (just having a + is really sufficient to protect from accidental omission). Having one field has bigger advantages: faster typing and unambiguous treatment of area prefixes as I mentioned. (The latter is a big problem and implementation varies wildly).
    – Zeus
    Commented Feb 26, 2020 at 8:20
29

Seems like a simple solution: allow the user to search either by country name or code, including shortened and alternate versions of the country names. Just put a smaller searchable input before the input that would take the phone number.

Edit: It the demo now supports:

  • Searching by country name
  • Searching by shortened name (for Tunisia, TN)
  • Searching by code
  • Pasting a number and auto-selecting the dropdown value

demo

jsfiddle

Improve this answer
2
  • 1
    I know it's only a (good!) demo, but it should allow different codes and it should allow to paste a full number in the second input box (potentially moving the prefix). And I would add for each country at least the localized variant in its official languages.
    – eckes
    Commented Feb 27, 2020 at 16:36
  • 1
    @eckes I do think localized variations should be supported, and it would be pretty easy with a hidden span. I just added TN for Tunisia to the demo using the same method. I also added the ability to paste a full number and auto-complete the dropdown value, that was such a good idea!
    – GammaGames
    Commented Feb 27, 2020 at 18:40
13

Is there a reason for you to suspect that your users don't know their own country code?

Are you certain that your country code list is all-inclusive and self-healing? By self-healing I am referring to the future day which you are no longer in charge of that form; will codes be added/removed in some automatic fashion?

I suggest allowing the user to type their darn number and in case they don't know it make sure to provide a "What's this?" style link to https://countrycode.org/

If you sincerely don't trust your users then you can choose to make an overly-apologetic validation rule that reads something like:

<sarcasm>

That country code is not recognized by our system. This could be because you've entered it incorrectly, our regex skills have failed us yet again, or the guy in charge of this list (looking at you, MonkeyZeus!) has failed to include your country.

See our system's full list of recognized country codes and if your code is not in our list then please proceed anyways. Hopefully an email notification is automatically sent to someone that can add your country code in the next 8-13 business days.

Have a pleasant day

</sarcasm>

Improve this answer
8
  • 1
    Yes, thank you! Those dropdowns are annoying as ♥♥♥♥. I can type "+49" in a fraction of a second, but I need several seconds to find the code even in a well-implemented dropdown.
    – AndreKR
    Commented Feb 25, 2020 at 20:41
  • 15
    Do you have American users? Then you've got users who wouldn't know what a country code was if it bit them. (Oh, and I can add countrycode.org to the list of websites that don't know of the countries "America", "Deutchland", "Burma", or "Republic of China".)
    – Mark
    Commented Feb 25, 2020 at 22:33
  • 1
    @AndreKR if it is well designed you can just type the +49 in the input field and it would automatically select Germany (or Deutschland if it's a page in German)
    – J_rite
    Commented Feb 26, 2020 at 7:07
  • @Mark The problem here is that those aren't correct names. "America" is the United States. "Deutchland" is misspelt German for Germany. "Burma" ceased to be the name of Myanmar in 1989. "Republic of China" is a contested denomination for Taiwan.
    – AmiralPatate
    Commented Feb 26, 2020 at 10:17
  • 6
    @AmiralPatate That's kinda the point - people normally search for what they call their country (often even when talking in a different language), hence e.g. D for Germany, and R for the Republic of China, commonly known as Taiwan (both referencing the correct names of the relevant countries as specified by that country).
    – meta
    Commented Feb 26, 2020 at 11:19
5

Your first action should be to discover if your user knows the prefix or not.

If Yes...

Maybe you don't need to search and select a country. Maybe just a prefix field is enough.

If No...

  • The country field should be easy for the user. Show: [flag] +44 - Country (all prefixes aligned makes easier for the user)
  • Allow the user to search by prefix and country name.

My general considerations:

  • If the user can choose the country then your form doesn't need the prefix field because the country already related to the prefix.
  • Get current location and autocomplete the field but allow the user to change.

I suggest you read this Phone Number Field Design Best Practise article.

Improve this answer
0

Why don't you use the location from the ip of the user ?
If you can determine the prefix by using the ip, you can save effort for your user.

What is the probability that user ip location can match with prefix of user phone number ?

High.

you can

  1. Guess the prefix by ip and auto set it
  2. List prefixes that are more near to where I'm logged, If I'm logged from NY, filter prefixes with one closer to me
Improve this answer
6
  • 11
    Most of our clients (e.g. Banks) use VPN systems and the IP rarely matches the country they really are - many clients also span across multiple countries and locations and travel a lot.
    – Mike Mark
    Commented Feb 25, 2020 at 13:41
  • 2
    As a person who spent some time in a country while only having telephones from two different ones, I can testify that developers thinking like this has been a nightmare. -1.
    – Rad80
    Commented Feb 26, 2020 at 9:31
  • I've had years of being inappropriately considered German and Swedish. IP geolocation is really annoying.
    – Džuris
    Commented Feb 26, 2020 at 9:54
  • 2
    The IP isn't necessarily reliable, but surely the browser locale should be, at least more so than the IP? en_US for the States, de_DE for Germany...
    – TimoStaudinger
    Commented Feb 27, 2020 at 13:13
  • @Timo: Browser locale as in the language? That would give you the wrong one for me; the IP would be right. If the two are consistent, though, it's a good guess. If they differ, it probably makes sense to move both options to the top of the drop-down.
    – MSalters
    Commented Feb 27, 2020 at 16:41
-3

The user shouldn't even have to expend their mental resources to think about choosing their country. It should be automatically detected with the proper flag icon when they select the field. Nor should the user have to think about what phone number format to use. The less you make your users think, the better.

Read the article by UX Movement: Bad Practices on Phone Number Form Fields

Improve this answer
1
  • 4
    OK, sure. Several people here have suggested this. But this isn't the solution. Because what if they need to change it? For instance if people are on VPN, or they're currently in a different country to the one they are registering for. Then what do they do?
    – JonW ♦
    Commented Feb 27, 2020 at 17:02

Your Answer

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

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