Design Atlas
한국어
⌘ UX terms & laws

Pareto Principle

파레토 법칙

Roughly 80% of effects come from 20% of causes — an empirical rule first observed by economist Vilfredo Pareto in land-ownership data.

Also known as: 80/20 ruleLaw of the vital few
···
html
<div class="stage">
  <div class="col">
    <div class="tag">Causes</div>
    <div class="bar"><div class="seg hi" style="height:20%"></div><div class="seg lo" style="height:80%"></div></div>
  </div>
  <svg class="link" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 0,20 100,80 100,0" /></svg>
  <div class="col">
    <div class="tag">Effects</div>
    <div class="bar"><div class="seg hi" style="height:80%"></div><div class="seg lo" style="height:20%"></div></div>
  </div>
</div>
css
.stage{width:88%;height:82%;display:flex;align-items:flex-end}
.col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.tag{font:700 10px/1 monospace;color:var(--muted)}
.bar{width:22%;min-width:26px;flex:1;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line)}
.seg.hi{background:var(--accent)}
.seg.lo{background:var(--line)}
.link{flex:1;height:70%;align-self:flex-end;margin-bottom:0}
.link polygon{fill:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{fill-opacity:.14}50%{fill-opacity:.34}}

Started in 1896 when Italian economist Vilfredo Pareto observed that 20% of the population owned 80% of Italy's land. Quality-management scholar Joseph Juran later popularized it in business as "the vital few and the trivial many."

It doesn't need to be exactly 80/20 — the point is that **causes and effects are never evenly distributed**. In products, 20% of features drive 80% of usage; 20% of bugs cause 80% of incidents.

In UX this becomes the case for polishing the 20% of flows people use daily to a very high standard, and letting the remaining 80% simply work. Spreading equal craft everywhere quietly starves the paths most users actually rely on.

The demo shows a thick band connecting the left 20% of the "causes" bar to 80% of the "effects" bar.

When to use

Use this when prioritizing a roadmap. Check usage logs to find the real 20% first — guessing gets this wrong more often than not.