Category & Listing
List View vs Grid View on Category Pages A/B Test
A grid shows several products at once, while a list gives each product more horizontal space. With product information held constant, layout may affect how visitors compare options and choose what to inspect. The result may vary by category.
A/B test scenario. This page is a test plan, not the result of a real experiment.
- Category listing
- Product detail click-through rate
Option A vs Option B
Two alternatives; neither is the incumbent.
- Changed
- Options
- Page
- Category listing
- Difference
- changed
Hypothesis
A grid may make quick comparison easier by placing more products side by side, while a list may make close inspection easier by giving each product more room. The layout that fits how shoppers browse this category may be the one that lifts the product detail click-through rate.
Test plan
When to run this test
Heatmaps showing card details being skipped, session recordings of visitors opening a product and returning to the list right away, or heavy use of the view switcher suggest that the card layout on the category list makes choosing harder. If the idea holds, one layout brings more product detail visits without a material drop in products viewed. Before launch, decide how to handle visitors with a saved layout preference; if the problem is missing product details or poor image quality, fix that first.
How to measure success
Product detail click-through rate
Compare product-page visits among visitors who see each category-list layout.
Also track
- Purchase conversion rate (CR)Check whether purchases change.
- Products viewedMake sure the number of products actually seen does not fall materially.
- Page load timeEnsure the layout change does not slow the page.
- Return-to-list rateReturning to the list can be normal comparison behavior; interpret it alongside subsequent actions.
How to set it up
- LayoutCompare list and grid views with the same product information.
- Saved preferencesDecide how to handle visitors with a saved layout preference; do not override it.
- Keep constantKeep sorting, prices, product details and image quality unchanged.
- DensityReview the number of products seen alongside clicks.
- CategoryCheck category differences before expanding the result.
What to watch when reading the result
- 1Even if product detail visits rise, do not call that layout the winner when products viewed drop materially or the page slows down. Do not treat returns to the list as a problem on their own; read them together with subsequent actions and purchase conversion rate.
- 2The existing view switcher and preference saving must work the same way in both arms; if either broke, the gap says nothing reliable about the layout. Report separately the share of visitors in each arm who switch views themselves, since that also tells you something about the layout.
- 3The result may vary by category, so do not apply a winner from one category to all of them. If category-level differences are likely to be small, check with the sample size calculator whether each category has enough visitors, and leave the result open where it does not.
Frequently Asked Questions
What happens to users with an existing layout preference?
Define their eligibility beforehand and preserve explicit saved preferences. Keep the view switcher and preference-storage behavior consistent in both arms.
Are more returns to the list a problem?
They can be normal comparison behavior. Interpret them with subsequent actions and actual product exposure. Use product-page reach as the primary outcome.
Can one category’s winning layout be applied everywhere?
Not automatically. Product information needs differ. Assess relevant categories before extending the result rather than treating one experiment as a universal layout rule.
More tests in Category & Listing
All testsMarking Already-Viewed Products A/B Test Example
Category listingPurchase conversion rate
Add a small Viewed badge to product cards the shopper already opened and measure orientation, re-open behavior and conversion.
Variant Selector on Product Cards A/B Test Example
Category listingPurchase conversion rate
A listing-page experiment idea: the control card has no variant picker, the variant adds a color and size selector. See the setup, arms and CR metric.
Which Detail Should Lead a Product Card? A/B Test
Category listingPurchase conversion rate (CR)
An open test question about product card hierarchy: price, delivery, rating, promotion or stock. No fixed arms yet, only the variable and its trade-offs.