UI Elements
Presenting Information as a Table or as Cards A/B Test
A table aligns attributes across options. Cards group the same information around each option, which may make individual items easier to scan but harder to compare. Evaluate these formats with the same information in the same order; lists or a different orientation are outside this comparison.
A/B test scenario. This page is a test plan, not the result of a real experiment.
- UI elements
- Selection completion rate
Option A vs Option B
Two alternatives; neither is the incumbent.
- Changed
- Options
- Page
- UI elements
- Difference
- changed
Hypothesis
If visitors choose by comparing options attribute by attribute, a table with aligned rows may help more of them finish the choice. If they scan options one at a time, cards that group each option's details may come out ahead on selection completion rate.
Test plan
When to run this test
Run this comparison when visitors on a selection page seem to struggle to compare options, such as heatmaps with movement back and forth between options, long pauses in session recordings, or support tickets asking how the options differ. If one format fits the way visitors decide, more of them complete a selection in that arm, with fewer exits. If the trouble comes from too many options, missing information or unclear labels, fix the content first; this test only compares two ways of presenting the same information.
How to measure success
Selection completion rate
Compare eligible assigned visitors who complete the predefined selection after seeing the information in a table or cards.
Also track
- Time to selectMeasure time among visitors who start a selection and report non-completions separately.
- Page exit rateCompare exits among eligible assigned visitors within the same follow-up window.
How to set it up
- FormatCompare a data table with separate option cards.
- LayoutDefine one layout for each format before the test.
- InformationKeep attributes, values, labels and option order the same.
- DifferencesMake sure differences between options remain clear in both formats.
- MobileKeep content readable, including any necessary horizontal scrolling.
What to watch when reading the result
- 1Selection completion rate makes the call. Time to select only covers visitors who start a selection, so it can mislead on its own; a shorter time that comes with a higher page exit rate is not a win.
- 2In cards, state the differences between options in text instead of implying them through order alone. Use semantic table markup only for data that really is tabular; do not mark up a layout table that way, and do not leave a real data table unmarked. Otherwise the two arms do not give screen-reader users the same information.
- 3Only the content type and option set you tested are covered, so validate again before applying the result to other comparisons. Break results out by device, because a table may need horizontal scrolling on a narrow screen.
- 4The gap between table and cards may be small. Enter the selection completion rate you expect and the smallest gap you care about in the sample size calculator to get the visitors needed per variant; if your traffic cannot reach that, do not report either format as the clear choice.
Frequently Asked Questions
How can a card layout obscure differences between options?
Grouping information by option can make comparison harder. Keep differences explicitly stated in both formats rather than implying them through order. Use completion of the defined selection as the primary outcome.
Does faster selection mean cards are better?
Measure time among people who start choosing and report noncompleters separately. Compare page exits within the same follow-up window too.
How should the table work on mobile?
Keep it readable, allowing necessary horizontal navigation rather than shrinking text excessively. Do not mark layout-only structures as semantic data tables. Avoid generalizing one content type to every comparison.
More tests in UI Elements
All testsExternal Links in a New Tab: Return to Site A/B Test
UI elementsActive return to the original site
An experiment example where outbound links open in a new tab while internal links stay unchanged. See both arms, the accessibility note and the KPI.
Imperative or First-Person Button Copy A/B Test Idea
UI elementsAction completion rate
A microcopy experiment example contrasting a command-form CTA with a first-person one, such as Start against I am starting. See both arms and the KPI.
Focusing a Promo Banner on a Single Message A/B Test
UI elementsCampaign action completion rate
Promo banner content under test: several benefits listed at once, or one message with one action. See both arms, the visibility trade-off and the KPI.