Usability Testing Accordion-Style Checkouts: 2 Accordion UX Pitfalls that 75% of Sites Neglect

When benchmarking checkout flows for the first time back in 2012, we found that 14% of the top 100 US e-commerce sites used an accordion-style checkout. Accordion-style checkouts have been an ever increasing trend since then, and in our latest checkout study we’ve found that it’s now 32% of checkout flows are accordion-style.

While an accordion checkout often is an aesthetically pleasing option, our past 12 years of large-scale checkout testing have not found that accordion-style checkouts consistently perform better than either traditional multi-page checkouts or one-step checkouts. They can absolutely perform well, but the accordion layout in and of itself doesn’t matter that much to overall checkout performance. What we observe to be much more important to checkout UX performance is what users are asked to do during the checkout flow, and how they are asked to do it.

However, during testing of accordion-style checkouts, we observed that this approach of “one page with expanding and collapsing sections” often cause 2 usability issues that must be actively pre-empted in order to attain a good accordion checkout performance. Yet, our benchmarking of accordion checkout flows among large e-commerce sites show that 75% of accordion checkout flows have major usability issues as they fail at one (or both) of these two pitfalls. More specifically, they either:

• Deprive users of an ongoing review (which is the main benefit of an accordion-style design), and / or
• Break user back-button expectations (often with data-loss as a consequence).

During user testing we observe both usability issues to severely disrupt the user’s checkout experience, and even being the sole cause for checkout abandonments (this is especially true for the latter).

In this article we’ll present testing findings from our Checkout Usability study that relate directly to accordion checkouts, including:

• How some accordion checkout designs deprive users of an ongoing order review.
• Two different techniques observed to perform well in communicating the accordion concept of “expanding and collapsing sections” to users.
• Why so many accordion checkouts have a back-button behavior that misaligns with users’ expectations, and why this causes checkout abandonments.

Accordion Checkout Steps Should Collapse Into Summaries

One of the key concepts of an accordion checkout is to make all the checkout steps individual expanding and collapsing sections. During usability testing we observed that accordion-style checkouts both help encourage users to review their typed information and offer them a seamless way to edit that order information, should they detect in inaccuracies or typos.

One of the reasons that accordion-style checkouts are often effective at encouraging on-going review by the user is that previously completed checkout steps can collapse into textual summaries of the user’s prior typings and selections. Our large-scale eye-tracking test sessions of accordion-style checkout flows clearly revealed that users glimpse at and scan these summaries of their prior steps during the accordion flow – thus prompting an ongoing review of their typings and selections.

Spotting and correcting errors early on, while still fresh in the user’s memory, has the benefit of allowing users to correct mistakes when the implications of going backwards in the flow are at their lowest. During our think-aloud usability test sessions, the summaries of past steps were also observed to add a sense of progression for the user, much in the same fashion that positive “live” inline validation does (see “Usability Testing Inline Form Validation”).

However, some accordion-style checkouts deprive users of these options as they neglect to summarize the past checkout steps (as seen in the above depicted L.L. Bean), failing to capitalize on one of the main advantages of a accordion-style checkout design vs multi-step and one-page checkout designs.

It’s key that accordion-style checkouts collapse the past checkout steps into summaries to achieve one of the key benefits of having an accordion-style in the first place. Otherwise it’s just a normal checkout flow with a vertically aligned process step indicator. If a lack of focus on the new and empty checkout steps is a concern for accordion checkouts, our testing showed that the summaries of past steps can be styled as clearly secondary content without negatively affecting users’ ongoing review of their order data.

Another important implementation detail is to ensure that the summaries don’t take up too much vertical space to avoid even the slightest doubt about what the primary purpose of the current checkout step is – a concern that can be further mitigated with auto-scrolling, which is the topic of the next section.

Consider Taking Users to the Beginning of Each New Accordion Step

The eye-tracking test sessions of different accordion-style checkouts revealed that clarifying the purpose and steering focus towards the current checkout step can effectively be modified by scrolling users to the beginning of the new checkout step, once they proceed. Now, the importance of such auto-scrolling depends on which parts of the new step would otherwise end up out of the user’s viewport. Hence auto-scrolling is particularly important to implement if the summaries of past steps are tall, and for long checkout flows where the summaries will add up regardless of how compact they are.

The fewer the steps, and the shorter the summaries are, the less it’s necessary to auto-scroll users to the beginning of the next step. For instance, the previously shown accordion at Walmart will not need auto-scrolling due to the few, short summaries.

For a more advanced solution, your implementation could even take the height of the user’s screen into account, and calculate whether a sizeable portion (e.g. 75%) of the new checkout step is within the user’s viewport, and use that as a condition for whether to auto-scroll the user or not. This way, users on smaller screens would get auto-scrolled to the new section which would otherwise be partly (or entirely) out of their viewport, while users with big desktop monitors that are able to display both prior summaries and the new checkout step within a single viewport would skip the auto-scrolling.

The key concept here is ensuring that after proceeding to a new step, the user’s immediate focus is on the fields and actions that are the core purpose of that next step. How this is achieved may depend on the technical implementation of the accordion:

• Accordion checkouts that invoke a page reload between each step may use auto-scrolling to achieve this.
• Sites that submit each accordion checkout step without a page reload will often by default have the next step within view. These sites must however be particularly careful to align the browser back button behavior to match user expectations (see section section “Ensure Back-Button Behavior..” later in this article).

Lastly, note that on mobile, users will not be able to see both the previous step summaries and the new step within the same viewport (due to the small size of mobile screens) and accordion-style mobile checkouts must therefore always actively address this issue.

Consider Animating Accordion Step Changes

When testing accordion-style checkouts, it’s clear that a significant group of users simply don’t “get” the accordion-style concept – they don’t understand the notion of multiple expanding and collapsing sections. Instead, these users simply see each step as a new page with empty form fields, fill them, and click the primary button, until they’ve successfully placed their order.

Both our eye-tracking and think-aloud usability test sessions show that animating the transition between steps in an accordion-style checkout is a highly effective way of conveying the accordion concept to users. It helps the user intuitively make the connection between the fields they just filled and the textual summary it collapsed into as they progressed to the next step. This is a great example of an animation that isn’t just pure decoration but rather serves a communicative purpose.

In order to animate step-transitions, the checkout must use AJAX to submit the form fields at each step in order to avoid page reloads. Given the prevalence of technical errors and quirks, we strongly recommend approaching this as a progressive enhancement so that users can still complete the checkout even if JavaScript errors creep in or the user has JavaScript disabled. (This will often be necessary for proper accessibility support too.)

By approaching this as a progressive enhancement furthermore makes it possible to rely extensively on modern native JavaScript and CSS features, which are less prone to bugs and tend to have superior browser performance (resulting in smoother animations).

Ensure Back-Button Behavior Aligns With User Expectations

During the past 7 years of large-scale usability testing, we’ve observed that users expect the back button to take them back to what they perceive to be their previous page. Perception is the key factor here, since there’s often a discrepancy between what is technically a new page and what users perceive to be a new page.

Generally, we observe that if a new view is sufficiently different visually, or if a new view conceptually feels like a new page, then most users will perceive it as a new page – regardless of whether it technically is or not.

This is naturally important to be mindful of if implementing an accordion checkouts that submits each checkout step without a page reload, since this means that technically all the checkout steps are on one page (while users will perceive each step as a separate page).

The majority of accordion-style checkout designs are implemented around the notion of a “one-page checkout with multiple collapsed sections”. In fact, 56% of major US e-commerce sites with accordion-style checkouts have implemented it as a single page. Yet this stands in stark contrast to how most users perceive accordion-style checkouts: the majority of users perceive accordion checkouts as a multi-step checkout with summaries.

This discrepancy between implementation and user perception can become highly problematic. If a site has implemented its accordion checkout as a single page with one URL, any user wanting to go backwards to a previous checkout step (e.g. to edit previously entered information) will often end up being sent all the way back to the ‘Cart’ page if they try using the browser back button. This obviously leads to a great deal of confusion for the user, and in the worst of scenarios, it leads to data-loss as the user’s information isn’t persisted, forcing them to re-type all their checkout information.

Again, of among major e-commerce sites with accordion-style checkouts, 56% do not honor users’ back-button expectations and instead send users to the very start of the checkout if they use the browser-back button.

It’s therefore key that AJAX-based accordion checkouts that don’t invoke page reloads ensure that the browser back button takes users back to the previous viewed step even though it is technically speaking the same page. This back-button support can be achieved by using the HTML5 History API. More specifically, the history.pushState() function allows a site to invoke a URL change without a page reload, meaning the site can align the browser back-button behavior to match user expectations.

This is another example of how approaching this as a progressive enhancement can be useful as it allows relying on modern JavaScript such as the History API, while keeping the checkout perfectly useful for old browsers that don’t support this feature by letting them stay on the traditional page-reload version.

Pre-Requisites for Accordion Checkouts

The use of accordion-style checkouts has more than doubled in the past years since we first wrote about them back in 2012 – with 32% of large e-commerce sites now using an accordion-style checkout flow. However, while often aesthetically pleasing, the accordion layout on its own won’t make or break your checkout performance.

As detailed throughout this article, our large-scale checkout testing has shown that accordion-style checkouts have some inherent usability pitfalls that must be dealt with proactively. In particular, we found the following 4 factors to be important to accordion-style checkouts:

1. Collapse past checkout steps into summaries of users selections and entries. The main benefit of having an accordion-style checkout is that it encourages users to perform on-going review of their order information. The collapsed summaries should ideally use a height-optimized design and may be styled as “secondary” content.
   1.Honor users’ back-buttons expectations by sending them to the prior viewed checkout steps when they click the browser’s “back” button. AJAX-based accordion checkouts very often get this completely wrong and send the user to the very beginning of the checkout flow if they click the browser back-button.
2. Consider scrolling users to the beginning of the new step. AJAX-based accordions often get this “for free” because the user stays in place, whereas accordion checkouts that invoke a page reload between steps will need to use auto-scrolling. The more of the new checkout step that is out of view, the more important it will be to auto-scroll the user to its beginning. Thus auto-scrolling is practically always necessary on mobile, while it may not be necessary for users with large desktop monitors.
3. Consider animating step changes as this is observed to better communicate the accordion-concept to users, helping them understand how the information they just submitted has now collapsed into a summary.

Sadly, our checkout benchmarking reveals that 75% of accordion-style checkouts lack either prior-step summaries (#1) or proper support for the browser back-button (#2). If you’re considering an accordion-style checkout for your site, make sure to avoid falling into the same trap, as failing at either of those two is detrimental to checkout usability and will render the accordion layout a downright drawback compared to a regular multi-step checkout (while #3 and #4 may be considered “nice-to-haves”).

This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.