Is Your Checkout Suppressing Orders?
The checkout page is a fundamental piece of any e-commerce site, and one of our most highly tested pages. Once a user has started the checkout process, their intent likely is to complete the order. At this point, what causes order abandonment? The user has found desired products and intends to purchase, so it’s likely they’re abandoning for one of two primary reasons: discovering unfavorable shipping costs, or frustration caused by the checkout interface. While testable, shipping costs involve a variety of business factors. Testing the interface of the checkout page is much a much more straightforward process, and can produce positive results very quickly. It’s the page that a user has to put effort into, so it’s very easy to create a situation where user frustration leads to abandonment.
Frustration arises from something that makes it difficult for the user to complete a task they have set about accomplishing. We call these friction points. Generally, friction points fall under these categories:
- Uncertainty about proceeding to the next step,
- Lengthy or time-consuming processes,
- Unexpected results from an action.
What changes can be made to checkout in order reduce frustration and encourage order completion?
When identifying and evaluating friction points on a page, first we look at the general page flow; i.e. how a user would navigate the page. There can be multiple flows, depending on the page and user intent, but you want any flow to be smooth and uncomplicated. Since our focus is encouraging order completion, let’s look at the checkout page flow for filling out the checkout form inputs on a site where we conducted a series of split tests:
The red line follows the flow a user takes when going through form inputs to submit an order. Also, note that this is user who is shipping to the same address as the billing information; if the order was being shipped to a different address, the “zig-zag” flow of the billing inputs would be doubled. There is a large amount of both horizontal AND vertical flow. The position of the form inputs in the layout causes an excessive amount of flow, discouraging users from completing the form.
Reducing the amount of flow could encourage checkout conversion. Vertically aligning form inputs will reduce horizontal flow; making the checkout form layout appear less intimidating and easier to complete. Here is that same checkout page with the layout adjusted so that all of the inputs align vertically:
With this layout, horizontal flow only occurs at specific “pause points,” where a user has to opt into an action based on their specific circumstances (promo/gift card usage). Also, the actual distance of any horizontal flow is significantly reduced as well.
The site tested uses a responsive layout with the mobile breakpoint having a different layout for the checkout page, so the audience was limited to all non-mobile phone users.
We ran this experiment two separate times. The first iteration did not relocate the “Shipping Method” select dropdown due to technical limitations and ran for a period of 13 days, receiving 4,829 unique visitors. The second experiment did relocate the “Shipping Method” dropdown and ran for a period of 22, receiving 7,803 unique visitors.
The first version of the experiment resulted in the following KPIs:
- -2.1% Order Conversion
- +0.5% Billing Info Engagement
- +0.7% Shipping Info Engagement
- +4.6% Payment Info Engagement
Engagement on the input field spaces was increased slightly, but order conversion went down! Not the result we were hoping for. However, since we weren’t able to move the Shipping Dropdown in this version of the experiment, and had to leave it in the right column, we were curious if this would have an impact. We set up a goal specifically to track engagement on it and saw:
- -21.2% Shipping Dropdown Engagement
That’s a significantly negative impact. We inferred that changing the layout, but not moving the shipping dropdown, meant that the dropdown was being missed entirely, causing even more friction rather than reducing it. This led to tackling the technical issues and moving the shipping dropdown to the left column so that it was in alignment with all the other inputs.
The second, more thorough experiment resulted in following KPIs:
- +2.4% Order Conversion
- +3.3% Billing Info Engagement
- -0.7% Shipping Info Engagement
- +3.7% Payment Info Engagement
Now we’re seeing the desired order conversion increase. The Billing and Payment inputs are seeing increased engagement as well, but shipping is down. Why? Looking at the Shipping Dropdown engagement:
- +26.8% Shipping Dropdown Engagement
Relocating the Shipping Dropdown significantly increased engagement with it. We surmised that the Shipping Info engagement drop was due to the fact that the dropdown is now in-line and easy to find; previously users were hitting the “same as billing” checkbox to toggle the space in an attempt to find the Shipping Dropdown. This is a B2C site; the “same as billing” checkbox is checked by default, because order data indicates that the vast majority of orders are to the billing address. You wouldn’t necessarily expect a large change in engagement rate here since most users don’t need to interact with the space to begin with.
Page flow is critical to page performance, specifically for pages that require a lot of user input/action. Evaluate a page’s flow by identifying the different elements of a page, then rank them in importance to the user. Rankings can change for different user types; for example, a repeat shopper may not be as interested in reviews as a first-time visitor. Build out different user profile rankings. Connect the dots as each item goes down in rank. How does that flow look? Is it smooth? Jagged? Does it cross back on itself? Is there a pattern established (like a Z or F layout)? Can the flow be simplified? All things to consider and split test.