fitts-law

Apply Fitts's Law distance-width model to size and place interactive UI targets.

6|3|Updated May 3, 2026
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill fitts-law
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fitts-law
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/interaction-and-control-principles/skills/fitts-law
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill fitts-law

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It fixes slow, frustrating, and error-prone clicking or tapping by ensuring interactive targets are sized and placed to minimize aiming effort and misclicks.

Core Features & Use Cases

  • Target sizing for speed & accuracy: Applies minimum hit-area guidance (e.g., touch-friendly 44×44) so users can reliably hit buttons, icons, and controls.
  • Distance-aware placement: Reduces “cursor traversal” by placing high-frequency actions near where the user’s pointer naturally lands and grouping related actions.
  • Edge and touch-specific tuning: Uses screen-edge advantages appropriately and accounts for touch realities like finger occlusion and thumb reach.

Use it when designing or reviewing buttons, icon-only controls, toolbars/menus, drag handles, scrollbars, and mobile touch targets, or when debugging “users keep mis-clicking” and accessibility/motor-impairment concerns.

Quick Start

Ask an AI design reviewer to audit your UI for Fitts’s Law issues by checking target hit sizes, spacing, and whether edge-anchored/high-frequency actions are placed to minimize pointer travel.

Frequently Asked Questions about fitts-law

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to size touch targets to prevent misclicks?

To prevent misclicks, size interactive targets using Fitts's Law by enforcing minimum hit-area heuristics like the 44×44 pixel standard, ensuring users can reliably hit buttons, icons, and controls without aiming frustration.

How do I optimize UI button placement to reduce pointer travel time?

Reduce pointer travel time by placing high-frequency actions near where the user's pointer naturally lands and grouping related actions together, minimizing cursor traversal and speeding up target acquisition.

Does Fitts's Law apply to mobile thumb-reach and touch occlusion?

Yes, Fitts's Law applies to mobile contexts by tuning for touch-specific constraints like finger occlusion and thumb reach, ensuring edge-anchored interactions and touch-friendly layouts account for physical realities.

How do I audit my toolbar layout for target acquisition speed?

Audit your toolbar by checking target hit sizes, spacing, and whether edge-anchored or high-frequency actions minimize pointer travel, identifying interaction design issues that slow user actions.

When should I use screen-edge advantages for interactive UI elements?

Use screen-edge advantages for interactive UI elements when designing edge-anchored interactions like menus or toolbars, as edges effectively increase target hit area, allowing faster acquisition without overshooting.

Can I use this approach for accessibility-sensitive motor impairment contexts?

Yes, you can use Fitts's Law for accessibility-sensitive motor impairment contexts. By optimizing target sizing and distance-width models, it reduces aiming effort for pointer and touch tasks, improving accessibility.