Fitts's law: why bigger, closer links are easier to use

Key takeaways

Fitts's law says the time to hit a target depends on its size and its distance from where the pointer or finger starts. Bigger, closer targets are faster and more accurate to hit. For navigation, that means generous clickable areas on menu items, primary actions placed where visitors already are, and enough space between links to avoid mis-taps.

• Larger targets are quicker to hit; tiny links slow visitors down.
• Make the whole menu item clickable, not just the text.
• WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels.
• Keep primary actions close to where visitors are reading.

What is Fitts's law?

Fitts's law is a model of human movement, published by psychologist Paul Fitts in 1954, which predicts that the time needed to move to a target increases with distance and decreases as the target gets larger. Nielsen Norman Group describes it as one of the most reliable findings in human-computer interaction.

How does Fitts's law apply to menus?

Menu links are targets. If only the text is clickable, the target is small; if the whole padded area is clickable, it is larger and faster to hit. Dropdowns need special care: if the pointer must travel a narrow path to reach a sub-menu, visitors overshoot and the menu closes.

• Make the full padded area of each item clickable.
• Give dropdowns enough width and a short delay before closing.
• Avoid tiny text links clustered together.
• Keep related actions near each other.

• Dropdown menus: hover, click, touch and keyboard

How does Fitts's law apply on phones?

On phones the finger is the pointer, and fingers are less precise than a mouse. Targets must be larger and spaced apart. WCAG 2.2 success criterion 2.5.8 sets a minimum of 24 by 24 CSS pixels, and many guidelines recommend larger targets for primary actions. Place frequent actions where the thumb reaches easily.

• Tap target size: how big should buttons be on mobile?

Does bigger always mean better?

No. Making everything large removes hierarchy, so nothing stands out. Use size to signal importance: the primary action is the largest, the main menu items next, and secondary links smaller but still easy to hit. Distance matters too, so a moderately sized button near the content beats a giant one far away.

What does this look like in practice?

A pattern we see: a header menu with small text links where only the words are clickable, and a dropdown that closes if the pointer strays a few pixels. Padding the items, making the full area clickable and widening the dropdown removes most mis-clicks without changing the design.

• See client work
• Website Design & Development for UK businesses

Fitts's law checklist

• Make the full padded area of menu items clickable.
• Meet at least 24 by 24 CSS pixels for every target.
• Space adjacent links to prevent mis-taps.
• Size targets by importance.
• Place primary actions near the content they relate to.

• How clear website navigation improves user experience
• Progressive disclosure: basics first, details on demand

Next step

Try using your menu on a phone with one thumb, and note every link you miss first time.