UI design clinic- Phone number formatting

When being asked to fill in our telephone number online, users sometimes have trouble entering or changing the numbers due to problematic formatting. The inconvenience can be avoided by more thorough and empathetic programming. In this article, Design Tongue shares useful coding skills for phone number formatting. First, let’s have a laught at some hilarious examples. Who says web designers don’t have a sense of humor?

Dropdown list: a test of eyesight and finger speed.
Validation: It takes a lot of luck to get it right! 
Hand drawing: Only if I had the time…
Addition:(000) 000-0001 is marketable.
Dial-up: Very retro…
Basic phone number formatting methods

Domestic numbers usually combine area code(ex.07 for Kaosiung) and phone number. Separating the two fields is hardly confusing. International phone number input formats, on the other hand, are more complicated and confusing. Here are some of the common entering formats:

Country code + area code (0 should be omitted for some countries)+phone number
ex:+886 7 123 4567
Country code + cellphone numbers(0 should be omitted for some countries)
ex:+886 910 123456

In Taiwan, area codes are 2 or 3 digits and phone numbers are 7 or 8 digits. For example, 035 is the area code for Hsinchu area and 07 is for Kaosiung area.

Input Field Formats

Single and multiple fields are the most common methods to capture user inputs. Both methods have their pros and cons.

Single Field Format

A single field is placed after a description or an icon. This is the most common pattern, which requires less coding and less taps. However, long phone numbers may be difficult to read and users would not know if area codes or country codes are required.

Multiple Fields Format

Multiple fields format  breaks the number into specific fields. For example, three separate fields are made for entering country code(+886), area code(022) and phone number(111111). With clear instructions, user errors can be largely reduced. However, Different digit numbers from different countries make it difficult to control phone number formats. Users cannot do copy-and-paste.

Elegant Solution

Design Tongue prefers single field format for its simplicity, but adding some useful details can enhance user experience.

1. Field masking

1.1 Field Name

It’s needless to say that field names are essential. Adding a small icon makes the interface more fun and enhances brand awareness.

1.2 Input format correction

▲ To avoid transcription errors, phone numbers will automatically be placed in the correct format.

#、x、ext are used for extension numbers. 

1.3 Error detection

Automatically detects errors when users do not use numeric digits or the correct numbers of digits. 

Dropdown list

It can be frustrating to enter country codes on international websites.  Knowing that only numbers are accepted in input fields, users often get confused whether they should use the plus sign. Those who have gotten used to it may forget that it is not needed to dialing, theose who seldom make international calls simply get confused. Without proper indications, users often have to open another window to check the correct country code, which is even more time-consuming on mobile devices.

Using a dropdown list is much more time-efficient. However, with a large number of countries displayed, special UI approaches can make choosing country codes easier.

1. Flag dropdown: Many designers find flags useless  due to their small sizes, I believe they still hold functional and aesthetic values.  Flag icons can also help users can quickly scan through the list.
2. Country names in English: English is the international language that is  easy to be searched in alphabetical order.
3. Country name: Most users recognize the name of their own countries more quickly.
4. Country codes.

After choosing the country code, the entered data will be automatically placed with the right format. ( DEMO https://goo.gl/cxr8cx)。

2-1 Prioritizing frequently used country codes

Users may go insane if they have to choose from more than 200 countries! A more friendly approach would be prioritizing the most frequently used country codes. IP address also helps detecting country codes.

▲Try here=> whoscall https://whoscall.com/zh-TW/

2-2 Enquiring country codes

Adding search function adds efficiency to the dropdown list format. Designers should provide a mechanism that allows users to search for both country name and country code by typing names or numbers. This searching method is more intuitive and user-friendly. It’s the programmer’s job to do keyword matching and fuzzy search.   

The search function is useful when users remember only parts of the country code and country name. But if users search with only the first letter(b for Brazil), the mechanism would show all data containing the letter(Albania).

If difficulty in programming is not a concern, the best thing to od is to offer search functions for both country name and country code. When a letter or a number is entered, matching country names are listed in order of relevance.

▲ Modify whoscall elements

3. Input mask

Zero is omitted when dialing international number on a cellphone, which is often forgotten. Reminders are oftern ignored by users. The best way is to accept numbers with or without 0 in the front-end and change them in the back-end .

4. Different options for registraion

Most service platforms offer online registrations on mobile devices. To make authentication process easier, it has become popular to use phone number as account name. Depending on company policies, users without cellphone numbers ot local numbers may not be able to register successfully. We suggest using e-mail address or user name as account name. We can also bing users’ registered phone numbers with their email addresses.

5. Making numbers the only input option for mobile devices

Entering date on mobile devices is inconvenient. Default setting should be made to simplify the action. The setting is techically supported.

Reference- 01 https://goo.gl/OzU1Y6 (different mobile input types)
Reference- 02 https://goo.gl/pWpqYc (different mobile input types)

▲ When inputting numbers, number 0 to 9 are used.  

▲ When inputting phone numbers, signs(+ * #) can be added.


Is it worth the investment for companies to modify a simple input field? Design Tongue agrees that building important infrastructures is more important during the initial stage, but well-designed details can set your products apart. This article introduces methods based on user experience. Issues regarding programming have not been further discussed. Please do not hesitate to offer your precious opinions in the forum!

friendly format for Phone Numbers (https://goo.gl/Dlm3hb)
Multiple vs single field capture for phone number form input (https://goo.gl/8O9EVS)
Phone number Entry question (https://goo.gl/Wa1u8i)
E.123 formats (https://goo.gl/9d9ppZ)
If Satan was a web developer … (https://goo.gl/0wKjnA)  

Read more

The Impact of smartphone Holding Methods on UI Design, Let’s Talk about Thumb Rules

Thumb Zone Interaction Design - Mobile UX ▲Photo by Andrea Natali on Unsplash When Saha

Columns On UX

A Manual for Workplace Relationships and Communication, Maybe “You Should be More Calculating in Your Communication”

▲ Ashley Chen - You Should be More Calculating in Your Communication The word "calculating"

Columns Recommendation

Since KFC represents hook-ups nowadays, Kentucky Fried Chicken will just book the hotel room for you!

If you ask a person randomly on the streets in Taiwan his or her impression

Columns On Market Trends

Q Brick X Nic Hsu “A little surreal, a bit out of the daily life” of Retired Nutcracker Soldier

▲ Nic Hsu on the London's streets  Article | Mei-Ling Liu Photo | Nic Hsu

2020 Design

After a Transition, Who is Gamania at 25 Years Old? Exclusive Interview with Iona, Director of the Corporate Marketing Office

5 years ago, at the age 20, Gamania Digital Entertainment established its goal to developed

Feature VOL. 89

Gamania First Mild Builder Mobile Game “Komori Life” World Debut on Mar 25!

Pre-registration for dual platform and exclusive release of limited edition browser game "Komori Life Cat"

Events TW