Áreas táctiles: tamaños mínimos y espaciado para móvil
Qué es un área táctil, qué tamaño mínimo piden WCAG, Android y Nielsen Norman Group, y por qué el espaciado entre controles importa tanto como el tamaño.
¿Qué es el área táctil y en qué se diferencia del dibujo?
Un icono de 16 píxeles puede ser el mismo icono en pantalla, pero su área de toque no tiene por qué ser de 16 píxeles. Lo que cuenta para el usuario es la zona donde un toque activa el control. Si esa zona es pequeña, el usuario falla, vuelve a intentarlo y se frustra, aunque el diseño visual esté perfecto.
Esto importa porque el dedo es mucho más grueso que el puntero del ratón. La Ley de Fitts explica que el tiempo para alcanzar un objetivo depende de su distancia y de su tamaño, y que los movimientos rápidos hacia objetivos pequeños aumentan los errores. Nielsen Norman Group añade que los objetivos usados mientras se camina o se conduce son más difíciles de acertar. Puedes repasar el modelo en la página sobre la ley de Fitts. Si el control responde a un gesto y no a un toque, el problema cambia: lo explica gestos en móvil.
¿Qué tamaño mínimo piden las normas?
Las fuentes no coinciden en unidades ni en valores, así que conviene verlas juntas:
| Fuente | Valor | Nivel o contexto |
|---|---|---|
| WCAG 2.2, criterio 2.5.8 (Target Size, Minimum) | Al menos 24 × 24 píxeles CSS | Nivel AA, con excepciones |
| WCAG 2.2, criterio 2.5.5 (Target Size, Enhanced) | Al menos 44 × 44 píxeles CSS | Nivel AAA, con excepciones |
| Android (Accessibility, Touch target) | Al menos 48 × 48 dp, con 8 dp de separación | Recomendación de Google |
| Nielsen Norman Group | Alrededor de 1 cm × 1 cm | Medida física, basada en un estudio de Parhi, Karlson y Bederson (2006) |
Dos cosas que se pasan por alto. Primero, WCAG 2.2 permite un objetivo menor de 24 píxeles si, dibujando un círculo de 24 píxeles centrado en él, ese círculo no se solapa con otro objetivo. Segundo, Nielsen Norman Group prefiere el centímetro porque mide algo que el usuario percibe, no un valor de pantalla. Si diseñas para iOS, revisa las guías de Apple en puntos (pt); la unidad no es la misma que el píxel CSS.
¿Por qué el espaciado importa tanto como el tamaño?
Nielsen Norman Group insiste en un orden: los objetivos primero deben ser lo bastante grandes y luego estar bien separados. Si son demasiado pequeños, añadir espacio entre ellos no suele resolver el problema. El espaciado evita que el toque caiga en el control de al lado, y el tamaño evita que el toque no caiga en ninguno.
En la práctica, el espaciado es el que más se descuida. Por eso las guías de Android piden 48 × 48 dp y, además, 8 dp o más de espacio entre controles. Esas guías también recogen una excepción: en botones muy pequeños y muy juntos no siempre es posible ampliar el área sin que se solapen.
¿Cómo se aplica en el diseño?
- Diseña el área de toque aparte del dibujo. Si partes de un diseño mobile first, este paso es el que más se olvida. En Figma o en CSS, el icono puede medir 16 píxeles mientras el contenedor clicable mide 44 o 48. Un relleno invisible hace el trabajo. En Android,
TouchDelegate(vistas) o un contenedor clicable (Compose) amplían la zona sin cambiar cómo se ve el elemento. - Revisa el espaciado entre controles. Si dos controles están a menos de 8 dp de distancia, mira si una de las dos áreas se solapa con la otra.
- Prioriza las acciones principales. Nielsen Norman Group recomienda objetivos mayores para las acciones principales, para personas mayores, para niños y para el uso en movimiento.
- Prueba con el pulgar. Abre el prototipo en el móvil real, con una mano, sin mirar la pantalla un instante. Lo que sea difícil en ese momento lo será en la vida real.
- Documenta el valor en la librería de componentes. Una regla escrita evita que cada pantalla invente su propio tamaño. Si el sistema de diseño ya define tokens de espaciado, usa esos mismos valores para el área táctil.
¿Cuándo NO conviene aplicar el valor mínimo?
- Enlaces dentro de un párrafo. WCAG tiene una excepción para los enlaces en línea: el texto que los rodea ya define su extensión.
- Controles cuyo tamaño fija el sistema operativo. Una barra de estado o un selector nativo no se rediseña.
- Cuando existe un equivalente accesible. WCAG admite un objetivo más pequeño si la misma función está disponible en otro control con el tamaño adecuado en la misma página.
En cambio, no uses estas excepciones como excusa para dejar botones pequeños. Son casos concretos, no una norma general.
Ejemplo
Ejemplo ilustrativo: una lista de tareas con un icono de papelera de 16 píxeles y un icono de editar de 16 píxeles, separados por 4 píxeles.
- Problema: al tocar la papelera, muchas veces se abre la edición, porque las áreas se solapan.
- Corrección: cada icono tiene un contenedor de 44 × 44 píxeles, con 8 píxeles de separación entre contenedores. El dibujo sigue siendo de 16 píxeles.
- Verificación: se prueba en un móvil real, con el pulgar, durante un minuto de uso normal.
El resultado visual casi no cambia. Lo que se comprueba en la prueba es que los toques fallidos desaparezcan. Es un buen ejemplo de cómo la interacción puede mejorar sin tocar el estilo.
Errores comunes
- Confundir el tamaño del icono con el tamaño del área táctil.
- Usar píxeles, puntos y dp como si fueran la misma unidad.
- Pensar que el espaciado compensa un objetivo muy pequeño.
- Diseñar con el ratón en el escritorio y no probar en móvil.
- Dejar los enlaces de navegación secundarios tan pequeños que nadie los alcanza.
- Mezclar tamaños distintos para controles de la misma función en pantallas diferentes.
Fuentes
- W3C, Understanding SC 2.5.8: Target Size (Minimum)
- W3C, Understanding SC 2.5.5: Target Size (Enhanced)
- Nielsen Norman Group, Touch Target Size
- Google, Touch target size (Accessibility, Android)
- Laws of UX, Fitts’s Law