Tesler's Law

테슬러의 법칙

Every process carries a fixed amount of complexity — it can be moved between system and user, but never truly removed.

Also known as: Law of Conservation of Complexity
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="rows">
      <div class="row"></div><div class="row"></div><div class="row"></div>
      <div class="row"></div><div class="row"></div><div class="row"></div>
    </div>
    <div class="meter"><span class="fill user" id="ma"></span></div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="rows">
      <div class="row"></div><div class="row"></div>
      <div class="row sys"></div><div class="row sys"></div><div class="row sys"></div><div class="row sys"></div>
    </div>
    <div class="meter"><span class="fill user" id="mb"></span><span class="fill sysfill" id="mb2"></span></div>
  </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);padding:24px 10px 14px;display:flex;flex-direction:column;gap:8px}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.rows{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:center}
.row{height:16px;border-radius:5px;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.row.sys{border-color:var(--line);background:var(--line)}
.meter{height:8px;border-radius:4px;background:var(--line);overflow:hidden;display:flex}
.fill{height:100%}
.user{background:var(--accent)}
.sysfill{background:var(--muted)}
#ma{animation:wa 2.6s ease-in-out infinite}
#mb{animation:wb 2.6s ease-in-out infinite}
#mb2{animation:wb2 2.6s ease-in-out infinite}
@keyframes wa{0%{width:0}60%,100%{width:100%}}
@keyframes wb{0%{width:0}60%,100%{width:33%}}
@keyframes wb2{0%{width:0}60%,100%{width:67%}}

Proposed by Larry Tesler, a computer scientist at Xerox PARC and later Apple — also known for championing modeless interfaces, which shares the same underlying idea. Every application carries an irreducible amount of complexity; the only question is who absorbs it.

When the system auto-detects timezone and date format, users see none of it — but a developer still wrote that detection logic somewhere. When the system does nothing, the user picks a timezone from a dropdown by hand. The complexity didn't disappear; it changed hands.

In the demo, A hands the user six raw fields; B has the system infer four of the same six, leaving the user only two. The filled portion of the bar (user's share) differs, but the total bar length (total complexity) stays the same.

When to use

When designing a settings screen, consciously choose who absorbs each bit of complexity — check whether it lands on the user simply because building the smart default was harder.