Probando diferentes estilos en los botones de pago

Hoy os traigo otro test A/B que llevamos haciendo unos meses. Como siempre dentro de esta serie de artículos mensuales, vamos a ver en detalle la hipótesis de mejora que hemos realizado, su aplicación creando variaciones de una página en nuestro sitio web, y los resultados que hemos obtenido.

Hace un tiempo estuvimos estudiando el color de los botones de acción de la página principal de Nelio Content. Gracias a una prueba A/B de estilos CSS, pudimos ver cómo el color verde funciona mejor para nuestros visitantes de habla inglesa en esa página.

No podemos asumir que este será el caso para ninguna página. Por eso hoy vamos a probar el color y el tamaño de los botones de pago de la tabla de precios que aparece en la página de compra de Nelio A/B Testing.

Definición de la prueba A/B

Nuestra hipótesis de mejora es que cambiando el color y el tamaño de los botones de pago en la tabla de precios de Nelio A/B Testing conseguiremos más clics en estos botones y, en 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, detalles y un botón para suscribirse al servicio. Puedes verlo en la siguiente captura de pantalla:

Los botones son de un color gris que resalta poco, salvo el plan profesional, que tiene un botón azul oscuro para darle más énfasis a este plan frente a los otros dos.

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

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

Como nuestra hipótesis decí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 variación anterior para crear una nueva en la que se han aumentado los tamaños de los botones. Puedes ver este cambio en la siguiente captura de pantalla:

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

• El original, sin cambios de estilo.
• Una primera variante con colores más destacados en los botones.
• Una segunda variante con colores destacados y un tamaño de botón más grande.

Con todo este trabajo realizado, podemos traducirlo en una prueba A/B de estilos CSS. Para ello, Nelio A/B Testing te permite crear un test A/B de diferentes estilos CSS con los que puedes probar fácilmente los cambios de estilo en WordPress.

Creamos la nueva prueba CSS A/B y las tres alternativas dentro de ella. De hecho, las capturas de pantalla que has visto antes de las variaciones son capturas del editor de estilos CSS que incluye Nelio A/B Testing para crear las alternativas.

Como puedes ver en la captura de pantalla anterior, limitamos el alcance de la prueba a la página de precios de Nelio A/B Testing, así como al hecho de que definimos cinco objetivos a medir dentro de la prueba:

• Clics en los botones de cualquier plan.
• Pulsa sobre los botones del plan básico.
• Clics en los botones del plan profesional.
• Clics en los botones del plan empresarial.
• Cantidad de compras.

Con todo esto creado, algo que no te llevará más de 10 minutos, comenzamos la prueba y esperamos a que lleguen los resultados. Ahora es el turno de Nelio A/B Testing de hacer el trabajo. Nuestro plugin se encarga de dividir el tráfico entrante entre las distintas variantes y contabilizar las conversiones en cada objetivo definido en el test A/B.

Análisis de los resultados del test A/B

Esta prueba A/B se ejecutó durante tres meses en nuestro sitio web. Los resultados se pueden ver a continuación. Vamos a analizar cada gol en detalle para entender las conclusiones que hemos sacado de esta prueba.

El primer objetivo era medir los clics que se hacían en cualquiera de los botones de los planes en 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. Por otro lado, la variante que cambió de colores y tamaños es un 15% peor que la versión original de la página.

Sin embargo, ninguno de estos números logró un nivel suficiente de confianza estadística para identificar claramente una versión ganadora para este objetivo.

El segundo gol contó clics solo en los botones del plan básico. En este caso, los resultados son similares a la meta anterior. Tenemos la versión con colores cambiados como la mejor de las tres y la versión con colores y tallas como la peor.

Del mismo modo, las estadísticas no son capaces de identificar la versión con los nuevos colores como un claro ganador con suficiente confianza.

El caso del tercer objetivo, donde medimos clics en el plan profesional, es un poco diferente. Como antes, la versión con los colores es mejor y la versión que combina colores y tamaños es peor. Sin embargo, ahora las estadísticas nos dicen que claramente la versión ganadora tiene bastante confianza.

Podemos decir que al utilizar colores más destacados conseguimos un mayor número de clics. El botón naranja funciona mejor que el botón azul que teníamos antes.

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

Todo esto de hacer clic está bien. Pero si sólo echamos un vistazo a los resultados anteriores, estaremos teniendo una visión parcial de la realidad.

Por eso, agregué el último objetivo en el que medimos la cantidad de compras que logra cada variante. Puede obtener una variante que obtenga más clics, pero si no puede obtener más ventas también, estará eligiendo un falso ganador.

En los siguientes resultados vemos que esto es exactamente lo que sucede. La versión con los nuevos colores consigue un 24,5% menos de ventas, mientras que la versión que combina colores y tallas vende un 16,6% menos que la versión actual de nuestra página (la que no tiene cambios).

Con estos resultados, lo que tenemos que ver es que el embudo de conversión es complejo y, aunque muchas veces lo dividimos en fases y contamos las microconversiones, no debemos perder de vista el panorama completo.

La ventaja de crear pruebas A/B multiobjetivo es que podemos tener todas las perspectivas que queramos para obtener una imagen completa de qué tan bien (o mal) está funcionando nuestro sitio web. Solo así podremos tener la confianza de elegir un ganador con total tranquilidad mirando los datos de los resultados del test A/B.

Imagen destacada de Grooveland Designs en Unsplash.