UX Research Articles

Latest · Popular · See all

192 articles based on findings from our e-commerce usability research

The Average Checkout Flow Has 14.88 Form Fields – Twice as Many as Necessary

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 27% 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:

“Yes, ahh, now all these fantastic ones”, a test subject muttered cynically when landing at Cabela’s billing address page containing 16 form fields all viewable at the same time. With the use of smart form field design and features this could be reduced to only 6 or 8 form fields shown by default, without significantly reducing the type of information that users can provide.

“It looks pretty chaotic when you first enter the page.. it might actually cause you to bail if you were in a hurry” a subject said when landing on NewEggs’ “one-page” checkout form. Note in particular how a non-collapsed billing address and a two-column form design results in an enormous amount of fields visible on page load – both should be avoided.

“And then I think it might be a bit annoying with all these optional options, because it takes longer to complete. Right now there’s just a lot of empty fields so it seems like as if you haven’t completed it”, a test subject said, intimidated by the many optional fields in ASOS’s address form. “It doesn’t matter with daytime phone, mobile and so on. Why do they need 3 different phone numbers? It’s just a clothing site,” another subject chided.

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:

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 large-scale eye-tracking tests it was confirmed that the “Address Line 2” field can safely be collapsed behind a clearly marked text link, such as seen here at REI.

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.

42% of users did as this subject during testing: they began by entering their entire name in the first field, and only upon progressing to the next field would they notice the mistake, which would force them to move backwards in the form. Obviously this is fairly disruptive to the user’s typing flow. Notice how this subject is further halted by the middle name field.

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.

At Amazon, the amount of ‘Name’ form fields and options are reduced to only a single “Full Name” field. Besides lowering the number of form fields, it’s a very flexible way of allowing users to include as many titles, suffixes, and middle names as they prefer.

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 comparison, we’ve made a crude mockup of what the same Macy’s page could have looked like if the billing address was defaulted to equal the earlier typed shipping address.

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.)

Post a comment or Share:

User experience research, delivered twice a month

Join 14,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Nicolas Hoizey November 8, 2016 Reply to this comment

Great article, as always, thanks!

Did you ever see a single field address, that would take advantage of an autocomplete based on Google (or other) Maps API?

Christian, Baymard Institute November 16, 2016 Reply to this comment

Hi Nicolas, yes we’ve tested these in large-scale as well. Staples.com is an example of a site using it.

While showing promise, the feature is very much at an early “experimental stage” for an e-commerce context, with users having little to no prior experience. E.g. we see that e-commerce that sites still need to display the detected/selected address in normal form-fields afterwards to stay clear of the most grave usability issues (so users understand the selection and can spot errors).

Furthermore, in some countries the address number comes after the streetname (not before), the greatly reduce how much auto-detection actually takes place as users will in practice spell out their entire street name.

But definitely something we’re keeping track of, but not a whole hearted “recommend” (yet), for now we only recommend it as an experimental feature for sites who will also dedicate the needed resources to ongoing monitoring, periodic re-evaluation, and tweaks of the implementation.

A simpler alternative we see verified to perform well every time we’ve tested it in the past 7 years is auto-detecting city and region/state inputs based on the ZIP/postal-code provided by the user.

Friso November 11, 2016 Reply to this comment

@Nicolas That is a nice idea. In the Netherlands often a zipcode look up is used.

Based on housenumber and zipcode you can determine the streetname and cityname. This shortens the amount of checkout forms.

Christian, Baymard Institute November 16, 2016 Reply to this comment

Yep, zip-code auto-detection is very much part of the verified patterns we see for lowering the amount of form fields shown by default. In most countries you can detect region/state and city name.

Christian, Baymard Institute December 12, 2016 Reply to this comment

We’re written a followup article on ZIP-based autodetection of “City” & “State” / “Region” here: http://baymard.com/blog/zip-code-auto-detection

Pragati Udyog December 14, 2016 Reply to this comment

Thank you for sharing such a valuable information. This blog always come with the new idea. Keep writing.

Post a comment!

Close overlay