Which Layout Wins? A/B Test Insights on Tile, Collapse, Paging and Sliding Designs

This article presents a series of A/B experiments comparing flat expansion versus collapse, paging swipe, and horizontal swipe layouts, revealing how different UI designs affect revenue, user value, click-through, and conversion rates in e‑commerce venues.

JD.com Experience Design Center
JD.com Experience Design Center
JD.com Experience Design Center
Which Layout Wins? A/B Test Insights on Tile, Collapse, Paging and Sliding Designs

Introduction

In this issue of Lazy Research we conducted A/B tests comparing “flat expansion vs. collapse”, “flat expansion vs. paging swipe”, and “flat expansion vs. horizontal swipe” to determine which design yields better data.

AB Test 1: Collapse vs. Expanded

Question: Does collapsing categories with low user relevance increase value?

Conclusion: The partially collapsed B variant generated higher revenue and UV value, with similar order volume; the collapsed version performed slightly better.

Detailed finding 1 : Both variants received 50% traffic. The partially collapsed B variant showed higher revenue and UV value, while order volume was comparable, slightly favoring B.

Analysis of 12 category floors: A kept all 12 expanded; B expanded the first 6 and collapsed the last 6 based on relevance. Core orders were in the top 6 floors for all channels; the collapsed lower floors in B contributed a higher share of orders.

Detailed finding 2 : The collapsed B variant improved metrics for the lower floors compared with fully expanded A.

Impact on lower‑floor content: The collapsed version increased the order share of subsequent floors (special venue + bottom items), indicating a lift effect.

AB Test 2: Two‑row Tile vs. One‑row Tile + Paging

Question: Which layout performs better for venue slots?

Conclusion: Click‑through is better with the two‑row tile layout, while conversion is better with the one‑row tile plus paging.

Detailed comparison: Click performance favors the two‑row layout; conversion performance favors the paging layout.

AB Test 3: 1‑row 3½‑item Slide vs. 1‑row 4‑item Tile

Question: Which layout yields higher performance?

Conclusion: The 1‑row 3½‑item sliding layout outperforms the 1‑row 4‑item tiled layout in both clicks and conversions.

Detailed finding: Data differences are minor, but overall the sliding layout shows better results.

Summary

1. In the main venue category floor scenario, collapsing lower‑relevance floors increases overall revenue and improves key metrics for subsequent floors.

2. For venue slots, a two‑row tile layout yields better click performance, while a one‑row tile with paging yields better conversion.

3. A 1‑row 3½‑item sliding layout outperforms a 1‑row 4‑item tiled layout in both click and conversion metrics.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

e‑commercefrontendUser experienceA/B testingconversion optimizationUI layout
JD.com Experience Design Center
Written by

JD.com Experience Design Center

Professional, creative, passionate about design. The JD.com User Experience Design Department is committed to creating better e-commerce shopping experiences.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.