Checkout design: rules and an example

In short

The checkout is the screen where you make money. Anyone who gets here has picked a product and put it in the cart. Some of the people you lose here had already made up their mind.

According to the Baymard Institute's list, updated on 22 September 2025, the average cart abandonment rate is 70.22%. The figure is the average of 50 studies. Out of 10 people who put something in their cart, 7 don't order.

Design can't solve every abandonment. But according to the same page, a large online store can raise its conversion rate by 35.26% on average by improving its checkout design. On this page I describe the pattern behind those improvements.

• Don't require an account; put guest checkout first.
• Show the total, shipping included, already in the cart.
• Make the progress indicator match the real steps one to one.
• Don't wipe what was typed when there's an error, not even the card number.
• Set the card fields apart visually and put the trust signal right next to them.
• Open the right keyboard on mobile and don't break the browser's autofill.

Why shoppers abandon checkout

Baymard asks US online shoppers why they abandoned a purchase. The most common answer is "I was just browsing" (42%). Leaving that group out, the other reasons rank like this:

Reason for abandoning	Share
Extra costs too high (shipping, tax, fees)	40%
Delivery was too slow	20%
I didn't trust the site with my card details	19%
The site wanted me to create an account	18%
Checkout too long or complicated	17%
Website errors or crashes	17%
Returns policy wasn't satisfactory	13%
Couldn't see the total cost up front	12%
Card was declined	10%
Not enough payment methods	9%

Source: Baymard Institute, cart abandonment list, as of 22 September 2025. The shares add up to more than 100 because one person can give several reasons.

Looking at the table as a designer, one thing stands out. More than half of the reasons have nothing to do with the product and everything to do with the checkout itself. Forced accounts, long forms, errors, a hidden total and the feeling of safety are direct interface decisions.

Shipping cost and delivery time, on the other hand, are business decisions. Design can't make them cheaper. But design decides when and how they're shown, and that affects abandonment.

Checkout design rules

1. Make guest checkout the most prominent option

Forced sign-up is the best-known checkout trap. I tell its most famous example on the $300 million button page. Here I'll just give today's rule.

According to a 2023 Baymard article by Edward Scott, 47% of sites don't make guest checkout the most prominent option. It isn't enough for the option to be on the page; it has to be visible at first glance.

The same article describes how to do it:

• Put the word "guest" in the label, as in "Check out as guest". That's the word users look for. A vague label like "Continue" slows them down.
• Make it a button, not a plain link. In Baymard's tests the link was overlooked on desktop and on mobile. A button is also easier to hit on a touchscreen.
• On the account step, put it at the very top, above the sign-in and sign-up fields.
• Let people who have an account continue as a guest too. According to Scott, forgotten passwords and interruptions during a reset can lead to abandonment.

If you want accounts, move the offer to the end. According to Scott's September 2023 article, 42% of sites interrupt users with an account offer before or during payment.

Scott suggests offering the account on the confirmation page. By then the details are already entered, so a password is all that's needed.

Don't burden people who do create an account with password rules either. Every rule they only learn from an error message is one more hurdle right before the purchase.

2. Make the progress indicator show the real steps

In a multi-step checkout, the first thing users wonder is "How much longer?" The progress indicator answers that, but only if it's accurate.

The Baymard guide by Carl MacDonald, published in April 2026 and updated in November 2026, sets a clear rule: the indicator is a one-to-one map of the checkout. Hiding or merging steps disorients users.

The same guide recommends making completed steps clickable. Users try to go back through the indicator. If they can't click it, they end up at the browser's back button.

That's why the guide also requires the back button to work and form data to be kept when going back.

My own rule here: if the indicator says "Step 2 of 4", no surprise screen follows step four. If there's a step outside your control, such as confirming with the bank, announce it in the payment step.

3. Show the total cost early

The biggest reason in the table is extra costs (40%). Add "couldn't see the total cost up front" (12%). Both come down to the same problem: users only find out what they'll pay at the last step.

MacDonald's guide recommends showing shipping and fees already in the cart, not at the last click. If the address isn't known yet, an estimated shipping cost or the free-shipping threshold is better than nothing.

A service fee that only appears at the last step feels like a trick to users. In the dark patterns guide I describe this behaviour as "hidden costs". Even if the team doesn't do it on purpose, users feel the same.

Repeat the amount on the payment button too. A button that says "Pay $129.80" instead of "Place order" makes the final check easier.

4. Handle errors without wiping input

I cover where and how an error message should appear in detail on the form design page. In checkout, two points come on top.

First: clearing the form on an error. MacDonald's guide counts this as a critical mistake. According to a February 2024 article by Sonia Sousa, 34% of sites wipe the card number when there's an error.

Sousa recommends validating the non-card fields in the browser first. That way the page doesn't reload over a missing address detail and the card data isn't lost. Typos in the card number can be caught while typing with the Luhn check.

Second: how specific the message is. A message should depend on the kind of error. Someone who reads "Invalid card number" has to guess. Someone who reads "The card number has 16 digits; you entered 15" knows what to do.

A card declined by the bank is also an error case. Tell users to try another card or payment method, and keep their address details.

5. Build trust right at the card fields

19% of those who abandon say they didn't trust the site with their card details. But users don't measure security technically. According to a 2012 Baymard article by Jamie Holst, they judge it by gut feeling.

On an HTTPS page, every field is encrypted the same way. Even so, Holst recommends setting the card fields apart from the rest of the form with a border or a different background colour. The security badge also belongs right next to the card fields, not in the margin or at the bottom of the page.

Trust doesn't come only from badges; the returns policy is in the table too, at 13%. A short line in the checkout such as "Free returns within 30 days" helps more than a link to the policy. Write your own terms in that line.

The phone number is also about trust. According to Baymard's 2026 checkout benchmark, 47% of sites don't explain why they ask for a phone number. In the same article, 68% of respondents to a Baymard survey say they're reluctant to give their number. Write one sentence under the field: "The carrier texts you on delivery day."

6. Design mobile on its own terms

According to the same benchmark, 59% of mobile sites have a "mediocre" or worse checkout. On a phone, every extra field and every wrong keyboard costs more effort than on desktop.

• Open the keyboard that fits the field. ZIP code and card number get the number pad.
• Don't break the browser's autofill. Baymard's guide explicitly asks for full autofill compatibility. The right autocomplete values in the HTML take care of it.
• Don't open the keyboard as soon as the page loads. Baymard writes that it can otherwise cover the guest checkout button.
• Group the card number with spaces. The field on screen should look like the card in your hand.
• Make buttons big enough for a finger. WCAG 2.2 criterion 2.5.8 (level AA) asks for targets of at least 24 × 24 CSS pixels, with some exceptions. Make the payment button bigger; Fitts's law explains why a large, close target is hit faster.

And don't ask for the same information twice. WCAG 2.2 criterion 3.3.7 (level A) requires information already entered to be either filled in automatically or available to select. The W3C's example comes straight from checkout: the "Billing address is the same as shipping" checkbox.

If you're building checkout in a mobile app, the app design guide is a good starting point for the screen structure.

Guest checkout vs forced sign-up

Below are two checkout flows from the same shop. Cart, item and amount are the same. The only difference: one asks for an account before payment.

Go through both to the end. It works with the keyboard too: Tab to the button, then Enter. At each step the focus moves to the new step's heading and the counter updates.

Try both flows

Guest checkout

Asks for no account. Account creation moves to the end and is optional.

4 steps, 8 fields (not counting the optional password at the end).

1. 1. Cart

   Wireless headphones × 1$124.90

   Shipping (2 business days)$4.90

   Total$129.80

   If you have an account, you can sign in. You don't have to.

2. 2. Delivery and contact

   EmailWe'll send the order summary to this address.
   Full name
   PhoneThe carrier texts you on delivery day.
   Street address
   ZIP code
   Billing address is the same as shipping

3. 3. Payment

   Your card details are sent encrypted. When you pay, your bank may ask you to confirm in its app.

   Card number

   Expiry (MM/YY)

   Security code (CVC)

   To pay$129.80

4. 4. Confirmation

   Your order is in. The summary went to [email protected].

   If you like, create an account now. Your details are already here; a password is all it takes.

   Password (optional)

Forced sign-up

Asks for an account and email verification before payment.

6 steps, 11 fields.

1. 1. Cart

   Wireless headphones × 1$124.90

   Shipping (2 business days)$4.90

   Total$129.80

2. 2. Create an account

   To continue, you need to sign up.

   Email
   PasswordAt least 10 characters, one capital letter, one number and one symbol.
   Repeat password
   Full name

3. 3. Verify your email

   We sent you a 6-digit code. You can't continue without it.

   Verification code

4. 4. Shipping address

   Phone
   Street address
   ZIP code

5. 5. Payment

   Your card details are sent encrypted. When you pay, your bank may ask you to confirm in its app.

   Card number

   Expiry (MM/YY)

   Security code (CVC)

   To pay$129.80

6. 6. Confirmation

   Your order is in. But first you created an account and verified your email.

Two checkout flows from an example shop, not a real website. The fields hold sample data and can't be edited; you don't need to enter real card details. Go through both flows to the end. The counter above each flow shows the step and how many fields you've met so far.

The forced sign-up flow adds two steps and three fields. The counter doesn't show the real cost. Users first read the password rules. Then they go to their inbox to find the code and drift away from the checkout.

The guest flow lets you create an account too, just at the end. The confirmation page has a single password field, because email, name and address are already entered. That's exactly the structure Scott recommends.

Look at the progress indicator too. In both flows the bar shows the real number of steps. Because the forced sign-up flow shows a six-part bar on the very first screen, users see right away how long the road is.

Checkout optimization: where to start

When I optimize a checkout, I start with the data. In analytics I look at how many people enter each step and how many reach the next one. Where the biggest drop is, I look first.

1. Go through the flow yourself on a phone, to the end. With a real order and a real card. Note every step and every surprise.

2. Drop the forced account. In my audits this is often the quickest win. If guest checkout already exists, check whether it's the most prominent option.

3. Bring the total forward. Shipping and fees are in the cart.

4. Try the error cases one by one. Missing field, declined card, wrong coupon: see what the form does. If data gets wiped, fix that first.

5. Count the fields and cut. For each field, ask: "Can the order go out without it?"

6. Measure the change. After each change, look again at the drop-off for the same step. If you change several things at once, you won't know what worked.

If you want your checkout checked by someone from outside, that's what the UX Audit is for. I go through one flow, such as mobile guest checkout, from start to finish.

My note

The problem I see most in checkout audits is surprise costs. An item that costs $124.90 in the cart turns into a different number on the last screen, with shipping and a service fee added. At that moment users see the site as a merchant who haggles.

In second place is the back button. Users press back to fix their address, and the whole form is empty. The team doesn't notice, because the test account always has everything saved.

That's why I always try the checkout in a fresh browser, as a guest, on a phone. The flow the team sees every day isn't the flow a customer sees for the first time.

Checklist

• There's guest checkout, the label says "guest", and it's a button at the very top.
• The account offer comes on the confirmation page and asks only for a password.
• Shipping and fees are visible in the cart; the payment button shows the amount.
• The progress indicator matches the real steps one to one; completed steps are clickable.
• Nothing is wiped on an error, not even the card number.
• The error message says what's wrong and how to fix it.
• The card fields sit in their own box, with the trust signal right next to them.
• The phone field says why it's needed.
• On mobile the right keyboard opens and autofill works.
• If billing and shipping addresses match, one checkbox is enough.