Design Atlas
한국어
⌘ UX terms & laws

Fitts's Law

피츠의 법칙

The farther and smaller a target is, the longer it takes to reach. Keep important targets close and large.

Also known as: Fitts LawTarget acquisition
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="target sm" id="t1"></div>
    <div class="cur" id="c1">➤</div>
    <div class="bar"><div class="fill f1"></div></div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="target lg" id="t2"></div>
    <div class="cur" id="c2">➤</div>
    <div class="bar"><div class="fill f2"></div></div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.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:3}
.target{position:absolute;border-radius:50%;background:var(--accent-2)}
.sm{width:10%;height:14%;top:10%;right:8%}
.lg{width:34%;height:40%;top:16%;left:20%}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);left:8%;bottom:6%}
.bar{position:absolute;left:8%;right:8%;bottom:8%;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.fill{height:100%;background:var(--accent);width:0}
.f1{animation:grow 2.6s cubic-bezier(.3,0,.6,1) infinite}
.f2{animation:grow 1.1s cubic-bezier(.3,0,.6,1) infinite}
@keyframes grow{0%{width:0}70%{width:100%}100%{width:100%}}
#c1{animation:c1move 2.6s ease-in-out infinite}
#c2{animation:c2move 1.1s ease-out infinite}
@keyframes c1move{0%{left:8%;bottom:6%}30%{left:40%;bottom:60%}45%{left:55%;bottom:30%}70%{left:83%;bottom:74%}100%{left:83%;bottom:74%}}
@keyframes c2move{0%{left:8%;bottom:6%}70%{left:45%;bottom:44%}100%{left:45%;bottom:44%}}

Psychologist Paul Fitts formalised this in 1954 while studying human motor performance. Time to reach a target is proportional to distance (D) and inversely proportional to target size (W) — farther and smaller means slower and more error-prone.

In UI design this means: frequent actions get big, close targets, and screen edges act as infinitely large targets since the cursor can't overshoot past them (hence macOS keeping its menu bar pinned to the top edge).

In the demo, A is a small, far target; B is a large, near one. Same action, different arrival time (the bar below).

When to use

Recall this when sizing a bottom tab bar or a frequent CTA. For dangerous actions (delete), invert it on purpose — small and far.