Cómo impacta el color en la experiencia de usuario

Comencemos con un ejemplo común: acaba de terminar el diseño de un sitio web para alguien. Se ve y funciona exactamente como el wireframe. Todos en el equipo de diseño han elogiado el proyecto. El cliente lo odia, pero no puede explicar por qué.

El culpable puede ser el color. Los diferentes colores pueden evocar emociones tan fuertes que las personas reaccionan con agudeza. Es en parte una preferencia personal, en parte psicológica e incluso en parte normas sociales. Comprender estas tendencias y preferencias del usuario puede tener un gran impacto en la experiencia del usuario.

Esto es lo que necesita saber.

Expectativas y preferencias del usuario

La experiencia del usuario comienza con el tipo de usuario para el que está diseñado su sitio web o aplicación. Los datos demográficos básicos, como el género o la región donde vive un usuario, pueden afectar su percepción de su diseño en función del color. (Puede leer más sobre el color y las consideraciones culturales aquí).

Uno de los impactos más interesantes del color en UX está relacionado con el género. Los estudios han demostrado que a los hombres y las mujeres tienden a gustarles y no gustarles ciertos tipos de color.

Los hombres tienden a interactuar más con sitios web que tienen esquemas de diseño más oscuros y colores más saturados, como el diseño de VLNC Studio, arriba.

Las mujeres tienden a preferir interactuar con sitios web que tienen esquemas de diseño más claros y paletas de colores más apagados, como Tally, a continuación.

Algunos hombres tienen una reacción aguda a los sitios web que usan colores claramente femeninos, como rosas pastel, púrpuras y amarillos.

Más mujeres tienden a sentirse desanimadas por sitios web con esquemas de colores severos, como fondo oscuro con acentos rojos completamente saturados.

Las paletas de tonos medios son las más atractivas para todos.

Asociaciones de colores y significados

Si bien no es una ciencia exacta, los colores tienen asociaciones emocionales bastante distintas. Tenga en cuenta que algunos colores pueden caer en categorías de extremos. Estas asociaciones tienden a trabajar con otros elementos de diseño para crear un ambiente general.

Cuando un usuario ve un determinado color o combinación de colores, crea una respuesta inmediata en el cerebro.

• Rojo: Poder, peligro, amor / pasión, hambre.
• Amarillo: Energía, felicidad, luz, calidez.
• Naranja: creatividad, determinación, estimulación, aliento.
• Verde: naturaleza, crecimiento, armonía, frescura.
• Azul: Confianza, confianza, serenidad, tranquilidad.
• Púrpura: Magia, realeza, ambición, independencia.

Establecer el reconocimiento de marca

Esperas que los elementos de diseño de Coca-Cola sean rojos. El color es tan sinónimo de la marca que se lo conoce como «rojo Coca-Cola». Cambia el color y la marca se confunde. No lo reconoce de inmediato. El usuario está molesto y no reacciona de la manera esperada. La bebida puede incluso parecer tener un sabor diferente.

Todos esos sentimientos provienen de cambiar el color. Es posible que te hayas sentido diciendo «¿qué?» cuando vio la primera imagen con la marca Coca-Cola verde.

Afectó la experiencia del usuario que tendría con la marca en el futuro.

El color es un elemento importante en la marca porque crea esa conexión distinta entre un usuario y un diseño. El color les dice a los usuarios de qué se trata la marca. Les dice a los usuarios sobre lo que están a punto de interactuar.

Cambie ese color, o use algo fuera de la marca, y la experiencia del usuario sufre porque los visitantes del sitio web se sienten repentinamente confundidos o inseguros sobre la marca que creían conocer.

Los patrones de usuario se conectan al color

¿Ha notado cuántos sitios web usan botones rojos o naranjas?

Hay una razón para eso.

Botones de colores brillantes que contrastan con el fondo de un sitio web: el rojo y el naranja a menudo se destacan de los fondos claros u oscuros. Puede ayudar a los usuarios a encontrar, comprender y querer interactuar con elementos en los que se puede hacer clic o tocar porque saben de manera visual e inmediata cuáles son sus expectativas de ese elemento.

Una parte clave de la experiencia del usuario es brindar oportunidades sencillas para que los usuarios interactúen de forma que disfruten y comprendan.

Cruise usa un botón de estilo fantasma con texto rojo y un estado de desplazamiento rojo. Es un giro diferente a los botones tradicionales de color sólido, pero hay pocas dudas sobre cómo interactuar con él. El color atrae a los usuarios al botón.

Net Bluez utiliza un botón naranja brillante para el elemento más importante del menú de navegación. Observe cómo ese elemento tiende a saltar de la pantalla pidiendo que se haga clic en él.

Aumento de las tasas de conversión

Ponte a prueba en el proceso de diseño del color del botón de prueba A / B. Probablemente encontrará que un color tiene una tasa de conversión claramente más alta que el otro. (Y puede que no sea el color que esperas).

Las tasas de conversión tienden a aumentar cuando el color de los botones o enlaces contrasta con el resto del diseño. Entonces, si bien desea utilizar una paleta de marca, elegir un color de contraste es clave para generar conversiones que contribuyan a la experiencia general del usuario.

Mire el sitio web a continuación por un minuto. ¿Qué botón de color es más probable que le haga hacer clic? (El color original es azul).

Proporcionar accesibilidad a todos los usuarios

Finalmente, el color impacta en la experiencia de usuario de una manera que no es emocional ni tiene sus raíces en la psicología. Es mucho más práctico que eso.

El color afecta la experiencia del usuario porque puede hacer que un diseño sea accesible o no.

Para que todos comprendan un diseño completamente y se involucren con el contenido, deben poder verlo y leerlo con facilidad. Usar paletas de colores y proporciones de contraste que coincidan con Pautas de accesibilidad al contenido web (WCAG 2.1) puede garantizar que todos los usuarios puedan comprender sus opciones de color.

Utilice un filtro daltónico, como los de las comparaciones a continuación, para ayudar a simular lo que otros usuarios podrían ver cuando visiten su sitio web. ¿Cómo podría eso afectar la usabilidad?

Conclusión

Piense en el color como una herramienta para ayudar a los usuarios a interactuar mejor y experimentar el contenido de su sitio web. Afecta la experiencia del usuario a nivel emocional y de usabilidad.

La clave para averiguar si el color está afectando la UX de la manera correcta es a través de las pruebas de usuario. Las pruebas de color A / B pueden ser una herramienta valiosa.