Fitts Law
- 622 installs
- 2k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
Fitts's Law is a Claude skill that applies Fitts's Law to size and position interactive targets for fast, accurate interaction for developers who need evidence-based hit-area and placement decisions.
About
Fitts's Law is a designer-skills module from owl-listener that applies the movement-time relationship between target distance and target width to UI controls. The skill uses the formula MT = a + b × log₂(2D / W) and translates it into practical guidance: enlarge targets, reduce pointer travel, and place primary actions where acquisition is fastest. Developers invoke it when touch targets feel cramped, destructive actions sit too close to primary buttons, or desktop menus suffer mis-clicks. The workflow reviews distance D and width W for buttons, icons, and mobile tap zones so interaction latency and error rates improve without full usability lab studies.
- fitts-law
Fitts Law by the numbers
- 622 all-time installs (skills.sh)
- +61 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #622 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill fitts-lawAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 622 |
|---|---|
| repo stars | ★ 2k |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you size UI targets using Fitts's Law?
Use fitts-law for development tasks
Who is it for?
Frontend developers tuning button sizes, menu placement, and touch targets who want quantitative UX guidance instead of arbitrary pixel choices.
Skip if: Typography readability, color contrast audits, or information architecture unrelated to pointer movement to controls.
When should I use this skill?
A developer asks to apply Fitts's Law, optimize button hit areas, reduce mis-clicks, or position controls for faster target acquisition.
What you get
Sized and positioned interactive targets with documented distance-to-width rationale for reduced mis-clicks.
- Target sizing recommendations
- Control placement guidance
Files
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
Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k
Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16kLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k
Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k
Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198kHow it compares
Choose Fitts's Law for quantitative target sizing and placement; pair with readable-measure or localization-design for typography and i18n layout concerns.
FAQ
What formula does the Fitts's Law skill use?
The Fitts's Law skill applies MT = a + b × log₂(2D / W), where MT is movement time, D is distance to the target, and W is target width. Larger nearby targets reduce acquisition time and mis-click rates.
When should developers invoke Fitts's Law?
Developers should invoke Fitts's Law when sizing buttons, icons, or touch zones and when primary actions suffer mis-clicks due to small targets or long pointer travel across the layout.