Design Atlas
한국어
⌘ UX terms & laws

Decoy Effect

디코이 효과

Adding a deliberately unattractive third option to make one of the other two look like the obvious best deal.

Also known as: Asymmetric dominance effect
···
html
<div class="cards">
  <div class="card"><div class="t">Web</div><div class="p">$59</div><div class="f">Web access</div></div>
  <div class="card decoy" id="decoy"><div class="t">Print</div><div class="p">$125</div><div class="f">Print only</div></div>
  <div class="card target" id="target"><div class="t">Print + Web</div><div class="p">$125</div><div class="f">Everything</div></div>
</div>
css
.cards{display:flex;gap:3%;align-items:flex-end}
.card{width:28%;max-width:120px;padding:14px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:center;display:grid;gap:6px}
.t{font:700 11px/1 sans-serif;color:var(--muted)}
.p{font:800 clamp(14px,3.4vmin,20px)/1 sans-serif;color:var(--fg)}
.f{font:500 9.5px/1.3 sans-serif;color:var(--muted)}
.decoy{animation:glowDecoy 4s ease-in-out infinite}
.target{animation:glowTarget 4s ease-in-out infinite}
@keyframes glowDecoy{0%,20%{box-shadow:none}35%,55%{box-shadow:0 0 0 2px var(--accent-2)}70%,100%{box-shadow:none}}
@keyframes glowTarget{0%,60%{box-shadow:none;transform:scale(1)}75%,95%{box-shadow:0 0 0 2px var(--accent-3);transform:scale(1.05)}100%{box-shadow:none;transform:scale(1)}}

First demonstrated experimentally by Joel Huber, John Payne, and Christopher Puto in 1982. The most famous case, via Dan Ariely's "Predictably Irrational" (2008), is The Economist's subscription tiers: web-only $59, print-only $125, print+web $125. Nobody picks print-only — but its mere presence sharply increases how many people pick print+web. Print-only is the decoy.

The decoy works through relative comparison, not absolute value — next to print-only, print+web looks like getting the web edition free at the same price. Alone, choosing between $59 and $125 was ambiguous; the decoy makes it obvious.

Adding a decoy tier is common pricing strategy on its own, but making it literally unpurchasable or listing an option that doesn't really exist crosses into dark-pattern territory.

The demo highlights the middle (decoy) card first, then shifts emphasis to the bundle on the right as the "obvious" pick.

When to use

Use this when building a three-tier pricing table. Check whether the middle option is a real product you'd sell, or exists purely as a comparison anchor.