Error de conexión. Inténtalo de nuevo.

Saltar al contenido
SEO Tools
Ayuda y documentación
UX / UI Impacto medio Fácil 15 a 30 minutos

Legibilidad y tamaño de enlaces/botones.

Los elementos en los que se puede hacer clic deben ser legibles y fáciles de acceder.

Qué es

Los enlaces y botones con texto pequeño son más difíciles de leer y, sobre todo, más difíciles de tocar con el dedo en una pantalla táctil. Esto se relaciona con el tamaño del llamado objetivo de toque (el área en la que se puede hacer clic).

Por qué importa

Los elementos pequeños en los que se puede hacer clic aumentan la tasa de error: en lugar de hacer clic, el usuario pierde o accede a un enlace adyacente. Eso es frustrante y reduce las conversiones. Google recomienda un objetivo táctil de al menos 48×48 px con espacio.

Cómo hacerlo

  1. 1Proporcione enlaces y botones con texto legible (idealmente 14px+).
  2. 2Asegúrese de que haya un área suficiente en la que se pueda hacer clic (mín. ~44–48 px) mediante el relleno, no solo el tamaño del texto.
  3. 3Deje espacio entre los elementos adyacentes en los que se puede hacer clic (por ejemplo, 8px+) para que los dedos no se superpongan.
  4. 4En dispositivos móviles, pruebe con el pulgar, no con el mouse.

Ejemplo

Correcto
.btn, navega a {
  font-size: 1rem;
  padding: 12px 16px;   /* sufficient clickable area */
  display: inline-block;
}

Conclusión

Haga que los elementos en los que se puede hacer clic sean generosos: texto legible, amplio relleno y espaciado. Solo puede verificar el tamaño exacto del objetivo en el navegador, pero el texto diminuto en el que se puede hacer clic es una señal clara de que hay que solucionarlo. Menos clics erróneos = más conversiones.

Temas relacionados