UX & Design
FundamentalsFitts' Law: Why important buttons need to be big and close
The bigger and closer a target, the faster you hit it. Fitts' Law explains why small, distant buttons cost clicks.
of Josef Kujawski4 min read
Short answer
Fitts' Law says the time it takes to hit a target with a mouse or finger depends on its distance and its size. Large, nearby targets are hit faster and more reliably, small and distant ones slower and with more misclicks. For websites this means: make important buttons large, place them close to where attention is, and keep them within thumb reach on smartphones. Unimportant or destructive actions may deliberately be smaller and further away.
The problem: the button is there, but nobody hits it
You know the feeling: on your phone you want to submit a form, the button is tiny, sits in the top right corner, and you tap next to it. Or on desktop you move the mouse across the whole screen to catch a small close icon. Both cost time, patience and sometimes the enquiry you were trying to win.
This is not coincidence. It is one of the best documented laws of interaction design: Fitts' Law.
The principle: size and distance determine time
In 1954 psychologist Paul Fitts showed that the time for an aimed movement depends on two factors: how far away the target is and how large it is. [1] In today's common form the formula reads:
T = a + b · log2(D/W + 1)
- T is the time to hit the target
- D is the distance to the target
- W is the width of the target along the direction of movement
- a and b are constants depending on device and person
The core message is simpler than the formula: double the distance or halve the size and the target gets harder to reach. And because the relationship is logarithmic, the first enlargements of small targets help the most. [2]
Kernaussage
A target is hit faster the larger and closer it is. The most important action on a page therefore deserves the largest and most reachable area.
What this means for websites
| Situation | Typical mistake | Better |
|---|---|---|
| Primary call to action | Small text link in body copy | Clearly separated button, whole area clickable |
| Submitting a form | Button far from the last field | Button directly below the last field |
| Mobile navigation | Key action top right | Action in the lower third of the screen |
| Small icons | Only the icon reacts | Invisible, larger hit area around it |
| Delete, cancel | Same size, right next to submit | Smaller, spaced apart, visually toned down |
Three rules have proven themselves in practice:
- Make the important things big. The primary button is the largest interactive area in view. The entire area reacts, not just the word inside.
- Close to attention. A button belongs where the eye lands after reading anyway: directly below the text or form it refers to.
- Make dangerous things deliberately harder. Fitts' Law works in reverse too. Destructive actions like delete may be smaller and further away so nobody hits them by accident.
Smartphone: the thumb is the cursor
On smartphones Fitts' Law comes with an extra condition: movement usually starts at the thumb, resting at the bottom of the device. Targets in the lower third are easy to reach, targets in the top corners are hard. That is why navigation bars and key actions in many apps have moved to the bottom.
Then there is minimum size. The accessibility guideline WCAG 2.2 requires tap targets of at least 24 × 24 CSS pixels or enough spacing to neighbouring targets. [3] For comfortable use, 44 to 48 pixels is a good rule of thumb. This helps not only people with motor impairments but everyone browsing one-handed on the go.
Desktop: edges and corners are gold
On desktop there is a special case: the cursor stops at the screen edge. A target on the edge therefore has practically infinite depth in the direction of movement. Operating systems have used this for decades, for menu bars or start menus in corners. In the browser the effect is weaker because the website does not end at the screen edge. The principle still holds: large, clearly bounded areas are faster than small islands in the middle of a layout.
Kernaussage
On smartphones thumb reach matters, on desktop the distance to the cursor. Either way: important actions large, close and clearly separated.
Fitts' Law alongside other principles
Fitts' Law explains movement, not decision. How long someone thinks before clicking is described by Hick's Law. Why too many options paralyse is shown by the Paradox of Choice. Good interfaces reduce both: few clear options, placed within reach. How this shows up as measurable speed is covered in Core Web Vitals.
When a page does not convert, the first thing we look at is the most important button. Surprisingly often it is too small, too far away or looks like everything else. Fixing that costs little and works immediately.
Quick check for your website
- Is the most important button the largest interactive area in the first view?
- Does the whole button area react, not just the text?
- Does the submit button sit directly below the last form field?
- Are tap targets on smartphones at least 44 pixels?
- Are destructive actions spaced apart from the important ones?
If you answer no more than once, it is worth a closer look. With a new Maluure-Page™ we plan sizes, spacing and thumb zones from the start.
Frequently asked questions
What does Fitts' Law say?+
Fitts' Law states that the time to hit a target grows with distance and shrinks with the target's size. Large, nearby targets are reached faster than small, distant ones.
Who discovered Fitts' Law?+
US psychologist Paul Fitts published the law in 1954. It was originally about hand movements and is now a foundation of interaction design.
What is the formula of Fitts' Law?+
In the common Shannon form it reads T = a + b · log2(D/W + 1). T is movement time, D the distance to the target, W the target width, a and b are constants.
What does Fitts' Law mean for website buttons?+
Primary buttons should be large enough, clearly separated and placed close to the content they refer to. The whole area should be clickable, not just the label.
Does Fitts' Law apply on smartphones?+
Yes. On touchscreens thumb reach matters too. Important actions belong in the lower, easy to reach area and need sufficiently large tap targets.
How large should a tap target be?+
WCAG 2.2 requires at least 24 × 24 CSS pixels or enough spacing. For touch, around 44 to 48 pixels is a common, comfortable recommendation.
Why are screen edges special in Fitts' Law?+
On desktop the cursor stops at the screen edge. Targets on edges and in corners therefore behave as if infinitely deep and are especially easy to hit.
How are Fitts' Law and Hick's Law related?+
Hick's Law describes the time for the decision, Fitts' Law the time for the movement. Good interfaces reduce both: few clear options, placed within easy reach.
Sources
- The information capacity of the human motor system in controlling the amplitude of movement, Journal of Experimental Psychology (1954)
- Fitts's Law and Its Applications in UX, Nielsen Norman Group (2022)
- Target Size (Minimum), WCAG 2.2 Success Criterion 2.5.8, W3C (2023)
#UX#Usability#Interaction#Conversion
Author
Josef KujawskiManaging Director & Creative Director at Maluure
Josef leads the strategic and creative development of brands at Maluure. For over a decade, he has guided medium-sized businesses from brand positioning to digital delivery.
Managing Director of Maluure GmbH, Cologne. Specialising in corporate design, brand strategy and digital brand experiences.
Related articles
UX & Design
Hick's Law: Why Every Extra Option Slows Down Your Website
The more options you give visitors, the longer they take to decide, and the more often they decide not to decide at all. Hick's Law explains the connection, and we show what to do about it.
5 min read
Development
Core Web Vitals: What Google Measures on Your Website and Why It Costs Revenue
Core Web Vitals are Google's yardstick for loading speed, responsiveness, and stability of a website. What LCP, INP, and CLS mean, which thresholds apply, and how to improve the scores concretely.
6 min read
Psychology & Decisions
The Paradox of Choice: Why More Options on Your Website Mean Less Revenue
The paradox of choice explains why visitors faced with too many options decide nothing at all. With the jam experiment, the limits of the effect, and concrete rules for navigation, pricing pages, and forms.
5 min read