Buying something online is both an exciting and a frustrating process. Consumers are excited to receive something from a retailer, but frustrated by the buying experience. Even slick, modern checkout processes are time-consuming for customers, and what the individual really wants is a one-click, one-second, buying experience.
The challenge for brands is that the checkout process is a required step. Getting personal and purchase information from the consumer is needed for the transaction, which means that a form, or series of forms, have to be completed. This often-lengthy process leads to abandonment, and that means a lost customer and wasted marketing spend.
What's interesting about sports e-commerce sector is the wide variety of checkout styles, and experiences. In my research I've seen sites that are best-in-class, and retailers where the checkout process is an active blocker to a sale.
The high visitor volume that a sports e-commerce site gets means that even tiny fractional changes in the conversion rate have a high impact on revenue and CPA's, which is why I wanted to review all major brands to understand who is over and under performing.
Jump to the league table for all Sports companies
I carried out this analysis in January 2018 and started by creating a persona to use across all the sports sites. This means that the information I entered in the checkout process was standardised.
In my analysis I counted only the required fields, so optional fields were noted but not included in my numbers.
Finally, when an "average number" is noted in this report it is a median average unless stated otherwise.
I reviewed the checkout for almost every major sports ecommerce company
My research is focused on every aspect of the form, from the form elements to the timing and mobile usability.
I scored each form based on critical factors that will increase user frustration and decrease conversions
Only 39.2% of companies use advanced postcode lookup. An automatic lookup allows the user to type any element of their address and uses their IP address to filter the results to show the most likely matches. Reducing five fields, or two fields, to just one, will have a significant impact on conversion rates.
62.5% of sites force password confirmation. Asking the user to confirm their password takes up more of their time - focus on getting the user to transact as quickly as possible by removing the double entry.
Only 41.2% of sites use inline validation on success and failure. Showing error messages to users as they move through the fields will allow them to fix issues quickly, and they can do so whilst their mind is on that particular field. The opposite of inline validation is submit validation, where all of the fields are checked at the end of the process, and then multiple error messages may be displayed. Going beyond validating inline for errors, is validating for success. Adding a green tick, or making the border of the input element green, confirms to the user that they have successfully completed the field, giving them confidence to move through the rest of the fields.
61% of sites do not use mobile keyboards on phone number fields. Showing a mobile-friendly keyboard, in this case a number keyboard, will make data entry significantly easier, and is a relatively easy optimisation. Making sure that your site uses the mobile, telephone and number keyboard types will allow the growing number of mobile users to get through your forms faster.
Each step or block in a checkout is a new area for a potential customer to read and absorb. Splitting the steps into the standard personal details, address details and payment details is a good way to chunk the process down.
However, there is no magic number of steps that will lead to a higher conversion rate. Having too many steps will likely decrease conversions, and having illogical steps will confuse the user, and likely increase the time to complete the process.
The median number of steps across all sport e-commerce sites is 3.
If you have more than one page in your process then it's important that you show the user their progress through the checkout. In a single step form the user can see all the fields, and therefore get a general understanding of the effort required (this can cause people to abandon a process on the first step if it just looks too long). When a process has more than one step, there is an unknown amount of effort required to complete all the steps. Showing the user that they are on Step X of Y is one way to help them understand that this is (ideally) a simple process, and that they are Z% of the way through it.
Having a visual indicator of progress through steps is an easy, but important, way to help users understand how close they are to completion.
Users fundamentally dislike completing forms, they simply want to get their product as quickly as possible and a checkout process stands in their way. The fewer fields that the user has to complete, the less frustrated they will be, and the more likely they are to complete the transactions.
Whereas the relationship between the number of steps (see the block above) and the conversion rate is often indirect, there is a strong relationship between the number of fields and conversion rates. A potential customer who sees a shorter form is more likely to complete it, and the time required to complete a shorter form is less. Aggressively reducing the size of the form, and reducing the effort required to complete it, will have a positive impact on conversion rates.
The average number of fields across all checkouts processes is 12.
In my research I found the longest form was Decathlon with 24 fields, more than double the average. Kitbag, Intersport and Reebok were three of the five sites that had just 10 fields to complete. The difference in effort, and time, is significant. It is highly likely that those sites will see a stronger checkout conversion rate than Decathlon.
Should you ask more questions in the first step or the last step? Should we ease our customers in on Step 1, or let them get through the bulk of it? These are common questions when thinking about how your split a checkout into multiple steps.
The question over top-loading (or not) is an important one. Ask too many questions in the first step and the user will be put off, whilst having too many steps will make the user believe that they're engaging in a virtually endless process. It is important to show to the user how far they are in a process, and how many steps are left.
Across all sports e-commerce companies 70.59% of sites have three steps or less. Only 9.8% of sites have six or more steps.
If you're looking to optimise your conversion rate by adjusting the number of steps in your process then a sensible starting point for testing is the average across all companies: 32.3% of fields are shown in the first step, with 34.8% in Step 2, 19.9% in Step 3 and 7.7% in Step 4. However, given my previous research on checkout processes my suggestion is that you have no more than three steps.
The main factor in a form completion time is the number of fields, with a trend of a lower completion time when there are fewer fields. A secondary factor in time to complete is the type of fields used: text inputs take up the most time, followed by drop downs, then radio buttons and finally tick boxes. Radio buttons take an average of 2.8 seconds to complete (from absorbing the question, to selecting the answer) compared to 3.6 seconds for drop downs. Not only does a higher number of fields mean more time required to enter data in each field, but it also takes time time between the fields as the user completes one question, moves to the next one, absorbs what is required and then start to complete it.
Reducing the time to complete will decrease the window for a user to abandon, the period between them entering the final stages of the checkout process and the transaction creation. Even small adjustments to the labelling, explanations, validation and the form fields themselves, can cut down the time to complete. When you have a high volume of customers transacting each day that reduction will lead to a higher conversion rate, and increased revenue.
On average it takes a customer 63.7 seconds to complete a sports e-commerce checkout process.
Direct Golf has the highest time per field (the total completion time divided by the number of fields) at 5.79 seconds, with Evans Cycles having the lowest time per field of 4.54 seconds. However Direct Golf has just 11 fields, compared to 19 of Evans.
Comparing Berghaus and Sports Warehouse shows the importance of using fields that are faster for a user to complete. Berghaus has two fields more than Sports Warehouse (15 vs 13) but has an average field time of 4.85s compared to 5.22 seconds. This means that the Berghaus checkout is 1.8s faster to complete despite it being longer.
Radio buttons trump Drop Downs for two reasons. Firstly all of the potential options are visible and readable by the user on a radio button. A drop down requires the user to click and then read the options.
Secondly, the user has less total interaction with a radio button than a drop down, a drop down requires a minimum of two clicks versus the single click for a radio. With a form that has a significant number of fields then saving the user fractions of a second will add up to a good time saving, and a greater likelihood of conversion.
From our aggregated timing data on forms (Formisimo tracks engagement with fields with millisecond accuracy) I can see that the time spent on a radio button (taken from the time of the interaction with the last field to the first engagement with the next field) is 2.8 seconds, whereas a drop down is 3.6 seconds.
The field types used in a form can make a significant difference to the time that they take to complete it and the frustration that a user feels.
There are three field types that should be considered when you want to optimise your form by changing the input type: radio buttons, drop downs and tick boxes. In certain scenarios you can change the field type from one to another, with the aim of making it faster for the user to understand the question and all potential answers, and faster to select the right option.
You can see in the graph below that some companies (Millets, Blacks,Cotswold Outdoors and Cycle Surgery) use a higher proportion of radio buttons. When compared to using drop-downs, they will reduce the amount of time to complete. Decathlon and Show Zone also has a relatively low reliance on text boxes in their checkout process, meaning that there's proportionally less data entry required.
Comparing the top five checkouts (ranked using our scoring at the base of the page) and the bottom five forms you can see how the higher performing sites move away tick boxes and use a greater proportion of drop downs and radio buttons. Radio buttons (where the user has a choice between two or more items, presented as items that are clickable) are much easier to complete. They're not ideal for when there's a lot of options, but when the choice is between two to four options it allows them all to be presented to the user without them having to click.
Comparing the UX of a text box (open, requires typing), drop downs (closed list, requires clicking and reviewing) and radio buttons (closed, all options visible) the radio button wins on total interaction required, and is therefore faster to complete. A radio button requires a single click on the right option, whereas a drop down requires a minimum of two clicks, with an unfurling of the options. That list will then need to be read and absorbed after the first click, taking up more user time.
The checkout experience of a mobile user is fundamentally different to that of a desktop user. Beyond the way that a form is presented on screen there's a second challenge of how the user enters data, and dealing with the complexity of data entry compared to entering information on a desktop. Making the process as quick as possible is critical for mobile users, as they are more likely to be on the move and have time constraints.
Only 39% of sports e-commerce checkouts use the telephone (or number) keyboard type, with 67% of sites using the email keyboard type.
The use of keyboard types on mobile devices makes it easier for potential customers to complete a form as it shows them the most relevant keyboard for the data input. As an example, a number or telephone number field should show just the number keypad, rather than the full keyboard. A field that asks for an email address can show a keyboard that makes the "@" symbol visible without having to press the shift key. Adding this functionality to a field is relatively easy, and it generally has a positive impact on conversion rates.
Inline validation is a good way to highlight issues as a user moves through a form, allowing potential customers to correct issues before the end of the process.
The more questions, and the more complex the questions, the greater the likelihood that a user will make a mistake. Informing that user of errors as they go through the process is far better than informing the customer of many issues at the end of the process.
Inline validation can also be used to highlight success as well as failure. Typically a green tick is shown next to the field, or a green border is shown on the field itself, to validate to the user that they have successfully completed that field. This constant reminder that the user has succeeded will give them confidence, and make them feel positive about their progress through the form.
My research showed that 23.5% of sites have no inline validation, with 35.3% reporting just on error. 41.2% validate on both errors, and success, as the user moves through the form.
Validating for both success and failure will give the user the best level of feedback as they move through the form, and it gives you the best opportunity of converting them into customers.
Website visitors have all experienced frustrating forms and when they start to engage with yours they are carrying baggage from the times when a form has been annoying.
A good way to keep users motivated, and to challenge their belief that the experience will be painful, is to use positive validation as they enter data. This is often in the form of a tick box next to a field, and is shown as they exit the field and move to the next one. This positive validation keeps the user happy, and helps them believe that when they click the "submit" or "next" button that they will be successful.
Showing errors in-line is equally important, as the user doesn't have to wait until the end of the step to see if they have made mistakes. A good inline validation process will not only show the user if they have entered incorrect information in a field (and so so as they move out of the field) but it will also explain what they need to do to correct it.
An example of insurer AXA using full inline validation. They highlight when information is correct and also when a user makes a mistake (along with a full explanation of what the mistake is). In the image above I have left the postcode field blank, and then moved to the next field.
Adding customer service information to a form gives users the confidence that if they have an issue then they can contact you directly. They're unlikely to need to initiate contact, although some may have issues that you can help them with. By displaying phone numbers, an email address or a livechat link, this increases the likelihood that a user will trust your brand, and convert.
39.2% of sites have their contact details visible during the checkout process, with 29.4% showing a livechat. 31.4% of sites have no contact details at all
Marking which fields a user has to complete will save them time. It guides them to which fields you absolutely have to enter information into, and which fields you can ignore (there's a question over whether you should have any optional fields in your process). A simple asterisk or similar notation will help the user understand how they can fast-track the process.
My analysis shows that 92.2% of sites mark required fields, with just 7.8% leaving them un-marked. For that small group of sites the addition of a marking on required fields is a quick and easy optimisation.
Customers get used to entering certain information into forms: they frequently enter their name and their email address. When you ask a user to enter non-standard information this will slow the process down, as the user will think "Why do you need this information, and should I enter it and continue with the process?".
Explaining why you need this information can reduce the confusion that users have. So, for example, saying "We need your mobile number so we can send you updates on your order" will remove the user's concerns about having over their mobile number.
60.8% of sites do not offer an explanation for any non-standard fields. 3.9% have a popup that appears with an explanation, whilst 35.3% have an explanation that is inline (shown next to the field) or hidden until the user clicks on an item.
Looking at the top five and bottom five sites (ranked using our scoring at the base of the page) it's clear that the higher performing sites are more likely to explain why certain fields are required. 80% of the top five have an inline explanation on some fields, whereas just one of the bottom five sites does.
Checkout processes ask personal questions - like your address and sometimes data of birth. Users are cautious, and sometimes confused, about questions that are highly personal. In your day to day life of completing forms this information is rarely asked for, so it can make a user consider why you need that, and then potentially decide to abandon the process.
When your process requires this information then offering an explanation as to why you need it, and what you use it for, is an important optimisation.
There are diverse ways that you can explain to the user why you need this information from them. Showing text around a field is an effective way to make sure that your explanation is always visible, but using an inline popup (that displays the message on the current field, as the user moves into it) is a good way to make the message highly visible.
American Express have a popup message on some of their fields, and it is currently visible on the email, "Name on Card" and mothers maiden name fields.
The messages are either to confirm why they need that information (in the case of Mothers Maiden Name they explain that this is needed for security and verification) or an explanation of something that may simply confuse the user ("Name on Card" is explained as it can differ from the regular name of the customer).
Entering your address into a form is a painful process for users, especially on a mobile device. The number of fields that have to be completed, and the combination of letters, and numbers (and the required switches between mobile keyboards) mean that this takes up a significant proportion of the total time to complete.
Using postcode lookup functionality can reduce the required fields from around five to just two (house number and postcode). This is a significant reduction in fields. Using an advanced, automatic postcode lookup (where the user types any element of their address into a single text box) reduces the form size further.
25.5% of sites have no address lookup, 35.3% have a traditional address lookup and 39.2% use an advanced lookup. That's a good proportion of sites that use the best option (advanced lookup) but it's equally worrying that a quarter of sites have no address lookup functionality at all.
The password field is important for repeat business, but is tricky to complete (especially on mobile). Enforcement of quality control on the password field (i.e. 8 characters, one number) mean that the user often has to go back to correct it, whilst often the information the user enters isn't visible to them. This is difficult for desktop users, but even more so for mobile.
One way to speed up password entry is to have just one password input element, removing the second validation box. This is likely to lead to more password resets in the future, but it allows the user to get through the initial setup faster.
37.5% of sites have a single password entry box, whilst 62.5% ask the user to confirm the password
The password input element hides the data that has been entered. Whilst this keeps the password invisible to those around the consumer, it makes it harder for the user to see what they have entered.
Having a button, or functionality, to show the contents of the password input allows the user to see if they have entered the correct information and reduces incorrect password entry. It's a small, and subtle, optimisation but it can make the entry process significantly easier.
Just 12.5% of sites allow the data within a password input to be visible to the user
To rank each organisation I generated a score out of 62, which took into account the number of steps and fields (related to the median score for each) and scored companies based on the percentage they were above or below this. I also scored companies based on the removal of unnecessary obstacles, and the mobile friendliness of each form based on the usage of mobile keyboard attributes. Having a livechat and postcode lookup was also part of the scoring process, and using inline validation boosted scores further, along with other form features that I considered to be critical to conversion rates.
The aim of our scoring was to take into account attributes of the form rather than the look and feel. Some forms were more attractive than others, but as design is subjective I chose not to apply any marks for forms that I felt looked better or worse.