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 2016 we’ve found that 32% of checkout flows are accordion-style .
In accordion-style checkout flows, the just-completed step collapses and the new step expands – hence, the name “accordion”. The accordion concept is seen here in Walmart’s checkout where step 2 (first image) collapses into a text summary once the user progresses to step 3.
While an accordion checkout often is an aesthetically pleasing option, our past 7 years of large-scalecheckout 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, ourbenchmarking 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 ourCheckout 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 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.
In accordion-style checkouts, the test subjects would often look at the summarized data from past steps while the next step was loading (as seen here at AllPosters), or before starting to fill out a just-loaded step. This ongoing review of prior inputs led to errors being spotted and corrected earlier on.
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.