Design Atlas
한국어
⌘ UX terms & laws

Law of Prägnanz

프레그난츠의 법칙

Faced with an ambiguous shape, the brain resolves it to the simplest, most regular form it can — even filling in edges that aren't there.

Also known as: Law of good figureLaw of simplicity
···
html
<div class="stage">
  <div class="pane"><div class="tag">A · drawn</div>
    <svg viewBox="0 0 100 90"><g class="shapes" id="ga"></g></svg>
  </div>
  <div class="pane"><div class="tag">B · perceived</div>
    <svg viewBox="0 0 100 90"><g class="shapes" id="gb"></g><polygon points="50,10 15,78 85,78" class="ghost" /></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);overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted);z-index:2}
svg{width:100%;height:100%}
.shapes circle{fill:var(--fg)}
.ghost{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;animation:reveal 3s ease-in-out infinite}
@keyframes reveal{0%,40%{opacity:0}60%,90%{opacity:.8}100%{opacity:0}}
js
const wedge = (cx, cy, rot) => `
<circle cx="${cx}" cy="${cy}" r="9" style="clip-path:polygon(50% 50%, 100% 0, 100% 100%);transform:rotate(${rot}deg);transform-origin:${cx}px ${cy}px" />`;
const pts = [[50, 14, 210], [17, 76, -30], [83, 76, 90]];
const svgA = document.getElementById('ga');
const svgB = document.getElementById('gb');
svgA.innerHTML = pts.map((p) => wedge(...p)).join('');
svgB.innerHTML = pts.map((p) => wedge(...p)).join('');

A core Gestalt principle named for the German word "Prägnanz" (conciseness, good form), established in the early 20th century by Max Wertheimer's school. Facing fragmented information, the brain auto-corrects to the simplest possible ("good") shape.

The classic demonstration is the Kanizsa triangle: three Pac-Man-like wedges and three bent lines, nothing more — yet the eye "sees" a white triangle's edges that were never drawn. Logo design exploits the same trick, implying a shape purely through negative space (the FedEx arrow, for one).

In UI it justifies simplifying icons aggressively, since users fill in the gaps — but push too far and the icon becomes genuinely ambiguous, so it's a balance.

A shows only what's actually drawn (three wedges, three bent lines); B overlays the faint triangle outline the brain perceives on top of the same shapes.

When to use

Use this when deciding how far to simplify an icon. Test with users to catch when simplification has gone too far to recognize.