On a positive note, the number of sites that force all users into creating an account has decreased slowly since our very first checkout usability benchmark back in During our testing, imprecise and generic microcopy for headers, option descriptions, and the primary buttons caused some users to misinterpret their options at the account-selection step. Newegg also has overly strict password requirements. During our testing, we observe that extensive and strict password rules can cause up to an Given the severe usability implications of too-strict password rules, and subsequent abandonments from account owners as they try to reset their password, sites should impose the fewest number of password requirements allowable. If sites want to minimize account sign in and password-reset friction as much as possible, we recommend making the only password requirement 6 lowercase letters.

Author:Shakarisar Faukus
Language:English (Spanish)
Published (Last):11 August 2006
PDF File Size:19.98 Mb
ePub File Size:1.60 Mb
Price:Free* [*Free Regsitration Required]

While an accordion checkout often is an aesthetically pleasing option, our past 9 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.

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. 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. 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.

Note how the accordion-style checkout flow tested at L. 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.

Bean , failing to capitalize on one of the main advantages of a accordion-style checkout design vs multi-step and one-page checkout designs. Note how the summaries of past steps are displayed in a greyed out font and a multi-column layout to conserve vertical space. During testing, vast and tall accordion summaries were observed to cause users to direct needlessly much attention at reviewing past information. Consider Taking Users to the Beginning of Each New Accordion Step Note how both AllPosters and REI have almost equally tall summaries of the past completed steps — yet note how the accumulated relative eye-gaze of the 31 eye-tracking test subjects show a vastly different focus for the first 5 seconds on the page.

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. 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.

For instance, the previously shown accordion at Walmart will not need auto-scrolling due to the few, short summaries. 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. Left is AllPosters, which auto-scrolls the user to the new 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. 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.

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.

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.

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.

Do I have to start over? 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.

More specifically, the history. 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: 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. 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. Consider scrolling users to the beginning of the new step. 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. 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.


Baymard Institute – E-Commerce Checkout Usability

Highly recommended. The audits have provided us with specific and actionable advice, allowed us to prioritize development resources , and enabled us to compare UX performance between the 7 different country-specific sites, and against State of the Art implementations. The audit itself is done really professionally and the recommendations contain actionable and insightful information. This was an excellent piece of work: professional, thorough, and actionable for the team. All points in this study make incredible sense, and I cannot help but incorporate all of these suggestions. The audit was extremely useful, I think we have gained valuable insight.


Checkout UX

UX Audit Service What are the 50 most important changes you can make? How does your UX performance compare? The team in the room really loved the way the Baymard Institute highlighted the optimizations in the various user experience elements copy, layout, design, calls-to-action… , from the perspective of consumer struggles. So I can confirm that these fixes have improved our checkout.


E-Commerce UX Research Articles

Sadly, little has improved in those years, and the average cart abandonment rate currently sits at Stop for a second to consider that: after having gone through the trouble of finding a product and adding it to their cart, a whopping 2 out of 3 users choose to abandon their purchase. This new usability study is the result of 7 years worth of e-commerce checkout research — testing live production sites of major brands with real end-users — to figure out why those Why Users Abandon New Data Now in all fairness, a large portion of cart abandonments are simply a natural consequence of how users browse e-commerce sites — it is users doing window shopping, price comparison, saving items for later, exploring gift options, etc. These are largely unavoidable cart abandonments. In fact, our latest quantitative study of reasons for cart abandonment finds that


Empower Your E-Commerce Design with 49,000+ Hours of UX Research


Related Articles