Thread by @strongeron

Telephone number inputs are a pretty common UI feature for tons of websites and apps. Seems simple enough to implement, right? Well, actually we need to think of a lot of different factors.

🧵 Check the thread 👇

#uiux #designtips #productdesign #uiguide

In cover photo, note the differences between left and right—so, how to represent a telephone input: country code, flag, or a combo?

We started an internal brainstorm at @evilmartians —and engineers took part, too! A long discussion followed, noted edge cases and many interesting details. Let's cover some background and analyze this further, then we'll come back to the UI and this photo.

What format will users input the number? The problem quickly becomes clear when you consider just a few of the variations a user might try to input the US-based number “888-400-5485”.

Will we support international numbers? “+1” is the code for the USA, but internationally, countries can have their own codes, (ranging from 1-3 digits).

Additionally, when actually making a call, rather than inputting “+”, it’s also possible to replace “+” with numbers. This is “00” in most countries, but there are exceptions: “011” in countries like the USA, and Canada, “0011” in Australia, etc.

The International Telecommunication Union has a numbering plan, E.164 with a max length of 15 symbols for any number. Now, we’ve already said a country code can range from 1-3 digits. But regional/area codes can vary, too (3 digits in the US, 5 in Germany). A lot of variation!

Even still, more potential complications for UIs, we have to consider special cases: satellite phones, international SIMs used in foreign countries, users’ personal input habits.

In my experience, there are two ways to crack this egg that don't involve making a big mess: input the number strictly in E.164 format, or, if the country code is known, the rest of the number can be entered in any format.

Let’s agree putting a region lock on a phone input might not be the best move; we’ll use the country code + the national number. This format complies with the E.164 format, and using it will be clear for engineers.

Moving onto actual design, note, as in the left side of the image, it's good practice to display in the following format: “Country - Code”, and to order alphabetically by country name for convenience.

Upon selecting a country, the input placeholder text should show the form that the user should enter their number.

If you have access to geolocation data, lend users a hand and auto-select their country. You can automatically set the phone number to be in the correct format, too.

Let's say a user selected a country code and entered a number—but they made a mistake! Instead of +1 for the USA, they chose +81 for Japan. When they go back and select the proper country code, it's good UX to keep the phone number itself—don't wipe it clean.

That’s it for now. Hopefully, this thread not only shed some light about some good phone number input practices, but it illuminated *why* some of these design decisions are good ideas!

Returning to the cover image, we end up with something like this, a combo flag and country code implementation, with a consistent UI and UX. If you liked this thread and want to know more about product design, follow me @strongeron.