Aplicar el tamaño adecuado a los botones táctiles

Esta regla se activa cuando PageSpeed Insights detecta que determinados elementos táctiles (como botones, enlaces o campos de formulario) pueden ser demasiado pequeños o estar demasiado juntos, lo que impide que el usuario pueda tocarlos fácilmente en una pantalla táctil.

Información general

Es más difícil usar los enlaces o los botones pequeños o muy juntos en una pantalla táctil que en un ordenador con un ratón. Para evitar que los usuarios se frustren al tocar el elemento incorrecto, estos elementos deberían ser lo suficientemente grandes y estar lo suficientemente separados entre sí para que el usuario pueda tocarlos sin tocar otros por accidente. El tamaño medio de la yema del dedo de un adulto es de aproximadamente 10 mm de ancho (un poco menos de media pulgada), y las directrices de interfaz de usuario de Android recomiendan utilizar elementos de aproximadamente 7 mm, o de 48 píxeles CSS, en un sitio con una ventana gráfica bien configurada para móviles.

Recomendaciones

Debes asegurarte de que los elementos más importantes de tu sitio (los que se utilizarán con más frecuencia) sean lo bastante grandes como para tocarlos sin dificultad; como mínimo 48 CSS píxeles de alto y de ancho, suponiendo que se haya configurado la ventana gráfica correctamente. Los enlaces que se utilicen menos pueden ser más pequeños, pero aun así deberían estar lo bastante separados entre sí, de modo que una yema de dedo de 10 mm no toque por error otros enlaces al mismo tiempo. Los usuarios no deberían tener que usar el zoom (ni depender de otras funciones de interfaz del navegador, como la lupa de Chrome) para presionar con facilidad y con precisión el botón o el enlace deseado.

Aumenta los elementos táctiles más importantes para que sean fáciles de tocar

Entre ellos, se incluyen los elementos más utilizados por los usuarios, como los botones para acciones frecuentes, las barras de búsqueda, los campos de formulario más importantes y los principales enlaces de navegación. Estos elementos táctiles deberían ser por lo menos de 7 mm (48 píxeles CSS si has configurado la ventana gráfica correctamente) y deberían tener espacio adicional alrededor de ellos si miden menos de 7 mm.

Deja espacio suficiente entre los elementos táctiles más pequeños

Es normal que los enlaces o los botones utilizados con menos frecuencia tengan un tamaño menor al recomendado (7 mm), pero no debería haber otros elementos táctiles en un radio de 5 mm (32 píxeles CSS). De este modo, el usuario no tocará por error otros elementos.