Cuantos más botones haya, más tiempo tardarán los usuarios en decidirse. Tienen que examinar cada botón para descubrir cuál cumple mejor con su objetivo. Cualquier incertidumbre podría hacer que no tomen ninguna medida o que tomen la medida equivocada.
Puedes evitar esto haciendo que tu botón CTA sea más intuitivo. Cuando los usuarios pueden ver qué botón es importante para ‘la tarea’, podrán actuar de inmediato.
A continuación revisamos algunas técnicas de UX que puedes utilizar para que los botones CTA de tu APP sean más intuitivos.
Ordenar botones según el patrón de escaneo
Un error común que se suele cometer, es colocar primero el CTA, pensando que funcionará mejor porque será lo primero que vean los usuarios. Esto es innecesario porque el peso visual del botón ya lo hace perceptible.
No solo eso, sino que colocar primero el CTA rompe el patrón de escaneo natural del usuario. Los usuarios deben escanear todos los botones y luego invertir la dirección de escaneo para volver al CTA.
En lugar de obligar a los usuarios a volver a escanear los botones, coloca el CTA al final para que los usuarios puedan acceder a ella escaneando los botones en un único flujo de arriba a abajo. Esto les hará más eficientes al examinar cada botón antes de decidir. La ubicación inferior también es la más fácil de alcanzar para los dedos, lo que mejora aún más la eficiencia.
Distinguir los botones con un contorno
Otro error es utilizar sólo texto para representar un botón de baja prioridad. Esta es una mala elección para un CTA, aunque sea secundario porque el texto no parece un botón. Parece un texto sin formato, lo que puede hacer que los usuarios pasen por alto esas acciones.
Los botones de texto no sólo son más difíciles de reconocer, sino que también son objetivos más pequeños que son más difíciles de tocar. Para que los botones secundarios sean más fáciles de tocar y reconocer, subsctituye este texto por el diseño de un botón sin un fondo de color sólido. Ahora todos són botones y no compiten con el CTA principal debido al contraste de color del CTA principal a los CTAs secundarios.
Agregar color a los botones de alta prioridad
El botón con mayor prioridad es el más fácil de identificar. Es la acción que lleva a los usuarios directamente a su objetivo. Si no estás seguro de la prioridad de tu botón, considera qué acción hace que los usuarios avancen hacia su objetivo y qué acción los hace retroceder.
En el ejemplo, el botón "Checkout" tiene la máxima prioridad porque hace que los usuarios avancen hacia su objetivo más rápido. Debe tener el mayor peso visual y el mayor contraste. Pero no está claro qué acción tiene prioridad: "Ver carrito" o "Seguir comprando".
La acción "Ver carrito" lleva a los usuarios a ver los artículos que agregaron a su carrito, lo que luego los lleva al pago. La acción "seguir comprando" hace retroceder a los usuarios a las páginas de productos más alejadas del proceso de pago.
Según este análisis, "Ver carrito" tiene una prioridad media y "Seguir comprando" tiene una prioridad baja. El botón "Ver carrito" merece más peso visual y mayor contraste de color que el botón "Seguir comprando".
Al comprender el objetivo del usuario y examinar cómo cada acción hace que los usuarios avancen hacia él, podrás establecer la prioridad de los botones.
El color es una forma eficaz de indicar botones de alta prioridad porque destaca del texto negro y capta la atención del usuario. No uses el mismo color en los botones que en el texto. Debilita la señal visual del botón y hace que sea más difícil notarlo.
Importante, no utilices exactamente el mismo color para dos botones diferentes o los usuarios no sabrán cuál tiene mayor prioridad. Y no uses colores diferentes para cada uno o confundirás a los usuarios y harás que se pregunten qué significan los colores.
Utiliza un color distinto con el mismo tono para ambos botones, pero varía la saturación y el brillo para el de prioridad media. Esto hace que el botón de prioridad media tenga un peso visual más ligero que el botón de alta prioridad, de esta forma no competirán visualmente.
Para mejorar aún más el contraste, puedes invertir la polaridad de la pantalla. Utiliza texto claro sobre un fondo oscuro para el botón principal y oscuro sobre claro para el secundario. Esto le da a la acción de alta prioridad una etiqueta de texto más brillante y el mejor contraste posible.
Peso de la fuente en los botones
Usar la misma negrita en cada etiqueta de texto los coloca en el mismo énfasis. Es mejor enfatizar cada etiqueta de texto de los botones con diferentes pesos de fuente para indicar prioridad cuando los usuarios las leen.
Varía los pesos de fuente de las etiquetas de texto para que el botón de alta prioridad sea el más negrita. Luego haz que el botón de prioridad media esté menos en negrita y el botón de prioridad baja esté menos en negrita. Tendrás que elegir un tipo de letra que ofrezca diferentes pesos de fuente para hacer esto.
En el ejemplo, la etiqueta "Checkout" es más llamativa y brillante que el resto. La etiqueta "View Cart" está en seminegrita y la etiqueta "Keep Shopping" es medium. Como resultado, las etiquetas de texto reflejan el peso visual de cada acción.
Poner un icono en el botón de alta prioridad
La última técnica es la guinda del pastel que hará que los botones de tu APP sean accesibles para los usuarios daltónicos. Los usuarios daltónicos no podrán notar la diferencia entre el peso visual de los botones. Necesitan algo más que color que les sirva como señal visual.
Poner un ícono en el botón de alta prioridad agrega un énfasis adicional para diferenciarlo. El ícono refuerza la señal del botón y garantiza que atraerá la mayor atención. La investigación sobre el seguimiento ocular ha demostrado que los elementos visuales obtienen más fijaciones oculares que el texto.
Conclusión
Hacer un análisis de cómo representar las acciones CTA en tu APP teniendo en cuenta estas 5 técnicas, te ayudarán a evaluar si la experiencia de usuario está acorde a tus expectativas de conversión. Utiliza estas técnicas para mejorar el UX de los CTA en tu APP móvil, verás una diferencia visual y todavía más importante, de usabilidad.
Referencia:
· 5 Techniques to Make Mobile Call to Action Buttons Intuitive