Objetivos táctiles: por qué 44px importa

Los iconos de archivar y eliminar están uno al lado del otro al final de cada fila en la aplicación de correo, cada uno dibujado a 24 píxeles, cada uno rellenado hasta un objetivo de 32px, sin espacio entre ellos. La zona de contacto de un pulgar es más ancha que cualquiera de los dos. Apuntas a archivar, el toque cae unos píxeles a la derecha de donde miraste, y el mensaje desaparece. Nada en el diseño visual está mal: los iconos son nítidos, están alineados, sobre la rejilla. Las áreas de toque fallaron.

Un objetivo táctil es la región que acepta el toque —el área de toque, no el control visible— y las principales guías coinciden en su mínimo: las Human Interface Guidelines de Apple recomiendan al menos 44×44pt, Material Design especifica 48×48dp, y WCAG 2.2 convierte los 24×24 píxeles CSS en un requisito de nivel AA (criterio de conformidad 2.5.8), con excepciones para objetivos bien espaciados.

Cumplir esos mínimos es sobre todo aritmética: relleno, espacios y sumas tomados del mismo sistema de espaciado que dimensiona todo lo demás. Este artículo cubre de dónde vienen los números, cómo el relleno convierte un elemento visual pequeño en un objetivo cómodo, y por qué el espacio entre objetivos cuenta tanto como los propios objetivos.

¿De dónde vienen los 44px y los 48px?

Primero las unidades: los puntos de iOS, los dps de Android y los píxeles CSS son todos unidades independientes de la densidad y de tamaño físico comparable, así que los números de las guías pueden compararse directamente aunque no sean formalmente idénticos. 44pt en un iPhone típico y 48dp en un teléfono Android típico dan ambos cerca de 7mm de pantalla física, en el entorno de la zona de contacto de la yema de un dedo.

El trasfondo de investigación es la ley de Fitts, mencionada aquí como contexto y no como una fórmula para aplicar: apuntar se vuelve más rápido y preciso cuando los objetivos son más grandes y están más cerca, y los estudios táctiles encuentran de forma consistente que las tasas de error se disparan en cuanto los objetivos se reducen por debajo de unos 7mm de tamaño físico. Los mínimos de las plataformas se sitúan justo por encima de ese codo, redondeados a valores compatibles con la rejilla en la unidad de cada plataforma: 44 y 48 no son mágicos, son el punto en el que los toques errados dejan de ser rutina, expresados en números que se combinan con el espaciado basado en 4 y en 8.

El tercer mínimo es más nuevo y más bajo. El tamaño de objetivo (mínimo) de WCAG 2.2 —criterio de conformidad 2.5.8, nivel AA— exige objetivos de al menos 24×24 píxeles CSS, con excepciones: un objetivo más pequeño cumple si está espaciado de modo que un círculo de 24px centrado en él no se solape con ningún objetivo vecino ni con su círculo, si la misma acción está disponible a través de un control más grande, o si el objetivo es un enlace dentro de una frase. Como muchas normativas y reglas de contratación pública hacen referencia al nivel AA de WCAG, 24px es lo más parecido a un mínimo legal que tiene el campo. Aun así, es un mínimo: una interfaz táctil cómoda se sitúa en 44–48, y la distancia entre «cumple» y «cómodo» es exactamente la distancia entre la pregunta de un abogado y la de un diseñador.

¿Es el objetivo táctil lo mismo que el control visible?

No, y en esa distinción viven la mayoría de las soluciones. El elemento visual puede seguir siendo pequeño; el área de toque crece con el relleno. Un icono de 24px con 12px de relleno en cada lado es un objetivo de 48×48 (24 + 2 × 12 = 48): el icono que ves es una cuarta parte del área que puedes tocar.

La razón intuitiva por la que el relleno funciona: apuntas con los ojos al elemento visual, pero aterrizas con una zona de piel más grande que la mayoría de los glifos, y los toques se dispersan alrededor del punto previsto. El relleno es donde aterriza esa dispersión. Un elemento visual de 24px con 12px de relleno perdona un fallo de hasta 12px en cualquier dirección; el mismo elemento visual con 4px de relleno castiga cualquier cosa que pase de 4.

En la escala modular que se usa en estos artículos —base 16, razón 2, dos notas, que genera 8, 11, 16, 23, 32, 45, 64— el relleno del área de toque es un lugar donde la subrejilla de 4pt se gana el sueldo. 12 no es un paso de la escala de razón 2, pero está en la capa de 4pt, y hace que la suma caiga en el 48 de Material. El propio paso 11 de la escala también funciona: 24 + 2 × 11 = 46, por encima del 44 de Apple y muy por encima del 24 de WCAG. Ambos son defendibles; 12 además mantiene el total en el múltiplo de 8 que suelen tener las alturas de las barras de herramientas. La división del trabajo es la habitual: la escala aporta los tamaños de los iconos y los espacios, la capa de 4pt ajusta la suma.

¿Qué aspecto tiene en números una barra de herramientas tocable?

Un ejemplo resuelto: cuatro controles en una barra de herramientas de correo en una pantalla de 360px de ancho.

Cuatro objetivos de 48px y tres espacios de 8px abarcan 216px: cómodo en una pantalla de 360px con sitio de sobra para un título. Dos detalles condensan la lección. Buscar dibuja su glifo a 16 (un paso exacto de la escala) y se rellena con el paso 16 hasta el mismo total de 48: los tamaños visuales pueden variar mientras las áreas de toque se mantienen uniformes. Y Eliminar queda a un espacio de 8px de Archivar, lo suficiente para que un casi-fallo muera en el espacio; las acciones destructivas a menudo merecen más separación o una confirmación encima, pero eso es una decisión de colocación, no de tamaño.

Abre la escala de la que vienen estos números —8, 11, 16, 23, 32— y lee la barra de herramientas a partir de ella: el paso 8 es el espacio, el 16 el icono pequeño y su relleno, con la capa de 4pt aportando el 12.

¿Cuentan los espacios entre objetivos?

Sí: el espaciado entre objetivos compra precisión del mismo modo que lo hace el tamaño. Los toques se dispersan alrededor del punto al que se apunta, así que la costura entre dos objetivos adyacentes es donde los fallos dejan de ser inofensivos: dos objetivos de 48px con cero espacio entre ellos siguen produciendo toques de acción equivocada en el borde compartido, porque cerca de ese borde más o menos la mitad de la dispersión cae en el vecino. Un espacio de 8px convierte la costura en espacio muerto: un fallo ahí no hace nada, lo cual es recuperable, en lugar de hacer algo equivocado, lo cual puede no serlo.

WCAG codifica el mismo compromiso de forma explícita: su excepción de espaciado permite que un objetivo demasiado pequeño cumpla cuando está lo bastante aislado, que es la norma admitiendo que el tamaño efectivo de un objetivo es tamaño más separación. La disposición segura más densa rara vez es el máximo número de objetivos que se tocan: es un objetivo menos, con espacios.

¿Cuándo es aceptable un objetivo más pequeño?

Las excepciones de WCAG esbozan la respuesta honesta: los enlaces dentro de una frase están exentos, un objetivo pequeño pasa cuando la misma acción existe como un control más grande en otra parte de la página, y la excepción de espaciado cubre las disposiciones densas pero aisladas. Más allá de la conformidad, el contexto importa —los punteros de ratón toleran objetivos más pequeños que los dedos—, pero los dispositivos híbridos portátil-tableta difuminan la línea, así que cuando la entrada es incierta, los mínimos táctiles son el valor por defecto más seguro.

Haz la barra de herramientas más densa sin perder el mínimo

A veces los 48 genuinamente no caben: más controles de los que la fila tiene sitio. La jugada no es recortar el relleno a ojo, sino volver a derivarlo: abre la misma escala con una tercera nota por octava y el menú gana pasos en 10, 13, 20 y 25. Rellena el icono de 24px con el nuevo paso 10 y el área de toque cae exactamente en 44 —el mínimo de Apple—, recuperando 4px por control mientras cada número sigue siendo derivado en lugar de improvisado.