Ali Demirbaş - Lab
TRGet in touch

UI Elements

Filled Button or Outlined Button: A/B Test Example

A filled primary button generally carries more visual weight than an outlined one.

  • UI elements
  • Primary action completion rate

Option A vs Option B

Two alternatives; neither is the incumbent.

Changed
Options
Page
UI elements
Difference
changed

Hypothesis

That difference may affect whether the action is noticed, though the surrounding interface matters too. Keep secondary controls and their role distinction intact while changing the primary control’s style.

How to run this test

Primary metric

Primary action completion rate

Compare completion of the primary action among eligible assigned visitors, not clicks alone.

Other metrics

  • Primary button click-through rateCompare clicks on the primary button per eligible assigned visitor.
  • Secondary action completion rateCheck whether the secondary action remains accessible and is completed.
  • Primary action completionCompare completion of the action the primary button leads to.

What to check before and during the test

  • StyleCompare a filled primary button with an outlined version.
  • HierarchyKeep secondary controls and their roles unchanged.
  • ScopeApply the assigned style to equivalent primary CTAs within the predefined scope.
  • ContextKeep surrounding copy and placement unchanged.
  • DeviceCheck mobile readability and target size as well as desktop.

Setup mistakes to avoid

  1. 1Do not change button style and color together.
  2. 2Keep the outlined button visible against its background.
  3. 3Do not make secondary actions inaccessible while emphasizing the primary one.
  4. 4Apply the style consistently to equivalent primary controls without redesigning unrelated elements.
  5. 5Do not choose a version that fails contrast requirements.