Ecommerce UX: rules by page type
Ecommerce UX is the design that helps shoppers find a product, choose it with confidence, pay without surprises and track the order. Each page type has a job: the home page orients, the list lets people compare, the product page answers questions, the cart shows the total. The rules in this guide are based on user research by the Baymard Institute and the Nielsen Norman Group.
· Updated
In short
An online store is made of page types that follow one another. The shopper arrives through the home page or search, compares in the list and decides on the product page. Then they go to the cart and checkout, and finally come back to their account to ask about their delivery.
That's why I review online stores page by page. Each page type has its own question, and the rules change with that question. What is right on the product page can be wrong in the cart.
This guide is the starting point for my ecommerce pages. The details of checkout are on the checkout design page, the rules for every field on the form design page. Here I describe the core rules of each page type and where to start.
Figure: the page types a shopper goes through one after another. Each step links to its section below.
Rule list: filter by page type
The list below is the short version of the rules in this guide. When you review your own site, pick a page type and check only the rules for that page.
Pick a page type
This list has 21 rules.
Say on the first screen what you sell.
Why?
In the NN/g study, participants struggled with cluttered home pages that didn't show what was sold.
Source: NN/g, Harley 2018
Show the categories in the main menu, not hidden behind a single “Shop” link.
Why?
According to Harley, a user who doesn't find a product where they expect it assumes the site doesn't sell it.
Source: NN/g, Harley 2018
Search is an input field, not a link.
Why?
Nielsen wrote that search use on useit.com rose by 91% when he replaced the search link on the home page with a field.
Source: Nielsen 2001
Every product card shows name, photo, price and the other colours.
Why?
According to Harley, these four items belong on every card in the list at a minimum.
Source: NN/g, Harley 2018
Allow several values to be picked in the same filter.
Why?
Participants who couldn't combine options used filters less. 14% of sites don't allow it.
Source: Baymard 2025
Summarise the applied filters above the list.
Why?
Baymard recommends showing applied filters in an overview. 20% of sites don't show it.
Source: Baymard 2025
Offer sorting by price, rating, best-selling and newest.
Why?
In Baymard's test, a participant who didn't know the products chose the “Best-selling” sort. 69% of sites don't offer all four.
Source: Baymard 2025
Understand searches with attributes: “red jacket size M”.
Why?
39% of sites have problems with searches that include colour, size or material. Applying the attribute as a visible filter keeps the user in control.
Source: Baymard 2026
Answer searches that aren't for a product: “returns”, “shipping”.
Why?
Users expect search to cover the whole site. 66% of sites list products instead of help content for such searches.
Source: Baymard 2026
The “No results” page is not a dead end.
Why?
About half of sites offer no effective way to continue after a search with no results.
Source: Baymard 2025
Show the size selector as buttons, not a drop-down.
Why?
Hiding sizes in a menu makes it hard to see which are in stock. 57% of sites don't use buttons for sizes.
Source: Baymard 2026
Show availability as soon as a colour or size is picked.
Why?
The user shouldn't find out the product is sold out only after adding it to the cart.
Source: NN/g, Sherwin 2019
Put shipping and returns information next to the buy area.
Why?
60% of users look for returns information on the product page. 44% of sites show neither the information nor a link there.
Source: Baymard 2026
Confirm “Add to cart” clearly.
Why?
With feedback that was too weak, some users thought they had added the product and others added it again and again. A small number on the cart icon is often missed.
Source: NN/g, Sherwin 2019; Schade 2014
Show the total, including shipping, in the cart.
Why?
40% of checkout abandoners named extra costs that were too high, 12% a total they couldn't see up front.
Source: Baymard 2025
Let the discount code be entered early, or apply it automatically.
Why?
According to NN/g, a discount that is hard to redeem undermines trust.
Source: NN/g, Schade 2014
Make guest checkout the most prominent option.
Why?
18% of checkout abandoners said the site wanted them to create an account.
Source: Baymard 2025
Don't hide product and order details in the order list behind collapsed sections.
Why?
Hiding details in collapsed sections performed in testing as badly as not showing them at all.
Source: Baymard 2026
Show order tracking on your own site.
Why?
Leaving tracking to a third-party site often doesn't meet the need for information and navigation. In Baymard's quantitative study, order tracking was the most important self-service feature.
Source: Baymard, Collins 2026
Test the main menu and search suggestions on a phone specifically.
Why?
In Baymard's mobile benchmark, the main menu, search suggestions and forms were the weakest areas.
Source: Baymard, mobile research
Keep tap targets big enough for a finger.
Why?
This is my observation. On a small screen, a wrong tap means the wrong size or the wrong product in the cart.
Source: my observation
Pick a page type and the list shows only the rules for that page. The “Why?” line under each rule opens the reason and the source. Some rules appear under two page types. The percentages come from Baymard studies.
The shares of sites in the list say how many of the large sites Baymard studied don't follow the rule. The percentages for cart and checkout, on the other hand, are abandonment reasons shoppers gave. Both describe only the sample studied, not the whole market.
Home page: orient people
The home page's job is orientation. According to Aurora Harley's 2018 NN/g guidelines, the home page explains what the site sells and why it is different. Study participants struggled with cluttered home pages that didn't show what was sold.
Show the categories clearly in the main menu. Harley advises against hiding them behind a single “Shop” link. A user who doesn't find a product where they expect it assumes, according to Harley, that the site doesn't sell it.
The same guidelines recommend that a product can sit in more than one category. A vacuum flask, for example, should be found under both “Kitchen” and “Camping”. That is an information architecture decision, made before the menu is designed.
Search on the home page must not stay a link you click. It has to be a field you type into. Jakob Nielsen wrote this in 2001 and reported that search use on his site useit.com rose by 91% when he replaced the link with a field. He also recommended putting search on every page, because you never know where a user gets lost.
In audits I often see this picture: rotating promotional images fill the first screen and the categories sit further down. The promotion may matter. But a first-time visitor first wants to understand what is sold here.
Category and list page: let people compare
The list page is where people compare. In Baymard's 2025 product list benchmark, 58% of desktop sites and 78% of mobile sites scored between “poor” and “mediocre”.
The product card
According to Harley's guidelines, every card in the list needs at least four things: a short, meaningful name, a photo big enough to compare, a hint that other colours exist, and the price.
Baymard adds two more. Group a product's colours on one card instead of separate cards; 42% of sites don't. For products sold in different quantities, show the unit price; 67% of sites don't.
Subcategories
NN/g recommends including subcategories on the list page and showing them above the list, separate from the filters. In the study, the most successful pages showed subcategories this way, and they were found more easily. How the number of options affects decision time is described by Hick's law.
Filters and sorting
According to Baymard, five filters belong on every site where they apply: price, user rating, colour, size and brand. 51% of sites don't offer all of them. When participants couldn't pick several values in the same filter, they used filters much less, or less effectively.
Show applied filters as an overview above the list. For sorting, offer four options: price, user rating, best-selling and newest. In Baymard's test, a participant who didn't know much about speakers switched to the “Best-selling” sort because she didn't know what to pick.
Be careful with horizontal filter bars. According to Baymard, the filter options in these bars aren't visible by default, and some participants missed the “All filters” button. This layout only works with a limited number of filter types.
Search: understand the users' language
About half of shoppers go to the search field first when looking for a product. In Baymard's 2026 search benchmark, roughly half of participants did. In the same benchmark, 56% of sites didn't meet users' search needs well enough.
Baymard divides searches into eight types. The table gives an example for each type, written by me, and the share of sites with problems for that type.
| Query type | Example | Sites with problems |
|---|---|---|
| Exact name or model number | “KX-200 vacuum” | 12% |
| Product type | “jacket” | 20% |
| Attribute | “red jacket size M” | 39% |
| Use | “Mother’s Day gift” | 43% |
| Abbreviation and symbol | “TV” and “television” | 54% |
| Compatibility | “bags for KX-200 vacuum” | 44% |
| Symptom | “knee pain” | 37% |
| Not a product | “returns”, “shipping cost” | 66% |
The biggest gap is with searches that aren't for a product. Someone who types “returns” expects the returns page, but the site often lists products. According to Baymard, users expect the search field not to be limited to products, but to cover the whole site.
For searches with attributes, Baymard recommends applying the attribute as a visible filter. If searching for “red jacket” visibly sets the filter “Colour: red”, the user understands what happened and can remove it if needed.
Spelling variants come on top of that. People type “tshirt” or “t shirt” instead of “t-shirt”, or “sneaker” where the catalogue says “trainer”. Baymard recommends tolerating typos in searches for exact names. Treating such variants as the same word is, in my experience, the everyday version of that.
When there are no results
According to Baymard, about half of sites offer no effective way to continue after a search with no results. Recommended paths include matching categories, simplified alternative searches and contacting support. Writing only “search tips” isn't enough.
A warning from Nielsen in 2001 still helps: if search is limited to a section, the default scope should be “whole site”. If the limited search finds nothing, there should be a clear way to search the whole site.
Product page: answer questions
The product page has to answer all of the shopper's questions. Katie Sherwin's 2019 NN/g guidelines list the essentials:
- A descriptive name and clear photos.
- An image you can enlarge.
- A price that includes product-specific fees.
- Understandable options and availability.
- An “Add to cart” button that gives clear feedback.
- A short, informative description.
In Baymard's 2026 product page benchmark, only 48% of desktop sites scored “good” or “decent”. On mobile it was 38%. I collected common gaps below.
Options and availability
Show sizes as buttons, not in a drop-down. 57% of sites don't use buttons for the size selector. According to Baymard, a menu makes it hard to see which size is in stock.
According to Sherwin, availability has to be clearly visible, especially when it changes with colour or size. The user shouldn't find out the product is sold out only after adding it to the cart.
Images
In Baymard's tests, 42% of users tried to judge a product's size from the photos. Yet 37% of sites offer no photo showing the product next to something of known size. Baymard recommends showing a person or an object of known size next to the product, such as a laptop next to a backpack.
Shipping, returns and the total
In Sherwin's study, participants comparing sites added shipping to the price. That's why shipping information belongs on the product page.
Returns are looked for there too. According to Baymard, 60% of users look for returns information on the product page, but 44% of sites give neither the information nor a link there. 67% of sites also show no estimate of the total next to the buy area.
Add to cart
Confirm the addition clearly. In Sherwin's test, feedback that was too weak made some users think they had added the product, while others added it again and again. Amy Schade of NN/g wrote back in 2014 that a small number on the cart icon is often missed.
Reviews
Sherwin recommends showing positive and negative reviews and offering a summary; many users look at the negative ones first. According to Baymard, 89% of sites don't respond to negative reviews. A calm reply to a complaint says more to me than the star average.
Cart: show the total
The cart's job is to show the total and let the user change their decision easily. The average cart abandonment rate Baymard calculates from 50 studies is 70.22%.
Part of the abandonment has nothing to do with design. According to Baymard, a large share of US online shoppers have abandoned a cart because they were “just browsing”. But 40% of checkout abandoners named extra costs that were too high, and 12% a total they couldn't see up front.
Design can fix those two: show the total, including shipping, in the cart. All the reasons and the checkout steps are in a table on the cart abandonment page; I won't repeat them here.
If you have a free shipping threshold, write in the cart how much is missing. The sentence “$14 more for free shipping” saves the user the maths. That's my design suggestion, not a research finding.
For discount codes, Schade recommends applying an advertised discount automatically when the user qualifies. If a code is needed, it should be easy to enter well before checkout. Making a discount hard to redeem undermines trust, according to Schade.
Changing the quantity, removing a product and saving it for later each take one tap. If the user removes a product by mistake, an undo has to be visible. According to Baymard's product page benchmark, save-for-later features are hard to reach or use on 89% of sites.
Checkout: no surprises
I cover checkout in detail on its own page, so I keep it short here. The basic rule: checkout has no surprises. A required account or a fee in the last step are things users don't expect.
- Make guest checkout the most prominent option. On Baymard's list, 18% of abandoners named a required account as the reason. The best-known example is the story of the $300 million button.
- Cut the number of fields and show errors at the field concerned. The rules for each field are on the form design page.
- The error message tells the user what to do. “Something went wrong” isn't enough.
For design tricks that pressure the user near the end, read the guide to dark patterns.
Account and order tracking: don't forget what comes after
The sale doesn't end at checkout. A few days later the user goes into their account and looks for their delivery, the invoice or the return. In Baymard's quantitative study, 50% of participants picked order tracking as the most important self-service feature.
Order list and tracking
According to Baymard's accounts research, published in September 2026, the basic product and order details belong visibly in the order list. Hiding them in collapsed sections performed in testing as badly as not showing them at all.
For the tracking page Baymard recommends six details: estimated delivery date, a status bar, the carrier's name, a clickable tracking number, the tracking history and an overview of the products in the parcel. Only 33% of the sites studied give all six, and 25% don't reliably show the delivery date.
Show tracking on your own site if you can. According to Baymard, sites that send the user to a third-party page often don't meet the need for information and navigation. Those pages also didn't link straight back to the order details.
Returns and sign-in
According to the same research, participants often struggled to tell whether a product could be returned. Silently removing the “Start a return” button once the window had passed confused them. Instead, say that the window has passed and what the user can do.
In one of Baymard's tests, participants saw no hint at all about password rules on the sign-in screen. They also couldn't show the password they had typed. 60% of participants viewed optional two-factor authentication positively. But security steps must not block paying and managing the account.
Mobile: rethink every page on the phone
Mobile is a layer over every page type. According to Baymard, mobile often makes up 50% of traffic for many online stores. Yet on some sites the mobile version turns fewer than half as many visitors into customers as desktop does.
In Baymard's benchmark of 138 large mobile sites, none scored “good” overall, and 62% were “mediocre” or worse. The weakest areas were the main menu, search suggestions, forms and site-wide elements.
On a small screen the user doesn't see the whole page. In Baymard's words, even the best mobile patterns are compromises. So I don't shrink the desktop design; I rebuild each page type for the phone.
- Open filters in a full-screen panel and show the number of applied filters on the button.
- Put the cart button where the thumb reaches. For the size and distance of targets, read Fitts's law.
- In forms, open the right keyboard: a number pad for the phone field, a keyboard with @ for email.
- Actually order something on your own phone, over mobile data. In my experience this shows the most snags that don't show on desktop.
If you also have an app, read the mobile app design guide for the topics of app screens.
Where to start
Don't try to apply every rule at once. First look in your analytics at which page type loses the most users: is the step from list to product weak, or the one from cart to checkout?
Pick the step with the biggest loss. Open that page type in the rule filter and check rule by rule.
Try it yourself on a phone. Search for a real product, filter, add it to the cart and pay. Note every place you get stuck.
Confirm it with users. A usability test with a few people shows snags you can't see yourself.
Measure the change. If you have enough traffic, compare two versions. Work out the sample size first with the A/B test calculator.
If you want this done with an outside eye, an audit is the right start. I describe how it runs in the UX audit guide.
My note
The problem I see most often in ecommerce audits: the team puts a lot of work into the home page and little into the list page. The home page gets discussed in meetings, the list page stays the same for years. From everything I see, though, the shopper makes the real decision in the list, between filter and photo.
In second place come surprise costs. If shipping, a payment surcharge or a service fee only shows up in the last step, the user looks at the whole site with suspicion. This problem is solved less by a design change than by the decision to show the information early.
And then there's the account page. Teams often design the post-purchase screens last and fastest. To me, the answer to “Where is my parcel?” also shapes the next order.
Questions
Is ecommerce UX the same as web design for online stores?
The two overlap a lot. Web design also covers how things look. Ecommerce UX focuses on whether the shopper can find a product, choose it, pay and track the order.
Where do I start with my store's UX?
With the page type where your analytics show you lose the most users. On most sites that's the list page, the product page or the cart. Check the rules for that page, then confirm them with users.
Do these rules apply to a small store too?
Yes. The shares come from large sites Baymard studied, but the user behaviour behind the rules is the same. In a small catalogue filters and search can be simpler; the total and availability still matter.
Why aren't the checkout rules covered in detail here?
Checkout is a topic for a whole page. Details such as guest checkout, the step indicator and error handling are in the checkout design pattern.
Sources (12)
- Aurora Harley, UX Guidelines for Ecommerce Homepages, Category Pages, and Product Listing Pages, Nielsen Norman Group. August 12, 2018; rules for home page, category and list
- Katie Sherwin, UX Guidelines for Ecommerce Product Pages, Nielsen Norman Group. November 24, 2019; product page essentials
- Amy Schade, Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid, Nielsen Norman Group. January 26, 2014; add-to-cart feedback, discount codes
- Jakob Nielsen, Search: Visible and Simple, Nielsen Norman Group. May 12, 2001; search field and scope, 91% more
- Mark Crowley, Product List UX 2025: 8 Common Pitfalls & Best Practices, Baymard Institute. updated September 9, 2025; shares for list, filters and sorting
- Edward Scott, Ecommerce Search UX 2026: 8 Search "Query Types" UX Best Practices, Baymard Institute. updated April 29, 2026; eight query types and shares
- Sonia Sousa, Search UX: 5 Proven Strategies for Improving "No Results" Pages, Baymard Institute. updated February 18, 2025; paths after a search with no results
- Edward Scott, Product Page UX 2026: 10 Pitfalls and Best Practices, Baymard Institute. updated March 18, 2026; product page shares
- Baymard Institute, 50 Cart Abandonment Rate Statistics 2026. accessed 2026-11-04; 70.22% average, abandonment reasons, just browsing
- Sally Collins, Accounts & Self-Service UX Research Update and Expansion: 3 Key Takeaways, Baymard Institute. September 9, 2026; order list, returns, sign-in, two-factor authentication
- Sally Collins, Always Provide 6 Key Order-Tracking Details on the Ecommerce Site, Baymard Institute. updated May 5, 2026; six tracking details, 50% in the quantitative study, third-party pages
- Baymard Institute, Mobile E-Commerce UX. accessed 2026-11-04; benchmark of 138 mobile sites