Fitts's Law: Reach and Ergonomics in UI

Learn how Fitts's Law influences the speed and accuracy of user movement to select targets in a digital interface, improving the ergonomics of your designs.

info Quick Definition
Fitts’s Law states that the time required to reach a target depends on the distance to the target and the size of the target itself. In short for UX: Make important actions large and close.

What is Fitts’s Law (and why should you care)?

Paul Fitts, an American psychologist, formulated this law in 1954 to measure human movement. In modern interface design, Fitts’s Law is the foundation of ergonomics: if a button is too small or too far from where the cursor (or thumb) is located, the user will take longer to interact and will make more errors due to lack of precision.

Imagine a 4-pixel “Close” button in the corner of the screen vs. a huge “Next” button in the center. The second one is much easier to reach.

How to Apply Fitts’s Law in Product Design

To ensure your users have a comfortable and error-free experience, you should apply these strategies:

1. Increase the Target Area

Don’t limit yourself to the visual size of the element. You can expand the invisible click (or touch) area.

  • Before: A thin underlined text link.
  • After: A button with generous padding or a click area that covers the entire cell of a list.
  • Standard Guidelines: Apple (iOS) recommends a minimum of 44x44 pt, and Google (Android) 48x48 dp for touch elements.

2. Strategic Placement (Proximity)

Place actions that must be performed together close to each other.

  • Example: In a form, the “Submit” button should be right below the last input field, not in a floating menu on the other side of the screen.

3. Take Advantage of “Magic Corners” and Edges

On mouse-controlled screens (desktop), edges and corners are the easiest places to reach because the cursor “stops” when it reaches the monitor’s boundary.

  • Usage: The Start button (Windows) or the Apple menu (macOS) are in corners for this reason. The cursor never overshoots.

4. The Thumb Zone

On large mobile screens, the bottom and center of the screen are the easiest areas for the thumb to reach when holding the device with one hand.

  • Strategy: Place critical actions (such as the “Buy” button or main navigation) in the bottom zone of the screen to prevent the user from having to stretch their finger or use their other hand.

5. Prioritize Important Actions Visually

The greater the importance, the larger the size. The primary call-to-action (CTA) button should be clearly larger and more visible than secondary or destructive actions.

Dangers of Ignoring Fitts’s Law

  • Click Errors (Misfires): If two small buttons are too close together, the user may press the wrong one (e.g., clicking “Delete” instead of “Save”).
  • User Fatigue: Moving the cursor or finger large distances repeatedly generates a sense of slowness and mental tiredness.
  • Task Abandonment: If a crucial step is difficult to find or press (especially on mobile devices), the user will eventually abandon the conversion flow.

Mentor’s Tips

  • Don’t skimp on space: A bit of air (white space) around your buttons not only improves aesthetics but also prevents precision errors.
  • Design for fingers, not mice: If you are designing a mobile app, stop using the computer cursor as a reference. Test your prototypes on real devices.
  • Watch out for “Sticky Footers”: They are great for Fitts’s Law because they are always close to the thumb, but make sure they don’t cover important web content.

Useful Resources and Tools

cognitive-load-management responsive-scaling affordances-vs-signifiers