Fitts’s Law

This entry has no working demo yet; the illustration is an editorial sketch showing how distance and size affect reach time, not a validated implementation. Before shipping, verify target size and spacing meet WCAG 2.5.8, confirm that placing frequent actions closer actually shortens the real reach path, and check that destructive actions keep a safe distance from frequent ones.

{
  "evidenceType": "A quantitative model of human movement from experimental psychology, widely validated in HCI",
  "limit": "This entry covers only movement time, not decision time; it does not prescribe pixel values beyond the WCAG 24x24 minimum, and this sample provides no measured data."
}

{
  "id": "fitts-law",
  "type": "principle",
  "name": {
    "zh": "菲茨定律",
    "en": "Fitts’s Law"
  },
  "aliases": [
    "Fitts' Law",
    "指点运动定律",
    "目标尺寸与距离定律"
  ],
  "granularity": "component",
  "intents": [
    "reach-target",
    "prevent-error"
  ],
  "tags": [
    "target size",
    "pointing movement",
    "touch",
    "accessibility",
    "layout"
  ],
  "definition": "Fitts's Law is a quantitative model: the time to reach a target with a pointing device (mouse or finger) grows with the target's distance and shrinks with its size, and that relationship is logarithmic rather than linear — doubling the distance increases time, but not by double.",
  "boundary": "Fitts's Law predicts how long it takes to move to a target, not how long a user takes to decide which option to choose; the latter is the Hick-Hyman Law (a separate, not-yet-written entry), and the two are often conflated despite different mechanisms. On desktop, screen edges and corners are effectively \"infinite-width\" targets because the pointer cannot travel past the boundary, which is a special corollary of the law rather than an added assumption. Fitts's Law itself does not claim that bigger buttons are always better: it only describes how time trends with size, and whether a given size is worth the layout space it costs is an editorial tradeoff, not a conclusion of the law.",
  "signature": [
    "Frequent or high-priority actions get larger targets, or are placed closer to the pointer's or finger's current position",
    "Screen edges or corners are used for controls that need fast, reliable acquisition (system menus, taskbars)",
    "Small, distant targets appear only for low-frequency, low-stakes actions"
  ],
  "when": [
    "Deciding the size and placement of an interactive target (button, icon, tappable area)",
    "Assessing whether a finger can reliably hit a target on a touch interface",
    "Designing a faster, more reliable path to a frequent or high-cost action"
  ],
  "when_not": [
    "Using it to judge whether a user will make the right choice — that is decision time, not movement time",
    "Treating it as a blanket reason every button should be as large as possible, ignoring layout and information-density tradeoffs",
    "Substituting it for a concrete accessibility target-size requirement"
  ],
  "tradeoff": "Placing frequent or high-cost actions closer to the pointer, and sizing them larger, reduces reach time and mis-taps, but it consumes more screen space and can crowd other content or unbalance the layout; enlarging every target indiscriminately does not deliver an equivalent benefit.",
  "comparison": {
    "focus": "How long it takes to reach a target, not how long it takes to choose which target",
    "mechanism": "Movement time grows logarithmically with distance and shrinks logarithmically with target size",
    "cost": "Larger or closer targets consume layout space, trading off against information density and visual hierarchy"
  },
  "sources": [
    {
      "id": "nng-fitts-law",
      "title": "NN/g · Fitts's Law and Its Applications in UX",
      "url": "https://www.nngroup.com/articles/fitts-law/",
      "claim": "Movement time is a logarithmic function of distance and target size (T = a + b·log2(2D/w)): time increases with distance but non-linearly, and decreases with target size; screen edges act as effectively infinite-width targets because the pointer cannot travel past the boundary.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/fitts-law/",
        "status": "available",
        "checkedAt": "2026-09-16T04:01:31.264Z",
        "jobId": "spn2-e9a423560991668c050e8417e3a4764c0e5a0cdc",
        "url": "https://web.archive.org/web/20260916040156/https://www.nngroup.com/articles/fitts-law/",
        "timestamp": "20260916040156"
      }
    },
    {
      "id": "lawsofux-fitts-law",
      "title": "Laws of UX · Fitts's Law",
      "url": "https://lawsofux.com/fittss-law/",
      "claim": "Time to acquire a target is a function of its distance and size; smaller or farther targets increase acquisition time and error rate, so the distance between a task area and a related control should be kept short and touch targets given adequate spacing.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://lawsofux.com/fittss-law/",
        "status": "pending",
        "checkedAt": "2026-09-16T04:01:47.905Z",
        "error": "status-request-failed",
        "jobId": "spn2-006909d9cd4921fb94f4887a612db8a1e802241e"
      }
    },
    {
      "id": "wcag22-sc258",
      "title": "W3C · Understanding SC 2.5.8: Target Size (Minimum)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html",
      "claim": "WCAG 2.2 Level AA requires pointer input targets to be at least 24 by 24 CSS pixels, or given sufficient spacing when undersized, with exceptions for inline text, equivalent controls, user-agent-rendered controls, and essential presentations.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html",
        "status": "pending",
        "checkedAt": "2026-09-16T04:02:11.353Z",
        "error": "status-request-failed",
        "jobId": "spn2-54898850c9a143b79422b45d34bde84715206fe4"
      }
    }
  ],
  "relations": [
    {
      "target": "pressed-state",
      "kind": "composes_with",
      "condition": "The user needs confirmation that a hit target actually registered the action",
      "reason": "Fitts's Law addresses whether a target can be reliably reached; pressed state addresses whether reaching it produced visible feedback — together they make a click feel reliable.",
      "basis": "editorial"
    },
    {
      "target": "error-prevention",
      "kind": "informs",
      "condition": "A frequent action and a destructive action sit adjacent in the layout",
      "reason": "Placing a high-cost action close to a frequent target shortens its reach time but also raises the chance of mis-tapping it, which spacing or placement should prevent.",
      "basis": "editorial"
    },
    {
      "target": "direct-manipulation",
      "kind": "composes_with",
      "condition": "The user directly points at or drags an on-screen object with a pointer or finger",
      "reason": "Direct manipulation depends on reliably reaching and grabbing a target; the target's size and distance directly affect how smooth that manipulation feels.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Designing any interactive target operated with a pointer or finger",
      "instruction": "Make the target at least 24 by 24 CSS pixels, or give it sufficient spacing from neighboring targets if it is smaller.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Identifying a frequent or high-cost action",
      "instruction": "Place it closer to the pointer's or finger's current position to shorten the reach distance.",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "Laying out frequent actions and destructive actions in the same area",
      "instruction": "Do not place a destructive action directly adjacent to a frequent one, to avoid mis-taps from an overly short reach path.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "A quantitative model of human movement from experimental psychology, widely validated in HCI",
    "limit": "This entry covers only movement time, not decision time; it does not prescribe pixel values beyond the WCAG 24x24 minimum, and this sample provides no measured data."
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "This entry has no working demo yet; the illustration is an editorial sketch showing how distance and size affect reach time, not a validated implementation. Before shipping, verify target size and spacing meet WCAG 2.5.8, confirm that placing frequent actions closer actually shortens the real reach path, and check that destructive actions keep a safe distance from frequent ones.",
  "image": {
    "src": "/images/fitts-law.webp",
    "alt": "A fictional FIELDNOTES screen where an arrow-shaped cursor path points from a starting spot to a large target in the bottom-right corner and to a small, distant target mid-screen, with the two rectangles' differing size and distance implying the difference in reach difficulty."
  },
  "searchTerms": [
    "目标尺寸",
    "指点运动",
    "触控",
    "无障碍",
    "布局"
  ]
}