In our latest checkout usability study we’ve found that the average checkout contains 14.88 form fields. Yet our checkout usability testing also reveals that most sites can achieve a 20-60% reduction in the number of form fields displayed by default.
In short: the average checkout display twice as many form fields as needed.
At the same time, we’ve documented that 26% of users have abandoned orders due to a “too long / complicated checkout process”. We’ve seen this in our qualitative checkout testing as well: displaying a large number of form fields intimidate users, and cause needless checkout abandonments.
In this article we’ll therefore cover some of the research findings from our checkout usability study that relates to checkout length and number of form fields:
- How long the average checkout is, measured in checkout steps (average is 5.42 steps)
- Checkout length measured in form fields (average is 14.88 fields)
- Why the number of form fields displayed by default can cause checkout abandonments
- 3 techniques to reduce the number of form fields (verified during usability testing not to cause other side-issues)
Note: for the sake of simplicity we’re focusing just on form fields throughout this article, and not all form elements, which include drop-downs, radio buttons, and checkboxes. The average checkout has 8.60 additional form components beyond the 14.88 form fields, making for a total average of 23.48 form elements.
Checkout Length in Steps
If setting checkout UX performance aside, and just looking at the amount of checkout steps, our checkout benchmark of the top 50 grossing US e-commerce sites reveals that the average checkout flow for a new user is 5.42 steps long – counting from the shopping cart step to the order review step (both included).
.. the average checkout has increased in length – from 5.08 steps in 2012 to 5.42 in 2016 ..
Compared to our prior checkout benchmark it’s interesting to see that the average checkout has increased in length – from 5.08 steps in 2012 to 5.42 steps in 2016. This might sound worse than it actually is.
While it may seem a little counter-intuitive, we consistently see during end-user testing and checkout benchmarking that the number of steps isn’t the most important aspect of the user’s checkout experience – rather it is what the user has to do at each of those steps that’s important. (Up to a certain point at least, at 8 checkout steps and above usability do seem to suffer.)
If looking closer at the actual step distribution, it’s interesting to note the massive decline in the number of very short checkout flows (2-3 steps incl. cart-step). In fact, it’s tempting to conclude that one-step checkouts are more or less dead among the top 50 grossing US e-commerce sites (where just American Eagle Outfitters have a true one-step checkout, and Overstock is the only 2-step checkout).
Our prior findings that a one-step checkout will niether make or break a checkout was confirmed in this round of testing once again – it can perform well but it’s not the most important aspect of checkout conversion performance. (Aside: nearly all A/B case studies of one-step checkouts include other changes to the checkout, such as microcopy and form fields, and thus aren’t really testing the one-step checkout design pattern in isolation.)
Similarly, note how the ultra long checkouts with 8 and 9 steps are gone altogether. The shift is mainly towards 6- and 7-step checkout flows – with a 6-step checkout flow now being the most common. This evolvement towards longer checkout flows can in part be explained by the introduction of more complex checkout options over the past 4 years. More sites now include omni-channel delivery options, an increasing amounts of 3rd party checkouts, and an increasing amount of payment methods, etc.
The increase in the average number of checkout steps likely also comes from a significant rise in accordion-style checkouts – where multiple shorter steps are common. In 2012 we found that 14% of sites used an accordion-style checkout. In 2016 this number has climbed to 32%.
Checkout Length in Form Fields
Even more interesting than the number of checkout steps is the number of form fields. During our eye-tracking tests of checkouts we consistently observe that user attention is disproportionately drawn towards form fields and elements over other checkout components.
When plotting the checkout UX performance of the 50 top grossing US e-commerce sites against the number of form elements in their checkout, we see that there’s a correlation (the red line) between the number of form elements shown by default and the overall checkout user experience (with a bit of margin for site-specific exceptions).
Specifically, our benchmark reveals that the average checkout flow contains 23.48 form elements and 14.88 form fields (when purchasing as a new non-account customer). Yet a fully optimized checkout flow can be as short as 7 form fields, with a total of just 12 form elements.
Why Many Form Fields Can Cause Checkout Abandonments
During testing we consistently observe that users are overwhelmed and intimidated when seeing a high amount of form fields and selections. When working on simplifying the form and form appearance, it’s important to remember that even optional fields add friction to the checkout flow.
While it’s true that users aren’t required to fill out the optional fields, users won’t realize this until they progress to that field and see its ‘optional’ label. Hence, when users first glance over the page, the optional fields are as intimidating as the required fields (because the user has yet to distinguish the two), and can thus make a checkout step seem more intimidating to complete than it actually is.
Let’s take a look at a few examples:
3 Techniques to Reduce the Number of Form Fields
While checkout flows are by their nature form-heavy pages, smart form features and designs can greatly minimize how intimidating the checkout steps appear to users. In fact we see that an entire checkout flow for new non-account users can be made as short as 6-8 form fields for a physically shipped product (exact amount of fields depends on shipping country).
While there are a multitude of ways to reduce the number form fields in a checkout, many of them can end up hurting overall usability, and are thus not desirable. All techniques presented here and in the checkout report have been verified in large-scale usability testing to actually increase checkout usability and checkout performance, while also reducing the number of fields displayed to users by default.
Form field simplification is a major topic with many crucial nuances. Below we’ve included a condensed version of 3 of the 10+ techniques verified during our Checkout Usability study:
1. “Address Line 2” + “Company Name” can safely be collapsed behind a link
For most business-to-consumer sites there’s a number of address fields which only a small minority of users need, yet can’t be removed entirely, as this sub-group of users require that information for successful delivery of their order. The two most common fields of this kind are “Address Line 2” and “Company Name”.
Besides being yet another empty form field in the checkout flow, we’ve for “Address Line 2” observed that it can cause quite some confusion, and cause users start second guessing their input in “Address Line 1”. We first reported these issue back in 2014 with a complete guide to the “Address Line 2” field. All those findings have been verified once more during our latest testing.
During our latest checkout testing we (once again) observed a simple design pattern to work remarkably well: collapsing the “Address Line 2” and “Company Name” fields behind a text link. The fields are thus hidden from view until the user clicks the relevant link which in turn reveals the form field.
By only permanently displaying “Address Line 1”, we reduce the address form by 1-2 fields, and avoid users second guessing their initial input, as there’s no encouragement to divide the address line input. As importantly, on the sites that provided a link to reveal the “Address Line 2” field, our eye-tracking testing revealed that all subjects noted the links before moving on or engaging with them. This is a crucial detail, as the sub-group of users who do have a use for an “Address Line 2” or “Company Name” field of course need to be able to spot the link.
2. Use a single “Full name” field
Another option to make a checkout step less intimidating is using a single “Full Name” field, instead of the traditional “First Name” and “Last Name” fields. Asking for a single “Full Name” is observed to have multiple benefits.
The first benefit of a single “Full Name” field is that it aligns better with how users think of their name. As we also documented in 2013, users think of their name as a single coherent entity (they are “Jessica Newman”, not “Jessica” and “Newman”), and are therefore prone to enter their full name in any “First Name” field.
During usability tests we very frequently observe subjects entering their entire name in the “First name” field – only to advance to the next field and discover that they must now enter their last name. They then had to go back to delete their last name from the “First name” field, and then advance to the “Last name” field once again in order to complete it. In fact, a staggering 42% of the test subjects typed their full name in the first name field at least once during testing, and often repeated the mistake on several sites in a row. While only few of these subjects got validation errors, and none abandoned, all the subjects were interrupted and had their typing flow broken. Considering how simple the task of “type your name” ought to be, this is honestly quite a bit of needless friction.
A second benefit of a single “Full Name” field is that it is incredibly flexible when it comes to titles and middle names, as users can simply include however much they prefer. Compare this to a site which asks for “First Name” and “Last Name” – where are you supposed to enter your middle name? How about a title? Of course the site could include optional fields for those options, but that would mean a total of 4 form fields just to accept the user’s name!
Which brings us to the third benefit of having a single “Full Name” field: it reduces the total number of form fields. For an average checkout flow with ~15 form fields, a single “Full Name” field corresponds to a 7% reduction compared to separate “First” and “Last” name fields – and vastly more if the site would otherwise ask for middle name, initials, and / or title.
Note that not all form simplification features are “100% free”. Some include getting less data from users. Other times you get the same data but in a less structured format. A single “Full Name” field is a case of the latter – you end up with the same customer information, but in a less structured format. The main drawback of this is losing the ability to accurately address every single user by only last or first name (there are automated scripts that can split a “Full Name” into its different components, but they aren’t 100% accurate).
3. Default “Billing = Shipping” and hide the fields entirely
At 14% of business-to-consumer e-commerce sites the default is to use different shipping and billing addresses, resulting in the majority of their users who only have a home address, being needlessly intimidated by the high number of form fields presented on the page.
In addition to displaying the two full sets of address fields, we time and again observe that it also cause massive usability issues if the second set of address fields (usually the billing address fields) simply get auto-filled when the checkbox is ticked – as seen in the Macy’s example above. This design pattern cause particular issues if users try to edit the information in the copied fields, as it’s simply unclear what takes precedence: the ticked checkbox or what’s written in the edited fields? (There of course is no “correct” answer to this and different sites have different implementations.) Furthermore, having the (now redundant) fields still present in the form makes for a needlessly intimidating appearance.
The solution is to set the “Billing Address = Shipping Address” by default. Despite the importance of this, our checkout benchmark reveals that 14% of sites still do not default the two addresses to be the same. Furthermore, as described above, the implementation of this is important: when the “Billing Address is the same Shipping” checkbox is ticked, the billing address fields should be hidden altogether (rather than auto-filled). For the average checkout flow, similar to the above example, this change alone will cut the number of fields shown by default by 37%.
An exception to this are sites where the order logs show there’s a very large amount of customers who actually use different addresses. This is often the case at gifting and business-to-business sites.
Simplifying Checkout Flows
In our 7 years worth of usability testing checkout flows we consistently find that “8 vs 15 form fields” is a much more relevant discussion and priority of resources, than “4 vs 6 checkout steps”.
When addressing how intimidating and complex a checkout flow is, it’s key to reiterate that the average checkout flow displays 14.88 form fields, even though it could be reduced to just 6-8 fields (depending on country). This is in particular caused by a high number of optional fields that are only of relevance to a minority of users. Alas, when users initially glance over a checkout step, these optional fields will appear as intimidating as required fields, and can thus make a checkout step seem much more complicated to complete than it actually is.
As covered in this article, three helpful techniques to lower the number of form fields while simultaneously improving form usability, are: using a single “Full Name” field, collapsing “Address Line 2” and “Company Name” fields behind a link, and hiding all billing address fields by default.
For virtually all sites implementing just those initial three improvements will translate to a 14-50% reduction in the number of form fields shown to users by default. With further optimization work we find that checkout flows with as little as 6-8 form fields can be achieved. (And this is for physically shipped products – naturally virtual products that don’t require the customer’s address can get even lower.)
This article presents the research findings from just 1 of the 690+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.