Friction — good vs bad

프릭션 (좋은 마찰 vs 나쁜 마찰)

Anything that slows a user down. Some friction prevents costly mistakes; the rest just wastes time for no reason.

Also known as: Desirable difficultyUX friction
···
html
<div class="stage">
  <div class="pane"><div class="tag">A · bad</div>
    <div class="steps"><span></span><span></span><span></span><span class="target"></span></div>
    <svg class="ico bad" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke-width="3" fill="none" stroke-linecap="round"/></svg>
  </div>
  <div class="pane"><div class="tag">B · good</div>
    <div class="steps single"><span></span><span class="target"></span></div>
    <svg class="ico ok" viewBox="0 0 24 24"><path d="M4 13l5 5L20 6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </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:12px;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.steps{display:flex;align-items:center;gap:6px}
.steps span{width:22px;height:22px;border-radius:6px;background:var(--line)}
.steps .target{background:var(--accent)}
.ico{width:26px;height:26px;opacity:0}
.bad{color:var(--accent-2);animation:blink 2.4s ease-in-out infinite}
.ok{color:var(--accent-3);animation:blink 1.6s ease-in-out infinite}
.ico path{stroke:currentColor}
@keyframes blink{0%,100%{opacity:0;transform:scale(.7)}50%,75%{opacity:1;transform:scale(1)}90%{opacity:0}}

Frictionless isn't always the goal. Cognitive psychologist Robert Bjork's concept of "desirable difficulty" describes friction that should be left in on purpose, because removing it makes outcomes worse.

**Bad friction** blocks users for no reason — forcing account creation just to read an article, or stacking redundant CAPTCHAs. **Good friction** sits deliberately in front of risky or hard-to-reverse actions — a delete confirmation, a payment summary screen, a brief "undo send" window after firing off an email.

One question separates the two: does this friction protect the user, or only the business? The latter edges toward a dark pattern.

A adds three pointless steps to a simple lookup and triggers a frustration cue; B adds one confirmation step before a destructive delete and triggers a safety cue instead.

When to use

Before speeding up a flow, classify each step as good or bad friction. For hard-to-reverse actions like delete, pay, or send, consider adding friction instead of removing it.