--- title: "Fitts’ Law" url: "https://www.insideuxdesign.com/en/glossar/fitts-law" language: "en" description: "What is Fitts’ Law? A plain-language guide with an example and target sizes from WCAG, Apple and Android. Learn how to design buttons that are easy to hit." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:08:06+02:00" --- # Fitts’ Law Fitts’ Law describes how long it takes to hit a target with a movement: the bigger and closer the target, the faster and more reliably you reach it. In UX design, it helps you size and place buttons and links. - **Buchstabe:** F UX glossary # Fitts’ Law Fitts’ Law describes how long it takes to hit a target with a movement: the bigger and closer the target, the faster and more reliably you reach it. In UX design, it helps you size and place buttons and links. Imagine you’re standing on a packed tram, holding on with one hand and trying to delete a message with the thumb of the other. The trash icon is a tiny symbol way up in the corner, right next to “Archive.” You miss twice, and on the third try you hit the wrong icon. That’s no coincidence. A law from motor-control research explains it: Fitts’ Law. ## Explained simply Fitts’ Law says that the time it takes you to hit a target depends on two things: how far away it is and how big it is. The farther and smaller the target, the longer the movement takes and the more often you miss. Think of tossing a ball into a laundry basket one meter away. You could almost do it with your eyes closed. Throwing the same ball into a cup from five meters takes time, focus and usually several attempts. The law is named after the American psychologist Paul Fitts, who published it in 1954 in the Journal of Experimental Psychology. He had participants tap back and forth between two target areas with a stylus. The Nielsen Norman Group sums up the formula like this: the time grows with the logarithm of the ratio between distance and target size. For everyday design work, the direction is what counts: bigger and closer means faster. ## What it means for interfaces On screens, the targets are buttons, links, icons and form fields. That gives you three levers. First, **size**: important actions need a generous hit area. Second, **proximity**: actions should sit where the mouse or thumb already is, such as a “Continue” button right below the last form field. Third, **screen edges**: with a mouse, they act like infinitely large targets because the pointer stops there. That’s why the menu bar at the top of macOS or the Windows taskbar is so quick to reach. According to the Nielsen Norman Group, this advantage doesn’t carry over to touchscreens, where your finger can slide past the edge. ## How big is big enough? [WCAG](https://www.insideuxdesign.com/en/glossar/wcag) 2.2 sets two values. Success criterion 2.5.8 (level AA) requires at least 24 × 24 CSS pixels or enough spacing from other targets. Criterion 2.5.5 (level AAA) calls for 44 × 44 CSS pixels. Apple’s Human Interface Guidelines recommend a hit area of at least 44 × 44 points, and Android recommends at least 48 × 48 dp. Keep in mind that the hit area can be larger than the visible icon, for example through padding. ## An example Here’s an example: a banking app shows a small check mark in the top right corner to confirm a transfer, with an X to cancel right next to it. Many people have to shift their grip to reach it, and a slip of the thumb lands on the wrong action. After the redesign, a wide “Send transfer” button sits at the bottom, easy to reach with your thumb. “Cancel” is a text link with clear spacing. The main action is now big and close, while the risky one is deliberately a bit farther away. ## In practice - **Make the main action the biggest target.** Whatever people do most often gets the largest area. Making whole cards or list rows clickable enlarges the target without extra visual clutter. - **Keep risky actions at a distance.** “Delete” doesn’t belong right next to “Save.” Here, a little extra distance is exactly what you want. - **Think about thumbs and edges.** On a phone, the thumb reaches the lower part of the screen most easily. For more on navigation patterns on small screens, read [The 4 Most Frequently Asked Questions About the Hamburger Menu](https://www.insideuxdesign.com/en/blog/the-4-most-asked-questions-about-the-hamburger-menu). You’ll find more laws like this one in the [Laws of UX](https://www.insideuxdesign.com/en/ressourcen/laws-of-ux) resource. ## Related terms [Hick’s Law](https://www.insideuxdesign.com/en/glossar/hicks-law), [Accessibility](https://www.insideuxdesign.com/en/glossar/accessibility), [WCAG](https://www.insideuxdesign.com/en/glossar/wcag) ## Sources - [Paul M. Fitts: The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement. Journal of Experimental Psychology, 1954](https://pubmed.ncbi.nlm.nih.gov/13174710/) - [Raluca Budiu: Fitts’s Law and Its Applications in UX. Nielsen Norman Group, 2022](https://www.nngroup.com/articles/fitts-law/) - [W3C: Understanding Success Criterion 2.5.8: Target Size (Minimum). W3C, 2024](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) - [Apple: Human Interface Guidelines: Buttons. Apple Developer, 2025](https://developer.apple.com/design/human-interface-guidelines/buttons) - [Android Developers: Make Apps More Accessible. Google, 2026](https://developer.android.com/guide/topics/ui/accessibility/apps) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Dark Patterns Dark patterns are design tricks that push people into decisions they don’t actually want to make, like hidden cancellation options or preselected add-ons. ](https://www.insideuxdesign.com/en/glossar/dark-patterns) [ ### Design System A design system is a shared toolkit of reusable building blocks and rules. It helps teams design and build interfaces that look and behave consistently everywhere. ](https://www.insideuxdesign.com/en/glossar/design-system) [ ### Gestalt Principles The Gestalt principles describe how your brain automatically groups individual elements into wholes and shapes. In design, they help you structure layouts clearly without extra lines or borders. ](https://www.insideuxdesign.com/en/glossar/gestalt-principles) [ ### Heuristic Evaluation In a heuristic evaluation, experts review an interface against established rules of thumb for good usability. It helps you find typical weak spots quickly and cheaply, even before real people test the product. ](https://www.insideuxdesign.com/en/glossar/heuristic-evaluation) [ ### Hick’s Law Hick’s Law states that decisions take longer the more equally likely options there are. Decision time grows much more slowly than the number of options, though. ](https://www.insideuxdesign.com/en/glossar/hicks-law) [ ### Information Architecture Information architecture describes how the content of a website or app is structured and labeled. It helps people find what they’re looking for and understand where they are. ](https://www.insideuxdesign.com/en/glossar/information-architecture) [ ### Jobs to be Done Jobs to be Done is a way of thinking that asks what task people want to get done with a product and what progress they’re trying to make in their situation. It focuses on context and motivation rather than traits like age or job title. ](https://www.insideuxdesign.com/en/glossar/jobs-to-be-done)