.svg){kind=small}
This is part of a series on optimizing the UX of specific fields. Links to other articles in the series are below:
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.
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.
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.
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:
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;
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.
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:
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
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
