UI Elements
Filled Button or Outlined Button: A/B Test Example
A filled primary button generally carries more visual weight than an outlined one. 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.
A/B test scenario. This page is a test plan, not the result of a real experiment.
- 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
A filled button usually stands out more from the interface around it, so it may make the primary action easier to notice, while an outlined button looks lighter and competes less with other content. That could put the filled style ahead on primary action completion rate, though on a sparse interface the gap between the two may stay small.
Test plan
When to run this test
Heatmaps that show the primary button being skipped, session recordings of visitors searching for the action, or primary button clicks that barely differ from clicks on secondary controls suggest the button is not getting noticed. If visual weight really matters here, the stronger style should lift primary action completion without making secondary actions harder to reach. If visitors see the button and still do not move on, look at the offer or the next step first. Before launch, confirm the outlined button does not blend into its background and both styles meet contrast requirements.
How to measure success
Primary action completion rate
Compare completion of the primary action among eligible assigned visitors, not clicks alone.
Also track
- 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.
How to set it up
- 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.
What to watch when reading the result
- 1A higher primary button click-through rate is not enough on its own, because a more visible button can draw clicks without the same rise in completions. Primary action completion rate is what counts. If secondary action completion falls, check whether the stronger style is pushing the secondary path out of reach.
- 2A style that fails contrast requirements does not win, even if it leads on the metric. Use the same button color in both arms so you can credit the difference to fill versus outline; if the color changed too, you cannot separate the two effects.
- 3Limit the conclusion to the primary CTAs in the tested scope and this surrounding design, and review mobile readability and target size separately. For an unclear difference, enter visitors and completed primary actions for each arm in the A/B test significance calculator; a result that is not significant does not show the two styles are equal.
Frequently Asked Questions
Is a higher primary-button click rate enough?
No. More visibility can generate clicks without completion. Use completion of the CTA's destination action as the primary outcome.
How should secondary actions be checked?
Measure their completion and verify they remain accessible. Emphasizing the primary button must not block secondary actions. Do not redesign unrelated controls.
Can the outlined variant be launched immediately if it wins?
First verify contrast, mobile readability and target size. A variant failing accessibility requirements should not be declared the winner. Ensure its outline remains distinguishable from the background.
More tests in UI Elements
All testsSecondary Action as a Link or a Button: A/B Test Idea
UI elementsTotal action completion rate
Should the secondary action be a text link or a button? This experiment example lays out both arms, the hierarchy trade-off and the completion KPI.
Consistent Button Styles Across a Page: A/B Test Idea
UI elementsTotal action completion rate
One shared button style across a page, versus section-by-section variation. See both arms of the experiment, the reasoning and the tracked KPI.
Buy Now vs See Pricing CTA A/B Test
UI elementsPurchase conversion rate (CR)
Compare Buy now with See pricing in the same CTA position and style, measuring progression and final conversion rather than clicks alone.