The checkout process typically falls into three categories: single page, multi-page, and accordion. Last week, we analyzed three popular apparel sites’ multi-page checkout processes and outlined their strengths and weaknesses. In today’s post we’re analyzing the newly popular accordion checkout process.
The Accordion Checkout Process
The accordion checkout, as the name suggests, resembles an accordion in its expanding design. This checkout process, as you’ve probably seen in your own online shopping, has multiple sections stacked on top of each other that expand and collapse as the user advances towards conversion.
These checkouts can be very sleek and make great use of screen area by hiding unnecessary elements until the user needs them. Designed with expedience in mind, the accordion checkout aims to move shoppers quickly and efficiently through to conversion, without leaving time for abandonment. However, no single checkout structure is without its drawbacks. Today, we’re going to use examples from another three apparel companies to examine the accordion process’ strengths and weaknesses.
We’ll examine the accordion checkouts used by these vendors and show you what works and what falls short.
Navigation and Process
All three of the accordion checkouts we’ve selected today follow the same, two-step process. The first step of checkout deals with shipping and personal information, while the second takes payment credentials before moving on to order review. The gateways before checkout, however, are very different among the three retailers.
American Eagle offers the most commonly seen process for guest checkout (right). After adding an item to the cart and clicking ‘Checkout,’ the user is asked to either sign-up, log-in, or opt-out of registration. H&M doesn’t offer guest checkout, which is arguably a step backward from modern ecommerce. However, when logged in, the shopping bag and checkout are part of a single flow, making the checkout process seem small–a good thing for shoppers with a shorter attention span.
Abercrombie, as seen above, takes the most streamlined approach by sending all users to the same checkout and, from there, allowing for a sign-up or a log-in. This approach gets users finishing their order the quickest. The strength of the accordion checkout is to reduce abandonment through expediency and simplicity. Abercrombie’s checkout gateway accomplishes this best.
Navigationally, the Accordion Checkout isn’t without its hiccups. When a consumer comes across multiple collapsed sections, figuring out exactly where to click to move forward is sometimes unclear. Without clear direction, users may try to click on the coming sections without submitting data, losing progress and gaining frustration. To address this, American Eagle and Abercrombie use brightly-colored calls-to-action that contrast with the site’s design. These buttons draw the eye immediately and make the pathway abundantly clear.
Instead of using the progress bar, which is extremely popular in Multi-Page Checkout structures, progress through checkout is measured by how many sections you’ve completed. H&M, on the other hand, makes their entire Accordion Checkout a part of a single conversion flow, from shopping cart to finish. All of the Accordion Checkout falls under a “Checkout Info” phase of a larger flow.
However, with this unique take on checkout comes an unexpected consequence. Instead of entering card information on the “Payment” pane, the checkout is redirected to a unique page. This drastic change of structure and look can be off-putting to some users, and may promote checkout abandonment.
The Little Things
All three companies assisted users through the process with noticeable and specific error-finding. Abercrombie turns entire fields read to draw user attention, H&M puts red flags next to invalid fields, and American Eagle outlines offending fields in the same attention-grabbing color. Because Accordion Checkouts are split into pieces by design, error-finding techniques are extremely important, as users will be submitting information at multiple points.
Fitting helpful customer service into an Accordion Checkout can be tricky, as you don’t want to slow down a consumer’s pace. Additionally, you need to make sure the support option can move alongside the customer as they fill out multiple sections of checkout. To address this concern, H&M and American Eagle both utilize real-time, live chat services. With a click, a consumer can get the help they need without having to move to another page, which promote checkout abandonment.
Coupon Code Considerations
It’s been mentioned here on the blog a few times, but coupon codes, if used incorrectly, can be damaging to checkout conversion rates. While giving out coupons can help boost sales, it’s not always wise to draw attention to promo code fields.
Two of the three retailers address this issue. H&M only allows users to input promotional codes after two out of three panes have been filled. American Eagle asks users with a text link if they have a code, which is far less noticeable than an empty box.
The Dreaded ‘Back’ Button
One of the most useful tools for browsers can also be the downfall of the accordion design. The ‘Back’ button helps shoppers navigate through a site fluidly, but can cause problems for some accordion-style checkouts. In this case, American Eagle was the only vendor with any hiccups. A click of the back button for shoppers on AE will result in a return to the shopping cart. This is because the retailer uses a single page applet to power their checkout, which performs quickest.
The Accordion Checkout is the second-most common structure in ecommerce. This type of checkout converts quickly when done right, but it’s a little trickier to get right than a Multi-Page alternative. For more information on reducing site abandonment or optimizing your checkout flow, contact UpSellit.
Written by Joe Rosenthal