Update: Read a newer version of this article here.
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.
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.
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.
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.
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.
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.
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
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?
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.
i get this type of error after install one page chekout accordion….
Fatal error: Class ‘Clearandfizzy_Reducedcheckout_Model_Resource_Setup’ not found
Wow, great job guys! Let’s have a blog dedicated to UI and then make all pictures of the interfaces so small that you can’t even see them…
Oh, they use a xyz layout? Well, let me just click this picture so I can see the example they are using… Oh wait, it takes me to some other random page instead of enlarging the image….
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 firstname.lastname@example.org