All testsAli Demirbaş - Lab

Category & Listing

2 vs 3 Column Product Grid on Mobile A/B Test

A three-column grid shows more products at once but makes images smaller. A two-column grid gives each product more visual space but shows fewer options at a time. The better layout may depend on how much visual evaluation the category requires.

A/B test scenario. This page is a test plan, not the result of a real experiment.

  • Category listing
  • Mobile category-page purchase conversion rate

Option A vs Option B

How many are shown is the variable, not what they look like.

Changed
Quantity
Page
Category listing
Difference
changed

Hypothesis

A two-column grid may make products easier to judge with larger images, while three columns let shoppers scan more options on one screen. In categories where the image drives the decision, two columns could deliver the higher mobile category-page purchase conversion rate; where quick comparison matters more, three columns could.

Test plan

When to run this test

If session recordings show mobile shoppers trying to zoom into images, bouncing quickly from product pages back to the list, or scrolling a long way with few product taps, they may not be able to judge products well or may see too few options. If column count is the lever, the grid that suits the category helps shoppers tap the right product more easily, add it to the cart and buy. If the problem is slow-loading images, look at that first, because the number of columns will not fix it.

How to measure success

Mobile category-page purchase conversion rate

Compare purchases among mobile visitors assigned to each grid layout.

Also track

  • Listing-to-product click-through rateCheck whether click behavior changes.
  • Products seenCount actual product impressions; the same scroll depth may expose different numbers of products in each grid.
  • Add-to-cart rateTrack whether add-to-cart changes.
  • Quick returnsReview rapid back navigation and usability findings; a quick return alone does not prove a misclick.

How to set it up

  • ColumnsCompare a two-column and a three-column mobile grid.
  • Keep constantKeep card content, image ratio, product order and prices unchanged.
  • Downstream behaviorRead product-page visits and add-to-cart alongside purchases.
  • CategoryReview category differences without assuming a winner in advance.
  • Separate testTest simplifying card content separately.

What to watch when reading the result

  1. 1Seeing more products in three columns is not a gain by itself, since the same scroll depth shows a different number of products in each grid. The mobile category-page purchase conversion rate decides the test; if the add-to-cart rate drops, a higher listing-to-product click-through rate does not earn a rollout, and quick returns should be read alongside usability findings.
  2. 2Nothing here speaks beyond the mobile listing page; review category differences separately without assuming a winner in advance. Touch targets in the three-column grid must stay usable and prices and discount labels must stay readable; if either breaks, the difference cannot be pinned on the column count.
  3. 3Breaking results down by category makes each slice smaller. Before you rely on a small or unclear category-level gap, check with the sample size calculator whether each slice has enough traffic.

Frequently Asked Questions

Is showing more products in a three-column grid a gain?

Not automatically. Use mobile category conversion as the primary outcome. Count actual product impressions because identical scroll depth exposes different numbers of items.

How large should mobile product-card touch targets be?

WCAG 2.2 AA specifies 24 by 24 CSS pixels with spacing provisions and exceptions. The enhanced AAA target is 44 by 44. Maintain usable controls and readable prices in both layouts.

Do quick returns indicate accidental taps?

Not necessarily. Combine return patterns with interaction evidence or usability observations. Product categories can differ in how much visual inspection buyers need.