Touch Targets & Mobile UX

Touchscreens are fundamentally different from mice. A finger is imprecise, covers what it taps, and cannot hover. Designing for touch requires deliberate attention to target sizes, spacing, and interaction patterns.

Minimum Touch Target Sizes

The most common mobile usability problem is targets that are too small. Industry guidelines are clear:

• WCAG 2.2 (Level AA) — minimum 24x24 CSS pixels, with at least 24px spacing between targets
• Apple HIG — minimum 44x44 points
• Material Design — minimum 48x48 dp
• Practical recommendation — aim for at least 44x44 CSS pixels

/* Too small: default link styling */
.nav-link {
  font-size: 0.875rem;
  /* Actual tap area is just the text height: ~14px */
}

/* Better: generous padding creates a large tap area */
.nav-link {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  display: inline-block;
  /* Tap area is now ~38px tall minimum */
}

You can also increase the tap area without changing the visual size using pseudo-elements:

.icon-button {
  position: relative;
  width: 24px;
  height: 24px;
}

/* Invisible expanded tap area */
.icon-button::after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

Spacing Between Targets

Targets that are large enough can still cause mis-taps if they are too close together. Always provide clear spacing:

.button-group {
  display: flex;
  gap: 0.75rem; /* 12px between buttons */
}

.list-item {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  /* Each item is a distinct, separated target */
}

A common failure is dense navigation with many small links packed together. On mobile, rethink the layout entirely — use a hamburger menu, bottom sheet, or vertical list instead of cramming a desktop nav into a small screen.

The Thumb Zone

Most people hold their phone in one hand and operate it with their thumb. Research by Steven Hoober shows that the "thumb zone" — the area easily reachable by the thumb — is limited:

• Easy reach — bottom-center area of the screen
• Moderate reach — bottom corners and middle of the screen
• Hard to reach — top of the screen, especially the top-left corner

Design implications:

• Place primary actions (submit buttons, main navigation) in the easy-reach zone
• Avoid placing critical actions at the top corners of the screen
• Bottom navigation bars are easier to use than top navigation on mobile

<!-- Mobile-friendly: primary action at bottom -->
<div class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t">
  <button class="w-full py-3 bg-blue-600 text-white rounded-lg text-lg font-medium">
    Complete Purchase
  </button>
</div>

Touch Gestures

Touch devices support gestures beyond simple taps. Use them purposefully:

The golden rule: never make a gesture the only way to perform an action. Swipe-to-delete must have a visible delete button alternative. Long-press menus must have a tap-accessible version.

Mobile Form UX

Forms are especially challenging on mobile:

<!-- Use correct input types for appropriate keyboards -->
<input type="email" /> <!-- Shows @ key -->
<input type="tel" />   <!-- Shows number pad -->
<input type="url" />   <!-- Shows .com key -->
<input type="number" inputmode="numeric" /> <!-- Shows number pad -->

<!-- Use autocomplete for faster filling -->
<input type="text" name="name" autocomplete="name" />
<input type="email" name="email" autocomplete="email" />
<input type="tel" name="phone" autocomplete="tel" />

Additional mobile form best practices:

• Use single-column layouts — two-column forms are difficult on narrow screens
• Place labels above inputs — left-aligned labels waste horizontal space on mobile
• Show inline validation — do not wait for form submission to show errors
• Avoid dropdowns for short lists — radio buttons or segmented controls are easier to tap

Performance as UX

On mobile, performance is part of the user experience. A button that takes 3 seconds to respond feels broken. Key optimizations:

• Eliminate the 300ms tap delay — modern browsers do this automatically with <meta name="viewport">
• Use touch-action: manipulation — prevents double-tap zoom delay on specific elements
• Provide instant visual feedback — use :active styles so users know their tap registered

.button {
  touch-action: manipulation;
  transition: transform 0.1s ease;
}

.button:active {
  transform: scale(0.97);
}

Every tap should produce immediate visual feedback, even if the underlying action takes time to complete.