La verdad sobre los mejores colores para los botones de acción para su sitio web

Ha habido mucho en Internet sobre los colores que funcionan mejor en una página web. Encontrarás miles de artículos sobre él. Desde el que un usuario pregunta qué color es mejor y recibe respuestas contradictorias (¿qué sorpresa, verdad?), Hasta que el artículo conocido explica las pruebas que Google ha realizado con muchos tonos azules para sus enlaces. La realidad detrás de todas estas cosas es que nadie puede asegurarse de que un cierto color funcione mejor o peor en un sitio web sin intentarlo. Si te digo lo contrario, te miento. Y estoy seguro de que no te gusta que te mientan.
Yo tampoco, cuando estaba leyendo este artículo de Yahoo! Pequeñas empresas donde se dice que los mejores colores para usar en los botones son rojo, verde y naranja o amarillo, lo primero que pensé es que deberíamos probar nuestro propio sitio. Si ha visto la serie de artículos que escribí un mes sobre las pruebas A/B, ciertamente ya sabe que una de las páginas más importantes de nuestro sitio es la página de destino del contenido Neli, junto con su página de precios. En ambas páginas, los botones de exhortación que tenemos son naranja. ¿El rojo o el verde funcionarán mejor en comparación con el color naranja que ya usamos en nuestro sitio para obtener urgencias? Esta es la pregunta que me hice y responderé aquí con datos reales de nuestros visitantes. No una opinión subjetiva. Datos reales.
¡Vamos! Creación de una prueba A/B de CSS La forma más fácil de cambiar el color de los botones en una página es agregar algunas reglas CSS adicionales para aplicar el nuevo color. Coloque un nuevo botón de color de fondo con el botón de color deseado, etc. Fácil de sacudir. Con las pruebas Nelio A/B, puede crear una prueba A/B de los estilos CSS para probar diferentes variantes de las reglas CSS adicionales. Solo tiene que crear una nueva prueba y seleccionar la opción CSS en el tipo de prueba Selector: diálogo para seleccionar el tipo de prueba en la prueba Nelio A/B. Esto lo llevará al editor de pruebas, donde lo primero que debe hacer es crear las variantes. Tenga en cuenta que en este tipo de prueba la primera variante es la que muestra la página con el aspecto actual, sin CSS adicional.

Luego cree una variante para, en nuestro caso, cada uno de los colores adicionales para probar: uno para verde y otro para rojo. La primera opción ya es naranja, por lo que tenemos todo listo.
Editor de la prueba A/B de los estilos CSS con pruebas Nelio A/B. Para cada variante adicional, puede editarlo para agregar las reglas CSS adicionales que cambian el color de los botones. Las reglas CSS que necesite dependerán del tema que use en WordPress. En el editor de CSS ofrecido por las pruebas Nelio A/B, puede ver en tiempo real cómo sus nuevas reglas CSS cambian el aspecto de su sitio.

Así es como se ve los botones de acción en el editor de estilo CSS de cada prueba A/B. Como se mencionó anteriormente, primero tiene la versión original, con los botones naranja. Las otras dos variantes incluyen CSS para convertir los botones en verde y rojo respectivamente: la versión original de la página.
Versión con los botones de acción en verde.

Versión con botones de acción en rojo.

Versiones de prueba en una prueba CSS: naranja (original), color verde (primera variante) y rojo (segunda variante) Una vez que tenemos las variantes preparadas, es hora de definir los objetivos de conversión que queremos medir. En este caso, como puede ver en la captura de pantalla del editor de pruebas, tenemos dos objetivos.

El primer objetivo medirá los clics en los botones de acción, mientras que en el segundo mediremos esos clics, pero solo aquellos que tienen lugar en la página de precios de contenido NELI.
Finalmente, tenga en cuenta que las pruebas CSS A/B afectarán a todas las páginas de su sitio para limitar este comportamiento en las pruebas Nelio A/B, en la barra lateral derecha del editor de pruebas A/B, tiene la opción de un límite del alcance del examen. Lo hice para afectar solo la página principal del contenido de Nelio y la página de precios. Tenemos todo listo para comenzar la prueba. Una vez que lo hacemos, Nelio A/B Testing trata sobre la división del tráfico que le visita estas dos páginas y mostrando diferentes variantes de color, así como conversiones de seguimiento (botones de clic).
Recuerde, solo tiene que esperar a que los visitantes pasen por esas páginas para comenzar a ver resultados. Analizar los resultados de la prueba A/B de los colores de los botones se ejecutan en nuestro sitio durante un mes y medio en el sitio español y casi un mes en el sitio inglés. En la versión en inglés lo detuve antes porque logramos resultados significativos estadísticamente más rápidos, con un alto valor de confianza. Pero comencemos con los resultados de la prueba en nuestra web en español: los resultados de la prueba de los estilos CSS para la versión española del sitio. Los datos del primer objetivo. Como puede ver en la captura de pantalla anterior, para medir los clics en ambas páginas, parece que las variantes verdes y rojas de los botones funcionan mejor que la versión naranja original. Sin embargo, las estadísticas nos dicen que la mejora no es sustancial y, por lo tanto, no podemos decir que estos colores son mejores que el naranja.

Para el segundo objetivo, que solo miden los clics en la página de precios de contenido de Nelio, vemos que no hay un color ganador claro. Incluso podemos ver cómo el verde aquí tiene peores resultados que el naranja. Aunque no podemos sacar conclusiones fuertes con los datos que las pruebas de Nolio A/B recopiladas de nuestros visitantes:
Los resultados de los estilos CSS prueban la versión española del sitio. Los datos del segundo objetivo. Vamos ahora para ver los resultados de la prueba en la versión en inglés de la página. Aquí, en el primer objetivo, que miden los clics en cualquiera de las dos páginas del contenido de Neli, vemos que tanto el verde como el rojo son colores que producen una mejor tasa de clics.

Además, aquí podemos decir que el color verde es el color ganador de la prueba. Los resultados son estadísticamente significativos, con un grado de confianza superior al 99%. El verde es el mejor color que podemos usar en nuestro sitio en inglés para los botones en las páginas de contenido Neli. Los resultados de la prueba de los estilos CSS para la versión en inglés del sitio. Los datos del primer objetivo. Si solo observamos los clics en el contenido NELI (objetivo de la segunda prueba), vemos que los resultados están de acuerdo con los del primer objetivo de prueba:
Los resultados de los estilos CSS prueban la versión en inglés del sitio. Los datos del segundo objetivo. Después de ver esto, podemos decir que el verde es el color que funcionó mejor para nuestro público en inglés en las páginas de contenido de Nelio. Sin embargo, para nuestro público español, no pudimos encontrar un color que funcione mejor que el que ya teníamos.

Conclusiones aquí mostramos los resultados de una prueba A/B con datos reales de visitantes que navegaron a través de dos de las páginas más relevantes de nuestro sitio. Y podría verificar que lo que funciona mejor para una audiencia en particular no debería funcionar mejor para otra. Los botones verdes funcionan mejor para nuestros visitantes que hablan en inglés. Pero eso no significa que sea lo mismo para otros visitantes. Por esta razón, solo cambié el color de los botones de acción del contenido Neli en verde en la versión en inglés de estas páginas. Los de español permanecen naranjas.