Krypton Solid

5 técnicas de diseño para mejores botones de llamada a la acción

5 técnicas de diseño para mejores botones de llamada a la acción

Cuando visitamos la mayoría de los sitios web, a menudo tenemos un objetivo en mente. Para llegar a ese objetivo, generalmente hay una serie de pasos que debemos seguir y el primer paso comienza con hacer clic en un botón de llamada a la acción (CTA). Piense en la última vez que se registró en un servicio o descargó una aplicación, el proceso probablemente incluyó una interacción con un botón de llamada a la acción.

Los botones de llamada a la acción son los botones que utiliza en su sitio web para guiar a los usuarios hacia la conversión de su objetivo. 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:

  • «Iniciar una prueba»
  • «Descarga la aplicación, el libro o la guía»
  • «Regístrese para recibir actualizaciones»
  • «Obtenga una consulta»

Hoy discutiremos las 5 mejores prácticas para diseñar botones de CTA junto con los mejores ejemplos del mundo real para ayudarlo a obtener la mayor cantidad de clics en su página de destino.

1. Botón visualmente llamativo

El color de su botón es importante. De hecho, si va a seguir un solo consejo de este artículo, debería ser este: «Considere el color de su botón de llamada a la acción». Con el color, puede hacer que ciertos botones se destaquen más que otros dándoles más prominencia visual.

Usa colores contrastantes

Los colores contrastantes funcionan mejor para los botones de llamada a la acción, utilizando colores contrastantes es posible crear botones llamativos que se destaquen. Debe seleccionar un color de contraste del esquema de colores 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 llamada a la acción en la página de Firefox está saliendo de la página e inmediatamente llama la atención del usuario.

El botón CTA de Firefox es de color verde brillante y se destaca bien sobre un fondo azul oscuro

Otro botón de llamada a la acción llamativo se puede encontrar en la página de inicio de Hipmunk. Un botón de color naranja brillante capta la atención del usuario y define la siguiente acción posible.

imagen7

Espacio negativo

No solo es importante el color para una llamada a la acción, sino también la cantidad de espacio a su alrededor. El espacio en blanco (o espacio negativo) crea un respiro esencial y separa sus botones de CTA de otros elementos en su interfaz de usuario. La antigua página de inicio de Dropbox era un buen ejemplo del uso del espacio negativo para hacer que su CTA principal destacara. La llamada a la acción azul «Registrarse gratis» se destaca sobre los azules claros del fondo.

imagen11

2. Texto orientado a la acción

Escribir texto para su botón de llamada a la acción que obligue a sus visitantes a realizar la acción correcta no es una tarea fácil. Afortunadamente, hay algunas cosas que pueden ayudarlo a hacerlo:

Comenzar con un verbo

Debe evitar palabras vagas y aburridas como «Ingrese para obtener más información» para sus botones de CTA y reemplazarlas con palabras más orientadas a la acción, como «Inicie su prueba gratuita» u «Obtenga un descuento ahora». Evernote tiene uno de los textos orientados a la acción más comunes, pero que aún funciona, para su botón de llamada a la acción.

imagen18

Comience con un verbo como «Comenzar», «Obtener» o «Unir»

Se puede encontrar un ejemplo más interesante en la página de inicio de Treehouse. La CTA en el sitio web de Treehouse no solo dice «Inicie una prueba gratuita»; dice «Reclame su prueba gratuita». La diferencia en la redacción puede parecer sutil, pero «Reclame su prueba gratuita» suena mucho más personal.

imagen15

Utilice texto breve y fácil de entender para los botones

Asegúrese de indicar exactamente lo que obtendrá el visitante si hace clic en la llamada a la acción. Idealmente, desea mantener el texto del botón entre dos y cinco palabras.

Propuesta de valor añadido

Lo más probable es que haya notado que muchos botones tienen palabras como «gratis» en su copia y eso no es una coincidencia, el uso de esas palabras en la copia del botón enfatiza la propuesta de valor de su oferta. Por lo tanto, al escribir su CTA, intente encontrar una manera de integrar una (o todas) 3 palabras persuasivas:

Déjame darte un ejemplo: un gran temor que tienen los usuarios antes de comprometerse a registrarse en algo, es que será una molestia cancelar su suscripción si no les gusta el servicio. Netflix alivia ese miedo con la promesa «Cancelar en cualquier momento» junto a la llamada a la acción «Únase gratis durante un mes».

imagen10

Crea un sentido de urgencia

Construir un sentido de urgencia en sus botones de llamada a la acción puede generar tasas de clics impresionantes. Por ejemplo, puede usar un texto de botón como «Regístrese y obtenga un 25% de descuento solo hoy». Limitar el tiempo que alguien tiene para tomar la decisión hace que las personas quieran reclamar su oferta mientras puedan.

Texto útil

A veces, es posible que desee considerar agregar una línea adicional de información 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 un texto más pequeño debajo del botón de llamada a la acción 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 llamada a la acción debe estar ubicado en un lugar fácil de encontrar que siga orgánicamente el flujo de la página web. Debe intentar mantener su botón de llamada a la acción en la mitad superior de la página para que los usuarios nunca se lo pierdan. Idealmente, su botón de llamada a la acción debería estar entre las primeras cosas que un usuario ve en la página cuando llega a ella. La información adicional debe permanecer debajo del pliegue, donde permanece accesible pero no distrae.

4. Botón grande con esquinas redondeadas

Piense en cómo el diseño comunica la asequibilidad. ¿Cómo entienden los usuarios el elemento como botón? Utilice la forma y el tamaño para hacer que el elemento parezca un botón.

Hazlo lo suficientemente grande

La llamada a la acción debe ser lo suficientemente grande para ver desde la distancia, pero no tanto como para desviar 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 probado que las esquinas redondeadas son más agradables para los ojos. En la prueba de ContentVerve, un botón verde redondeado funcionó mejor que un rectángulo azul.

imagen8

5. Menos es más cuando se trata de opciones

Tenga en cuenta que si desea que sus clientes actúen, debe ayudarlos eliminando todos los obstáculos posibles en su camino. Cuando los usuarios tienen demasiadas opciones, tienden a confundirse. Por lo tanto, es mejor ofrecer a los clientes potenciales solo una opción.

Si aún desea incluir múltiples opciones de botones, dé 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 de inicio de Evernote, está bastante claro que una opción preferible es «Registrarse gratis», mientras que el CTA para que los usuarios comparen planes es muy secundario.

imagen16

Conclusión

Para lograr un diseño de CTA efectivo, debe considerar más que solo el botón en sí. También es importante pensar en el color de fondo, las imágenes circundantes, el texto circundante 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 utilizan debajo del botón de llamada a la acción («¡4.714 empresas se inscribieron esta semana!») Aumenta la confianza de los clientes potenciales.

imagen14

Espero que los consejos mencionados en este artículo le 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 volver a crear una llamada a la acción en su sitio, recuerde probar para ver si funciona para su audiencia.

Deja un comentario