Clicky

¿Por qué los botones de texto dañan la usabilidad móvil?

Botón texto móvil

Los botones de texto son más difíciles de tocar

Los estándares de uso de los botones son más altos para las aplicaciones móviles que para las aplicaciones de escritorio. Con una pantalla más pequeña y navegación con los dedos, los botones móviles deben ser fáciles de tocar, leer y reconocer. La mayoría de los botones sólidos cumplen con este estándar, pero los botones de texto rara vez lo hacen. Antes de usar botones de texto en tu aplicación, esto es lo que debes saber.

Los botones de texto son más difíciles de tocar

Un dedo es más grande que el cursor de un ratón. Colocarlo sobre un objetivo más pequeño resulta incómodo para los usuarios. El dedo cubre el texto del botón sin indicación visual para confirmar si se registró la acción. Si la etiqueta de texto es lo suficientemente larga, los usuarios tienen una pequeña pista visual pero aún no lo suficiente como para asegurar que hayan alcanzado el objetivo.

botones texto y el dedo

El pequeño tamaño de los botones de texto obliga a los usuarios a mover el dedo con precisión para golpear el objetivo. Más precisión requiere más esfuerzo por parte de los usuarios. Deben mantener sus ojos en el dedo y el objetivo para asegurarse de que tocan el botón de texto.

La falta de bordes rectos hace que los bordes sean más difíciles de distinguir y que el botón sea más difícil de orientar. Los botones sólidos no presentan este problema porque tienen un objetivo más grande y bordes más rectos.

Los botones de texto con todas mayúsculas son más difíciles de leer

Para combatir el problema de los botones de texto, algunos diseñadores diseñan sus botones de texto en mayúsculas. El sistema Material Design de Google promueve este estilo de botón, pero tiene sus defectos.

Las letras mayúsculas le dan al botón de texto bordes más rectos y un objetivo más grande. Pero esto no es mucho mejor porque el objetivo es solo un poco más grande y el estilo del texto reduce la legibilidad.

botones de texto con mayúsculas

Los botones de texto con todas mayúsculas son más difíciles de leer, especialmente para usuarios disléxicos. Los usuarios confían en la forma de las letras para identificar palabras. Las letras mayúsculas no tienen contrastantes ascendentes y descendentes, lo que hace que las palabras sean más difíciles de leer de un vistazo.

visibilidad de los botones de texto

Los botones de texto son más difíciles de reconocer

La diferencia entre los botones de texto y el texto es solo de color. Esto hace que los botones de texto sean más difíciles de reconocer, especialmente para los usuarios ciegos al color. Sin una forma distinta, es más probable que los usuarios pasen por alto los botones de texto y pierdan la llamada a la acción.

botones y texto

Qué usar en lugar de botones de texto

Muchos usan botones de texto para una acción secundaria y mostrar que el botón tiene la prioridad más baja. Pero hay mejores formas de hacer esto que no afecten la usabilidad móvil.

Botón esbozado

Una forma es colocar un contorno alrededor de la etiqueta de texto para hacer un botón delineado. Esto hace que el borde del botón sea visible para dar a los usuarios un objetivo más grande y más claro para tocar. Su dedo puede caer en cualquier lugar dentro o en el interior del contorno para que se registre la acción.

botón de texto delineado

La falta de un color de fondo sólido evita que compita con la llamada a la acción principal. Un contorno claro pero visible es ideal para evitar que compita con la etiqueta de texto.

Botón sombreado claro

Otra alternativa a los botones de texto es colocar la etiqueta de texto en un botón sombreado claro. Un botón sombreado claro distingue los bordes y el fondo del botón sin competir con la llamada a la acción principal. La sombra debería casi mezclarse con el fondo, pero aún así debe mantener un contraste suficiente para la visibilidad.

botón de texto con sombreado claro

Que tenga mas peso visual

Tanto el botón delineado como el botón de sombreado claro funcionan bien como acciones secundarias. Pero el botón sombreado claro tiene un poco más de peso visual y se aprecia mejor para presionar. El fondo le da al dedo un objetivo sólido para tocar en lugar de un contorno delgado.

botón de texto con sombreado destacado

Cuando los botones de texto tienen sentido

Hay casos en que los botones de texto tienen sentido. En lugar de usarlos para acciones secundarias, úsalos para acciones terciarias. Las acciones terciarias no reciben tantos toques y no necesitan tanta prominencia. Las acciones primarias y secundarias son más importantes, por lo que necesitan más peso visual.

botón de texto de acción terciaria

Otro caso en el que los botones de texto tienen sentido es cuando los usuarios necesitan ayuda para actuar. Usa los botones de texto cuando necesites proporcionar a los usuarios información contextual para ayudarlos a elegir la mejor opción. Los botones de texto evitan que los usuarios perciban la ayuda como una llamada a la acción porque no compiten con los otros botones.

botón de texto para ayuda

No abuses de los botones de texto

Es fácil desplegar botones de texto en la interfaz porque no requieren mucho esfuerzo en diseñarlos. Pero la consecuencia de hacer esto son usuarios frustrados que tienen problemas para leer, reconocer y tocar los botones. No tomes la solución perezosa y abuses de los botones de texto. La llamada a las acciones puede contener texto, pero siempre deben verse y sentirse como botones.

Jesus_Caceres