¿Con qué colores consigues aumentar las ventas?

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

Una vez más, los test A/B nos han demostrado que no siempre van alineados nuestros gustos y preferencias de colores con los de nuestros visitantes. O mejor dicho, los colores que muestras en tu web, aunque pueden resultar atractivos, no necesariamente son los que más ventas te van a aportar. De hecho, encontrarás muchos artículos sobre la psicología del color que estudian cómo cada color provoca una respuesta emocional diferente y cómo estos pueden persuadir de forma distinta a tu audiencia.

Guía de las emociones que transmiten los colores y las marcas que los usan en sus logos
Guía de las emociones que transmiten los colores y las marcas que los usan en sus logos (fuente: The Logo Company).

Este mes, aprovechando que cambiamos recientemente los planes de nuestro producto Nelio Content y el diseño de la página de precios, era una oportunidad perfecta para analizar qué colores debían mostrarse en cada uno de sus planes para conseguir más ventas.

En el diseño de la página original, siendo yo una fan del color azul, (aunque parece ser que no debo ser la única teniendo en cuenta el color del logo de WordPress) propusimos el siguiendo diseño de la página de planes de Nelio Content:

Captura de pantalla de la página de planes y precios de Nelio Content antes de crear el test A/B de la misma
Captura de pantalla de la página de planes y precios de Nelio Content antes de crear el test A/B de la misma.

¿A qué está chula, verdad? ¡A mí me encanta! Pero si ya has ido leyendo sobre nuestra experiencia realizando un test cada mes, siempre insistimos en que te olvides de tus preferencias y gustos y te bases en datos reales. Estos son los que te van a decir realmente qué impacta más en tu cuenta de resultados.

Así que, el test de este mes con Nelio A/B Testing ha sido precisamente analizar si la combinación de colores de los planes es una opción que podría generar más ingresos.

Captura de pantalla de los planes de Nelio Content mostrados en variaciones de color azul
Versión original de nuestro test A/B: los planes de Nelio Content mostrados en variaciones de color azul.

Crear un test de la página de precios

Antes de crear un test A/B de cualquier elemento de una web, siempre recomendamos que realices un análisis de qué te está funcionando en tu web, dónde tienes más fricción y problemas, y generes hipótesis sobre qué podrías mejorar. Del listado de hipótesis que hayas generado, prioriza aquellas que podrán tener más impacto en tus objetivos. Es decir, las páginas de aterrizaje y las de precios, seguramente tendrán mucho más impacto en el aumento de ventas que una entrada de un blog.

En este caso, nuestra principal motivación para crear este test ha sido: ya que vamos a cambiar los planes de Nelio Content y hemos rediseñado toda la página de precios, aprovechamos la ocasión para asegurarnos que el nuevo diseño tenga, desde el principio, la mejor combinación de colores de los planes que mostramos.

Decidimos crear, adicionalmente a la versión original, otras dos variantes con estas combinaciones de colores:

Captura de pantalla de los planes de Nelio Content mostrados en la primera variante de un test A/B
Captura de pantalla de los planes de Nelio Content mostrados en la primera variante del test A/B.

En la primera variante, decidimos mostrar los planes con una selección de colores pastel que este año están muy de moda.

Captura de pantalla de los planes de Nelio Content de la segunda variante de un test A/B
Captura de pantalla de los planes de Nelio Content mostrados en la segunda variante del test A/B.

Y creamos una segunda variante, como puedes ver en la imagen anterior, en la que sólo quisimos destacar con color fucsia el plan Standard, y los otros dos planes mostrarlos con el azul de fondo más oscuro y los botones de color verde.

Por supuesto, en cada una de las variantes, nos aseguramos de que la combinación de colores que mostrábamos era la misma en las dos veces en que se muestran los planes en la misma página.

En general, podríamos haber seleccionado otros colores, o incluso crear otras combinaciones de colores, pero el problema de crear muchas alternativas es que, para conseguir resultados que sean estadísticamente significativos, necesitas tener muchas más visitas.

Creando el test A/B

Para crear el test A/B, como siempre, utilizamos nuestro propio plugin, Nelio A/B Testing. Sólo tienes que descargarlo del directorio oficial de plugins de WordPress e instalarlo en tu web para ya poder crear un test como este. Y si todavía tienes dudas sobre qué plugin de test A/B utilizar para crear tus tests en tu web, te recomiendo que leas nuestra comparativa de plugins de tests A/B para WordPress.

Nelio A/B Testing es muy versátil ya que te permite crear tests A/B de cualquier elemento de WordPress. En este caso creamos un test A/B de páginas que nos permite crear las páginas alternativas como una copia de la página original en la que hemos cambiado los colores de fondo del bloque de tipo grupo que define cada uno de los planes. Fíjate que si hubiéramos utilizado una plantilla de la tabla de precios para mostrar los distintos planes, también podríamos haber creado un test A/B de plantillas de página y las alternativas serían variaciones de la plantilla original.

En la siguiente captura puedes ver la definición del test:

Captura de pantalla de la definición de un test A/B de los planes de Nelio Content
Captura de pantalla de la definición del test A/B de la página de los planes de Nelio Content.

Crear cada una de las variantes ha sido tan sencillo como seleccionar la página original, cambiar los colores de fondo de los bloques que queríamos cambiar y, por supuesto, añadirle a cada variante el título que mejor nos describía cada una de las variantes.

A continuación, al crear cualquier test A/B, debes establecer los objetivos que quieres medir en el test para decidir qué funciona mejor. En este caso definimos 4 objetivos a medir dentro del test:

  • Clics en los botones de cualquier plan.
  • Clics en los botones del plan Basic.
  • Clics en los botones del plan Standard.
  • Clics en los botones del plan Plus.

Con todo esto creado, algo que nos llevo poco más tiempo del que te ha llevado el leer hasta aquí, iniciamos el test y ya no hace falta que nos preocupemos de nada más. Nelio A/B Testing se encarga de dividir el tráfico en tres grupos aleatorios de forma que, cada uno de ellos vea sólo una de las variantes definidas, y hacer el recuento de conversiones en cada uno de los objetivos que hemos definido en el test A/B.

Análisis de los resultados del test A/B

Al cabo de un mes y nueve días de funcionamiento de este test, ya conseguimos resultados estadísticamente significativos con una confianza de casi un 100%. Veamos un análisis de cada uno de los objetivos en detalle y las conclusiones que pudimos extraer del test realizado.

El primer objetivo consistía en medir los clics que se hacían en cualquiera de los botones de los planes de las tablas de precios (que la tabla se muestra dos veces en la página).

Análisis de los resultados del primer objetivo del test A/B realizado.
Análisis de los resultados del primer objetivo del test A/B realizado.

En este caso los resultados muestran que la segunda variante, alternativa C, es la que consigue casi un 130% (un 129,6%, para ser exactos) más de clics que la versión original. En cambio, la variante mostrando los planes en colores pastel es un 25,5% peor. Si sólo hubiéramos tenido este objetivo del test, la alternativa C vemos que ha conseguido unos resultados arrolladores.

El segundo objetivo contaba los clics solamente en los botones del plan Basic. Veamos cómo varian los resultados:

Captura de pantalla del análisis de los resultados del segundo objetivo del test A/B realizado
Análisis de los resultados del segundo objetivo del test A/B realizado.

Fíjate que si sólo nos centramos en los clics al plan Basic, la diferencia entre la tercera variante y la versión original, aunque sigue siendo considerable, es decir, una mejora de un 73,7%, no es tanto como si analizamos todos los clics. Y en el caso de la variante de colores pastel, como en el caso anterior, también es peor que la original pero la diferencia es de un 12,3%. Si lo piensas, puede tener cierto sentido ya que las variantes no se centran en destacar particularmente el plan Basic.

Veamos ahora los resultados que hemos obtenido en el que queríamos medir los clics del plan Standard.

Captura de pantalla del análisis de los resultados del tercer objetivo del test A/B realizado
Análisis de los resultados del tercer objetivo del test A/B realizado.

En este caso, la mejora de la tercera variante que es precisamente la que destaca con un color más llamativo el plan, consigue incluso un 228,1% de más clics que la versión original. Así que, si tenías alguna duda de si tiene algún impacto el destacar alguno de los planes, con este test queda claro que la gente se siente atraída por los elementos más llamativos.

Finalmente, veamos lo que ocurre con el último plan:

Captura de pantalla del análisis de los resultados del cuarto objetivo del test A/B realizado
Análisis de los resultados del cuarto objetivo del test A/B realizado.

En este caso, la mejora de la alternativa C respecto a la original es de casi un 3% con una confianza del 95,7%. Y en cualquier caso, hay poca conversión del plan Plus en todas las alternativas. Y es que, efectivamente, la mayoría de nuestros clientes, de entrada, prefieren optar por un plan inferior y luego, más adelante, cambiar de plan.

Conclusiones

Vistos los resultados que hemos obtenido del test A/B, llegamos a la conclusión que la versión en la que se destaca el plan Standard con un color fucsia ha funcionado mucho mejor que la versión original y la versión de los colores pasteles. Por lo tanto, lo mejor es aplicarla como versión definitiva en nuestra web.

Captura de pantalla de aplicar la variante ganadora de un test A/B
Captura de pantalla de aplicar la variante ganadora de un test A/B como definitiva.

Como ves, con un sólo clic, la versión definitiva de la página de precios de Nelio Content pasa a ser la que ha ganado el test. Adiós a mis tres colores azules pero ¡bienvenida esta nueva versión! Como ves, de poco sirven nuestras preferencias y gustos para conseguir aumentar las ventas. Los tests A/B son los que, con datos reales, nos prueban qué es lo que realmente funciona. ¿A qué esperas crear tu test A/B para aumentar la conversión en tu web?

Imagen destacada de Baher Khairy 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.