Zuko Blog

Optimizing the phone number field on forms

UX tips to reduce abandonment on mobile and landline form questions

This is part of a series on optimizing the UX of specific fields. Links to other articles in the series are below:

Optimizing the address field

Optimizing the submit button

Optimizing the password field

Optimizing the title field

Be honest, do you like giving out your phone number to anyone who asks? Would you hand it to a stranger who approached you in the street and just said “Phone Number!”?

That’s what the experience is like for many forms where the number is asked for without context or explanation. It’s unsurprising that people are reluctant to hand the details over.

This isn’t just idle speculation. Analysis of Zuko’s form database revealed that the Phone Number field had one of the highest abandonment rates amongst common form fields (behind only Password) so bad UX around the question is clearly a problem that causes many people to abandon.

This article is aimed at fixing that. It examines what the issues are around the phone number field. It then looks at why they are causing people to drop out and outlines how they can be fixed.

Issue 1 - People hate giving you their number!

The sad fact of life is that people hate giving out their phone number.

Due to bad experiences, there is always the concern that the details will be used for nefarious purposes; at the very least they are worried about spam sales calls.

In a B2C setting this is pretty obvious. If they are ordering an item via an eCommerce checkout and you are mailing it to them, why do you need their phone number unless you are intending to spam them? The Baymard Institute has found that asking for seemingly unnecessary information like phone numbers is a direct cause of user abandonment on forms and checkouts.

The situation is not much better in a B2B context. Lead generation forms often insist on phone numbers for things as simple as a digital download. That just screams “unsolicited sales call”. You can guarantee that any form that does this will be getting a high proportion of fake phone numbers in their database.

A typical example of a SaaS lead gen form insisting on a phone number despite being a 100% digital product

So how do you combat this issue? Well the first thing you can do is pretty simple...

DON’T ASK FOR THE PHONE NUMBER!

Do you really, really need their number? I know the sales and marketing folk may be desperate to build their call lists but the downside of customer drop-out and feel-bad will normally more than outweigh the benefits of having the details. This case study stated that adding the phone number field negatively impacted conversions by 47%.

Unless you have a very, very good reason for needing it, cutting the phone number field from your form will improve conversion rates. At the very least you should make the field optional (and make this very obvious).

If you absolutely must ask for their number the important thing is to tell them why you need it, what you will do with it and, just as importantly, what will not be done with the information. A simple line of reassuring microcopy can make all the difference between completion and abandonment.

This is a great example of using copy to reassure the customer that you won’t misuse their data.

Issue 2 - Your formatting requirements are annoying users

The phone number field has a huge number of ways that a user could potentially input their information. For instance, should they include the country code? Are spaces OK? What about dashes or parentheses?

Users want to enter their number in the way they are used to so if you try and force them into a new format, confusion and irritation will reign. This Baymard study indicated that 89% of test subjects entered their telephone number in a different format from that asked for by the form.

This gif shows a common issue on the phone field. The user is entering their mobile number with a space as that is the normal way of formatting it in the UK. However, the space is causing the form to error and declare that the number is invalid because the input isn't 11 digits (although it clearly is). It doesn’t take a genius to understand that this (combined with the jumpy error trigger) is a complication that is adding unnecessary friction to the journey.

So how should you avoid this issue when pretty much any sort of formatting will annoy one person or another?

Some forms try to get around this through the use of input masks - auto formatting the entered data so it fits the required pattern:

An example of masking where the form automatically adds parentheses and dashes

This way of doing it is certainly preferable to one which gives the user no clue as to the validation rules. However, you do need to be a little careful. There are a few issues with masking that can cause problems for particular user groups:

Whilst placeholders can work well on occasion, in general our favoured solution is simple. Let the user enter their number in the format they are most comfortable with. The only validation you need is a minimum character stipulation to ensure it is a genuine phone number being entered (usually 8 characters). Then, either;

  1. Get your back end system to reformat their number in the pattern that you need it, or;
  2. If the information is only ever going to be utilised by human operators (like a call centre) you shouldn’t need to do anything. Humans are very good at parsing telephone numbers, no matter what the format is, and dialling the number themselves.

Issue 3 - You are asking them to confirm their phone number

Asking for the phone number once is bad enough. Demanding it twice is asking for trouble.

Users won’t thank you if they have to go through the palaver of entering the same information multiple times, especially if you’ve disabled copy and paste.

People don’t forget their own phone number - only ask them once.

Issue 4 - You have got the HTML type wrong

Entering information into a mobile phone form can be fiddly at the best of times so it is imperative that you don’t make it any harder than it needs to be. You need to make sure that each form field has been created with the HTML type that will show the most appropriate keyboard when interacted with.

In the case of the phone number field, the required type=”tel”. Many forms lazily just use type=”text” leading to situations like this:

Issue 5 - You are not accessible enough

Around 6% of people have dyscalculia meaning they struggle with understanding numbers. This is relevant from a form perspective because these individuals can struggle remembering and sequencing numbers. In order to cater for this:

If you’d like more advice on improving your form user experience then check out our Big Guide to Form Optimization and Analytics

Looking to improve your form conversion?

Submit your form to get a free health check showing you:
  • Likely friction points leading to abandonment
  • Form elements contributing positively
  • Other areas for UX improvement
Zuko's Big Guide to Form Optimization and Analytics Cover Shot

We wrote the book on form optimization!

"The best book on form design ever written - 80 pages of PURE GOLD"
Craig Sullivan, CEO, Optimise or Die
DOWNLOAD THE EBOOK
(No email needed)

More from our blog:

Video Workshop: eCommerce Checkout Teardown
We review an eCommerce checkout, looking at the good, the bad and the ugly
Video Workshop: Fixing your forms
Check your form for these common UX issues that are causing abandonment
How to Break Your Online Form and Why It’s Good for Business
Uncover UX issues by behaving badly on your form

Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.

PRODUCT TOUR
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io