Design Atlas
한국어
⟳ Design process

Card sorting

카드 소팅

A research method where participants group content items written on cards, revealing the categories that live in their heads.

Also known as: 카드 분류법
···
html
<div class="stage">
  <div class="pool" id="pool"></div>
  <div class="cols">
    <div class="col"><div class="colhd">Food</div><div class="drop" id="d1"></div></div>
    <div class="col"><div class="colhd">Travel</div><div class="drop" id="d2"></div></div>
    <div class="col"><div class="colhd">Tech</div><div class="drop" id="d3"></div></div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;flex-direction:column;gap:6px}
.pool{position:relative;height:30%;border:1px dashed var(--line);border-radius:8px}
.cols{flex:1;display:flex;gap:8px}
.col{flex:1;display:flex;flex-direction:column;gap:4px}
.colhd{font:700 10px/1 monospace;color:var(--muted);text-align:center}
.drop{flex:1;border:1px solid var(--line);border-radius:8px;position:relative;background:var(--surface)}
.card{position:absolute;width:38px;height:22px;border-radius:5px;background:var(--accent);color:#fff;
  font:700 9px/22px sans-serif;text-align:center;transition:left .6s ease,top .6s ease,background .6s}
.card.travel{background:var(--accent-2)}
.card.tech{background:var(--accent-3)}
js
const pool = document.getElementById('pool');
const items = [
  { t: 'Apple', cls: '', col: 'd1' },
  { t: 'Rice', cls: '', col: 'd1' },
  { t: 'Paris', cls: 'travel', col: 'd2' },
  { t: 'Hotel', cls: 'travel', col: 'd2' },
  { t: 'App', cls: 'tech', col: 'd3' },
  { t: 'Cloud', cls: 'tech', col: 'd3' },
];
const els = items.map((it, i) => {
  const d = document.createElement('div');
  d.className = 'card ' + it.cls;
  d.textContent = it.t;
  d.style.left = (10 + (i % 3) * 60) + 'px';
  d.style.top = (10 + Math.floor(i / 3) * 28) + 'px';
  pool.appendChild(d);
  return d;
});
function sortAll() {
  items.forEach((it, i) => {
    const target = document.getElementById(it.col);
    const r = target.getBoundingClientRect();
    const p = pool.getBoundingClientRect();
    els[i].style.left = (14 + (i % 2) * 44) + 'px';
    els[i].style.top = (target.offsetTop + 10 + Math.floor(i / 2) * 26) + 'px';
    target.appendChild(els[i]);
    els[i].style.position = 'absolute';
  });
}
function resetAll() {
  items.forEach((it, i) => {
    pool.appendChild(els[i]);
    els[i].style.left = (10 + (i % 3) * 60) + 'px';
    els[i].style.top = (10 + Math.floor(i / 3) * 28) + 'px';
  });
}
let sorted = false;
function toggle() {
  sorted = !sorted;
  if (sorted) sortAll(); else resetAll();
}
setInterval(toggle, 2200);

Instead of a designer alone deciding menu names and category counts, each content item is written on its own card and handed to participants to group however makes sense to them. Open card sorting has no predefined categories and asks participants to name their own groups; closed card sorting hands them fixed categories to validate a structure that already exists.

The key insight is that people group differently. Overlaying results from several participants — a similarity matrix, a dendrogram — reveals which items people consistently group together and which ones split, and that becomes the evidence base for navigation categories.

The usual order: run an open sort to discover users' own mental model when building an information architecture from scratch, then move to a closed sort or tree testing to validate a structure you've already drafted.

When to use

Run one when the team is arguing over navigation category names or counts — it settles the argument with data instead of opinion.