Article overview

Accordion Style Checkouts – the Holy Grail of Checkout Usability?

· By · 2 comments ·

Accordion checkouts aren't a magic bullet to good usability but they can be great when implemented properly.

This is the 4th in a series of 8 articles on checkout usability that combine findings from our checkout usability study and benchmark of the 100 largest e-commerce sites.

Of the top 100 grossing e-commerce sites, 14% use accordion style checkouts. In fact, just after we conducted the checkout usability benchmark yet another of the top 100 sites switched to an accordion style checkout (J.C. Penny). Clearly accordion checkouts are gaining popularity among top e-commerce sites, perhaps most famously by Apple.

Apple makes use of an accordion style form for their online checkout process.

Accordion style checkouts refer to a checkout process in which each step expands as you progress throughout the checkout, with the past steps often collapsing into summaries of previously entered data.

Are Accordion Checkouts Better?

When asking a similar question a year ago for one-page checkouts, we concluded that one-page checkouts aren’t the holy grail of checkout usability. The same goes for accordion checkouts. An accordion checkout can be truly great, but just redesigning your existing checkout in an accordion style won’t make it particularly easy to use in and of itself (although it might look good). It’s what the customer is required to do at each step that makes or breaks the checkout experience.

Among the 14 accordion checkouts there were both members of the absolute top of the benchmark as well as sites from the absolute bottom.

On average, accordion style checkouts scored 19.2% better in the checkout usability benchmark compared to their traditional counterparts. However, the 14 accordion style checkouts in the benchmark still spanned the entire range from absolute top (American Eagle Outfitters, rank 7) to absolute bottom (Talbots, rank 94), so clearly it isn’t a sure-fire shortcut to good usability. It’s still much more important what you ask your customers to do during the checkout (as well as how you ask them), rather than if it’s a one-page, accordion style or traditional linear multi-page checkout process.

Perceived as Multiple Discrete Steps

During our checkout usability study, the test subjects clearly experienced accordion checkouts as a multi-step process – a perception that was confirmed in our mobile e-commerce study as well. This is in some cases opposite to the conceptual philosophy and technical implementation of accordion checkouts, where the author sees the process as a single page with dynamically collapsing and expanding sections. However, with a new set of form fields and instructions for each section / step it should come as no surprise that users perceive it as multiple discrete steps regardless of the technical underpinnings of the site.

Users perceive accordion checkouts as having multiple discrete steps, which sometimes clashes with the conceptual and technical implementation of sites owners.

Such a disconnect between user expectations and technical implementation can have dire consequences. For example, during our m-commerce study we saw mobile sites such as footlocker.com with an accordion checkout that was technically implemented as a single page. When a test subject hit the browser back button at checkout step 4 (payment) she was sent all the way back to the cart and had to re-enter everything again. This lead to multiple test subjects abandoning the checkout. While this is clearly a poor technical implementation, that could be solved by constantly saving data against the server. However, it is also a poor conceptual implementation, because even if they had retained all the entered information, the test subjects still expected to return to step 3, not the cart.

So if you’re considering an accordion style checkout, make sure you design for multi-step behavior such as returning the customer to the previous accordion section when they use the browser back button as well as storing data during each step-transition.

Expanding on Existing Usability Findings

Our findings seem to align fairly well with those presented by Luke Wroblewski – accordion checkouts aren’t a magic bullet, they neither add or subtract significantly from the usability of your checkout form. However, Luke W. describes accordion style forms as a single page with interactive sections. As discussed in this article, the test subjects in both of our studies displayed a different conceptual understanding of accordion forms: they perceived them as a multi-step process, and thus exhibited “multi-step behavior” such as trying to use the browser back button to return to the previous accordion step / section.

This conceptual divergence may be explained by the test environments – our studies were conducted on real production sites with lots of clutter around the accordion form which easily distracted the subjects. Wroblewski tested mock-ups without any surrounding elements which possibly allowed the subjects to focus solely on the form, which would have made it more likely for them to pick up on this conceptual nuance.

Jimmy Breck-McKye October 4, 2012 Reply to this comment

It’s interesting that users felt individual accordion folds existed as separate pages – I wonder why? Maybe the effect could be ameliorated if focusing on a new panel didn’t close the old ones, so the user felt they were still in the context of the original page.

There’s still a big question, though, which is: in the age of AJAX and progressive disclosure, what makes a user feel they’ve moved a ‘page’ – a step that can be undone with the browser back button?

Christian, Baymard Institute October 5, 2012 Reply to this comment

I’d expect much of the perception of individual steps stems from a combination of:

a) click a “continue” button and you are shown a new set of instructions, labels, form fields and a new primary button
b) the more “cluttered” the site is (main navigation, cart summary, sidebar content, footers, contact info, general layout and styling) the less “obvious” the accordion concept are (concept = the prior typed info collapsing into a summary, and the next steps as headers).

We only looked at the checkout processes for this study so I don’t have anything specific on what in general makes a user feel they’ve moved a ‘page’ – but it certainly is something one should include in their considerations when designing progressive disclosure elements.

My guess would be the amount of actual page content being changed (in an accordion checkout it’s close to 100% since the step you are at is summarized and a new one is revealed, only the shell is kept in place), whereas a tab on a product page is much more likely to be consideres part of the same page as clicking the tab would still keep the rest of the product page intact (headline, product image, quantity, primary button, etc.). Also details such as trigger indicators (http://baymard.com/blog/trigger-indicators) can provide important visuals clues that can help shape the concept understanding of the progressive disclosure.

Post a comment!

Close overlay