Phone Number Field Design Best Practices
Among the many different input fields that users have to interact with, the phone number filer is one of the trickiest fields to get right. A lot of different phone number formats and, as a result, the hard process of data validation for input.
In this article, I want to share three simple tips on how to make phone number input more efficient.
1. Do not split the input field into separate text fields
From first glance, splitting the field into a few fields will solve the problem of formatting - the user will have a natural constraint that will prevent them from adding an incorrect number. However, this design decision will introduce a few serious problems:
- Higher interaction cost. The user will need to navigate from one field to another. This is particularly difficult for mobile users because they cannot rely on Tab to move to another field.
- This solution won't work for different phone formatting. Creating input fields localized to one country can cause problems for international users - they won't be able to provide a number in their format. For example, the US phone format is the same for local and mobile number +1 (xxx) xxx-xx-xx while for the UK the format varies drastically depending on the region.
2. Provide country selector
The country code should be displayed alongside the phone number. Based on the selected country, in many cases, you can set the input masking and validation rules.
Here are two things to remember:
Set a sensible default for the country. Prefill country code based on user geolocation data.
Allow users to modify country code when necessary. The country selector should look like an interactive element - the user should know that they can change it.
You can use the International Telephone Input jQuery library for the country selector.
3. Auto-format for user input using input masking
It's hard to validate the phone number when you see it without dashes.
Good form fields use the input structure as an affordance to indicate the required format for the expected value. It's particularly helpful for fields like phone numbers because they have defined character count. That's why as a user types her phone number, it should be auto-formated to proper number without any effort from the user side - the user shouldn't need to type dashes.
Field masking is a technique that helps users format inputted text. Many designers confuse field masking with placeholder text - they are not the same thing. Unlike placeholders, which are basically static text, masks automatically format the data provided by the user. In the example below, the parentheses, spaces and dashes appear on the screen automatically as a phone number is entered.
