La influencia del color en la tasa de conversión

Hace poco tiempo hablamos del uso de color y tipografías en interfaces móviles, y hoy queremos centrarnos en responder una pregunta recurrente: ¿Hay un color que convierta mejor que otro cuando trabajamos en interfaces transaccionales?

Si alguna vez habéis tratado de diseñar un nuevo proyecto para un cliente, entenderéis lo complicado que resulta decidir sobre una paleta de colores que funcione bien para el cliente y su proyecto. Por eso, no pretendemos desarrollar una guía completa sobre cómo aplicar colores al diseño, más bien mostrar pautas generales de cómo influye el color en el contexto del diseño de la experiencia de usuario.

Captura de círculo cromático de colores (tomado de pixabay.com, bajo licencia CC)

Una breve teoría del color

La utilización del color es una de las prácticas más poderosas del diseñador. Sabemos que los distintos colores se asocian con diferentes emociones y llaman la atención de los usuarios. Sin embargo, más allá de elegir un color u otro al azar, detrás de cada uno de ellos hay un conjunto de ideas, intenciones y  sensaciones que los convierten en idóneos en determinadas situaciones. El uso del color puede significar diferentes cosas, en diferentes culturas.

Una herramienta muy práctica, que debemos conocer para la utilización del color en el diseño de un proyecto es la rueda de color o círculo de color cromático, que consiste en una organización ilustrativa en forma de círculo  de los tonos de color primarios (rojo, amarillo y azul), secundarios (naranja, verde y morado) y el resto de colores, conocidos como terciarios.

De este modo obtenemos un esquema práctico que nos da a conocer los colores opuestos de cada color específico. Algo característico del círculo cromático y sus colores opuestos es que con la mezcla de los colores primarios, obtenemos como resultado los secundarios.

Cada color transmite diferentes mensajes al usuario. Entre los colores primarios, el color rojo se identifica con energía, pasión, emoción; pero con la misma intensidad es capaz de transmitir peligro e incluso, para algunos artículos, falta de calidad. El tono verde transmiten armonía, signo de generosidad, naturaleza y bienestar, mientras que el azul, un color que se emplea para transmitir fuerza, seguridad, calma y eficacia.

Entre los colores secundarios, el amarillo o naranja se asocian con la alegría, el calor, el entusiasmo o en algunos iconos, para llamar la atención. Otros colores como el morado, se relacionan con la sofisticación, asociándose a conceptos como sabiduría, respeto, poder, autoridad, misterio y creatividad son algunas de sus bondades.

Para crear combinaciones eficaces de colores no conviene elegir cualquier pareja de colores al azar, sino que es mejor seguir ciertas reglas básicas. Una opción es seguir la regla triádica, eligiendo un color base y dibujando un triángulo equilátero en la rueda desde ese punto para conseguir colores que sean complementarios.

Captura de círculo cromático para la regla triádica

También podemos usar una combinación compuesta, que consiste en elegir los colores enfrentados en la rueda, una combinación de dos colores complementarios que garantice el contraste y atraer la atención del usuario. Esto se ve perfectamente en las notificaciones de aplicaciones, por ejemplo, usando un color rojo que destaca sobre el color de icono.

Finalmente, se pueden seleccionar los colores por analogía, tomando colores próximos en la rueda que ofrezcan sensación de continuidad en el diseño. Por ejemplo, tonos rojizos y anaranjados. Si además utilizamos la gama de colores adecuada a la sensación que queremos transmitir, dar por seguro que será una buena elección cromática.

El impacto del color en las tasas de conversión

La teoría del color en el diseño de la interfaz de usuario es algo más que diseño visual. Centrando el tema en el uso de llamadas a la acción, el color suele ser uno de los debates más largos en el mundo de la conversión y optimización.

Hay multitud de ejemplos de tests A/B que muestran cómo un cambio en el color de un botón tuvo un impacto drástico en el aumento de la conversión y la consiguiente optimización del sitio. Por ejemplo, HubSpot compartió una prueba de color para un botón de su web, que consiguió ser viral. Ante dos interfaces idénticas con la única diferencia de un botón verde o rojo, el botón rojo dio como resultado un 21% más de clics, aunque inicialmente predijeron que tendría un mejor rendimiento el botón verde. Sin embargo, en Unbounce apuestan por el BOB (Big Orange Button o gran botón naranja).

Como véis, es imposible generalizar estos resultados en todas las situaciones. No podemos asegurar que haya un color mejor que otro para aumentar la conversión. Simplemente, porque no existe un color perfecto que encaje en todas las situaciones y dispositivos. Lo que funciona en un contexto no necesariamente funciona en otro. Influye el contexto y por supuesto, el rigor y la disciplina de la metodología de investigación y las pruebas con usuarios.

En definitiva, comprender la psicología y aplicación del color es un requisito conveniente para hacer un buen diseño, pero no existen límites respecto a la práctica del color en el diseño. No es tan importante el color que selecciones, como adecuarlo al contexto donde se aplicará. El color del botón tiene poco o ningún efecto por sí mismo, pero influye cómo cambia la jerarquía visual de toda la página, y cómo se destaca la llamada a la acción.

Respetando las características de los colores, el  contraste y la psicología del color para transmitir emociones, estaremos más cerca de influir para alcanzar una mejor conversión.

También puedes leer:

• El impacto de los colores en la UX
• El uso de colores en las interfaces

Artículo actualizado en marzo de 2022

Si quieres mejorar la tasa de conversión de tu sitio web, ofrecemos servicios de acompañamiento y consultoría en CRO, donde analizamos tu negocio y diseñamos un proyecto de acompañamiento orientado a proponer acciones concretas que mejoren la tasa de conversión de tu sitio web. Contáctanos y hablamos.