Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/ux-fitts-target-size.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown32 linesFree

rules/ux-fitts-target-size.md

1---
2title: Size Interactive Targets for Easy Clicking
3impact: HIGH
4tags: ux, fitts, target-size
5---
6 
7## Size Interactive Targets for Easy Clicking
8 
9The bigger something is, the easier it is to click. Make interactive elements large enough to hit comfortably.
10 
11**Incorrect (tiny click target):**
12 
13```css
14.icon-button {
15  width: 16px;
16  height: 16px;
17  padding: 0;
18}
19```
20 
21**Correct (comfortable target):**
22 
23```css
24.icon-button {
25  width: 32px;
26  height: 32px;
27  padding: 8px;
28}
29```
30 
31Reference: Fitts, P. M. (1954). The information capacity of the human motor system.
32

User Interface Wiki

rules/ux-fitts-target-size.md

Preparing the source view

User Interface Wiki

rules/ux-fitts-target-size.md