Framing effect

프레이밍 효과

The same number can feel different depending on its frame.

···
html
<div class="frame"><div class="dial"><span>80 / 100</span></div><div class="words"><b id="headline">80 SUCCEEDED</b><small>SAME OUTCOME · DIFFERENT FRAME</small><button id="swap">CHANGE FRAME</button></div></div>
css
@media(min-width:700px){body>div{transform:scale(1.45)}}.frame{display:flex;align-items:center;gap:clamp(12px,5vmin,44px);width:min(90%,590px);font-family:sans-serif}.dial{width:clamp(92px,30vmin,240px);height:clamp(92px,30vmin,240px);border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) 0 80%,var(--line) 80%);flex:none}.dial:before{content:'';position:absolute;width:clamp(68px,22vmin,177px);height:clamp(68px,22vmin,177px);background:var(--bg);border-radius:50%}.dial span{z-index:1;font:900 clamp(13px,4vmin,28px)/1 sans-serif}.words{min-width:0}.words b{display:block;color:var(--accent);font:900 clamp(17px,5vmin,46px)/.95 sans-serif;letter-spacing:-.05em}.words small{display:block;margin:clamp(8px,2vmin,16px) 0;color:var(--muted);font:800 clamp(10px,max(1.5vmin,1vw),12px)/1.2 sans-serif}.words button{border:1px solid var(--fg);background:var(--surface);color:var(--fg);padding:clamp(5px,1.5vmin,10px);font:800 clamp(10px,max(1.5vmin,1vw),12px) sans-serif;cursor:pointer}
js
const title=document.querySelector('#headline');let mode=0;function swap(){mode=1-mode;title.textContent=mode?'20 MISSED':'80 SUCCEEDED'}const timer=setInterval(swap,1400);document.querySelector('#swap').addEventListener('click',()=>{clearInterval(timer);swap()});

Framing is the way a true fact is presented, which can influence judgment. The same outcome of 80 out of 100 may be described as 80 successes or 20 misses.

The demo holds the circular measure constant while its headline and emphasis change. It separates the underlying data from the language used to present it.

One-sided framing can conceal important tradeoffs. Include the denominator, time period, and exceptions when the audience needs to compare options.

When to use

Use it to audit whether an alternative wording changes interpretation of performance or risk.

Open as page ↗