La verdad sobre los mejores colores de botón de llamada a la acción para su sitio web

Mucho se ha hablado en Internet sobre los colores que funcionan mejor en una página web. Encontrarás miles de artículos al respecto. Desde aquel en el que un usuario pregunta qué color es mejor y recibe respuestas contradictorias (menuda sorpresa, ¿no?), hasta el conocido artículo que explica las pruebas que Google hizo con muchos tonos de azul para sus enlaces.

La realidad detrás de todo esto es que nadie puede asegurar que un color específico funcionará mejor o peor en un sitio web sin probarlo. Si te dicen lo contrario, te están mintiendo. Y estoy seguro de que no te gusta que te mientan.

Yo tampoco, así que cuando estaba leyendo este artículo de Yahoo! Pequeñas Empresas donde dicen que los mejores colores para usar en los botones son rojo, verde y naranja o amarillo, lo primero que pensé es que debería probarlo en nuestro propio sitio web.

Si has estado siguiendo la serie de artículos que escribí mensualmente sobre A/B testing, seguro que ya sabes que una de las páginas más importantes de nuestra web es la landing page de Nelio Content, junto con su página de precios. En ambas páginas, los botones de llamada a la acción que tenemos son de color naranja.

¿Funcionará mejor el rojo o el verde en comparación con el color naranja que ya usamos en nuestro sitio web para los botones de llamada a la acción? Esta es la pregunta que me hice y que voy a responder aquí con datos reales de nuestros visitantes. No es una opinión subjetiva. Datos reales.

¡Vamos!

Crear 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. Le pones una nueva regla background-color al botón con el color que quieras y listo. Pan comido.

Con Nelio A/B Testing tienes la posibilidad de crear una prueba A/B de estilos CSS para probar diferentes variantes de reglas CSS adicionales. Solo tienes que crear una nueva prueba y seleccionar la opción CSS en el selector de tipo de prueba:

Esto te llevará al editor de pruebas, donde lo primero que tienes que hacer es crear las variantes. Ten en cuenta que en este tipo de pruebas, la primera variante es la que muestra la página con su aspecto actual, sin CSS extra.

Luego creas una variante para, en nuestro caso, cada uno de los colores adicionales que vamos a probar: uno para el verde y otro para el rojo. La primera variante ya es naranja, así que con esta lo tenemos todo listo.

Para cada variante adicional, puede ir a editarla para agregar las reglas CSS adicionales que cambian el color de los botones. Las reglas CSS que necesitará dependerán del tema que use en su WordPress. En el editor de CSS que proporciona Nelio A/B Testing, puedes ver en tiempo real cómo tus nuevas reglas de CSS cambian la apariencia de tu sitio. Esto te ayudará a comprobar si lo estás haciendo bien.

Así es como se ven los botones de acción desde el editor de estilo CSS de cada variante de la prueba A/B que estamos configurando. Como decíamos, primero tienes la versión original, con los botones naranjas. Las otras dos variantes incluyen el CSS para convertir los botones en verde y rojo, respectivamente:

Una vez que tenemos las variantes listas, es el momento de definir los objetivos de conversión que queremos medir. En este caso, como podéis 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 también mediremos esos clics, pero solo los que suceden en la página de precios de Nelio Content.

Por último, tenga en cuenta que las pruebas A/B de CSS afectarán a todas las páginas de su sitio web. Para limitar este comportamiento en Nelio A/B Testing, en la barra lateral derecha del editor de pruebas A/B tienes la opción de limitar el alcance de la prueba. Lo he hecho para que solo afecte a la página principal de Nelio Content ya la página de precios.

Ya tenemos todo listo para empezar la prueba. Una vez que lo hacemos, Nelio A/B Testing se encarga de dividir por ti el tráfico que visita estas dos páginas y mostrarte las distintas variantes de color, además de hacer un seguimiento de las conversiones (clics en los botones).

Recuerda, solo tienes que esperar a que tus visitantes pasen por esas páginas para empezar a ver resultados.

Analizando los resultados

Hemos tenido la prueba A/B de los colores de los botones funcionando en nuestro sitio web durante un mes y medio en el sitio web en español y casi un mes en el sitio web en inglés. En la versión en inglés lo detuvimos antes porque logramos resultados estadísticamente significativos más rápido con un alto valor de confianza.

Pero empecemos con los resultados de la prueba en nuestra web en español:

Como puede ver en la captura de pantalla anterior, con el objetivo de medir los clics en ambas páginas, parece que las variantes verde y roja de los botones funcionan algo mejor que la versión naranja original. Sin embargo, las estadísticas nos dicen que la mejora no es sustancial y, por tanto, no podemos decir que estos colores sean mejores que el naranja.

Para el segundo objetivo, que solo midió los clics en la página de precios de Nelio Content, vemos que tampoco hay un color ganador claro. Incluso podemos observar cómo el verde aquí funciona peor que el naranja. Aunque no podemos sacar conclusiones contundentes con los datos que Nelio A/B Testing ha recopilado de nuestros visitantes:

Pasemos ahora a ver los resultados de la prueba en la versión en inglés de la página. Aquí, en el primer objetivo, que midió los clics en cualquiera de las dos páginas de Nelio Content, vemos que tanto el verde como el rojo son colores que producen una mejor tasa de clics.

Además, aquí podemos afirmar 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 utilizar en nuestra web en inglés para los botones de las páginas de Nelio Content.

Si nos fijamos únicamente en los clics en la página de precios de Nelio Content (segundo objetivo de la prueba), vemos que los resultados son consistentes con los del primer objetivo de la prueba:

Visto esto, podemos decir que el verde es el color que mejor ha funcionado para nuestra audiencia en inglés en las páginas de Nelio Content. Sin embargo, para nuestro público español no hemos podido encontrar un color que funcione mejor que el que ya teníamos.

Conclusiones

Aquí mostré los resultados de una prueba A/B con datos reales de los visitantes que navegaron por dos de las páginas más relevantes de nuestro sitio web. Y has podido comprobar que lo que funciona mejor para un público específico no tiene por qué funcionar mejor para otro diferente.

Los botones verdes funcionan mejor para nuestros visitantes de habla inglesa. Pero eso no significa que sea lo mismo para otros visitantes. Por este motivo, solo hemos cambiado 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. Los que están en español siguen siendo naranjas.

Sería una tontería si te dijera que necesitas usar el color verde en tu página. Nadie debería decirte eso. Ni yo, ni nadie. No tengo idea si el verde funcionará para ti.

Por eso, antes de prestar atención a los muchos gurús que encontrarás en Internet, haz la prueba tú mismo. Crear la prueba A/B es muy fácil. Y es la única manera de descubrir qué funciona (o no) mejor en tu sitio web. Con tu audiencia real.

Imagen destacada de Robert Katzki en Unsplash.