What you'll understand by the end of this lesson
- Why the physical size and position of a button affects whether people click it
- How Fitts's Law applies to CTA design, mobile tap targets, and navigation
- The common mistakes that make primary actions harder to reach than they should be
- How to audit your pages for Fitts's Law violations
The principle in plain English
Fitts's Law is one of the most tested and reliable findings in human-computer interaction research. The core idea is simple: the time it takes to move a cursor — or a finger — to a target is determined by two things. How big the target is. And how far away it is.
Big and close: fast and easy. Small and far: slow and effortful.
This isn't about aesthetics. It's about the physical mechanics of interaction. A button that takes longer to reach and is harder to land on precisely requires more effort from the user. More effort creates more hesitation. More hesitation costs conversions.
A simple example
Two versions of a mobile checkout page. On the first, the "Complete purchase" button is full-width, prominently placed at the bottom of the screen where the thumb naturally rests. On the second, it's a narrow button in the top right corner of the screen.
Both buttons do the same thing. Both have the same label. But the second requires the user to shift their grip, extend their thumb, and aim precisely at a small target while balancing the phone.
The first button wins — not because of messaging, not because of colour, not because of any psychological principle. Because it's easier to physically reach and press.
Fitts's Law in CRO practice
CTA button size
A CTA button that's too small forces precision on a user who isn't paying close attention to their cursor or thumb position. When the target is small, missing it is easy. Missing a button — clicking slightly outside it and loading nothing — creates friction and frustration.
Primary CTA buttons should be large enough that a visitor moving quickly can hit them without careful aim. On desktop this means a button with enough padding that the clickable area is generous. On mobile it means a tap target of at least 44×44 pixels — Apple's minimum guideline for a reason.
Position and proximity
Fitts's Law cares about distance as much as size. A CTA placed far from the content that motivated it requires the visitor to travel. A CTA placed immediately after the most persuasive section of the page — the testimonial, the before/after, the price reveal — requires almost no travel.
This is why landing page best practice places CTAs close to the value proposition that earns them. The visitor doesn't need to look for the button. It's right next to the reason they want to click.
On mobile, the bottom of the screen is the most reachable zone for right-handed users (the majority). Primary actions — buy, sign up, continue — belong there. Secondary or destructive actions — cancel, delete, go back — should be placed further from the primary action's zone, making accidental taps less likely.
Primary vs secondary action sizing
When two actions are present — "Start free trial" and "See pricing" — their relative size signals which is primary. If both are the same size, the visitor has to read both and decide which to take. If one is significantly larger, the decision is made before they've consciously evaluated it.
The secondary action should be smaller, or presented as a text link rather than a button. The visual size hierarchy communicates priority before language does.
Navigation
Fitts's Law applies to navigation too. Navigation items placed in a horizontal bar at the top of the page are reasonably close to where a cursor starts. But a navigation item in a dropdown within a dropdown, requiring precise cursor movement to keep it open, is Fitts's Law working against you.
On mobile, navigation items in a hamburger menu require: finding the menu icon (small target), tapping it precisely, then finding and tapping the correct item (another small target, with others nearby). Every step is a Fitts's Law challenge. If conversion-critical navigation — pricing, contact, demo — is buried in this interaction, the page is making those actions harder than they need to be.
Ghost buttons — outlined buttons with no fill — suffer a compounded problem. Their visual weight is lower, so they read as lower priority. But they also have a narrow visual edge, which makes it harder to judge the precise boundary of the clickable area. For a secondary action, this is acceptable. For a primary CTA, a ghost button is sacrificing both visual hierarchy and click accuracy.
The CRO audit
Look at your primary conversion points and ask:
1. Are your CTA buttons large enough to click or tap without precision?
On desktop: open your browser's inspector and check the pixel dimensions of your primary CTA button. Is the clickable area generous enough that a user in a hurry can hit it? On mobile: test by pressing with the middle of your thumb rather than the tip. If you have to adjust your grip or aim carefully, it's too small.
2. Is your primary CTA placed close to the content that earns it?
If your most persuasive content — a testimonial, a result, a pricing reveal — is followed by several unrelated sections before the CTA appears, the visitor is travelling away from their highest motivational state before they can act. Move the CTA closer to the content that motivated it.
3. Are primary and secondary actions visually differentiated by size?
Check every page where two actions appear together. Is the primary action clearly larger or visually heavier than the secondary? If both are the same size button, the sizing is costing you directionality — visitors have to work harder to identify which action to take.
A mobile checkout page has a 'Complete purchase' button that measures 36×36 pixels. A visitor testing on their phone has to aim carefully with the tip of their finger to avoid missing it. What does Fitts's Law tell us about this button?
You've seen how physical size and distance affect interaction. Now — even before someone moves toward a button, how does the brain decide what to look at first? What controls where attention goes when a visitor lands on a page?