Mucho se ha escrito en Internet sobre los colores que mejor funcionan en una página web. Encontrarás miles de artículos al respecto. Desde aquel que pregunta qué color es mejor y recibe respuestas contradictorias (como no podía ser de otra forma cuando preguntas algo en Internet), hasta el archiconocido artículo donde se explica las pruebas que hizo Google con multitud de variantes de tonos de azul para sus enlaces.
La realidad detrás de todo esto es que nadie puede asegurar que un color concreto va a funcionar mejor o peor un una web sin probarlo. Si te dicen lo contrario te estarán mintiendo. Y estoy seguro de que no te gusta que te mientan.
A mí tampoco, por eso cuando estaba leyendo este artículo de Yahoo! Small Business en el que dicen que los mejores colores para usar en los botones son el rojo, el verde y el naranja o amarillo, lo primero que pensé es que debía probarlo en esta web.
Si has ido siguiendo la serie de entradas sobre el test del mes que he ido haciendo hasta ahora, seguro que ya sabes que una de las páginas más importantes de nuestra web es la página principal de Nelio Content, junto a la página de precios. En ambas páginas, los botones de acción que tenemos ya están en color naranja.
¿Funcionará mejor el color rojo o el verde respecto al color naranja que ya usamos en nuestra web para los botones de acción? Esta es la pregunta que me hice y que te voy a responder hoy con datos reales de nuestros visitantes. Nada de humo. Datos reales.
Vamos a ello.
Creando un test A/B de CSS
Lo más fácil para cambiar el color de los botones de una página es añadir unas cuantas reglas CSS adicionales para aplicar el nuevo color. Metes un background-color nuevo al botón con el color que quieres y listo. Sencillo y funcional.
Con Nelio A/B Testing tienes la posibilidad de crear un test A/B de estilos CSS para poder probar diferentes variantes de reglas CSS adicionales. Sólo has de ir a crear un test nuevo y seleccionar la opción CSS en el selector de tipos de tests:
Esto te llevará al editor del test, donde lo primero que has de hacer es crear las variantes. Ten en cuenta que en este tipo de test, la primera variante es la que muestra la página con su apariencia actual, sin CSS extra.
Luego creas una variante para, en nuestro caso, cada uno de los colores adicionales que vamos a probar: una para el verde y otra para el rojo. La primera variante ya tiene el color naranja, así que con esto ya lo tenemos todo preparado.
Para cada variante adicional puedes ir a editarla para añadir las reglas CSS adicionales que cambian el color de los botones. Las reglas CSS que necesitarás dependerán del tema que uses en tu WordPress. En el editor de CSS que Nelio A/B Testing proporciona puedes ver en tiempo real los cambios en la página que las reglas CSS que añadas provocan. Esto te va a ayudar a comprobar si lo estás haciendo bien.
Aquí tienes cómo quedan los botones de acción vistos desde el editor de estilos CSS de cada variante del test A/B que estamos haciendo. Como ya te he dicho antes, primero tienes la versión original, con los botones en naranja. Las otras dos variantes incluyen el CSS para poner los botones en verde y rojo, respectivamente:
Versión original de la página. Versión con los botones de acción en color verde. Versión con los botones de acción en color rojo.
Una vez tenemos las variantes listas es el momento de definir los objetivos de conversión que queremos medir. En este caso, tal y como puedes ver en la captura de pantalla del editor del test, un poco más arriba, tenemos dos objetivos.
El primer objetivo va a medir los clics en los botones de acción, mientras que en el segundo también medimos estos clics, pero sólo los que acontecen en la página de precios de Nelio Content.
Por último, ten en cuenta que los test A/B de CSS se aplicarán a todas las páginas de tu web. Para limitar este comportamiento en Nelio A/B Testing, en la barra lateral derecha del editor del test A/B de CSS tienes la opción de limitar el ámbito del test. Yo lo he hecho para que sólo afecte a la página principal de Nelio Content y a la página de precios de Nelio Content. Aunque en la captura del editor sólo ves la URL de la primera página, créeme que están las dos (el plugin de Chrome que me hace capturas de pantalla de toda la página se quedó tonto aquí y sólo capturó la primera).
Ya tenemos todo listo para iniciar el test. Ahora solo nos queda esperar los resultados. Nelio A/B Testing se encarga por ti de dividir el tráfico que llega a estas dos páginas y hacer que los visitantes vayan viendo las diferentes variantes de color, así como ir contando las conversiones (clics en los botones).
Recuerda, tú sólo tienes que esperar a que tus visitantes vayan pasando por esas páginas para empezar a ver resultados.
Analizando los resultados
Hemos tenido el test A/B de los colores de los botones funcionando en nuestra página web un mes y medio en la web en español y casi un mes en la web en inglés. En la versión en inglés lo paramos antes porque llegamos a tener más rápido resultados estadísticamente significativos con un alto índice de confianza.
Pero empecemos con los resultados del test en la web en español:
Como puedes ver en la captura anterior, para el objetivo de medir los clics en ambas páginas, parece que las variantes en color verde y rojo de los botones funcionan algo mejor que la versión original en color naranja. No obstante, la estadística nos dice que la mejora no es sustancial y, por tanto, no podemos afirmar que estos colores son mejores que el naranja.
Para el segundo objetivo, que sólo medía clics en la página de precios de Nelio Content, vemos que tampoco hay un color claramente ganador. Incluso podemos observar cómo el verde aquí funciona peor que el naranja. Aunque no podemos extraer conclusiones con los datos que Nelio A/B Testing ha recogido de nuestros visitantes:
Pasemos a ver ahora los datos del test A/B de colores en la versión de la página en inglés. Aquí, en el primer objetivo, que medía clics en cualquiera de las dos páginas de Nelio Content, vemos que tanto el verde como el rojo son colores que producen un mejor ratio de clics por visitas.
Además, aquí podemos afirmar que el color verde es el color ganador del test. Los resultados son estadísticamente significativos con un grado de confianza superior al 99%. El verde es el mejor color que podemos usar en nuestra web en inglés para los botones de las páginas de Nelio Content.
Si miramos sólo los clics en la página de precios de Nelio Content, vemos que los resultados son consistentes con los del primer objetivo del test:
Visto esto, podemos decir que el color verde es el que mejor nos ha funcionado para nuestra audiencia en inglés de las páginas de Nelio Content. Sin embargo, para nuestra audiencia en español, no hemos sido capaces de encontrar un color que funcione mejor que el que ya teníamos.
Nelio A/B Testing
Pruebas A/B nativas en WordPress
Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.
Conclusiones
Has podido ver los resultados de un test A/B real con datos reales de los visitantes que han pasado por dos de las páginas más relevantes de nuestra web. Y has comprobado que lo que funciona mejor para una audiencia concreta no tiene porqué funcionar mejor para otra audiencia diferente.
El color verde funciona mejor para nuestros visitantes angloparlantes. Pero esto no quiere decir que eso sea así para los demás visitantes. Por esto, sólo hemos cambiado en nuestra web el color de los botones de acción de las páginas de Nelio Content a verde en la versión en inglés de estas páginas.
Y por esto mismo sería un necio si te dijera que tienes que usar el color verde en tu página. No tengo ni idea de si el color verde funcionará para ti. Ni yo, ni nadie.
Por este motivo, antes de hacer caso a los gurús que encontrarás en Internet, haz tú mismo la prueba. Ya has visto que crear el test es facilísimo. Y es la única forma de descubrir qué funciona (o no) mejor en tu web. Con tu audiencia real.
Imagen destacada de Robert Katzki en Unsplash.
Deja una respuesta