Social Proof

사회적 증거

Evidence that others already did something makes you more likely to do it too — review counts and live user numbers are the classic cue.

Also known as: Social validation
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <button class="btn">Sign up</button>
    <div class="cur" id="c1">&#10148;</div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="social"><span class="av"></span><span class="av"></span><span class="av"></span><b id="cnt">1,204</b></div>
    <button class="btn">Sign up</button>
    <div class="cur" id="c2">&#10148;</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;gap:10px;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.btn{border:0;border-radius:9px;padding:9px 18px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.social{display:flex;align-items:center;gap:4px;font:700 10.5px/1 monospace;color:var(--muted)}
.av{width:16px;height:16px;border-radius:50%;background:var(--accent-3);border:2px solid var(--surface);margin-left:-8px}
.av:first-child{margin-left:0}
.cur{position:absolute;font-size:14px;color:var(--fg);transform:rotate(-45deg)}
#c1{animation:hesit 2.8s ease-in-out infinite}
#c2{animation:direct 1.2s ease-out infinite}
@keyframes hesit{0%,100%{left:16%;top:80%}30%{left:40%;top:55%}45%{left:30%;top:70%}70%{left:55%;top:50%}100%{left:55%;top:50%}}
@keyframes direct{0%{left:16%;top:80%}85%,100%{left:52%;top:52%}}

One of six persuasion principles psychologist Robert Cialdini laid out in "Influence: The Psychology of Persuasion" (1984). When people are unsure what the right action is, they look at what others are doing — a 4.8-star rating, "1,204 people joined this week," or review photos all work the same way.

Experiments repeatedly show that adding a number or avatar stack next to a signup button lifts conversion on its own. It's genuinely useful when the numbers are real; faked reviews or inflated counts turn it into a dark pattern.

The demo shows a cursor moving faster and more confidently toward the button with an avatar stack and count (B) than the plain one (A).

When to use

Use this near a signup or purchase button — but first verify the number or reviews you display are real and current.