Ali Demirbaş - Lab

UI Elements

Presenting Information as a Table or as Cards A/B Test

A table aligns attributes across options.

  • UI elements
  • Selection completion rate

Option A vs Option B

Two alternatives; neither is the incumbent.

Changed
Options
Page
UI elements
Difference
changed

Hypothesis

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.

How to run this test

Primary metric

Selection completion rate

Compare eligible assigned visitors who complete the predefined selection after seeing the information in a table or cards.

Other metrics

  • Selection completion rateMeasure the predefined choice completed per eligible assigned visitor.
  • 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.

What to check before and during the test

  • 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.

Setup mistakes to avoid

  1. 1Do not change content along with presentation format.
  2. 2Use semantic table markup only when the data is actually tabular.
  3. 3Do not shrink the mobile table until it is unreadable.
  4. 4State option differences in text; do not rely on order alone in cards.
  5. 5Do not generalize from one content type to every comparison.