Prueba de diferentes estilos en los botones de finalización del pedido

Hoy te traigo otra prueba A/B que hemos estado ejecutando durante varios meses. Como siempre en esta serie de artículos mensuales, veremos en detalle la hipótesis de mejora que hemos hecho, su aplicación creando variaciones de una página en nuestro sitio y los resultados que hemos obtenido. Hace algún tiempo estaba estudiando el color de los botones de acción en la página principal del contenido de Neli. Debido a una prueba A/B de los estilos CSS, pudimos ver cómo funciona mejor el color verde para nuestros visitantes de habla inglesa. No podemos asumir que este será el caso de cualquier página. Es por eso que hoy probaremos el color y el tamaño de los botones de compra en la tabla de precios que aparece en la página de pruebas Nelio A/B.
La definición de la prueba A/B Nuestra hipótesis de mejora es que cambiar el color y el tamaño de los botones de comando en la tabla de pruebas Nelio A/B obtendrá más clics en estos botones y, en consecuencia, tendremos más ventas. La versión original de la tabla de precios de prueba Nelio A/B muestra los tres planes que vendemos, cada uno con el precio, los detalles y un botón para suscribirse al trabajo. Puedes verlo en la siguiente captura de pantalla:

La versión original de los botones en la página de pruebas Nelio A/B. Los botones son de un color gris que se destaca un poco, excepto el plan profesional, que tiene un botón azul oscuro para poner más énfasis en este plan en comparación con los otros dos.
Lo primero que verificaremos es si cambiar el color de estos botones para hacerlos más llamativos es mejor o no. Para esto, la versión alternativa que propuse incluye un cambio en los estilos de CSS con nuevos colores, como puede ver a continuación: alternativa a los botones en la página de pruebas Nelio A/B, con colores más prominentes. Mantuve resaltando el plan profesional, pero ahora los otros planes son azul oscuro y este plan intermedio tiene un color naranja más prominente. Según los estudios en psicología del color, Orange es una buena opción para los botones de acción, por lo que decidimos elegir esta naranja que vio en la imagen anterior para el plan profesional.

Debido a que nuestra hipótesis declaró que el tamaño de los botones también debería afectar su rendimiento, hemos mantenido los cambios de colores propuestos en la versión anterior para crear una nueva en la que se ha aumentado el tamaño de los botones. Puede ver este cambio en la siguiente captura de pantalla:
Alternativa a los botones en la página de pruebas Nelio A/B, con colores más prominentes y dimensiones más grandes. Por lo tanto, tenemos tres versiones diferentes de los estilos CSS de la tabla de pruebas Nelio A/B:

El original, sin cambios de estilo.
Una primera variante con colores más prominentes en los botones.
Una segunda variante con colores prominentes y un tamaño más grande del trasero.
Con todo este trabajo realizado, podemos traducir esto en una prueba A/B de los estilos CSS. Para hacer esto, las pruebas Nolio A/B le permiten crear una prueba A/B de diferentes estilos CSS con los que puede 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 ha visto antes de las variaciones son el editor de pantalla del editor de estilo CSS que las pruebas Nelio A/B incluyen para crear alternativas. Definición de la prueba de diferentes estilos en las pruebas de precios B de Neli A/Precio. Como puede ver en la captura de pantalla anterior, hemos limitado el alcance de la prueba en la página de pruebas Nelio A/B, así como el hecho de que definimos cinco objetivos que se miden en la prueba:
Haga clic en los botones de cualquier plan.

Haga clic en los botones del plan básico.
Haga clic en los botones del plan profesional.
Haga clic en los botones del plan de la empresa.
El valor de las compras.
Sin embargo, 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 pruebas de NLIO A/B para hacer el trabajo. Nuestro complemento es responsable de dividir el tráfico de entrada entre diferentes variaciones y contar conversiones en cada objetivo definido en la prueba A/B.
Prueba de análisis de resultados A/B Esta prueba A/B se ejecuta durante tres meses en nuestro sitio. Los resultados se pueden ver a continuación. Analizaremos cada objetivo en detalle para comprender las conclusiones que hemos sacado de esta prueba. El primer objetivo fue medir los clics que se hicieron en cualquiera de los planes en la tabla de precios. En este caso, los resultados muestran que la variante con los colores modificados hace 17.2% más de clics. Por otro lado, la variante que ha cambiado con colores y dimensiones es un 15% peor que la versión original de la página. Sin embargo, ninguna de estas cifras ha alcanzado un nivel suficientemente seguro para identificar claramente una versión ganadora para este objetivo. El segundo objetivo contó los clics solo 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 el mejor de los tres y la versión con colores y dimensiones como la peor. Del mismo modo, las estadísticas no pueden identificar la versión con los nuevos colores como un claro ganador con suficiente confianza.
Los resultados del número de prueba de clics en el plan básico. El caso del tercer objetivo, en el que medimos los clics en el plan profesional, es un poco diferente. Como antes, la versión de color es mejor y la variante que combina colores y tamaños es peor. Sin embargo, ahora las estadísticas nos dicen que la versión ganadora claramente tiene suficiente confianza.

Podemos decir que usando colores más prominentes obtenemos una mayor cantidad de clics. El botón naranja funciona mejor que el botón azul que tenía antes. Los resultados del número de prueba en el plan profesional. En el caso de los clics en el plan empresarial, aquí volvemos a la misma condición que los dos primeros objetivos. Pero aquí las diferencias entre la versión original y la variante con los colores cambiados son insignificantes. La versión que parece mucho peor es la que incluye cambios de color y tamaño.

Los resultados de la prueba del número de clics en el plan de la empresa. Todos estos clics están bien. Pero si solo miramos los resultados anteriores, tendremos una visión parcial de la realidad.

Por esta razón, agregué el último objetivo en el que medimos el número de compras realizadas por cada opción. Puede obtener una variante que obtenga más clics, pero si no puede obtener más ventas, elegirá un ganador falso. En los siguientes resultados vemos que esto es exactamente lo que sucede. La versión con los nuevos colores produce 24.5% menos ventas, mientras que la versión que combina colores y tamaños se vende con 16.6% menos que la versión actual de nuestra página (la que no tiene cambios).
Los resultados de las pruebas con respecto al número de ventas realizadas. Con estos resultados, lo que necesitamos ver es que el embudo de conversión es complejo y, aunque a menudo lo dividimos en fases y contamos las microconversiones, no debemos perder de vista toda la imagen.