UIXHERO
This article is also available in Japanese. View the Japanese version

Fitts's Law in UX: Target Size, Distance, and UI Design

Fitts's Law explains how target size and distance affect pointing time. Learn how to apply Fitts's Law in UX to buttons, touch targets, layout, and accessibility.

2026年7月29日
更新: 2026年9月11日
9
by Dengen Yosho(DGYS)
Fitts's Law in UX: Target Size, Distance, and UI Design

Quick Answer

Fitts's Law models how long it takes to move to and select a target. Selection generally becomes faster when the target is larger and closer to the starting point.

For UX and UI design, the practical lesson is:

Make frequent and important targets easy to reach and large enough to select accurately.

Fitts's Law applies to mouse pointers, styluses, touch input, and other aimed movements. It helps explain why tiny icon buttons, distant actions, crowded pagination controls, and narrow drag handles require more effort.

It does not mean every important button should dominate the screen. Size, distance, frequency, consequence, hierarchy, and available space still need to be balanced.

What Is Fitts's Law?

Psychologist Paul Fitts introduced the model in 1954 while studying the information capacity of the human motor system.

A common contemporary form is:

MT = a + b × log₂(D / W + 1)

Where:

  • MT is movement time.
  • D is the distance to the target.
  • W is the target width along the direction of movement.
  • a and b are constants measured for the task, device, and population.

The logarithmic term is often called the index of difficulty. A more distant target increases difficulty. A wider target decreases it.

The equation is a model, not a universal stopwatch. Designers should not use it to claim an exact selection time without measuring the relevant interaction. Its strongest everyday value is explaining the relationship between target size, distance, and pointing effort.

Why Fitts's Law Matters in UX

Every pointer or touch interaction has a physical cost. The user must locate a target, move toward it, and select it accurately.

When targets are too small or tightly packed:

  • Selection can take longer.
  • Accidental activation becomes more likely.
  • People may need corrective movements.
  • Users with reduced dexterity or tremor face a larger barrier.
  • Repeated interactions become tiring.

The cost may feel minor once. In a toolbar, data table, editor, or operational workflow used hundreds of times a day, small delays and corrections accumulate.

Fitts's Law gives product teams a reason to discuss interaction geometry as part of usability, rather than treating target size as visual styling alone.

The Two Main Variables

Target Size

The relevant target is the interactive hit area, not only the visible icon.

A 20-pixel icon can sit inside a comfortably sized button. The icon provides the visual symbol; padding provides the larger selectable target.

Increasing target size is especially valuable when:

  • The action is frequent.
  • The action is performed quickly.
  • Several similar targets sit close together.
  • The user may be moving, holding a device one-handed, or using imprecise input.
  • An error is costly or difficult to reverse.

Size has diminishing returns. Enlarging a tiny target can produce a major improvement; enlarging an already comfortable target may provide little additional benefit while harming layout or hierarchy.

Target Distance

Distance begins at the user’s current pointer, finger, focus, or hand position. That starting point changes throughout a task.

Place a frequent next action near the content or control that precedes it. Keep actions within a coherent workflow area. Avoid forcing users to alternate repeatedly between opposite sides of a large screen.

Distance should not be minimized in isolation. Destructive actions may need separation from frequent safe actions to prevent accidental activation. The goal is efficient, intentional movement.

Applying Fitts's Law to UI Design

Buttons and Icon Controls

Give the complete control a generous hit area. Do not make users aim at the visible glyph.

Icon-only controls also need clear labels for assistive technology, visible focus states, and enough spacing from neighboring controls. A larger invisible hit area must not overlap another target.

Mobile Touch Targets

Touch input is less precise than a mouse pointer because a finger covers part of the target and has no single visible hotspot.

Apple’s Human Interface Guidelines advise a hit region of at least 44 by 44 points for buttons as a general rule. WCAG 2.2 Success Criterion 2.5.8 requires web targets to be at least 24 by 24 CSS pixels, subject to defined exceptions. The WCAG value is a conformance minimum, not necessarily the most comfortable product target.

Use platform guidance, usability testing, spacing, and the needs of the audience together. Do not convert points, density-independent units, and CSS pixels as if they were interchangeable physical measurements.

Toolbars

Toolbars contain many adjacent targets, so both size and spacing matter. Group related actions, keep frequent controls prominent, and move rare commands into a clearly labeled secondary area.

Do not shrink every control until the complete feature set fits in one row. A discoverable overflow pattern may be better than a dense strip of error-prone targets.

Make the entire row selectable when the row represents one destination. A short label inside a wide empty row should not be the only clickable area.

Keep menu items close enough for efficient movement, but large enough to avoid crossing into neighboring actions.

Drag Handles and Resize Targets

Thin dividers and tiny corner handles have low effective width. Expand the interactive region without making the visual treatment unnecessarily heavy.

Provide keyboard or explicit control alternatives for users who cannot perform precise dragging.

Screen Edges and Corners

With a mouse pointer on a conventional desktop screen, an edge can stop pointer movement, increasing the effective width of a target placed flush against it. Corners can benefit in two directions.

This advantage depends on the environment. It may not apply to touch, multiple displays, floating windows, remote-control input, or interfaces with safe-area constraints. Treat it as a contextual benefit, not a universal rule.

Fitts's Law and Visual Hierarchy

Larger controls attract attention as well as being easier to select. This means motor efficiency and visual hierarchy are connected.

Use size to support the likely next action, but do not let every important action compete at the same level. A screen with five oversized primary buttons has easy targets but poor prioritization.

Consider:

  • Frequency: How often is the action used?
  • Sequence: Where does the pointer or hand come from?
  • Importance: Is this the likely next step?
  • Risk: What happens after accidental activation?
  • Reversibility: Can the user recover?
  • Context: Is the control used on touch, desktop, or both?

For reversible actions, a clear recovery model can support confident interaction. Undo and Redo in UI Design explains how reversibility changes that safety calculation.

Fitts's Law vs. Hick's Law

Fitts's Law concerns the physical effort of reaching and selecting a target. Hick's Law concerns the decision time associated with choosing among alternatives.

QuestionRelevant principle
How hard is the target to reach?Fitts's Law
How hard is the choice to make?Hick's Law

A large button does not solve an unclear decision. A small set of well-organized options does not solve tiny targets.

Both problems can appear in the same interface. A menu may contain too many choices and also make each row too small. Reduce or organize the choices, then ensure the remaining targets are easy to operate. Progressive Disclosure in UX provides one approach for sequencing secondary complexity.

Design Rules

1. Prioritize Frequent Targets

Give the most frequent actions comfortable size and placement. Rare actions do not need equal prominence.

2. Enlarge the Hit Area

Use padding around labels and icons. Verify the actual interactive box in browser or device inspection rather than judging from appearance.

3. Consider the Previous Action

Map the likely interaction sequence. Place the next control where it supports the workflow instead of optimizing each screen in isolation.

4. Separate Confusable Actions

Spacing helps users acquire the intended target. Separate destructive actions from routine controls and distinguish them with clear labels and hierarchy.

5. Support Multiple Inputs

Test mouse, touch, keyboard, zoom, and assistive technology. A design that is efficient for one input may be inaccessible with another.

6. Measure Real Tasks

Fitts's Law predicts a relationship, but product decisions should be validated with the actual audience, device, content, and consequences.

Useful measures include completion time, mis-selections, corrective movements, abandonment, and subjective effort.

Example: Mobile Form Actions

Consider a long mobile form with a small “Continue” text link in the top-right corner.

Problems:

  • The action is far from the final field.
  • The visible and interactive target is small.
  • The location may be difficult to reach one-handed.
  • The control does not look like the primary next step.

An improved design can place a full-width or comfortably sized Continue button after the final field, while keeping it clear of the operating system’s safe area. The improvement reduces travel, increases the target area, and aligns the action with the reading sequence.

If the action is fixed near the bottom of the viewport, test it with the on-screen keyboard, zoom, dynamic text, and device safe areas. A theoretically close target is not useful when another interface element obscures it.

Implementation Checklist

Common Mistakes

Making Every Action Large

Fitts's Law does not replace hierarchy. Prioritize by frequency, sequence, and importance.

Measuring the Icon Instead of the Target

The visible symbol and the hit area can have different sizes. Inspect the clickable region.

Ignoring Starting Position

Distance is contextual. A button can be close in the static mockup but far from the point where the user finishes the previous action.

Using Small Size to Protect Destructive Actions

A tiny Delete control is not a reliable safety mechanism. Use separation, clear labeling, confirmation when appropriate, and recovery where the operation is genuinely reversible.

Treating Compliance as Optimal Comfort

Meeting a minimum target-size criterion does not prove that the control is comfortable for the product’s users or input conditions.

External References

FAQ

What is Fitts's Law in UX?

Fitts's Law in UX describes how the time and effort required to select a target depend on its distance and size. Larger, nearer targets are generally faster and easier to acquire.

What is a simple example of Fitts's Law?

A padded button is easier to select than a small text label serving the same action. The larger hit area gives the pointer or finger more room for accurate selection.

Does Fitts's Law apply to touchscreens?

Yes. The general relationship between movement, distance, and target size applies, although touch has different input characteristics from a mouse. Designers should combine the principle with platform guidance and device testing.

Does Fitts's Law mean buttons should always be bigger?

No. Increasing a very small target is often helpful, but size has diminishing returns and also affects visual hierarchy and available space. Prioritize frequent and important actions.

How is Fitts's Law different from Hick's Law?

Fitts's Law focuses on reaching and selecting a target. Hick's Law focuses on choosing among alternatives. Interfaces often need to reduce both motor effort and decision complexity.

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

記事をシェア

メールでお知らせを受け取る

最終更新: 2026年9月11日