¿Cómo debería verse un botón de llamada a la acción? ¿Dónde debería estar? ¿Cómo evitar los molestos CTA? Estas son solo algunas de las preguntas que molestan a todos, desde redactores publicitarios y especialistas en marketing hasta diseñadores web y UX. Hoy vamos a solucionarlos.
¿Qué es un CTA?
La abreviatura "CTA" significa llamada a la acción. Una llamada a la acción es cualquier pieza de diseño (generalmente un botón) que solicita al visitante que realice una acción.. Esto puede ser cualquier cosa, desde explorar el sitio hasta completar un formulario de contacto o agregar un producto al carrito.
Cuando está bien diseñado, Los CTA realizan una doble función : Ayudan al usuario a navegar por un sitio web y representan un elemento crucial en su flujo de conversión. En última instancia, su función es lograr que los visitantes hagan lo que usted quiere que hagan. Como un guía turístico discreto, guiando al usuario suavemente a través de su entorno digital.
Técnicamente hablando, cualquier botón puede ser un botón de llamada a la acción, siempre que contenga un texto que transforme al visitante de un observador pasivo en un usuario activo de un sitio web. Pero una de las principales cosas que separan a los CTA del resto de botones de un sitio web es que, además de la copia antes mencionada, deben tener ciertas características (color, forma, posición) que atraen la atención de los usuarios e influenciarlos para que realicen una acción.
Está claro que los CTA son de enorme importancia para una buena experiencia de usuario y para el resultado final de su negocio, por lo que en este artículo vamos a compartir algunas cosas a tener en cuenta al crear sus CTA.
Comencemos con el texto del botón.
Cómo escribir una copia de CTA
Como la eficacia de los CTA depende en gran medida de la calidad y estructura de su copia, está claro que este texto tiene que estar bien pensado. La copia de CTA debe realizar dos funciones: involucrar al visitante y dejar claro qué acción se espera que realice el visitante..
Para lograr el valor atractivo, el texto debe ser directo, claro y agradable, si no francamente encantador. Debido a que solo puede contener un número limitado de palabras, el mensaje de la copia de la CTA debe permitir al usuario comprender intuitivamente el curso de acción necesario.
En muchos casos, la copia de CTA ideal simplemente indicará el objetivo de conversión del sitio web. Si su objetivo es que la gente lea su blog, el botón debería decir simplemente Lee ahora o Lee mas. Si desea que interactúen con el sitio web, un botón con el texto Ponte en contacto ahora o incluso simplemente Envíanos un mensaje hará bien el truco.
Aún así, no es suficiente ser breve, claro y (si es posible) entretenido. Hay que tener en cuenta un poco de psicología aquí. De hecho, se ha llevado a cabo una gran cantidad de investigación y pruebas para determinar el tipo de texto que los usuarios encuentran más atractivo y qué texto de CTA convierte mejor.
La mayoría de los expertos coinciden en que creando un sentido de urgencia es una condición necesaria para una copia de CTA exitosa. Afortunadamente, esto se puede lograr con bastante facilidad, simplemente insertando una palabra o dos, como "Ahora" o "Hoy", quizás combinados con "Solo".
Botones diciendo Obtenga su copia gratuita ahora o Regístrese y obtenga un 50% de descuento solo hoy! generan una gran conversión, ya que los usuarios no quieren perderse una oportunidad especial de obtener algo que, mañana, ya no estará disponible.
Otra cosa a la que debe prestar atención aquí es cómo se dirige a sus visitantes. Algunos expertos consideran el uso de pronombres en primera persona (Crear mi cuenta, obtener mi copia) el más efectivo, mientras que otros optan por el uso de pronombres en segunda persona (Obtenga su copia, reclame su prueba gratuita). Para complicar las cosas, las dos técnicas parecen tener igual número de partidarios y argumentos a su favor.
De cualquier manera, está claro que cierto grado de personalización al dirigirse a los visitantes es obligatorio en la copia de CTA, ya que hace que los usuarios se sientan más involucrados personalmente con el producto o servicio. Y la conexión personal es esencial para las conversiones.
Cómo diseñar sus botones de CTA
El aspecto estrictamente visual de los botones de CTA es tan importante (si no más) como la propia copia. Las reglas parecen simples: los botones deben llamar la atención e invitar a los usuarios a hacer clic. Pero eso no siempre es fácil de lograr. Para destacar en la página, la forma, el tamaño, el color y la ubicación de los botones de CTA deben ser en claro contraste con el resto de su entorno.
La forma de los botones de CTA
Probablemente hayas notado que la mayoría de las llamadas a la acción (y la mayoría de los botones en la web, para el caso) son rectangulares. Claro, hay algunos ejemplos excelentes de CTA que son circulares, cuadrados o de alguna otra forma, incluso menos común, pero la mayoría de ellos son rectangulares. ¿Por qué es esto?
Los rectángulos y cuadrados son las formas con las que más nos encontramos, ya sea en la web o en nuestra vida diaria. Los rectángulos, en particular, nos hacen sentir cómodos ya que transmiten una sensación de estabilidad y seguridad.
Por otro lado, se ha demostrado que los humanos tienen afinidad por las curvas. Las formas redondas son simplemente más agradables a la vista que las afiladas y vanguardistas. Sin mencionar que el círculo es una forma que irradia una sensación de paz, plenitud y armonía.
Teniendo en cuenta estos dos hechos, es lógico que la forma más eficiente para los botones de llamada a la acción resultó ser un rectángulo con esquinas redondeadas. Esta forma se volvió tremendamente popular entre los especialistas en marketing y se puede encontrar en una gran cantidad de sitios y aplicaciones.
Por supuesto, estas son solo pautas generales derivadas de la experiencia y algunas mejores prácticas bien investigadas en UX. Hay botones de llamada a la acción que vienen en todo tipo de formas poco ortodoxas, pero generalmente son parte de un entorno de diseño marcado por la experimentación, la estética muy específica, etc. En otras palabras, no representan la norma.
La importancia del color para los botones de llamada a la acción
El papel de los colores en la configuración de nuestra percepción y experiencia de todo el contenido visual se ha investigado durante décadas. Los psicólogos actuales coinciden en que tendemos a interpretar y experimentar emocionalmente los colores de acuerdo con ciertos patrones, y esto es algo que los especialistas en marketing han estado explotando durante mucho tiempo.
Se pueden asociar colores específicos con mensajes específicos, transmitiéndolos automáticamente, a un nivel subconsciente. Basta pensar en los semáforos: los propios colores comunican el mensaje deseado. Verde: adelante, rojo: deténgase.
Pero cuando se trata de estos dos colores y su uso en CTA, la situación no es tan clara como parece. Uno pensaría que el color rojo, como color de alarma, precaución y advertencia, alejaría a la gente y generaría menos clics. Pero en varias pruebas independientes a / b, el rojo fue un claro ganador sobre el verde. Por lo tanto, cuando se trata de comunicarse a través de colores, es mejor seguir todos los consejos con un grano de sal y hacer sus propias pruebas para obtener información procesable.
Sin embargo, tenga en cuenta que incluso después de encontrar la paleta de alta conversión para sus mensajes visuales, su trabajo está lejos de terminar. El color del botón será más efectivo solo cuando esté en sinergia con su entorno visual.. La relación entre el botón y el resto del diseño debe ser armoniosa y equilibrada, pero también lo suficientemente contrastante para llamar la atención de los usuarios. También vale la pena considerar las combinaciones de colores complementarias: son agradables a la vista y proporcionan el contraste necesario.
La importancia de los colores en el diseño de botones de CTA se vuelve aún más clara en situaciones que justifican dos botones, uno de los cuales es un CTA clásico y otro que conduce a información adicional sobre el tema.
En este caso, el botón estrictamente de tipo CTA debe estar resaltado y acentuado, para que los usuarios se enfoquen primero en él. Esto se puede lograr con un color de señalización llamativo, como rojo, naranja o cualquier variación de los mismos.
En el ejemplo anterior, notará que el otro botón, el que invita a los visitantes a aprender más sobre el servicio en cuestión, es mucho más discreto (en este caso, recién descrito), asegurándose de que el CTA reciba toda la atención.
Animación y detalles sobre los botones de CTA
El tercer aspecto del diseño de CTA es la animación del botón. Junto con iconos, ilustraciones discretas y otros elementos gráficos, La animación puede aportar otra capa de valor visual y comunicativo.. Cuando se usa correctamente, la animación funcional como herramienta UX puede hacer que los botones sean más intuitivos y directos y, por lo tanto, mejorar enormemente su efectividad.
Al diseñar CTA, la animación se usa principalmente para efectos de desplazamiento. Estas animaciones no deben ser demasiado interactivas o ruidosas, ya que no queremos que desvíen el enfoque del mensaje. Demasiada animación puede confundir al usuario y crear un efecto emocional negativo.
Sin embargo, los botones sutilmente animados son siempre una gran contribución al diseño de CTA, enriqueciéndolo y asegurándose de que el enfoque sea claro.
Además de los efectos de desplazamiento animados, los diseñadores a veces optan por elementos e iconos adicionales, especialmente para los botones que invitan a los usuarios a Agregar al carrito, Descargar, Cargar, Eliminar, etc. En este caso, es fundamental asegurarse de que haya suficiente espacio vacío entre el texto del botón y estos elementos adicionales, así como entre los elementos y los bordes del botón. El botón, sobre todo, debe ser fácil de leer y no debe aparecer abarrotado.
El posicionamiento de los botones de CTA
El aspecto final que determina el éxito de un botón de CTA es su momento o, más exactamente, su posicionamiento. Si bien no existe una "regla de oro" en cuanto a dónde colocar realmente el botón, una cosa está clara: debe entregarse al visitante en el momento adecuado.
Lo que esto significa es que debe pensar con mucho cuidado en qué punto durante la estadía del visitante en la página debe ver el botón. Cuando el visitante está bien preparado para la acción utilizando contenido e información visual y textual, la posibilidad de realizar la acción deseada se vuelve real.
Por lo tanto, toda la página, su diseño y su contenido, debe estructurarse y diseñarse de manera que lleve al visitante al objetivo final (acción), ya sea una suscripción, una compra u otra cosa.
Colocando una CTA encima de la tapa (la parte de la página que se ve por primera vez al cargarse) solía ser un estándar, pero dado que el desplazamiento es una acción que ahora realizamos de manera tan natural y automática, el "contenido de la mitad superior de la página" ha perdido parte de su "prestigio". De hecho, colocar una llamada a la acción en la parte superior, antes de que el usuario tenga la oportunidad de instalarse y explorar el contenido, a menudo puede ser contraproducente.
Si coloca el botón debajo del pliegue, significa que el visitante debe completar un camino para llegar a él. Si planificó correctamente la estructura de su página, ese camino estará lleno de señales visuales y textuales que empujan suavemente al visitante hacia abajo, preparándolo para la acción.
Una vez que encuentre el lugar perfecto para el botón, tienes que asegurarte de que permanezca enfocado. Para hacer esto, debe asegurarse de que haya suficiente espacio negativo a su alrededor. Esto permite que el visitante “descanse la vista” y permite que el botón sea claramente visible y su mensaje se entienda.
Pensamientos finales
Limpio, sencillo, enfocado y atractivo: estas son las cualidades principales de un buen botón de CTA que convierte. Vimos que muchas de estas cualidades provienen del diseño. Si bien las pautas generales y las sugerencias para diseñar el botón de CTA perfecto son claras, siempre se recomienda un enfoque individual. Claro, se puede demostrar que el color rojo funciona muy bien, pero si choca con el tono y la paleta de su sitio web, no debe usarlo. Lo mismo ocurre con las pautas sobre la forma, el tamaño y la posición del botón. Una vez que diseñe un botón que se ajuste a su marca visual y encuentre un buen lugar para él, asegúrese de probarlo con un par de versiones ligeramente diferentes. Y no olvide respaldar sus llamadas a la acción con contenido sólido impulsado por el valor y una excelente copia.