Loss aversion

손실 회피

A possible loss can weigh more heavily than an equal gain.

···
html
<div class="loss"><div class="badge">SAME 10 CREDITS</div><div class="row"><span>GAIN 10</span><i class="gain"></i></div><div class="row"><span>LOSE 10</span><i class="lose"></i></div><div class="note">WORDING CHANGES THE FRAME</div></div>
css
@media(min-width:700px){body>div{transform:scale(1.45)}}.loss{width:min(86%,520px);font:800 clamp(10px,max(2vmin,1vw),16px)/1.1 sans-serif}.badge{display:inline-block;background:var(--accent-2);color:#211b19;padding:6px 9px;letter-spacing:.08em;transform:rotate(-3deg)}.row{display:flex;align-items:center;gap:12px;margin:clamp(12px,4vmin,28px) 0}.row span{width:clamp(58px,16vmin,115px)}.row i{display:block;height:clamp(19px,5vmin,38px);background:var(--fg);animation:bar 4s ease-in-out infinite alternate}.row .gain{width:48%}.row .lose{background:var(--accent);width:75%;animation-delay:-1s}.note{color:var(--muted);letter-spacing:.08em;font-size:clamp(10px,max(1.6vmin,1vw),12px)}@keyframes bar{from{transform:scaleX(.65);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

Loss aversion describes how a possible loss can affect judgment differently from an equivalent gain. Saying that an existing benefit will expire may prompt a different response from saying that a new benefit is available.

The demo reframes the same ten credits as a gain or an expiring balance. Its bars illustrate attention, not measured conversion rates or a universal effect size.

Do not invent or inflate a loss. Verify actual expiration terms, and keep information and audience comparable when testing the two frames.

When to use

Compare frames for real expirations or returns. Avoid creating unsupported fear.

Open as page ↗