Framing Effect

프레이밍 효과

The same fact is judged differently depending on how it's worded — "90% fat-free" reads better than "10% fat," even though they're identical.

Also known as: Framing bias
···
html
<div class="wrap">
  <div class="label" id="label">10% fat</div>
  <div class="gauge"><div class="needle" id="needle"></div></div>
</div>
css
.wrap{display:grid;place-items:center;gap:16px}
.label{font:800 clamp(16px,4vmin,24px)/1 sans-serif;color:var(--fg)}
.gauge{position:relative;width:min(60vmin,220px);height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent-2),var(--line),var(--accent-3))}
.needle{position:absolute;top:-6px;width:3px;height:18px;border-radius:2px;background:var(--fg);left:26%;animation:swing 3.2s ease-in-out infinite}
@keyframes swing{0%,45%{left:26%}55%,100%{left:78%}}
js
const label = document.getElementById('label');
const frames = ['10% fat', '90% fat-free'];
let i = 0;
setInterval(() => { i = (i + 1) % 2; label.textContent = frames[i]; }, 1600);

Formalized by Daniel Kahneman and Amos Tversky in their 1981 Science paper "The Framing of Decisions and the Psychology of Choice." They showed that presenting the same surgical outcome as "90% survival" versus "10% mortality" changed people's choices dramatically — identical information, different frame.

In UX, choosing a loss frame ("cancel now and lose your benefits") versus a gain frame ("keep it and benefits continue") changes conversion. Kahneman's later prospect theory found people feel losses more sharply than equivalent gains ("loss aversion"), so loss framing often pushes behavior harder.

Honestly emphasizing a positive is fine; scaring users with loss framing to block a cancellation edges into dark-pattern territory.

The demo swaps "10% fat" and "90% fat-free" labels on the same product, and a reaction gauge below responds differently to each frame.

When to use

Use this when wording the same fact two ways. If you lean on a loss frame, check it isn't just there to scare users into staying.