Probando diferentes estilos en los botones de compra

Publicada en Marketing Online.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparación de dos variantes de la misma página mediante test A/B

Comparte este artículo

Hoy os traigo otro nuevo test A/B que hemos estado ejecutando hace unos meses. Como siempre dentro de la serie de entradas del test del mes, vamos a ver con todo detalle la hipótesis de mejora que hemos realizado, su aplicación creando variaciones de una página de nuestra web, y los resultados obtenidos.

Hace un tiempo estuvimos estudiando el color de los botones de acción en la página principal de Nelio Content. Gracias a un test A/B de estilos CSS pudimos comprobar como el color verde funciona mejor para nuestros visitantes angloparlantes a esa página.

Como no podemos asumir que esto vaya a ser así para cualquier página, hoy vamos a probar el color y el tamaño de los botones de compra de la tabla de precios que aparece en la página de compra de Nelio A/B Testing.

Definición del test A/B

Nuestra hipótesis de mejora es que cambiar el color y el tamaño de los botones de compra de la tabla de precios de Nelio A/B Testing conseguirá más clics en estos botones y como consecuencia tendremos más ventas.

La versión original de la tabla de precios de Nelio A/B Testing muestra los tres planes que vendemos, cada uno con su precio, sus detalles y un botón para suscribirse al servicio. Puedes verlo en la siguiente captura de pantalla:

Versión original de los botones de la página de precios de Nelio A/B Testing.
Versión original de los botones de la página de precios de Nelio A/B Testing.

Los botones son de un color gris que destaca poco, a excepción del plan profesional, que tiene un botón en color azul oscuro para dar más énfasis a este plan frente a los otros dos.

Lo primero que vamos a comprobar es si cambiar el color de estos botones para hacer que sean más llamativos es mejor. Para ello, la versión alternativa que hemos propuesto incluye un cambio de estilos CSS con nuevos colores, como puedes ver a continuación:

Alternativa de los botones de la página de precios de Nelio A/B Testing con los colores más destacados.
Alternativa de los botones de la página de precios de Nelio A/B Testing con los colores más destacados.

Hemos mantenido el resaltado del plan profesional, pero ahora los otros planes tienen el color azul oscuro y este plan intermedio tiene un color naranja más prominente. Según los estudios en psicología del color, el naranja es una buena opción para los botones de acción, así que decidimos escoger este naranja que has visto en la imagen para el plan profesional.

Como nuestra hipótesis establecía que el tamaño de los botones también debería afectar a su rendimiento, hemos mantenido los cambios en los colores propuestos en la anterior variación para crear una nueva en la que los tamaños de los botones se han aumentado. Puedes ver este cambio en la siguiente captura de pantalla:

Alternativa de los botones de la página de precios de Nelio A/B Testing con los colores más destacados y tamaños más grandes.
Alternativa de los botones de la página de precios de Nelio A/B Testing con los colores más destacados y tamaños más grandes.

Por tanto, tenemos tres versiones distintas de los estilos CSS de la tabla de precios de Nelio A/B Testing:

  • La original, sin cambios en los estilos.
  • Una primera variante con colores más prominentes en los botones.
  • Una segunda variante con colores prominentes y un mayor tamaño de los botones.

Con todo este trabajo hecho, nos queda plasmar esto en un test A/B de estilos CSS. Para ello, Nelio A/B Testing permite crear un test A/B de diferentes estilos CSS con el que probar cambios de estilos fácilmente en WordPress.

Creamos el nuevo test A/B de CSS y las tres alternativas dentro de él. De hecho, las capturas que has visto antes de las variaciones son capturas del propio editor de estilos CSS que Nelio A/B Testing incluye para crear las alternativas.

Definición del test de estilos diferentes en los botones de la página de precios de Nelio A/B Testing.
Definición del test de estilos diferentes en los botones de la página de precios de Nelio A/B Testing.

Tal y como puedes ver en la captura de pantalla anterior, limitamos el ámbito de actuación del test a la página de precios de Nelio A/B Testing. Y además, definimos cinco objetivos a medir dentro del test:

  • Clics en los botones de cualquier plan.
  • Clics en los botones del plan básico.
  • Clics en los botones del plan profesional.
  • Clics en los botones del plan enterprise.
  • Ventas.

Con todo esto creado, algo que no te va a llevar más de 10 minutos, iniciamos el test y esperamos a que los resultados empiecen a llegar. Ahora es turno de Nelio A/B Testing de trabajar. Nuestro plugin se encarga de dividir el tráfico entrante entre las diferentes alternativas del test y hacer el recuento de conversiones en cada objetivo definido en el test A/B.

Análisis de los resultados del test A/B

Este test A/B estuvo funcionando durante tres meses en nuestra web. Los resultados los puedes ver a continuación. Vamos a ir analizando cada objetivo en detalle para entender las conclusiones que hemos extraído de esta prueba.

El primer objetivo consistía en medir los clics que se hacían en cualquiera de los botones de los planes de la tabla de precios. En este caso los resultados muestran que la variante con los colores cambiados consigue un 17.2% más de clics. En cambio, la variante que tenía cambio de colores y de tamaño es un 15% peor que la versión original de la página.

De todos modos, ninguno de estos números consiguió el suficiente nivel de confianza estadístico como para claramente identificar una versión ganadora para este objetivo.

Resultados del test respecto al número de clics en cualquier plan.
Resultados del test respecto al número de clics en cualquier plan.

El segundo objetivo contaba los clics en solamente en los botones del plan básico. En este caso, los resultados son similares al objetivo anterior. Tenemos la versión con colores cambiados como la mejor de las tres y la versión con colores y tamaños como la peor.

De igual modo, la estadística no es capaz de identificar a la versión con los nuevos colores como una clara ganadora con confianza suficiente.

Resultados del test respecto al número de clics en el plan básico.
Resultados del test respecto al número de clics en el plan básico.

El caso del tercer objetivo, donde medimos clics en el plan profesional, es un poco diferente. Al igual que antes, la versión con los colores es mejor y la versión que combina colores y tamaños es peor. Sin embargo, ahora sí que la estadística nos dice que claramente la versión ganadora tiene una confianza suficiente.

Podemos afirmar que colores más prominentes han conseguido un mayor número de clics. El botón naranja funciona mejor que el botón azul que teníamos antes.

Resultados del test respecto al número de clics en el plan profesional.
Resultados del test respecto al número de clics en el plan profesional.

Para el caso de los clics en el plan enterprise, aquí volvemos al mismo estado que con los dos primeros objetivos. Aunque las diferencias entre la variante original y la variante con los colores cambiados son inapreciables. La versión que sí que parece bastante peor es la que incluye cambios de color y tamaño.

Resultados del test respecto al número de clics en el plan enterprise.
Resultados del test respecto al número de clics en el plan enterprise.

Todo esto de los clics está muy bien. Si nos quedamos con la imagen obtenida a partir de los resultados anteriores únicamente, estaremos teniendo una visión parcial de la realidad.

Por este motivo, añadí el último objetivo en el que medimos el número de ventas conseguido por cada variante. Puedes conseguir una variante que consiga más clics, pero si no es capaz de conseguir más ventas también, estaremos escogiendo una falsa ganadora.

En los resultados siguientes vemos que justo esto es lo que pasa. La versión con los nuevos colores consigue un 24.5% menos de ventas, mientras que la versión que combina colores y tamaños vende un 16.6% menos que la versión actual de nuestra página, sin cambios.

Resultados del test respecto al número de ventas conseguidas.
Resultados del test respecto al número de ventas conseguidas.

Con estos resultados, lo que hemos de ver es que el embudo de conversión es complejo y, aunque muchas veces lo dividimos en fases y contamos las micro-conversiones, no hay que perder de vista la imagen completa.

La ventaja de crear tests A/B multi-objetivo es que podemos tener todas las perspectivas que queramos para conseguir la imagen completa de cómo de bien (o mal) está funcionando nuestra web. Sólo de esta manera seremos capaces de tener la confianza para escoger a una ganadora con total tranquilidad mirando a los datos de los resultados del test A/B.

Imagen destacada de Grooveland Designs en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.