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.

post1
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.

post2
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.

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.

Comentarios

  1. […] anteriores posts hemos comentado, tenemos que partir de la idea de que no existen reglas absolutas sobre diseño y facilidad de uso para el usuario. Cada proyecto se compone de unas características específicas y no hay que olvidar que diseñar […]

  2. […] el diseño hay varios factores importantes en el proceso que no debemos obviar. Una correcta elección del color en el diseño, por ejemplo, es un aspecto fundamental para mostrar al usuario el mensaje adecuado, pero no es el […]

  3. […] parte importante si tenemos en cuenta interfaces destinadas a este público, donde los iconos y la utilización de colores tienen una importancia capital. También todos los aspectos relacionados con el aprendizaje como […]

  4. Yo difiero/aporto en algo, por ejemplo en el TEST A / B de hubspot probaron 2 colores el rojo y el verde, el verde en el primero no resalta en la interfaz que hicieron, no es un color contrastante, sino más bien armonioso, no RESALTA en la composición e intuyo que por lo mismo no era percibido como un CALL TO ACTION de gran impacto por lo mismo, de hecho en el mismo articulo vieron que *unbounce* se decantaron por el GRAN BOTON NARANJA precisamente porque dentro de su paleta corporativa, este color resalta más.

    Es decir mi conclusión, según el articulo es:

    “Sí usas una estrategia de conversión con un color predominante, asegúrate que el CTA sea del color opuesto” Ejemplo:

    Hubspot – Interfaz Naranja -> CTA Azul
    Hubspot TestA/B – Interfaz Verde -> CTA Rojo
    Unbounce – Interfaz Azul -> CTA Naranja

  5. […] a la hora de que los usuarios reaccionen a los contenidos que les presentas en el producto digital.Dependiendo del color elegido, pueden desatarse unas emociones u otras que pueden ser distintas dependiendo de la cultura. Como […]

  6. […] en una interfaz son los semáforos de la experiencia de usuario. Como ya dijimos en aquel post, los colores transmiten emociones que se trasladan a la interfaz cuando los usamos. Además, hay unas convenciones de color más o […]

Trabajamos proyectos de diseño de servicios y productos digitales en los que la investigación de usuarios es un elemento fundamental del proceso.