Design Atlas
한국어
⌘ UX terms & laws

Anchoring Effect

앵커링 효과

The first number you see becomes the reference point for every judgment that follows — show the original price first, and the sale price feels cheaper.

Also known as: Anchoring bias
···
html
<div class="wrap">
  <div class="was" id="was">199,000원</div>
  <div class="now" id="now">99,000원</div>
  <div class="badge" id="badge">-50%</div>
</div>
css
.wrap{position:relative;display:grid;place-items:center;gap:6px}
.was{font:600 clamp(13px,3vmin,17px)/1 sans-serif;color:var(--muted);text-decoration:line-through;opacity:0;animation:showWas 2.6s ease-in-out infinite}
.now{font:800 clamp(22px,5.4vmin,32px)/1 sans-serif;color:var(--fg);opacity:0;animation:showNow 2.6s ease-in-out infinite}
.badge{position:absolute;top:-14px;right:-30px;padding:4px 8px;border-radius:999px;background:var(--accent-2);color:#fff;font:800 11px/1 monospace;opacity:0;animation:showBadge 2.6s ease-in-out infinite}
@keyframes showWas{0%,10%{opacity:0;transform:translateY(6px)}25%,80%{opacity:1;transform:translateY(0)}95%,100%{opacity:0}}
@keyframes showNow{0%,35%{opacity:0;transform:scale(.9)}50%,80%{opacity:1;transform:scale(1)}95%,100%{opacity:0}}
@keyframes showBadge{0%,45%{opacity:0;transform:scale(.5)}60%,80%{opacity:1;transform:scale(1)}95%,100%{opacity:0}}

Formalized by psychologists Amos Tversky and Daniel Kahneman in their 1974 paper "Judgment under Uncertainty: Heuristics and Biases." They showed experimentally that judgments drift toward numbers with zero logical connection — spin a rigged wheel, then ask what percentage of UN members are African, and answers cluster near the number just seen.

Pricing is anchoring's most blatant use. Show "$99" alone and that's the reference point; show "$199 → $99" and $199 becomes the anchor, making $99 feel like a steal — independent of actual cost or market price.

Inflating the anchor artificially (a "was" price that was never real) crosses into dark-pattern territory. Honest anchoring rests on real prior prices or genuine competitor comparisons.

The demo shows the struck-through anchor appearing first, then the final price landing with a "feels cheaper" cue.

When to use

Before showing a price or discount, verify the anchor is real. A fabricated "original" price erodes trust and is regulated in many jurisdictions.