# E-commerce UX: 10 Patterns That Reduce Cart and Checkout Abandonment

> Ten e-commerce UX patterns for product pages, cart and checkout, mapped to Baymard data on why shoppers abandon carts. What each pattern fixes and how to start.

Published: 2025-02-14 · E-commerce · Bang Digital · https://bang-digital.com/en/blog-ecommerce-ux-patterns.html

The average documented cart abandonment rate is 70.22% according to Baymard Institute, calculated across 50 studies. A large share of abandonment comes from browsing and comparison and cannot be designed away, but the remaining reasons are mostly fixable through design. The ten patterns below are grouped by the problem they address.

## Key takeaways

- Extra costs are the most common fixable reason for abandonment (40% of shoppers who were not just browsing), so shipping costs belong on the product page and in the cart.
- Forced account creation drives away 18% of such shoppers; guest checkout with an optional account after the order removes this barrier.
- Baymard measures an ideal checkout at 12–14 form elements against an average of 23.48 in US checkouts.
- Each pattern is introduced and measured separately, starting with the largest drop-off point.

## Reasons for abandonment

Baymard surveys US online shoppers about why they abandoned an order. Excluding the segment that was just browsing, the distribution of reasons relevant to the patterns in this article is shown below. Respondents could name several reasons, so the values do not sum to 100%.

| Reason for abandonment | Share of shoppers, % |
|---|---|
| Extra costs too high (shipping, tax, fees) | 40 |
| Delivery was too slow | 20 |
| Did not trust the site with credit card information | 19 |
| The site wanted me to create an account | 18 |
| Too long or complicated checkout process | 17 |
| Could not see or calculate the total order cost up front | 12 |
| Not enough payment methods | 9 |

Source: Baymard Institute, list last updated 22 September 2025.

## Checkout patterns

| № | Pattern | Reason addressed |
|---|---|---|
| 1 | Shipping cost or the free-shipping threshold shown on the product page and in the cart | Extra costs; total cost not visible up front |
| 2 | Guest checkout, with account creation offered after the order | Forced account creation |
| 3 | One-page checkout with inline field validation and a reduced number of form elements | Long or complicated checkout |
| 4 | Express payment buttons placed in the cart before the checkout form | Not enough payment methods; long checkout |

Baymard's testing shows that an ideal checkout can be as short as 12–14 form elements, while the average US checkout displays 23.48 elements by default. For large e-commerce sites, Baymard estimates the conversion gain available from better checkout design alone at 35.26%.

## Product page and return visit patterns

| № | Pattern | Problem addressed |
|---|---|---|
| 5 | Stock indicators shown only when stock is actually low | Fake urgency undermines trust, especially among repeat buyers |
| 6 | Sticky add-to-cart bar that appears after the main button scrolls out of view | The primary action disappears while the user reads descriptions and reviews |
| 7 | Image zoom on hover or tap without opening a separate lightbox | A separate view interrupts visual evaluation of the product |
| 8 | Visual swatches or button groups for variants instead of dropdown menus | A dropdown requires two actions and hides the options |
| 9 | Rating and a few specific reviews placed next to the purchase decision | Reviews at the bottom of a long page are not seen at the moment of decision |
| 10 | Recently viewed products kept across sessions | Users research on one device and buy later on another |

Pattern 10 stores browsing history, so in the EU it depends on the consent mechanism the site uses for cookies and similar storage.

## Implementation order

None of the patterns requires a full redesign. Each is introduced and measured separately: the funnel report shows the step with the largest drop-off, the pattern that addresses it goes first, and the next one is added after the effect has been measured.

Related reading: [Why Your B2B Website Doesn't Convert](https://bang-digital.com/en/blog-b2b-website-conversion.html), [Custom Website vs Template](https://bang-digital.com/en/blog-custom-website-vs-template.html), [Services](https://bang-digital.com/en/index.html#services).

## FAQ

### What is the average cart abandonment rate?

Baymard Institute calculates an average documented rate of 70.22% across 50 studies, with the list last updated in September 2025.

### What is the main reason shoppers abandon a cart?

Excluding shoppers who were just browsing, 40% cite extra costs such as shipping, taxes and fees as too high, according to Baymard Institute.

### How many form fields should a checkout have?

Baymard's testing shows that an ideal checkout flow can be as short as 12–14 form elements, or 7–8 form fields, while the average US checkout shows 23.48 elements by default.

## Sources

1. [50 Cart Abandonment Rate Statistics 2026](https://baymard.com/lists/cart-abandonment-rate), Baymard Institute