Less effort, clear feedback

Fitts’s law

The farther and smaller a target is, the longer it takes to hit.

Well supportedSeveral studies or meta-analyses point the same way.

Example

A tiny close button in a corner is hard to hit. A large button near your thumb is easy.

Why it works

Movement time can be predicted from the ratio of distance to target size. The relationship holds for mice and fingers alike.

On the web

Make the main CTA large and place it near the previous action. On phones, put it within thumb reach at the bottom. This site keeps primary controls at 48px or more.

When it backfires

Making only cancel or decline buttons small and distant is a dark pattern.

Sources

  1. Shows that pointing time depends on the ratio of distance to target width.

    Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381-391. Open source

  2. Requires pointer targets of at least 24 by 24 CSS pixels, with exceptions.

    W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2, 2.5.8 Target Size (Minimum). Open source

Patterns that apply it

2 patterns

Attract

Tactile CTA

The button sinks the instant it is pressed and springs back on release, showing both that it can be pressed and that it was.

Start

Thumb-zone CTA

A comfortably large button stays fixed at the bottom of a phone screen.