¿Cuanto influye el color de un botón en su CTR? Un caso real de test multivariante.

Probablemente muchos de los que leais este post ya conoceis perfectamente lo que es un test multivariante en Google Website Optimizer. Para los que no, aquí un pequeño resumen: Optimizer es una herramienta que te permite testear diseños alternativos de una landing page para ver si mejoras la conversión o cambia el comportamiento del usuario (esto es un test A/B) o bien puedes, dentro de un diseño, testear diferentes versiones de uno o varios elementos del diseño (botones, colores, fotos, etc.) para ver si mejoras la conversión, etc.

Un test multivariante nos permite comprobar el rendimiento de varias alternativas de un elemento en un diseño web. Para mejorar la conversión es una muy buena herramienta.

Dicho esto, en el caso práctico y real del que voy a hablar aquí, tenemos una web de comercio electrónico, y queríamos comprobar, tras leer un artículo, si la posibilidad de que un usuario haga clic sobre el botón de compra de un producto varia en función del color de éste. Es decir, si tengo un botón de “Iniciar compra” de un producto, ¿el color de este botón influye en la decisión del usuario de hacer clic en él, y por tanto comprar?.

En este test multivariante se utilizaron 3 colores diferentes para el botón de compra, con el objetivo de ver cual ofrecía mayor ratio de conversión.

En este test multivariante se utilizaron 3 colores diferentes para el botón de compra, con el objetivo de ver cual ofrecía mayor ratio de conversión.

Por supuesto, yo tengo claro que sí, que influye y mucho, y hay montones de estudios, posts y artículos hablando de ello, porque los colores tienen una asociación inconsciente con el comportamiento del usuario. Pero con creerlo o intuirlo no vale, así que decidí hacer un test multivariante para determinar si el color del botón de “Iniciar compra” influía en el CTR, el índice de clics, en ese botón de compra de los usuarios, en qué medida y qué margen de mejora teníamos en la web.

La prueba se planteó entre tres colores del botón de acción principal. Los colores elegidos fueron el azul, color original, el naranja y el rojo. Anteriormente hicimos otra prueba con más colores en la variación de los que eliminamos aquellos que funcionaron peor que el original: como el color verde, por ejemplo. Así que este segundo test la intención era clara: determinar cual de los tres colores elegidos ofrecía un mayor ratio de clic en el botón objeto del test, un dato muy importante teniendo en cuenta que hablamos del botón que corresponde con la acción de iniciar una compra.

Hacer un test multivariante para determinar el botón más adecuado para una acción que supone una conversión o acción de compra tiene un gran valor comercial.

Desde el principio la idea era probar esas alternativas durante un mes completo, para poder tener un volumen de clics y datos importantes y que permitieran que los cambios en el CTR del botón no se debieran a circunstancias puntuales de un día concreto.

¿Qué cuales fueron los resultados del test multivariante? Aquí los teneis:

Gráfico de la evolución del test multivariante en el que se testearon 3 colroes diferenets para el mismo botón a ver cual ofrecia mejor CTR.

Gráfico de la evolución del test multivariante en el que se testearon 3 colroes diferentes para el mismo botón a ver cual ofrecia mejor CTR.

Lógicamente, lo importante aquí es lo que los datos de la prueba nos dicen, no nuestra opinión personal o las sensaciones subjetivas que pudiéramos tener respecto a un color u otro. Y lo que vemos aquí es que ambas versiones alternativas del botón funcionan mejor que la original y ofrecen un mejor CTR y, por tanto, incrementan las probabilidades de compra del producto, ya que cuanta más gente inicie el proceso de compra, más gente lo terminara, siempre y cuando el proceso de compra esté bien pensado y concebido, pero esa es otra historia.

Como puede verse en el gráfico, el botón anaranjado (representado en la gráfica por la línea naranja) nos da una mejora de más del 30% (un 5,38% de conversión frente a un 4,10% del modelo original) en el indice de CTR en el botón. La versión del botón en color rojo se ha quedado en una mejora del CTR de un 27%.

Finalmente, la decisión gracias a los datos de este test multivariante es sencilla: implantaremos el color naranja en el botón de “Iniciar compra”.

Be Sociable, Share!

Tags: , , ,

  1. Gonzalo’s avatar

    Muy interesante, Ricardo. En todo caso, me gustaría apuntar dos cosas que nosotros también hemos testeado y que podrían ayudar a otros.

    En este caso en particular, los colores naranja y rojo han funcionado mejor, pero no sólo por su asociación a compra, sino también por el contraste que ofrecía respecto de una página mayoritariamente azul. Dicho de otra manera, que la agente no diga rojo=compra, porque influyen otras cosas.

    Por otro lado, te recomiendo testear el texto que incluyes en el botón. No es lo mismo decir “Comprar este curso” que “Compra este curso” o “Compra este curso AHORA”

    Saludos,

  2. Ricardo Tayar’s avatar

    Hola Gonzalo,

    Totalmente de acuerdo con lo que comentas. En otros test multivariante que he realizado lo importante es precisamente no tanto el color sino el contradte con los colores de base del diseño. Al final, el color que mejor funciona es el que ofrece un contraste llamativo, pero sin “dañar” la vista.

    Sobre el texto, también he hecho test en este sentido y en concreto para este tipo de productos, que son bienes digitales, la variación que ofrece un mejor resultado es precisamente la que está online, siendo la peor opción el texto “Iniciar compra”, demasiado “técnico”.

    Un saludo y gracias por tus comentarios.

  3. Jordi Bufí’s avatar

    Muy interesante Ricardo! Una pregunta… más o menos sobre que volumen se ha realizado el test? Hablamos de cientos de clicks, miles, millones? (es decir, que tampoco necesito que me digas el número exacto)

  4. Ricardo Tayar’s avatar

    Hola Jordi,

    Hablamos de algo menos de mil clicks por botón, lo que supone unas cuantas miles de visitas a cada página del test. Para mi más que el número era más importante que la prueba fuera continua en tiempo para poder observar el ciclo de estacionalidad de un mes completo. Por ejemplo, a principio de mes los compradores suelen disponer de más dinero para comprar y a fin de mes no, y del mismo modo, si la prueba se realiza abarcando mucho días festivos los resultados pueden no ser todo lo buenos que querríamos. En este caso, la prueba abarcó 5 semanas completas, lo que supone 25 días laborales y 10 festivos, incluyendo un ciclo completo de fin e inicio de mes.

    Un saludo

  5. Jordi Bufí’s avatar

    Ya son buenas cifras 🙂 Gracias de nuevo por publicar esta info!

  6. David Martin’s avatar

    ¿Habéis probado con el color verde?, el cual utilizan por ejemplo en Mozilla o en Skype: http://www.mozilla-europe.org/es/firefox/ y http://www.skype.com/intl/es/

    Yo los datos que tengo de la última vez era el que mejor resultados estaba dando 🙂

  7. Ricardo Tayar’s avatar

    Hola David,

    Inicialmente hicimos un test multivariante con más colores y luego hicimos éste sobre el que habla el artículo con los tres colores “finalistas”. Yo pensaba lo mismo que tú sobre el verde, pero tengo que decirte que en este caso fue el que peor funcionó y con mucha diferencia, aunque resulte dificil de creer.

    Supongo que para algunos usos como descargas o similares el verde puede funcionar muy bien, pero desde luego en lo que es ecommerce y venta directa pura y dura nos dimos una buena morrada. Parece como si no asociaramos el verde con comprar.

    Un saludo.

  8. Fernando Maciá’s avatar

    Hola Ricardo,

    Muchas gracias por la información y por currarte el post tan bien. Un ejemplo de cómo hay que trabajar en el entorno Web: no con presunciones, sino haciendo pruebas y seleccionando lo que mejor funciona.

    Un saludo.

  9. Fernando Maciá’s avatar

    Hola Ricardo,

    Muchas gracias por la información y por currarte el post tan bien. Un ejemplo de cómo hay que trabajar en el entorno Web: no con presunciones, sino haciendo pruebas y seleccionando lo que mejor funciona. Enhorabuena.

    Un saludo.

  10. reprogramacion centralitas motor’s avatar

    Muy buen artículo. la información desde luego es impagable. ojala podeamos sacarle partido a nuestra web. gracias.
    un saludo.

  11. Diseño web Navarra’s avatar

    Excelente y muy curioso post. El analisis tan exaustivo da resultados con frutos en forma de subidas de conversiones. Felicitarte

  12. Ricardo Tayar’s avatar

    Hola reprogramación centralitas motor (ese nombre orientado a SEO, ¿eh?),

    Desde luego este tipo de pruebas son muy recomendables y ofrecen datos muy valiosos, pero hay que tener espíritu crítico porque lo mismo que te llevas agradables sorpresas con cambios propuestos, sucede lo contrario, y a veces un cambio que planteas y piensas que seguro que funciona, resulta que no, que los usuarios no lo quieren, no lo entienden y no lo comparten.

    En cualquier caso, hacer constantemente cosas así es la única manera de estar vivo en el negocio.

  13. Jordi’s avatar

    Hola,

    Muy bien post Ricardo.

    Una duda, hicisteis pruebas con el copy?
    Si las hicisteis que copy fue el ganador?

    Saludos

  14. Ricardo Tayar’s avatar

    Hola Jordi,

    En esta prueba no se testeo el copy, ya que se determino que el entorno debía ser el mismo para valorar que color provocaba más aumento en el CTR. Si hubieramos variado los copys y además los colores, no hubiéramos sabido con certeza a que se debía el incremento en CTR, si al cambio de copy o de color.

    De hecho, ahora mismo tengo una prueba en marcha solo variando copys a ver que funciona mejor.

    Un saludo

  15. Pablo’s avatar

    Muy interesante el trabajo Ricardo y el comentario de David Martin, afinadísimo. Soy profesor en una universidad de Brasil y estoy realizando un estudio con mis alumnos sobre la incidencia del color en las webs. Especialmente desde el aspecto de webs comerciales y ongs (que pienso que produce datos más fiables). Alguien sabe de webs con información pertinente? Abrazos y felicidades por el trabajo, de verdad.