fitts-law
owl-listener/designer-skills
Apply Fitts's Law to size and position controls for faster, more accurate interaction.
What is fitts-law?
Fitts's Law quantifies how target size and distance affect acquisition time: larger targets closer to the pointer are faster to hit. Use this skill when designing interactive controls, especially for touch interfaces, to minimize errors and interaction time.
- Calculate movement time based on target distance and size using the Fitts's Law formula
- Determine minimum touch target sizes (44×44pt Apple, 48×48dp Material Design)
- Position controls to reduce reach distance and cognitive load
- Identify high-error interactions caused by undersized or poorly positioned targets
- Apply the law to common patterns: CTAs, FABs, navigation, modals, and destructive actions
- Distinguish between visual size and interactive hit area
How to install fitts-law
npx skills add https://github.com/owl-listener/designer-skills --skill fitts-lawHow to use fitts-law
- 1.Identify the interactive target you are designing (button, link, icon, etc.)
- 2.Measure or estimate the distance from the user's current pointer/thumb position to the target
- 3.Determine the target's width (interactive area, not visual size)
- 4.Apply the formula MT = a + b × log₂(2D / W) or use the practical guidelines (44×44pt minimum for touch)
- 5.Compare alternatives: increasing size or reducing distance both improve acquisition time
- 6.Test on real devices to validate that the target feels easy to hit in actual use
Use cases
- Sizing and positioning a primary call-to-action button for mobile thumb reach
- Placing form submission buttons near the last field to minimize cursor travel
- Designing bottom navigation tabs instead of top tabs for one-handed mobile use
- Expanding hit targets for frequently used or high-consequence actions
- Auditing existing interfaces to find and fix mis-tap or mis-click hotspots
- UI/UX designers
- Product designers working on mobile or touch interfaces
- Interaction designers optimizing for accuracy and speed
- Developers implementing accessible control layouts
- Design systems teams setting component sizing standards
fitts-law FAQ
Apple HIG recommends 44×44 points; Material Design specifies 48×48 dp. These account for finger contact area and reduce mis-taps. Pointer targets can be smaller (24×24px minimum) but should still be generous in dense UIs.
Yes, the law applies to both, but parameters differ. Touch has a larger contact zone and is less precise than pointer input, so touch targets should be larger and closer together.
No. Fitts's Law models motor time, not cognitive cost or visual hierarchy. Balance target size with spacing, visual design, and overall layout. Test on real devices to find the right balance.
Edges and corners are infinite-size targets because the pointer cannot overshoot them. Use this for persistent navigation (menu bars, taskbars) to make them faster and easier to hit.
It models motor acquisition time, not the cognitive effort to decide what to tap. Ambiguous labels, poor contrast, and unclear affordances still cause errors even if the target is well-sized and positioned.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: fitts-law
description: Apply Fitts's Law — target acquisition time depends on size and distance. Use when sizing and positioning controls, especially for touch. For how many controls to show at once, use hicks-law.
Fitts's Law
You are an expert in the relationship between target size, distance, and interaction accuracy.
What You Do
You apply Fitts's Law to ensure interactive targets are sized and positioned to minimize the time and effort required to reach and activate them.
The Principle
The time to acquire a target is a function of distance to the target and target size:
MT = a + b × log₂(2D / W)
Where: MT = movement time, D = distance to target, W = width of target, a/b = empirically derived constants.
In plain terms: large targets close to the pointer are fast to hit; small targets far away are slow and error-prone. Both dimensions — size and proximity — matter independently.
Practical Implications
Target Size
- Minimum touch target: 44×44pt (Apple HIG) / 48×48dp (Material Design) for touch interfaces
- Pointer targets can be smaller but should still be generous — 24×24px minimum for pointer, more for small or dense UIs
- Target size is the interactive area, not the visual icon — a 16px icon can have a 44px tap area
- Increase size for high-frequency or high-consequence actions (primary CTA, destructive confirm)
Target Distance
- Place related actions near the content they act on — a card action should live on the card, not across the screen
- Edges and corners of the screen are infinite-size targets (pointer cannot overshoot) — use them for persistent navigation (macOS menu bar, Windows taskbar)
- On mobile, bottom-of-screen placement reduces reach distance for right-hand thumb use
- Dialogs with confirmation actions should not require crossing the full screen to reach "OK"
What Fitts's Law Does Not Cover
- Cognitive cost: it models motor time, not the time to decide what to tap. A perfectly sized, well-positioned button still fails if the label is ambiguous.
- Touch accuracy vs pointer accuracy: touch has a larger contact zone and is less precise; pointer mechanics differ. The law applies to both but parameters vary.
- Gesture targets: swipe areas, drag handles, and scroll zones follow the same principles (bigger + closer = faster) but interact with accidental activation risk in ways the basic model doesn't capture.
Common Design Applications
| Pattern | Fitts's Law Application |
|---|---|
| Primary CTA | Large, high-contrast, positioned in thumb reach zone |
| Floating action button | Bottom-right on mobile — close to dominant thumb |
| Navigation tabs | Bottom nav on mobile beats top nav for one-handed use |
| Modal actions | Buttons near bottom of modal, not scattered |
| Form submit | Full-width or prominent button below the last field |
| Close button | Large enough hit target; consider bottom dismiss on mobile |
| Destructive action | Small and distant to prevent accidental activation |
Best Practices
- Always test tap target size on real devices — what looks adequate in design tools is often too small in hand
- Use padding, not visual size, to expand hit targets
- Do not apply Fitts's Law in isolation to justify oversized buttons; balance with visual hierarchy and spacing
- On desktop, exploit screen edges for persistent navigation; don't waste them
- Audit high-error interactions (mis-taps, mis-clicks) first — they are almost always Fitts's Law failures
Related skills
More from owl-listener/designer-skills and the wider catalog.
form-design
Design forms that reduce abandonment and errors through clear layout, smart validation, and accessibility.
gesture-patterns
Design intuitive touch and pointer gestures—swipe, drag, long-press—with discoverability and accessibility.
handoff-spec
Write complete implementation handoffs with measurements, behaviors, assets, states, and edge cases for developers.
heuristic-evaluation
Systematic expert review of interfaces against Nielsen's 10 usability heuristics with severity ratings.
hicks-law
Reduce decision time by controlling the number of simultaneous choices presented.
icon-system
Design and standardize icon systems with grid, sizing, naming, and implementation specs.