5 Técnicas de diseño para mejores botones CTA
Cuando visitamos la mayoría de los sitios web, a menudo tenemos un objetivo en mente. Para lograr ese objetivo, generalmente hay una serie de pasos que debemos seguir y el primer paso comienza con hacer clic en un botón de CTA (llamada a la acción). Piense en la última vez que se inscribió en un servicio o descargó una aplicación, el proceso probablemente incluyó una interacción con un botón de llamado a la acción.
Los botones CTA son los botones que usa en su sitio web para guiar a los usuarios hacia la conversión de sus objetivos. El objetivo de una CTA es dirigir a los visitantes de su sitio a un curso de acción deseado. Algunos ejemplos comunes de CTA incluyen:
- "Comience una prueba"
- "Descarga la aplicación / libro / guía"
- "Registrarse para recibir actualizaciones"
- "Obtener una consulta"
Hoy discutiremos 5 mejores prácticas para diseñar botones de CTA junto con los mejores ejemplos del mundo real para ayudarlo a obtener el mayor número de clics en su página de destino.
1. Botón visualmente llamativo
El color de tu botón es importante. De hecho, si solo va a tomar un solo consejo de este artículo, debería ser éste: "Considere el color de su botón CTA". Con el color, puede hacer que ciertos botones se destaquen más que otros al darles más prominencia visual.
Usa colores en contraste
Los colores contrastantes funcionan mejor para los botones CTA, usando colores contrastantes es posible crear botones llamativos que se destacan. Debe seleccionar un color que contraste con el esquema de color de la página web, sin dejar de encajar con el diseño general. Considere el ejemplo de Firefox a continuación. El color verde del botón de CTA en la página de Firefox se está saltando de la página e inmediatamente llama la atención del usuario.
El botón CTA de Firefox es de color verde brillante y destaca bien sobre un fondo azul oscuro
Otro atractivo botón de CTA se puede encontrar en la página de inicio de Hipmunk. Un botón naranja brillante capta la atención del usuario y define la siguiente acción posible.
Espacio negativo
No solo el color es importante para un CTA, sino también la cantidad de espacio que lo rodea. El espacio en blanco (o espacio negativo) crea un espacio de respiración esencial y separa los botones de CTA de otros elementos en su interfaz de usuario. La página de inicio de Dropbox era un buen ejemplo del uso de espacio negativo para hacer pop emergente de su CTA principal. El CTA azul "Registrarse de forma gratuita" se destaca contra los azules claros del fondo.
2. Texto orientado a la acción
Escribir texto para su botón de llamado a la acción que obligará a sus visitantes a tomar la acción correcta no es una tarea fácil. Afortunadamente, hay algunas cosas que pueden ayudarte a hacerlo:
Comience con un verbo
Debe evitar palabras vagas y aburridas como "Ingrese para obtener más información" de sus botones CTA, y reemplácelos con palabras más orientadas a la acción como "Comience su prueba gratuita" u "Obtenga descuento ahora". Evernote tiene uno de los más comunes, pero aún trabajando textos orientados a la acción para su botón CTA.
Comience con un verbo como "Inicio", "Obtener" o "Unir"
Un ejemplo más interesante se puede encontrar en la página principal de Treehouse. El sitio web de CTA en Treehouse no solo dice "Comience una prueba gratis"; dice "Reclame su prueba gratuita". La diferencia en la redacción puede parecer sutil, pero "Reclamar su prueba gratuita" suena mucho más personal.
Usar texto breve y fácil de entender para botones
Asegúrese de indicar exactamente qué recibirá el visitante si hace clic en la CTA. Lo ideal es mantener el texto del botón entre dos y cinco palabras.
Agregar propuesta de valor
Lo más probable es que haya notado que muchos botones tienen las palabras "libre" en su copia y eso no es una coincidencia, el uso de tales palabras en la copia del botón enfatiza la propuesta de valor de su oferta. Por lo tanto, al escribir su CTA, trate de encontrar una manera de integrar una (o todas) 3 palabras persuasivas:
- Gratis
- Prima
- Instantáneamente
Permítanme darles un ejemplo: un gran temor que tienen los usuarios antes de comprometerse a suscribirse, es que les resultará difícil cancelar su suscripción si no les gusta el servicio. Netflix alivia ese temor al usar la promesa "Cancelar en cualquier momento" justo al lado de la CTA "Únete gratis durante un mes".
Crea un sentido de urgencia
Construir un sentido de urgencia en los botones de CTA puede generar impresionantes tasas de clics. Por ejemplo, podría usar el texto del botón como "¡Regístrese y obtenga el 25% de descuento solo hoy!". Limitar el tiempo que alguien tiene que tomar la decisión hace que las personas quieran reclamar su oferta mientras puedan.
Texto útil
A veces puede considerar agregar una línea de información adicional dentro del texto de su botón. Esta práctica es común con los botones de prueba gratuita. Por ejemplo, un botón de prueba gratuita podría decir "prueba de 30 días, sin tarjeta de crédito" en texto más pequeño debajo del botón de CTA con el texto "Comience su prueba gratuita". Este texto adicional debería facilitar el proceso de toma de decisiones.
3. Hazlo visible sin desplazarte
La ubicación de los botones de llamada a la acción es tan importante como el color y el mensaje. Un botón de CTA debe ubicarse en un lugar fácil de encontrar que sigue de manera orgánica desde el flujo de la página web. Debes tratar de mantener tu botón de CTA arriba del doblez para que los usuarios nunca lo pierdan. Idealmente, su botón CTA debe estar entre las primeras cosas que un usuario ve en la página cuando lo alcanza. La información adicional debe permanecer debajo de la tapa, donde permanece accesible pero no distrae.
4. Botón grande con esquinas redondeadas
Piense en cómo el diseño comunica affordance. ¿Cómo entienden los usuarios el elemento como un botón? Use la forma y el tamaño para que el elemento se vea como un botón.
Que sea lo suficientemente grande
El CTA debe ser lo suficientemente grande como para ver desde la distancia, pero no tan grande como para distraer la atención del contenido principal de la página.
Botones de usuario con esquinas redondeadas
La forma del botón puede jugar un papel importante. Es un hecho comprobado que las esquinas redondeadas son más fáciles para los ojos. En la prueba de ContentVerve, un botón verde redondeado fue mejor que un rectángulo azul.
5. Menos es más cuando se trata de elecciones
Tenga en cuenta que si desea que sus clientes actúen, debe ayudarlos, eliminando todos los obstáculos posibles de su camino. Cuando a los usuarios se les dan demasiadas opciones, tienden a confundirse. Entonces, es mejor ofrecer a los clientes potenciales solo una opción.
Si aún desea incluir opciones de botones múltiples, otorgue peso a una opción sobre otras para ayudar a canalizar a los usuarios hacia una ruta específica. Un buen ejemplo es Evernote: tan pronto como llegas a la parte inferior de la página principal de Evernote, está bastante claro que una opción preferible es "Registrarse gratis", mientras que la CTA para que los usuarios puedan comparar planes es muy secundaria.
Conclusión
Para lograr un diseño efectivo de CTA, debe considerar más que solo el botón en sí. También es importante pensar en el color de fondo, las imágenes que lo rodean, el texto que lo rodea y muchos otros elementos. El equipo de Basecamp comprende la importancia de estos elementos y diseñó un diseño perfecto para su página de destino. Incluso la microcopia que usan bajo el botón de CTA ("¡4,714 empresas se inscribieron esta semana!") Aumenta la confianza de los clientes potenciales.
Espero que los consejos mencionados en este artículo lo ayuden a crear un mejor botón de llamada a la acción para su sitio web. El último momento es la importancia de las pruebas: si decide recrear una CTA en su sitio, recuerde probar para ver si funciona para su audiencia.