Design Atlas
한국어
⌘ UX terms & laws

Mental Model

멘탈 모델

The belief a user already carries about how something should work. When the system behaves differently, confusion follows.

Also known as: Conceptual model
···
html
<div class="stage">
  <div class="side">
    <div class="bub user">🧠 "복구 가능"</div>
    <div class="icon">🗑️</div>
    <div class="bub sys" id="sys">⚙️ 영구 삭제</div>
  </div>
  <div class="gap" id="gap">✗</div>
</div>
css
.stage{position:relative;display:flex;align-items:center;gap:18px}
.side{display:grid;gap:10px;justify-items:center}
.bub{padding:6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font:600 11px/1 sans-serif;color:var(--fg)}
.icon{font-size:30px;text-align:center}
.gap{font:900 22px/1 monospace;color:var(--accent-2);transition:color .3s,transform .3s}
.gap.ok{color:var(--accent-3);transform:scale(1.3)}
.sys{transition:background .4s,border-color .4s}
.sys.aligned{background:var(--accent-3);color:#fff;border-color:var(--accent-3)}
js
const sys = document.getElementById('sys');
const gap = document.getElementById('gap');
let aligned = false;
setInterval(() => {
  aligned = !aligned;
  sys.textContent = aligned ? '⚙️ 영구 삭제' : '⚙️ 영구 삭제';
  sys.classList.toggle('aligned', aligned);
  gap.textContent = aligned ? '✓' : '✗';
  gap.classList.toggle('ok', aligned);
}, 2000);

Cognitive psychologist Kenneth Craik proposed the concept in 1943; Don Norman brought it into UX. Users don't see a system's internals — they arrive with a model built from past experience (other apps, real-world objects), and when the designer's "implementation model" diverges from the user's mental model, that gap is where mistakes happen.

A trash icon makes users expect a recoverable holding area; if it actually deletes permanently, the system has drifted from the mental model. The fix is either to match the system to the user's expectation, or, when that's not possible, use a clear signifier to close the gap.

Below, the user's thought bubble ("trash = recoverable") and the system's ("permanent delete") mismatch — until the label changes to "Delete forever," aligning both and triggering a checkmark.

When to use

When naming an icon or label, ask what the user will expect from it first. If the behaviour diverges, say so explicitly in the label.