Usability test

사용성 테스트

A research method where real participants attempt a task on a prototype or product while researchers watch for where they get stuck.

Also known as: User testing사용자 테스트
···
html
<div class="stage">
  <div class="task">Task: find "Settings"</div>
  <div class="screen">
    <div class="item" id="i1">Home</div>
    <div class="item wrong" id="i2">Profile</div>
    <div class="item" id="i3">Help</div>
    <div class="item target" id="i4">Settings</div>
    <div class="cur" id="cur">&#10148;</div>
  </div>
  <div class="bubble" id="bubble">hmm...</div>
</div>
css
.stage{width:94%;height:90%;display:flex;flex-direction:column;gap:8px;position:relative}
.task{font:700 10px/1 monospace;color:var(--muted)}
.screen{position:relative;flex:1;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px;padding:8%;box-sizing:border-box}
.item{border-radius:6px;background:var(--line);padding:6px 10px;font:600 11px/1 sans-serif;color:var(--muted);transition:background .3s,color .3s}
.item.hit{background:var(--accent);color:#fff}
.cur{position:absolute;font-size:15px;color:var(--fg);transform:rotate(-45deg);z-index:4}
.bubble{position:absolute;top:2%;right:2%;background:var(--fg);color:var(--bg);font:700 10px/1 sans-serif;
  padding:5px 8px;border-radius:6px;opacity:0;transition:opacity .3s}
.bubble.show{opacity:1}
js
const cur = document.getElementById('cur');
const bubble = document.getElementById('bubble');
const items = { i1: document.getElementById('i1'), i2: document.getElementById('i2'), i3: document.getElementById('i3'), i4: document.getElementById('i4') };
function wait(ms) { return new Promise((r) => setTimeout(r, ms)); }
function moveTo(x, y, ms) {
  cur.style.transition = 'left ' + ms + 'ms ease, top ' + ms + 'ms ease';
  cur.style.left = x + '%'; cur.style.top = y + '%';
  return wait(ms);
}
async function loop() {
  for (;;) {
    Object.values(items).forEach((el) => el.classList.remove('hit'));
    cur.style.transition = 'none'; cur.style.left = '6%'; cur.style.top = '90%';
    bubble.classList.remove('show');
    await wait(400);
    await moveTo(20, 20, 700);
    bubble.textContent = 'hmm...';
    bubble.classList.add('show');
    await wait(700);
    bubble.classList.remove('show');
    await moveTo(20, 40, 600);
    items.i2.classList.add('hit');
    bubble.textContent = 'not this';
    bubble.classList.add('show');
    await wait(700);
    bubble.classList.remove('show');
    items.i2.classList.remove('hit');
    await moveTo(24, 78, 700);
    items.i4.classList.add('hit');
    bubble.textContent = 'found it';
    bubble.classList.add('show');
    await wait(1200);
  }
}
loop();

A usability test doesn't ask "do people like this?" — it asks "can people actually get a real task done with this?" A participant gets a concrete task ("book a flight in this app"), thinks out loud while attempting it, and researchers watch exactly where they hesitate or misclick.

A widely cited rule of thumb says five participants surface most usability problems — around 85%. It isn't statistical certainty, but bigger problems tend to show up repeatedly even in a small group, which makes several small rounds of testing more efficient than one large one-off study.

Where a survey or interview listens to what people say, a usability test watches what people actually do — and the two often disagree. That's why it matters to hand someone the button and watch them use it, instead of asking "do you understand what this button does?"

When to use

Run it once a prototype is clickable, whenever you need to check assumptions about structure, labels, or flow against real behavior — ideally at least once before development starts.