Krypton Solid

4 formas sencillas de diseñar botones de llamada a la acción asesinos

4 formas sencillas de diseñar botones de llamada a la acción asesinos

Los botones de llamada a la acción que son fáciles de ver y comprender marcarán una gran diferencia en las tasas de conversión de su cliente. Al diseñar estos botones, es imperativo tener en cuenta una amplia gama de factores. Algunos de ellos incluyen el color, el contraste, la copia del botón e incluso si incluir o no algunas señales direccionales justo al lado del botón.

En resumen, para un elemento que ocupa un pequeño espacio en su página web, tendrá que invertir una cantidad desproporcionada de tiempo pensando en la mejor manera de presentarlo a sus usuarios. Sí, los botones de llamada a la acción son tan importantes. Después de todo, son las estrellas de una página, ya sea para que los visitantes del sitio compren algo, se registren en algo o simplemente hagan clic.

Representan el objetivo de su página. Cada página debe tener un objetivo. Tome una página de destino, por ejemplo, el objetivo es hacer que los clientes potenciales hagan clic en la página principal del producto o servicio. Un botón de diseño inteligente que tenga en cuenta cómo sus visitantes quieren comprar o registrarse para algo es lo que todo diseñador debería buscar.

1) Señales direccionales

Como seres humanos, estamos programados para responder a la dirección de los ojos como una forma poderosa de darnos pistas. Piénselo: cuando ve a alguien mirando algo que no está en su campo de visión, automáticamente siente curiosidad acerca de lo que está mirando. Este mismo principio de indicaciones direccionales se puede aplicar sin problemas al sitio web que crea para sus clientes.

Sí, las señales direccionales pueden ser las flechas más obvias e incluso los dedos que apuntan a los botones de llamada a la acción, pero para algo verdaderamente único y con el que los visitantes de su sitio se puedan relacionar, elija una imagen de una persona mirando sus botones de llamada a la acción. No puedes equivocarte.

Para un ejemplo inteligente de esto, recurrimos a Página de inicio de Salesforce. Salesforce es la empresa mundial de computación en la nube de San Francisco. En particular, queremos que eche un vistazo a la única mega imagen en la página de inicio: parece una mujer mirando su teléfono inteligente, a punto de realizar una transacción móvil.

Si bien esta es ciertamente una interpretación plausible, la imagen también funciona como una pista direccional sigilosa pero poderosa. Cuando los visitantes del sitio ven a la mujer mirando el teléfono en su mano, sus ojos seguirán naturalmente su mirada hacia la derecha de la página de inicio. Mientras lo hacen, sus ojos inevitablemente aterrizarán en los tres botones de llamada a la acción junto a su cara y su mano.

Gracias a dónde apunta su mirada, es más probable que los clientes potenciales noten los botones de llamada a la acción. Al final del día, eso trae más conversiones y una mayor cantidad de ventas al sitio web.

2) Diseño de botones realmente simple

Cuando hace que sus botones sean lo más simples posible, elimina las posibilidades de que los visitantes, compradores y lectores de su sitio se confundan. Cuando se confunden, por lo general no realizan la acción que su copia de botón quiere que hagan. Por lo tanto, mantener al mínimo el diseño de los botones del cliente es lo que todos los diseñadores web deberían buscar.

Miremos a El sitio de Twining para ver cómo una marca puede hacer esto correctamente.

hermanamientos

En la página de inicio en la parte superior de la página, vemos una gama de botones simples en los colores de la marca, que comunican claramente exactamente lo que logrará al hacer clic en ellos. Los botones también parecen botones, gracias a su diseño rectangular redondeado, y el contraste de color negro sobre dorado los hace lo más mínimos posible.

En resumen, será casi imposible para los compradores de Twining malinterpretar que los botones son botones de llamada a la acción.

3) Microcopia bien definida

La microcopia es la estrella de la llamada a la acción porque utiliza verbos orientados a la acción para inspirar a las personas a moverse. La cantidad de espacio que los diseñadores web tienen para planificar etiquetas inteligentes es muy limitada, por lo que la microcopia debe ser breve y precisa. La microcopia que permite a los visitantes del sitio saber exactamente en qué están haciendo clic es un ganador porque no hace perder el tiempo.

A veces, se puede descuidar la microcopia, lo cual es lamentable. A pesar de toda la atención prestada al diseño de los botones, los colores y las prestaciones, la copia no debería sufrir. Los sitios cuya microcopia sufre son sitios cuyas tasas de conversión también sufren.

Usted sabe que tiene una microcopia exitosa cuando tiene diferentes botones de llamada a la acción uno al lado del otro, sin embargo, los visitantes del sitio pueden saber instantáneamente cuál es el propósito de cada botón.

tripulacion J

Se puede encontrar una ilustración útil de esto en la Página del producto J. Crew por su camisa de cuello abierto. Hay dos botones que compiten por la atención de los compradores: los botones «Agregar a la bolsa» y «Agregar a la lista de deseos».

Sin embargo, debido a que ambos están etiquetados con mucha claridad, los compradores no están confundidos y pueden lograr sus objetivos con más certeza que nunca. La copia de botón bien definida que no deja dudas sobre lo que logrará la acción de un usuario es siempre un ganador.

4) Contraste de color

Los compradores son un grupo poco confiable, por lo que la experiencia del usuario debe adaptarse a ellos. En otras palabras, comprar algo en la tienda de comercio electrónico de su cliente debería ser la cosa más fácil y clara del mundo. Algo tan básico como el contraste de color puede mejorar enormemente la experiencia de compra de los visitantes del sitio.

El contraste de color que funciona puede atraer la atención de los compradores hacia el botón de llamada a la acción y hacer que se destaque de un fondo ruidoso. Cuando los compradores pueden encontrar fácilmente lo que necesitan para hacer una compra, obviamente las tasas de conversión de un sitio se dispararán drásticamente.

objetivo

Sobre el Página de producto de destino para un reproductor de DVD de Sony, los botones de llamada a la acción – «añadir al carrito» y «buscar en una tienda» – utilizan el contraste de color con gran efecto. El contraste de color no solo es fácil de detectar —blanco sobre rojo y blanco sobre azul, respectivamente— sino que logra atraer la atención del comprador hacia el botón. El hecho de que el fondo esté lleno de espacios en blanco solo ayuda a que este contraste se destaque de manera aún más efectiva.

La línea de fondo

Los botones de llamada a la acción son vitales para determinar cuánto dinero generará el sitio de su cliente. Todos los diseñadores web deben darse cuenta de que el objetivo de su diseño siempre debe ser admitir más conversiones. Para los sitios de comercio electrónico, serán ventas. Para los sitios de noticias, serán suscripciones a cosas como boletines y similares. El punto es que las conversiones son lo más importante y los botones de llamada a la acción deben respaldar este objetivo todo el tiempo.

Es por eso que se debe invertir mucho pensamiento en el diseño de un botón de llamada a la acción. Aunque ocupa un espacio realmente pequeño en una página web, su importancia es inconmensurable. Cualquier cosa, desde los colores hasta la copia del botón y cualquier señal direccional cercana, hará o romperá su efectividad.

Para ofrecer a sus clientes, los diseñadores deben mirar más allá de la apariencia y el diseño de sus botones hasta el lado práctico de las cosas. ¿Este botón aumentará la probabilidad de que los clientes potenciales hagan clic y se conviertan en conversiones reales? Los diseñadores que piensan así prestan un gran servicio a sus clientes y deben ser elogiados. Los diseñadores que no piensan tan lejos deben mejorar sus prioridades y ayudar a sus clientes cada vez que trabajan en un proyecto.

Deja un comentario