Mejorando la efectividad de los CTAs

Los CTAs (llamadas a la acción o call-to-action) son elementos esenciales dentro del diseño de interacción. Nos permiten indicar con claridad al usuario las acciones que puede realizar dentro de un interfaz. Habitualmente se utilizan en forma de botón, ya que son más llamativos que otras opciones visuales como los enlaces.

Call to Action, Button
Call to Action. Imagen de Joe the Goat Farmer

En las primeras interfaces de usuario, los CTAs eran inexistentes porque la tecnología no permitía distinguir bien los botones. Las interfaces eran muy rudimentarias y las APIs gráficas también, por lo que era difícil diferenciarlos por color. En la web pasó algo similar: si recordáis los primeros formularios o tiendas web, los botones se mimetizaban con el resto de la interfaz, haciéndolos muchas veces totalmente indistinguibles y demasiado iguales unos a otros.

Fueron algunos pioneros de la usabilidad como Bruce Tognazzini y Jakob Nielsen, quienes intentaron con cierto éxito mejorar estos aspectos en las interfaces de Apple y Sun, respectivamente.

Diseñando CTAs efectivos

Un CTA efectivo supone conseguir que el usuario realice la acción que se pretende. Con el auge del comercio electrónico, diseñar CTAs más efectivos es una tarea fundamental para alcanzar el objetivo de convertir al visitante en cliente.

Si quieres diseñar CTAs que mejoren la conversión, ahí van algunos consejos:

  • Identificar la acción primaria: Lo primero para hacer un CTA efectivo es identificar la acción prioritaria. Los CTAs de acciones primarios deben destacar de los botones de acciones secundarias. Por ejemplo, si estamos es un carrito de la compra la acción primaria es pagar y la secundaria, modificar los productos del carrito.
  • Posición: El botón de llamada a la acción debe estar colocado próximo a donde se lleve a cabo la acción. La posición del CTA (call to action, llamada a la acción) puede ser complicada ya que depende de muchos factores incluyendo: el objetivo de la página, la intención del visitante y el resto del interfaz. Los CTAs debe colocarse siempre en la parte visible de la página. Un CTA pierde su efectividad si obligamos al usuario a hacer scroll para verlo.
  • Texto: Tu trabajo como diseñador de UX consiste en decirle al usuario exactamente lo que quieres que haga. Por tanto, el CTA debe ir rotulado con una frase que anime a la acción para la que se diseñó. Mejor un texto que indique acción a un texto descriptivo. Elige el verbo correcto, hay verbos que no demuestran la sensación de acción. Además, debes dar a tus visitantes razones para hacer clic: los mejores CTA son aquellos que te invitan a iniciar o completar un proceso.
  • Color: Por supuesto, un buen CTA destacar de todo el resto de botones de la interfaz. Como hemos dicho, los colores naranja o el verde suelen ser los colores que mejores respuestas obtienen), tamaño (cuanto más grande, mejor), rotulación,, etc…
  • Forma: También aumentan su efectividad si los resaltamos con un borde blanco o color uniforme a su alrededor, de tal manera que se vaya la vista hacia él.  Las formas redondeadas también ayudan, porque se perciben como más atractivas a la vista.
  • Estilo interactivo: La mayoría de usuarios estamos acostumbrados a que los botones cambien en el momento de hacer clic. Asegúrate de no perder la oportunidad de utilizar este recurso.

Es importante también equilibrar el contenido de la página y el espacio alrededor del CTA. Una llamada a la acción debe destacar, pero tiene que entenderse como parte del contenido, no como algo adicional.

Por otro lado, una buena práctica complementaria para mejorar la efectividad en un CTA es generar sensación de urgencia al usuario. Un texto como “Comprar ahora” es mejor que “Pagar”. También se pueden utilizar textos complementarios junto al CTA que ayuden a generar esa urgencia. Algunos ejemplos típicos serían “Quedan sólo 3 habitaciones”, “La oferta acaba en 12 minutos” o “Hay 15 personas mirando esta oferta”.

Si entendemos las motivaciones y expectativas del usuario tenemos mejor capacidad para provocar una acción inmediata. Ese tipo de frases destacadas ayudan a acelerar la decisión del usuario, consiguiendo aumentar su efectividad. Para ello, hay que saber crear la urgencia en el contexto de acción del usuario, no es lo mismo una web de reservas de hoteles que un comercio electrónico.

Algunas pautas de utilización de CTAs en dispositivos móviles

Los consejos para CTAs efectivos son 100% aplicables a interfaces móviles. Por supuesto, los CTAs debe ser probados para asegurarse de que se representan correctamente en diferentes dispositivos móviles.

La principal diferencia es que, en un interfaz móvil, el mejor sitio para colocar un CTA es la parte baja del interfaz, ocupando todo el ancho de la pantalla. Un buen ejemplo lo tenemos en la aplicación para móviles de BuyVip (Amazon).

Captura de la aplicación de Buyvip
Captura de la aplicación Buyvip de Amazon.

En el caso concreto de una tablet, la mejor ubicación es la zona derecha, con abundante espacio en blanco o de un color uniforme alrededor, destacando el CTA sobre el color o imagen de fondo.

Finalmente, y no nos cansaremos de repetirlo, las pruebas de usuario de CTA son absolutamente críticas. Si estás pensando en abordar pruebas A/B de tu interfaz, las llamadas a la acción son el lugar perfecto para empezar. Precisamente, porque incluso cambios aparentemente pequeños y sencillos de implementar pueden tener un gran efecto, como vimos analizando la conversión en UX Learn.

Cada público es distinto y puede responder de manera diferente. Tienes que probarlo todo: la ubicación del CTA respecto al contenido, su color, el texto principal y los posibles textos complementarios e, incluso, su estilo visual. TODO. Tu conversión te lo agradecerá.

Si quieres mejorar la efectividad y la tasa de conversión de tu sitio web, ofrecemos servicios de acompañamiento y consultoría en CRO, donde analizamos tu negocio y diseñamos un proyecto de acompañamiento orientado a proponer acciones concretas que mejoren la tasa de conversión de tu sitio web. Contáctanos y hablamos.

Comentarios

  1. […] los coches de alquiler, evidentemente, si bien el caso que nos ocupa hoy es el primero. Y es que el contexto de uso de un servicio es uno de los primeros elementos que conviene acotar cuando se aborda el rediseño de una propiedad […]

  2. […] el texto del call-to-action está pensado para animar a completar la acción (“Reservaré”), y eliminar fricciones (“Sin […]

  3. […] Pon un botón de donación en todas las páginas: colocar un botón de donación en todas las páginas que sea visible y llame a la acción, es decir, un CTA. […]

Deja tu comentario

*