9 importantes consejos de diseño de CTA para botones que hacen que la gente haga clic

Su llamada a la acción (CTA) es el clímax de su estrategia de marketing. Ya sea que esté solicitando una compra, registro o descarga. Todo hasta este punto ha sido para atraer clientes potenciales a su página de destino. Y a veces, solo tienes unas pocas palabras para sellar el trato.

Es por eso que su botón CTA es el elemento de diseño más importante de su sitio. Porque puede convertir visitantes pasivos en usuarios activos.

Los botones de llamada a la acción parecen simples. Pero son fáciles de estropear. O ser completamente extrañado. Estos 9 consejos de diseño de CTA asegurarán que obtengas esa conversión. Además, muchos ejemplos útiles:

1. Haga que su botón parezca clicable
2. Sea descriptivo con su copia
3. Tamaño y espacio adecuados
4. Conéctate en primera persona
5. Crea urgencia y usa verbos fuertes
6. Prueba con un subtítulo
7. Variaciones de prueba A/B
8. Presta atención a la versión móvil

Haz que tu botón CTA parezca clicable

Hacer que un botón parezca 'se puede hacer clic' suena tonto. Pero no creerías la frecuencia con la que los sitios se equivocan. Y tiene que ver principalmente con el contorno y el color del botón.

Las tendencias de la tasa de conversión van y vienen. Como el "botón fantasma" transparente con un borde delgado y texto que se desvanece en el color de fondo. Si bien pueden verse geniales, tienden a llamar menos la atención. Lo contrario de lo que debería hacer un CTA eficaz.

La única vez que este diseño suele funcionar es como un botón secundario:

Fuente: Movimiento UX

Aquí hay otro ejemplo de botones CTA que obviamente no se pueden hacer clic. Claro, la página de destino de esta agencia de diseño se ve genial. Pero se le perdonará que se desplace más allá de este estudio de caso:

Entonces, ¿cómo haces que la gente haga clic? Para tasas de conversión más altas, su botón debe ser grande, audaz y funcionar con el esquema de color elegido.

Netflix usa su característico rojo para llamar tu atención. Casi como una señal de alto:

También puede funcionar que tenga un color contrastante, para que destaque. Como lo que ha hecho la plataforma de comercio electrónico BigCommerce aquí:

Esto también se aplica al texto del cuadro. Asegúrate de que contraste para que puedas leerlo correctamente.

Los degradados también pueden funcionar dentro del mismo esquema de color de la marca. Le dan a las cosas una sensación moderna y más juvenil:

Fuente: lunes

Mi consejo aquí sería tratar de mantener el diseño de tu CTA obvio. Hacer algo fuera de la caja puede sonar como una buena idea, pero los humanos somos criaturas de hábitos. Y se sorprendería de cuántos se perderán el punto.

Sea descriptivo con su copia

Una de las tácticas más simples de optimización de la tasa de conversión (CRO) es una excelente redacción publicitaria. Pero no solo con grandes trozos de texto. La microcopia es igual de importante y cubre los detalles más pequeños.

Por lo general, lo ve en los formularios de contacto y en las barras de actualización de estado de las redes sociales. Como el famoso "¿Qué tienes en mente?" de Facebook. o “Iniciar una publicación” de LinkedIn.

La microcopia puede ayudar:

• Decir a los usuarios qué hacer
• Hacer sugerencias
• Abordar inquietudes
• Proporcionar contexto

La copia de tu botón CTA es otro ejemplo. Y debería decirle a la gente exactamente lo que obtendrán/lo que sucederá cuando hagan clic en él.

Este solía ser el botón CTA de IMPACT. "Descarga gratis". No es muy imaginativo, ¿eh?

Fuente: IMPACTO

Pero al hacerlo más descriptivo, aumentaron las conversiones en un 78,5%. “Muéstrame cómo atraer a más clientes” claramente atrajo más:

Es tentador escribir simplemente "Haga clic aquí". Pero hay tantas alternativas que atraerán a los usuarios y, con suerte, inspirarán la acción deseada.

Entonces, ¿qué deberías escribir? Primero, debe identificar la intención de conversión. Desea alinearse con el lugar donde se encuentran los usuarios en el embudo y de dónde provienen (fuente de tráfico).

Fuente: KlientBoost

Entonces necesitas enfatizar el valor de lo que estás proporcionando. Y manejar cualquier objeción.

Fuente: Ejemplos de marketing

Es un proceso tan único. Y dependerá de su nicho y la voz de su marca. Pero cualquiera que sea la redacción que elija, no olvide mantener el texto del botón breve y directo.

Tamaño adecuado y uso de espacios en blanco

El diseño del botón CTA es mucho más que el color también. El tamaño del botón es otro pequeño detalle que realmente puede afectar la tasa de clics. Y el espacio en blanco es tan importante como el propio texto.

Mucho de esto dependerá de su diseño web. El espacio negativo (en blanco) llama la atención sobre ciertos elementos de una página. No quieres una página de inicio desordenada. Tiene que haber un camino obvio a seguir por el visitante.

Airbnb es uno de los mejores ejemplos de espacio negativo bien hecho. Y un color de contraste para que sea más obvio:

Buffer tiene un poco más en su página de inicio, pero aún mantienen el botón CTA cerca de la copia principal. Además, un ejemplo del uso efectivo de botones fantasma. Esto deja muy claro qué hacer a continuación:

Cuanto más grande sea el botón, más se notará. Y tiene que sobresalir para llamar la atención. Pero no tanto que se apodere de la página y arruine la experiencia de usuario.

Si eres propenso a las migrañas, mira hacia otro lado ahora. He aquí un ejemplo de cómo no hacerlo:

Fuente: Justinmind

Muchos elementos aquí parecen un botón. Ni siquiera estoy seguro de que este sitio sepa en qué quiere que los visitantes hagan clic.

Por el contrario, ¿qué es lo primero que ves en la página de inicio de Spotify?

El enorme botón "Go Premium", ¿verdad? Así es como se diseña una ruta de usuario clara.

Por último, ¿hay algo más que hayas notado sobre los diseños de CTA para los buenos ejemplos? Si echas otro vistazo, verás algo que casi todos tienen en común.

Los científicos descubrieron que a los humanos les gustan "las formas con curvas suaves en lugar de las puntas afiladas". Son más agradables a la vista y nos hacen sentir más tranquilos. Debido a esto, los botones de llamado a la acción más efectivos son los rectángulos con esquinas redondeadas.

Fuente: CleverTap

Es el formato más popular por una razón. Pero prueba diferentes opciones. Su audiencia podría preferir otra cosa.

Conéctate en primera persona

Un mejor diseño de CTA puede estar a un ajuste de distancia. A veces, una sola palabra.

En la redacción publicitaria, nos enseñan a usar la palabra "usted". Porque hace que el lector sienta que le están hablando directamente. Así que crees que eso también se aplicaría a la copia de tu botón, ¿verdad? Extrañamente, no tanto.

Unbounce descubrió que cambiar la copia en su página de destino de "Comience su prueba gratuita de 30 días" a "Comience mi prueba gratuita de 30 días" aumentó las tasas de clics en un 90%.

Entonces, ¿por qué es esto? Bueno, cuando alguien se siente conectado con un producto, es más probable que se convierta. Da ese toque personal sin tener que saber nada de ellos.

La psicología del marketing muestra que las decisiones de compra se basan principalmente en la emoción. Por lo tanto, desea que el visitante de su sitio web sienta que es su elección.

Escribir "mi" ayuda al usuario a visualizar la acción que está a punto de realizar. Les da control y (con suerte) los empuja hacia la toma de decisiones.

Además, puede demostrar que obtendrán un valor inmediato. Me gusta en la página de inicio de Crazy Egg:

Fuente: huevo loco

1-800 Contacts es la tienda de lentes de contacto más grande del mundo. Pero hacen lo mismo. Se aseguran de que sus botones de CTA estén dirigidos a una sola persona:

Fuente: 1-800 Contactos

No muchas empresas utilizan esta técnica. Lo que significa que se destaca cuando lo ves. ¿Asi que, por que no intentarlo?

Crea un sentido de urgencia y usa verbos fuertes

Su copia debe crear un sentido de urgencia y captar la atención de los usuarios. Esto funciona especialmente bien para las empresas de comercio electrónico. El uso de palabras como "ahora" y "hoy" puede ayudar a estimular la acción. Porque sugieren que la oferta no durará para siempre.

“Comprar ahora” es un clásico. Pero podemos hacerlo mejor que eso con nuestro diseño de CTA.

Fuente: GoSquared

Podrías intentar redactar como:

• “Date un capricho hoy”
• "Desbloquear descuento ahora"
• “Descarga gratuita única”

También desea que su oferta sea atractiva y despierte la curiosidad. Entonces, comienza con un verbo fuerte. No es algo que parezca que será un esfuerzo. Esa es una manera fácil de desanimar a la gente.

Aquí hay algunos ejemplos de lo que quiero decir:

El lado izquierdo parece que sus usuarios obtendrán algo al hacer clic. El lado derecho parece que tendrá que renunciar a tiempo o dinero.

También puedes ser muy creativo. Dale me gusta a esta versión de la página de inicio de Huemor:

Fuente: FastCapital360

O la antigua página de inicio del condado de Humboldt que le da un toque místico:

Fuente: ConEmprendimiento

Haz una lluvia de ideas con tu equipo. No importa cuán ridículo. Te sorprendería lo que se te ocurrirá y lo que terminarás usando. Pero cualquiera que sea la redacción que elija, no olvide cumplir su promesa en el otro extremo.

Pruebe con un subtítulo junto a su botón de llamada a la acción

A veces, la gente necesita un pequeño empujón. Y un poco de texto debajo de tu botón CTA puede hacer el truco. No es un "subtítulo" regular. Pero es la forma más fácil de describirlo.

Si pensamos en el texto del botón como el encabezado, el subtítulo más popular que verá es "No se necesitan detalles de la tarjeta de crédito". Pero el tuyo puede decir cualquier cosa. Y es divertido ser un poco creativo con eso.

Muchas veces, se utilizan para dar confianza al cliente potencial. Y pueden abordar los principales puntos débiles que las personas pueden tener:

Fuente: CoSchedule

CoSchedule entiende que los usuarios pueden pensar que es solo una prueba gratuita. ¿Entonces por qué no? Es gratis para siempre”, aclara.

También puede usarlos para agregar alguna prueba social:

Fuente: Campo base

Esto le da credibilidad instantánea porque los usuarios pueden ver claramente que otros ya confían en usted. También puede inspirar a FOMO ya que la gente piensa que debe haber razones para tantos suscriptores.

Si tiene una oferta especial o valor adicional que viene con su servicio, use su subtítulo para resaltarlo:

Fuente: Moz

Microcopy es una oportunidad para que brille la voz de su marca. Aunque sea una sola frase. Entonces, no tengas miedo de ser un poco descarado si encaja:

Fuente: KlientBoost

También puede ser específico con lo que sucederá exactamente después de que las personas hagan clic. Dígales:

• Lo que obtendrán (nuevas ideas de marketing)
• cuantos (17+)
• Y por qué debería importarles (son mejores que lo que tienes)

Utilice estos ejemplos como plantillas para inspirarse. O hacer algo totalmente diferente. Solo asegúrate de que se ajuste a la identidad de tu marca y diviértete.

No olvides las pruebas A/B

La mayoría de las herramientas de CRO tienen como objetivo mejorar la experiencia del usuario (UX). Y es posible que ya esté haciendo esto con las partes principales de sus páginas web. Pero también deberías hacerlo con los elementos pequeños.

Amazon es notoriamente exigente con los diseños de sus botones CTA. Especialmente con el uso de terceros. Así que asegúrate de no romper ninguna regla con el tuyo.

Después de eso, pequeños cambios en el diseño de su botón pueden tener un gran impacto. Por lo tanto, compare diferentes tipos de botones CTA. Luego pruebas A/B con variaciones de:

• Color del boton
• copia de llamada a la acción
• Fuente
• Ubicación en el diseño de la página
• ventanas emergentes
• formularios de contacto

Fuente: Snov

Como mencioné anteriormente, a veces cambiar solo una palabra puede aumentar la conversión o la tasa de clics. Pero antes de saltar, debe comprender cómo los visitantes navegan por su sitio.

Quieres saber cosas como:

1. Con qué elementos están tratando de interactuar
2. De dónde vienen
3. El recorrido del usuario/embudo de compra de su sitio
4. Motivación de la gente para estar ahí

Fuente: GIPHY

Una vez que tenga esta información, puede experimentar con cosas basadas en hechos, no en conjeturas.

Por lo general, es más fácil comparar una versión A y B con el diseño de CTA. Pero puede aumentar esto y probar pruebas multivariadas. Más simple suele ser mejor al principio. De esa manera, tendrás un claro ganador.

Pero no hay nada que te impida probar ese ganador contra otra versión después de eso. Siempre debes estar probando y comparando. Incluso cuando has encontrado algo que funciona. Eso es lo que hacen las marcas exitosas.

Presta atención a la versión móvil

Un consejo rápido para terminar. Sus elementos de diseño se verán muy diferentes en una pantalla móvil. Está trabajando con una pantalla mucho más pequeña y menos píxeles. Entonces el desorden se vuelve mucho más fácil.

Todo lo que hemos cubierto se vuelve más frecuente en su versión móvil. Los colores contrastantes deben resaltar más:

El espacio negativo debe ser una prioridad:

E incluso su subtítulo podría estar en un lugar diferente. Como es posible que los usuarios de dispositivos móviles no se desplacen hacia abajo lo suficiente como para verlo debajo:

Gracias a CleverTap por esos gráficos

Es necesario pensar más en su UX en general en dispositivos móviles. Porque los dispositivos móviles representan más de la mitad de todo el tráfico de búsqueda global. No puede esperar que su versión de escritorio se traduzca. Y un poco de esfuerzo podría resultar en una tasa de clics mucho más alta.

Conclusión

El diseño efectivo de CTA se compone de muchos de estos pequeños detalles. Lo he dicho muchas veces a lo largo, pero el ajuste más pequeño podría ser todo lo que se necesita. Incluso algo tan insignificante como el color o la forma del contorno.

Las pruebas A/B son la única manera de saberlo. Y ni siquiera necesita una costosa herramienta CRO para hacerlo. Simplemente haga un seguimiento de sus conversiones. Hacer un cambio. Y ver si hay un aumento o disminución del número habitual.

Solo dale a tu botón de llamada a la acción la atención que merece. Podría ser la diferencia entre un nuevo cliente o una oportunidad perdida.

¿Has visto algún diseño original de CTA recientemente? ¿Ha realizado un pequeño cambio que ha aumentado las conversiones? Háganos saber en los comentarios a continuación.