Touch Targets & Ergonomics

Technical Deep Dive & Specifications

Fitts's Law in Mobile Ergonomics

Formulated by psychologist Paul Fitts in 1954, Fitts's Law models the time $MT$ required to rapidly move to and acquire a target:

$$MT = a + b \log_2\left(\frac{2D}{W}\right)$$

Where:

• $D$ is the Distance from the user's current finger position to the target.
• $W$ is the Width (effective size) of the target along the axis of motion.
• $\log_2\left(\frac{2D}{W}\right)$ is the Index of Difficulty (ID).

Mobile Design Implications:

1. Maximize $W$: Increasing a button's touch target size dramatically reduces tap time and error rates.
2. Minimize $D$: Placing critical controls (primary action buttons, navigation bars) at the bottom of the screen places them within immediate reach of the thumb.

The Mobile Thumb Zone

Research by Steven Hoober reveals that over $49%$ of mobile users operate their smartphones with one hand, one thumb. The physical reach of the human thumb creates three distinct zones on a screen:

+-----------------------------------+
| [!] HARD ZONE (Painful Stretch)   | <- Account settings, dangerous actions
|                                   |
|-----------------------------------|
| [-] REACH ZONE (Moderate Stretch) | <- Secondary content, search filters
|                                   |
|-----------------------------------|
|                                   |
| [+] NATURAL THUMB ZONE            | <- Primary CTAs, bottom nav, tab bar
|     (Effortless, Fast, Accurate)  |
|                                   |
+-----------------------------------+

Accessibility Standards & Platform Guidelines Matrix

Different regulatory and platform bodies prescribe strict minimum target dimensions:

Separating Visual Size from Touch Target Size

A common designer objection is: "A 44px icon looks huge and ruins the minimal visual aesthetic!"

Senior engineers solve this by decoupling the visual bounding box from the hit-test bounding box using CSS pseudo-elements (::after or ::before):

.icon-btn {
  /* Visual icon size: 20px x 20px */
  width: 20px;
  height: 20px;
  position: relative;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Expanded Touch Hitbox: 44px x 44px */
.icon-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  /* Optional: background: rgba(255, 0, 0, 0.2); for visual debugging */
}

+---------------------------------------------------+
|               TOUCH TARGET HITBOX (44x44)         |
|   ::after pseudo-element                          |
|                                                   |
|             +-----------------------+             |
|             |  VISUAL ICON (20x20)  |             |
|             |         [ 🔍 ]        |             |
|             +-----------------------+             |
|                                                   |
+---------------------------------------------------+

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 52–63 (.touch-target-btn): Sets the visible element dimensions to a compact $24 \times 24\text{px}$ so the visual aesthetic remains uncluttered.
• Line 66–74 (.touch-target-btn::after): Generates an invisible pseudo-element centered at $(50%, 50%)$ with width and height set to $48\text{px}$. Any touch inside this $48\text{px}$ radius fires the button's click event.
• Line 76–78 (.touch-target-btn:active::after): Provides subtle, circular visual feedback when touched, reinforcing user confidence in the interaction.
• Line 104 (aria-label="Home"): Ensures that icon-only buttons remain accessible to screen readers.

Expected Browser Render Output

❌ Anti-Pattern: Micro Targets
Tiny 12px buttons with 4px gap. Try tapping "Edit" without hitting "Delete".
[View] [Edit] [Copy] [Delete]

✅ WCAG 2.5.5 Compliant (48px Hitbox)
Visual icons are 24px, but each has a 48px expanded hit area via ::after.
+-------------------------------------------------------------+
|     🏠            🔍             🔖             👤          |
+-------------------------------------------------------------+