Fitts’s Law states that the time to reach a target depends on its distance and its size: closer, larger targets are faster to hit. In web design it means that important buttons and links should be big and easy to reach, because the easier a target is to click or tap, the more people will act on it.
What Is Fitts’s Law?
Fitts’s Law is a model of human movement first described by psychologist Paul Fitts. It predicts how long it takes to move a pointer, whether a mouse cursor or a fingertip, to a target. The relationship is simple and consistent: the time required increases as the distance to the target grows and decreases as the target gets larger.
The principle is often written as T = a + b × log2(D / W + 1), where D is the distance to the target and W is its width. The exact equation matters less than the intuition it captures. Big targets that are close to where the user already is get hit quickly and accurately. Small targets that are far away are slow to reach and easy to miss.
Fitts’s Law is one of the most well-established principles in interface design because it describes a physical reality of how people interact with screens. It applies to every clickable and tappable element on a page, and it becomes especially important on touch devices, where the target is a finger rather than a precise cursor.
Why Fitts’s Law Matters for Conversion
Every conversion ends in a click or a tap. The visitor reaches a button and acts. If that target is small, awkwardly placed, or far from where the visitor’s attention sits, reaching it takes effort, and effort costs conversions. Fitts’s Law explains why button size and placement are not cosmetic details but direct levers on results.
A large, well-placed call-to-action button is faster and more comfortable to click than a small one tucked into a corner. On mobile, a tap target sized for a fingertip succeeds on the first try, while a cramped one causes misses and frustration. Each missed tap or moment of hesitation is a small tax on conversion, and across thousands of visitors those small taxes add up. Strong CTA button design is Fitts’s Law made concrete.
Placement matters as much as size. Targets positioned near where the visitor’s eye and cursor already are get acted on more often than targets that require a long journey across the screen. This is why a CTA placed directly below the content that motivates it outperforms one stranded far away. The law rewards designs that put the action where the visitor is, not where the layout happens to leave room.
Edges, Corners, and Reachable Zones
Fitts’s Law has a useful corollary: screen edges and corners act as infinitely deep targets because the pointer stops there naturally. On desktop, this makes edges valuable real estate. On mobile, the opposite logic applies through the thumb zone, the area a thumb can reach comfortably. Placing primary actions within easy reach supports both Fitts’s Law and the broader goals of mobile-first design.
Concrete Examples of Fitts’s Law in Action
The principle becomes practical once you map it to real interface decisions.
- Primary CTA buttons. A large, high-contrast button with generous padding is easier and faster to click than a small text link. Making the entire button area clickable, not just the text, widens the target.
- Mobile tap targets. Buttons and links sized for a fingertip, with enough spacing between them, prevent mis-taps. Cramped targets cause errors and abandonment.
- Sticky headers and bottom bars. Keeping a key action fixed to the top or bottom of the screen reduces the distance the visitor must travel to reach it from anywhere on the page.
- Clickable cards. Making an entire card clickable rather than only its small title link gives the visitor a large, forgiving target.
- Form fields and submit buttons. Large input fields and a prominent submit button reduce the effort of completing a form, lifting completion rates.
- Navigation and menus. Generous hit areas on menu items, including padding around the text, make navigation faster and reduce frustration.
The unifying idea is to make the targets that matter most as large and as reachable as the design allows. To see how this discipline shows up in shipped, conversion-focused sites, the Framer Websites portfolio is a useful reference.
How to Apply Fitts’s Law in Real Websites
Applying Fitts’s Law is about sizing, spacing, and placement. Work through it with the visitor’s hand in mind.
Step 1: Size Targets Generously
Make important interactive elements large enough to hit comfortably. On touch devices, a widely cited guideline is a minimum tap target of around 44 by 44 pixels, with adequate spacing so adjacent targets are not accidentally hit. The most important action on a page should be the largest, most obvious target, never a small link competing with surrounding text.
Step 2: Place Targets Where Attention Lives
Position primary actions close to the content that motivates them and within the visitor’s natural reach. On mobile, keep key actions inside the thumb zone toward the lower and central part of the screen. On desktop, use edges and persistent bars for actions that should always be available. This placement logic supports the visual hierarchy you have already established.
Step 3: Maximize the Hit Area
Make the entire clickable region large, not just the visible label. A button’s padding, a card’s full surface, and a menu item’s surrounding space should all be part of the target. Expanding the hit area beyond the text is one of the cheapest, highest-impact ways to honor Fitts’s Law.
Applying Fitts’s Law in Framer
Framer makes it straightforward to build large, reachable, responsive targets. A practical workflow looks like this:
- Build buttons with generous internal padding so the full element is clickable, and set comfortable minimum sizes across breakpoints.
- Use sticky positioning to keep a primary action fixed to the top or bottom bar so it stays within reach as the visitor scrolls.
- Wrap entire cards in a link so the whole surface is the target rather than a small title.
- Test tap targets on real mobile devices, adjusting size and spacing until taps land reliably.
Because Framer keeps these elements responsive and fast, the reachability you design holds up across devices. Designing every important action to be large, obvious, and easy to reach is a core part of how Framer Websites builds sites that convert on desktop and mobile alike.
Common Pitfalls to Avoid
Fitts’s Law is intuitive, but it is violated constantly. Watch for these traps.
- Tiny tap targets on mobile. Small buttons and links crammed together cause mis-taps and frustration. Size targets for fingertips and give them breathing room.
- Text-only links as primary actions. A thin underlined link is a small target. When an action matters, give it a button with real size and padding.
- Stranded calls to action. Placing a CTA far from the content that motivates it forces a long journey and loses momentum. Put the action where attention already is.
- Clickable area smaller than the visual element. If only the text inside a button is clickable, visitors will miss. Make the whole padded region interactive.
- Crowded targets. Placing important and unimportant actions too close together leads to accidental clicks. Separate destructive or secondary actions from the primary one.
- Ignoring the thumb zone. Putting key mobile actions at the top corners, where a thumb struggles to reach, adds effort. Keep primary mobile actions reachable.
Each of these is easy to fix once you start thinking about every interactive element as a target with a size and a distance. The payoff is a site that feels effortless to use, which is exactly what drives more people to complete the action.
Fitts’s Law Across Devices
The way Fitts’s Law plays out differs by device, and good design accounts for both. On desktop, the cursor is precise, edges and corners are valuable because the pointer stops at them, and persistent bars keep actions a short distance away. On mobile, the finger is the pointer, precision drops, and the thumb zone dictates where comfortable reach lives, so primary actions belong toward the lower and central area of the screen. Designing for both means sizing targets generously everywhere and adapting placement to how each device is held and used. When you respect how people physically reach for targets, the interface feels natural and conversions rise.
If you want a site where every important action is large, obvious, and easy to reach on any device, the Framer Websites team builds to this standard. See the pricing options or get in touch to discuss your project.
Frequently Asked Questions
What is Fitts’s Law in simple terms?
Fitts’s Law says that the bigger and closer a target is, the faster and easier it is to click or tap. On a website, that means important buttons and links should be large and placed near where the visitor’s attention already sits. Easy-to-reach targets get acted on more often, which improves conversions.
What is the ideal button size for Fitts’s Law?
There is no single perfect size, but a widely used guideline for touch targets is a minimum of around 44 by 44 pixels, with enough spacing that adjacent targets are not hit by accident. The most important action on a page should be the largest target. On desktop, generous padding and a clear hit area matter just as much as raw size.
How does Fitts’s Law apply to mobile design?
On mobile the finger replaces the cursor, so precision drops and target size matters even more. Keep tap targets large, space them apart to prevent mis-taps, and place primary actions inside the thumb zone toward the lower and central part of the screen, where a thumb reaches comfortably while holding the device.
Can I apply Fitts’s Law without writing code?
Yes. Tools like Framer let you build large, padded, fully clickable buttons, sticky action bars, and clickable cards directly in a visual canvas, with responsive control across devices. For a site engineered so every key action is easy to reach and built to convert, working with a specialized team like Framer Websites ensures it performs as well as it looks.