<?xml version="1.0" encoding="utf-8"?>

Touch target size and placement

Touch target size and placement Bad Practice
Touch target size and placement Best Practice

Mobile interfaces contain various interactive elements (buttons, menus, icons, links) that must be sized and spaced properly for reliable touch interaction.

Touch target guidelines vary by platform:

  • WCAG minimum: 9x9mm (34px)[1]
  • Material Design: 48x48px
  • iOS: 44x44px
  • Increase sizes further for apps used while moving, allowing room for error

Key design considerations:

  • Keep at least 8dp/16px spacing between interactive elements
  • Add inactive space around elements with minimum-sized touch targets
  • Position primary buttons within thumb's reach, as users often operate phones one-handed

Pro Tip: Test your touch targets by navigating one-handed. If you struggle to tap accurately, increase target sizes or reposition key elements.

Improve your UX & Product skills with interactive courses that actually work