Help & How to

The Baymard Pro: Checkout Usability include four tools:

• Top 100 – browse the top 100 grossing sites ranked by checkout usability score. In total this benchmark data consists of 508 checkout steps, 975 screenshots, and 3,000+ highlights.
• Step type – navigate the benchmarked checkout processes by type of checkout step, e.g. all "payment" steps.
• Guidelines – the 63 guidelines from the checkout usability report, each illustrated with plenty of examples from the top 100 grossing e-commerce sites.
• Review – an interactive checklist you can use to rate your own checkout in accordance with the 63 guideline, to see how it stacks up against the competition and where you can still improve.

All the tools within this rather complex and intertwined dataset are heavily interlinked so you can easily navigate from one context to another. Pay close attention when you change from one tool to another as the purpose and features change accordingly.

Below is a walkthrough of each of these four tools.

Top 100

The "Top 100" tool documents the checkout processes of the top 100 grossing e-commerce sites in the US. You're able to go through the checkout process of each site and see what they are doing right and wrong.

1. Slide through all the checkout steps for a particular site.
2. View all the Highlights for the currently displayed checkout steps - providing you with examples of guidelines violated or adhered to, at each specific checkout step. Each Highlight are found either in the fold-out pinned directly on screenshot, or in the "X Highlights" fold-out in the white sticky header. (Pro only)
3. Get a detailed breakdown of how the sites scored on each of the 63 guidelines.
4. For each Highlight, you'll have a direct link to the related guideline, describing the issue and solution. In some Highlights you'll also find a "detail" screenshot showing e.g. how the page looks when there's a form validation error. (Pro only)
5. Go to the next or previous checkout process using the forward and backward arrows in the white sticky header.

Note: some Highlights aren't pinned directly on the screenshot as they are generic to the checkout step and can only be found in the "x Highlights" fold-out in the white sticky header.

1. A complete list of the top 100 grossing e-commerce sites (in the US) sorted by their checkout usability score (top = best checkout experience, bottom = worst).
2. A drop-down that lets you filter the list by e-commerce industry, e.g. seeing only the checkout processes of "Apparel e-commerce sites", and / or filter the list by checkout type, e.g. seeing only the Accordion styled or One-Page checkout processes.

Step type

In the "Step-type" tool you navigate by type of checkout step, so you can see e.g. all the "Payment" steps. This is useful for getting inspiration on design patterns for a specific checkout step, but also for learning what guidelines you should pay particular attention to (via Highlights).

1. Slide through one type of checkout process step, e.g. the "Payment" step, for all the top 100 grossing e-commerce sites.
2. See all highlights for the current checkout step, thereby revealing which usability guidelines you'd typically need to be aware of e.g. when designing your "Payment" step. (Pro only)

Note: not all sites have all the step types in their checkout process (e.g. some sites don't have an "Deliver options" step), and some checkouts have multiple steps of the same type (e.g. account creation spread over two steps) - therefore the total number of specific step types will often be either below or above 100.

Guidelines (Pro only)

The "Guideline" tool is an extended online version of the 63 guidelines you find in your E-Commerce Checkout Usability report, that not only represent the report findings but also integrates with the benchmark data from the top 100 grossing e-commerce sites (the "Top 100" tool).

1. Benchmark stats telling you how many of the benchmarked sites violate or adhere to each specific guideline. For a complete list of the top 100 sites' guideline compliance, click the "See detailed ratings" link.
2. Examples of good and bad implementations. These examples are based on the highlights given when auditing each of the top 100 checkouts. Click on the image to get the full-size screenshot (in the "Top 100" tool).
3. The possibility to review your sites (see the "Review" tool) within each specific guideline. You'll have this option to the right in the white "sticky" header.
4. Proceed to the next/previous guideline.

Note that a few guidelines will only have a couple, if any, highlights. Typically guidelines related to a flow or to a specific page state that aren't feasible to pinpoint to a specific checkout step, e.g. "#4 Preserve all customer input despite errors in the form". If you want to further investigate those guidelines use the "See detailed ratings" page to get links to the checkout process that violated or adhered to the particular guideline.

Review (Pro only)

The "Review" tool is an interactive checklist that you can use to review your own checkout process (or your client's) according to the 63 checkout usability guidelines. Once you've reviewed a site, the Baymard Pro system will automatically calculate a usability score for it so you can compare the site against the "Top 100" benchmarked sites.

1. All 63 checkout usability guidelines with title, number and guideline text (from the report). All divided into the 6 guideline categories.
2. A direct link to each guideline (in the Guideline tool) in case you want to see real life implementations of the guideline before you evaluate your compliance.
3. 6 different rate buttons for each guideline: Adhered high should be given to a perfect implementation according to the guideline. Low is when you only partially adhere to the guideline. And vice versa for Violated. If a guideline can't be applied to your checkout, e.g. shipping options for a store that only sell digital downloads, then choose Not Applicable and it won't affect the overall score.

Besides knowing how to use the tool, you may find the following tips helpful:

• When you begin a review we recommend that you save full-page screenshots of all you checkout steps (including the cart step which we normally count as being a part of the checkout process). The full-size screenshots of each step are immensely helpful as a reference since it nearly impossible to remember all the details when you're 32 guidelines into the review.
• Don't rush it. Reviewing a checkout process will typically take 1-4 hours depending on its complexity and how thorough you are. If you don't have time to complete the review in full, no worries – you can easily return at a later date and pick up right where you left off. Better to do a thorough review over a few iterations than rush it all through in one go.
• If in doubt of the actual meaning of a guideline, or how you should rate your site, then either re-read it in its full in your copy of the Checkout Usability report, or click the specific guideline (go to the Guideline tool) and look at any available examples of real life implementations of the specific guideline. You're also welcome to contact us at info@baymard.com.
• Adhered high should be given to a perfect implementation according to the guideline. Low is when you only partially adhere to the guideline. And vice versa for Violated. If a guideline can't be applied to your checkout, e.g. shipping options for a store that only sell digital downloads, then choose Not Applicable and it won't affect the overall score.
• Make sure to go through all your checkout steps for each guideline as you may violate the guideline in one step while adhering it in another (in which case you should probably rate it Neutral, depending on the implementations).
• You need to rate at least 50 guidelines to get a reliable score (and preferably all 63 of them).
• Go read the Benchmark Methodology to learn how we audited the checkout processes of the top 100 grossing e-commerce sites.