What Is Fitts's Law? Button Size and Position in UI

This article explains Fitts’s Law, a foundational principle of human-computer interaction, and demonstrates how it directly influences user interface (UI) design. You will learn the core mathematical concept behind the law, why target size and distance dictate user efficiency, and practical design strategies for sizing and positioning buttons on both desktop and mobile interfaces to optimize usability and reduce interaction errors.

What Is Fitts’s Law?

Fitts’s Law is an empirical model of human movement formulated by psychologist Paul Fitts in 1954. In the context of user experience and interface design, the law states that the time required to rapidly move to a target area depends on two variables: the distance to the target and the width of the target.

Mathematically, it is expressed as:

\[MT = a + b \log_2\left(\frac{2D}{W}\right)\]

• MT is the movement time required to complete the action.
• a and b are empirical constants based on the input device.
• D is the distance from the starting point to the target center.
• W is the width of the target along the axis of motion.

In simple terms: larger targets closer to the user's starting point are faster and easier to click or tap, while smaller, distant targets take longer and result in more errors.

How Fitts’s Law Dictates Button Size

Target dimensions determine how easily a user can acquire and activate a button. Fitts’s Law provides several clear guidelines for button sizing:

1. Minimum Target Sizing

Small buttons demand high motor precision, which slows the user down and increases misclicks. Touch interfaces especially require generous dimensions to accommodate the variation in human finger sizes (commonly referred to as the "fat finger" problem).

• Mobile Guidelines: Apple’s Human Interface Guidelines recommend a minimum hit target of 44×44 points, while Google’s Material Design specifies at least 48×48 density-independent pixels (dp).

2. The Law of Diminishing Returns

The logarithmic nature of Fitts’s Law means that increasing the size of a tiny button yields massive usability improvements, but continually expanding an already large button produces negligible performance gains. UI designers must scale buttons until they are easily targetable, rather than making primary actions arbitrarily massive at the expense of screen real estate.

3. Expanding the Clickable Area (Hitbox)

A button's visual boundary does not have to match its functional boundary. Designers leverage Fitts’s Law by padding the clickable hitbox around text links, icons, and small buttons, effectively increasing \(W\) without altering the visual balance of the layout.

How Fitts’s Law Dictates Button Position

The physical placement of an element determines \(D\) (distance), heavily influencing interaction speed and task flow.

1. Proximity to Current Cursor or Finger Location

Buttons should be placed near the content or elements they affect to minimize travel distance:

• Form submission buttons should sit directly beneath the final input field.
• Context menus should appear immediately at the location of a right-click or tap.
• Inline actions (such as edit or delete icons) should remain close to their respective data rows.

2. The "Infinite" Edges of Desktop Screens

On desktop platforms, the borders and corners of the display act as physical barriers that stop the cursor from moving further. This effectively makes the width (\(W\)) of an edge or corner target infinite because a user can flick the mouse aggressively without overshooting the target.

• Application: This is why operating systems place critical global functions at screen boundaries, such as the Windows Start menu (bottom corner) or the macOS menu bar and Apple icon (top edge and corner).

3. Mobile "Thumb Zones"

On mobile devices, screen edges do not act as barriers because fingers move through three-dimensional space rather than being pinned to a 2D plane. Distance on mobile is governed by the natural reach of the user's thumb.

• Application: Frequently used buttons, primary calls to action (CTAs), and navigation bars are placed at the bottom of the screen, where travel distance from the resting thumb position is minimal. Infrequently used or destructive actions are placed at the top corners, maximizing distance to prevent accidental activation.

Applying Fitts's Law to UI Hierarchy

Fitts's Law allows designers to guide user behavior by manipulating speed and difficulty:

• Primary Actions: Designed with larger widths and placed along the natural interaction path to make them fast and effortless to execute.
• Secondary Actions: Designed with smaller hit targets or placed slightly further away to establish visual and physical hierarchy.
• Destructive Actions: Actions like "Delete Account" or "Discard Changes" are intentionally made smaller or placed far from the primary flow, using the friction inherent in Fitts's Law as a safeguard against costly mistakes.