This is the last in a series of 8 articles on checkout usability that combine findings from our checkout usability study and benchmark of the largest e-commerce sites. For the last few years Jamie and I have conducted checkout usability studies, publishing one study as a report , written 29 articles on checkout usability here at Baymard, published four at Smashing Magazine, audited some of the top checkouts, and benchmarked the checkout processes of the entire top grossing US e-commerce sites. Distribution chart of checkout usability scores divided by category. Data input — any kind of data input the customer must enter during checkout. Copywriting — the use and wording of text throughout the checkout process. Layout — the visual layout of the checkout pages.
|Published (Last):||1 August 2009|
|PDF File Size:||17.24 Mb|
|ePub File Size:||17.73 Mb|
|Price:||Free* [*Free Regsitration Required]|
Each dot, therefore, represents the summarized UX score of one site across the 4—12 guidelines within that respective topic. The top row is the total checkout UX performance. Despite this improvement, not even the best-performing sites benchmarked have an all around state-of-the-art checkout. These subtopics were chosen as they are the most interesting or the most suitable for discussion in an article. 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. Users are informed at Staples what the password requirements are when they begin typing in the password field. As there are no consistent password requirements across sites, users consequently either have no password expectations or inconsistent password expectations.
The decent average performance is mainly due to a high number of sites that perform well and an almost equal group of sites that perform very poorly. However, this is a very business-centric way of conveying the information. Foot Locker only provides a time zone—specific cutoff time.
In addition to the delivery date, many users want to know when they have to place their order to have their package delivered by that date.
To address the issue caused by showing the cutoff time — if one is even provided — as a static time zone—specific time and date, the cutoff time should instead be displayed as a countdown. Store pickup is becoming a widespread feature among omnichannel sites. A common implementation found on many e-commerce sites is to provide the option for store pickup either before the checkout e. Home Depot provides the shipping cost and speed in the cart.
For example, in order for a cost-conscious user to evaluate if the extra hassle of going to a store is worthwhile, they will need to know exactly how much they are saving — that is, what the cheapest shipping options would otherwise cost and how far they will have to drive. Similarly, for urgent purchases, deciding between pickup and shipping will depend on the available expedited shipping options and their speed and cost, compared against how far away the nearest store is that currently has the item in stock.
While the Credit Card Form is still among the weakest aspects in the checkout flow of many sites, the benchmark data show a dramatic improvement since At Tesco , a user is alerted that the card number entered is incorrect. Typing the typically 15—digit credit card number string without errors can be difficult for users. During testing typos were common, and thus validation errors were as well — which can result in abandonments.
Thus any help users can be given to type their credit card number correctly should be provided. Luhn validation works to check to see if the card number entered by a user is plausible. However, simply alerting the user upfront that the card number entered contains a typo — and can therefore never be a valid card number — will allow users to correct it before the entire card payment form is submitted.
Even worse, many sites will, when payment validation errors occur, also clear out all the typed card data — forcing users to reenter all of their card data. Nordstrom has the perfect sequence for the credit card fields. Users are likely to enter information in fields in the same order in which they appear printed on the physical card.
At a minimum, this causes needless form-filling friction, but it may also lead to security issues as some users then copy and paste sensitive card information as observed during testing , not to mention needless card validation errors for those users who end up submitting the form. At Wayfair , month names are difficult to translate from the numeric representation on the physical card, and the year should be 2 digits.
However, many sites still employ nonstandard formatting , which interrupts the input flow for users who use the keyboard to input the expiration date information. For inspiration on good Credit Card Form implementations, see L.
Bean and John Lewis. Furthermore, the abandonments observed at this point in the flow are very often solely due to design and flow — as in, they are entirely preventable.
When wanting to edit the shipping address at Grainger , users at the review step are forced back to the shipping address step, and then must proceed back to the review step in a linear fashion. The combination of having both a somewhat unclear landing page when going backwards, and having to complete the same checkout flow once more when moving forward again, makes editing even simple typos a highly complex and discouraging experience. Instead, users should be allowed to edit data at the review step via inline form fields or page overlays.
Form field labelling issues often stem from the practical fact that form field labels are being written by web professionals, such as developers, designers, UXers, Product Managers, or others working in the web industry. During testing many users came to a stop when presented with such jargon. For most sites, a large proportion of the user base may only visit the site once or twice a month, or even less frequently.
This make users sensitive to site-specific naming. Sites should therefore carefully consider microcopy and determine whether the text in question is really something a general user would understand. If in doubt, opting for more widely used language, or at the very least providing additional descriptive text, will help avoid unnecessary confusion for end users.
Walmart makes it easy to quickly determine which fields are required denoted with asterisks and which are optional denoted with text in parentheses. Forms where the required fields were marked and the optional fields were not did fare better in testing when it came to decreasing the rate of needless validation errors.
Although there is still a group of sites whose performance is mediocre, these are now the minority. The right interface type for optional inputs depends on several factors, but in general uncommon inputs e. Additionally, one should be cautious of using radio buttons and drop-downs for entirely optional inputs.
This high-level analysis of the current state of Checkout UX focuses on only 6 of the 17 Checkout subtopics included in our Benchmark Analysis. The 11 other subtopics should be reviewed as well to gain a comprehensive understanding of the current state of Checkout UX, and to identify additional site-specific issues not covered here. Here you can browse the Checkout implementations of all 60 benchmarked sites. Authored by Edward Scott. Published on April 21, Doug Smith April 22, Thank you for such thorough analysis.
I will certainly be taking some of what I learned back to my e-commerce sites. If the address is recognized, then a prompt appears asking if they would like to log in. That gives the convenience of pre-filled fields for customers with an account. Only after checkout is completed, and there is no longer cart abandonment risk, the customer is then asked about creating an account.
At that point more effort can be given to explain the benefits of doing so. Christian Holst, Baymard Institute April 23, Account Yes that specific pattern is also in our test findings..
Hayneedle have this feature on their live site. I want to express my concerns about the recommendation to make password 6-characters length. I agree that complex password rules cause friction for users, but length is important for security.
I regret this does not appears in the current article. To recommend the password to be 6 characters long without more warning is dangerous. Cracking such a password is a matter of milliseconds with the processing power available in today average computers.
So, here is what can be done: — use multiple factor authentication send a link plus a token via email or text message and require to follow the link or type the token to proceed — limit the number of login retries, and if too much retries occur in a limited time period, require the use of an other factor to log in.
I am nitpicking because I think this is a subject of importance, but this article on UX is great nonetheless. It is a good synthesis and has a lot of valid points. Christian, co-founder at Baymard Institute May 25, Phil T April 22, Zoe Becker April 23, In my opinion, with tacit understanding, registered checkout shows that people have the strong desire in purchasing, so they will do whatever to complete the purchase step.
E-Commerce Checkout Usability
It has a great location, a well-designed store, good prices, and great products on the shelves. There are plenty of customers. Each day 1, customers pick down goods from the shelves and proceed to the cash register. But wait. How long do you figure this can go on before a store manager or the owner takes action? We are probably talking a few days at the most. Certainly not weeks, months, or years.
53 E-Commerce Checkout Articles
However, these cases often compare a non-optimized multi-step checkout with a new optimized one page checkout. During the research for our checkout usability report we found that users in general had relatively few problems navigating between multiple steps as long as a few simple guidelines are adhered to - the usability issues were primarily caused by what the customer had to do at each step. It has a name, which makes it easy to talk about. A concept that conveys of simplicity and ease-of-use for the customer.
We have now tracked the global average cart abandonment rate for 7 years. 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 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.
This checkout study provides you with 7 years worth of checkout user testing and research, condensed into usability guidelines. Full access to the Checkout Usability study includes 17 reports with actionable checkout guidelines , and a benchmark database with 15, UX performance scores and 11, categorized checkout best-practice implementation examples. This research-based and pragmatic toolset will help you achieve the best possible checkout flow, user experience, and conversion rate. Learn more about getting Baymard Premium access. They really understand the needs of UX and Product Management professionals, and their deep experience in the eCommerce field allows them to offer sophisticated, nuanced insights. This original usability study focuses on how users behave during a checkout flow , where they get stuck, and why they abandon their purchase. Despite testing the checkout flows from 25 leading e-commerce sites, the test subjects encountered more than 2, usability issues in the process of going from the shopping cart to completing their order.