Botones de llamada a la acción: Diseño que genera clics

Imagina que has guiado a un invitado por toda tu casa, le has enseñado cada habitación, has respondido a cada pregunta y, luego, en la puerta principal, balbuceas algo que apenas pueden oír y te quedas mirando tus zapatos. Eso es lo que hace un botón de llamada a la acción débil. Toda la página ha estado construyendo hacia un momento, y luego el botón lo estropea.

Un botón de llamada a la acción, a menudo abreviado como CTA, es el elemento en el que se puede hacer clic que pide a un visitante que dé el siguiente paso: comprar ahora, reservar una llamada, iniciar una prueba, descargar la guía. Es pequeño, pero tiene un peso enorme, porque es el punto exacto donde el interés se convierte en acción. En esta guía, veremos qué hace que un botón sea irresistible y qué hace que pase desapercibido, todo en un lenguaje sencillo y con ejemplos que puedes aplicar hoy mismo.

Por qué un botón puede hacer o deshacer una página

Todo lo demás en una página, el titular, las imágenes, el texto, existe para llevar a alguien a tomar una decisión. El botón es donde esa decisión se toma o se pierde. Puedes tener una página brillante y aun así ver resultados decepcionantes porque el botón es demasiado vago, demasiado pequeño o está oculto entre otras cosas que compiten por la atención.

Por eso los diseñadores reflexivos se obsesionan con los CTA. Un botón no es una decoración; es la bisagra sobre la que gira una página. Hacerlo bien a menudo mejora los resultados más que un rediseño más grande, de la misma manera que los principios detrás de lo que hace que un sitio web convierta tienden a reducirse a un puñado de detalles de alto impacto en lugar de mil pequeños.

Redacción: diga a la gente exactamente lo que ocurre

Las palabras de un botón son más importantes que cualquier otra cosa. Las etiquetas genéricas como "Enviar", "Haga clic aquí" o "Continuar" no dicen nada a la gente sobre lo que obtendrán. El texto más potente de un botón es específico y, cuando es posible, está escrito desde el punto de vista del visitante.

Compara "Enviar" con "Enviar mi consulta". El segundo te dice exactamente lo que hace el botón y lo enmarca a tu alrededor. "Iniciar mi prueba gratuita" supera a "Registrarse". "Obtener mi presupuesto" supera a "Solicitar". La palabra "mi" hace que la acción se sienta personal y propia. Mantenlo corto, empieza con un verbo y asegúrate de que la etiqueta describe honestamente lo que ocurre al otro lado del clic. Esta misma voz sencilla y humana es lo que hace que un buen formulario web resulte atractivo en lugar de burocrático.

Adapte las palabras al momento

Un visitante que acaba de llegar no está en el mismo estado de ánimo que uno que ha leído cada palabra y comparado sus opciones. Al principio, un lenguaje de bajo compromiso como "Ver cómo funciona" se adapta al momento. Más abajo, cuando alguien está listo, un "Reservar mi llamada" seguro encaja. El botón debe encontrar a la gente donde está, no presionar para una boda en la primera cita.

Color y contraste: sea imposible de ignorar

Un botón solo se puede hacer clic si se ve, y solo se puede ver si destaca. La regla más importante del color de los CTA es el contraste: el botón debe diferenciarse claramente de todo lo que lo rodea. Un color atrevido y saturado sobre un fondo más tranquilo atrae la vista casi automáticamente.

No existe un color mágico único. Lo que importa es que el botón contraste con su entorno y se reserve para la acción que más desea que la gente realice. Si cada elemento de la página grita, ninguno lo hace. Elija un acento distintivo para sus botones principales y úselo con moderación, de modo que el color se convierta en una señal que diga "esto es lo que hay que hacer clic". La idea más amplia detrás de esto se encuentra en nuestra guía sobre fuentes y colores de sitios web.

Tamaño, forma y el objetivo de toque

Un botón debe ser lo suficientemente grande como para notarlo y lo suficientemente grande como para tocarlo. En un teléfono, un botón demasiado pequeño o encajado entre otros elementos provoca toques erróneos y frustración. Proporcione a los botones un relleno generoso para que el área en la que se puede hacer clic tenga un tamaño cómodo, y deje espacio alrededor de ellos para que nadie toque accidentalmente el elemento equivocado.

La forma importa menos de lo que la gente piensa, pero la coherencia importa mucho. Elige un estilo de botón, redondeado o cuadrado, relleno o delineado, y úsalo de forma coherente para que los botones sean reconocibles al instante como botones. Un sutil cambio al pasar el cursor, como un ligero oscurecimiento o un realce, tranquiliza a la gente de que el elemento es interactivo. Estas pequeñas y pulidas señales forman parte del arte más amplio de las microinteracciones.

Colocación: encuentre a las personas en el pico de intención

El mejor botón del mundo falla si aparece en el momento equivocado. El objetivo es colocar un CTA exactamente donde un visitante tiene más probabilidades de estar listo para actuar. Para una oferta simple, eso podría ser en la parte superior de la página, dentro de la primera pantalla, como se explica en nuestra revisión del diseño "above-the-fold".

Para una compra más reflexiva, la gente necesita absorber la información primero, por lo que repetir el botón en los puntos de decisión naturales funciona mejor, como después de haber explicado los beneficios, después de la prueba social, y de nuevo al final. Una página de ventas larga podría llevar la misma llamada a la acción varias veces, siempre con la misma redacción, para que en el momento en que alguien se sienta listo, el botón esté ahí mismo. El arte reside en leer dónde la intención alcanza su punto máximo, lo cual es fundamental para un buen diseño de página de destino.

Primario, secundario y la trampa de demasiadas opciones

La mayoría de las páginas tienen una acción que importa más y algunas menos importantes. El error es hacer que todas parezcan igual de importantes. Cuando cinco botones gritan a la vez, el visitante se congela, porque elegir se convierte en un trabajo. Los psicólogos llaman a esto la paradoja de la elección, y mata silenciosamente las conversiones.

La solución es la jerarquía. Dale a tu acción más importante un botón primario audaz y relleno. Haz que cualquier opción secundaria sea visualmente más discreta, quizás un simple contorno o un enlace de texto sin formato. De esta manera, la vista se dirige primero a la acción que más deseas, mientras que la alternativa permanece disponible para aquellos que la necesitan. Una voz fuerte y unos pocos susurros es mucho más eficaz que una habitación llena de gritos.

Reducir el riesgo en el clic

La gente duda en el paso final cuando el clic parece arriesgado o costoso en esfuerzo. Una breve línea de tranquilidad justo al lado del botón puede disolver esa vacilación. "No se requiere tarjeta", "Cancelar en cualquier momento" o "Tarda dos minutos" eliminan una preocupación específica en el momento exacto en que surge.

Esto funciona porque las palabras alrededor del botón son parte del trabajo del botón. Una etiqueta segura más una pequeña dosis de tranquilidad convierte un "quizás más tarde" en un "por qué no". El mismo instinto, reducir el costo percibido de decir sí, se encuentra en una página de contacto bien diseñada y una página de precios confiable.

Prueba, y luego vuelve a probar

Los CTA son una de las cosas más gratificantes con las que experimentar, porque son fáciles de cambiar y, a menudo, tienen un gran impacto. Prueba una etiqueta diferente, un color diferente o una posición diferente, y observa qué sucede. Incluso las comparaciones simples de antes y después te enseñan mucho sobre tu audiencia en particular.

Lo que funciona para un sitio puede no funcionar para otro, así que trata los consejos, incluyendo todo lo aquí expuesto, como un punto de partida y no como un evangelio. El hábito fiable es hacer un cambio claro a la vez, medir honestamente y mantener lo que funciona. Hazlo de forma consistente y tus botones mejorarán silenciosamente, extrayendo más valor del tráfico que ya tienes. Si deseas una nueva perspectiva sobre una página que no está convirtiendo, siempre puedes contactarnos.

Preguntas frecuentes

Referencias

1. Nielsen Norman Group. "Call-to-Action Buttons: Placement, Wording, and Design." nngroup.com.
2. Google. "Material Design: Buttons." material.io.
3. Baymard Institute. "Call-to-Action Button Usability." baymard.com.