El papel del color en UX

Comprender la psicología del color es un aspecto clave para crear una paleta de colores que funcione bien en el diseño digital. Si bien algunos diseñadores a veces consideran el color como una elección puramente estética, es, de hecho, un componente clave del impacto psicológico de un diseño en los usuarios y, como tal, su UX.

Una paleta de colores bien pensada puede elevar un diseño de "bueno" a "excelente", mientras que una paleta de colores mediocre o mala puede restar valor a la experiencia general del usuario e incluso interferir con su capacidad para usar un sitio o una aplicación.

Si bien la teoría del color en general es un tema complejo, y el uso del color en el diseño de UX cubre mucho más que solo crear una paleta que se vea bien (como la accesibilidad y los efectos psicológicos de incluso diferentes tonos dentro del mismo tono); los diseñadores pueden incorporar gradualmente un mejor uso del color en sus diseños sin necesidad de repensar todo el proceso. Una vez que un diseñador ha cubierto los conceptos básicos, una de las partes más gratificantes de la teoría del color es aprender a incorporar más colores inesperados en sus diseños.

La psicología del color

La teoría del color y los efectos psicológicos que el color puede tener en los usuarios es un tema complejo y, a menudo, subjetivo. Pero hay ciertos aspectos que se pueden abordar en un nivel más universal.

Cosas como los significados comunes de los colores principales (primario, secundario y terciario), las paletas de colores tradicionales y las variaciones culturales en los significados de los colores son bastante sencillas. Los diseñadores pueden aprender fácilmente estos conceptos básicos y aplicarlos a su trabajo. Pero hay puntos más finos que aprender cuando se trata de usar colores en el diseño de UX .

El impacto emocional de los colores de la interfaz no debe pasarse por alto. Y aunque algunos colores son "universales" en el diseño de UX (como el negro, el blanco y el gris, al menos uno de los cuales se usa en prácticamente todos los buenos diseños), los colores con los que se combinan pueden tener un gran impacto en la percepción de un usuario.

Por supuesto, la forma en que se usa el color también puede tener un impacto dramático en cómo se percibe. Por ejemplo, el azul utilizado como color primario en un diseño moderno y minimalista tendrá una sensación muy diferente que el mismo azul utilizado como color de acento en un diseño corporativo más complejo.

Diferencias culturales en color

Un problema que los diseñadores tienden a pasar por alto son las diferencias culturales que pueden existir en torno a los diferentes colores. Por ejemplo, en muchas culturas occidentales, el blanco se asocia con cosas como la pureza, la inocencia y la esperanza. Pero en algunas partes de Asia, el blanco se asocia con la muerte, el luto y la mala suerte.

Algunos colores tienen connotaciones generalmente positivas independientemente de la cultura (como el naranja), mientras que otros, como el blanco, varían mucho entre los diferentes países. Esto sin duda puede complicar la vida de un diseñador cuando intenta crear un diseño que atraiga a la mayor audiencia posible.

Es importante que los diseñadores analicen las implicaciones culturales de sus paletas de colores en función de la audiencia prevista para el producto o sitio web. Si un producto va a dirigirse a una audiencia mundial, asegúrese de equilibrar los colores y las imágenes que se utilizan para evitar connotaciones culturales negativas. Si un producto se dirige principalmente a una cultura en particular, los diseñadores pueden prestar menos atención a las implicaciones que la paleta elegida puede tener en otras culturas.

Coincidencia de colores UX con la marca

Los valores de la marca deben jugar un papel clave en la creación de una paleta de colores. Pero no son el único factor importante. Las normas de la industria también son clave, al igual que los colores que ya utilizan los competidores. Usar una paleta de colores que sea casi idéntica a la competencia principal de una marca es una excelente manera de generar confusión y garantizar que la marca no se destaque.

Concedido, hay excepciones a esto. Tomemos, por ejemplo, McDonald's y Wendy's. Ambos son restaurantes de comida rápida que están en competencia directa entre sí. Y ambos utilizan una paleta de colores roja y amarilla. Sin embargo, al observar sus logotipos, el logotipo de Wendy's es principalmente rojo con detalles en amarillo, mientras que McDonald's es todo lo contrario. Su empaque también usa estos colores de diferentes maneras, diferenciando aún más entre las marcas. Debido a esto, ninguno se confundiría fácilmente con el otro, incluso si se eliminaran los logotipos y otras marcas de identificación de sus envases.

El primer paso para crear una paleta de colores de marca que respalde los valores de la marca es comprender el significado de los distintos colores y cómo hacerlos más claros/brillantes/oscuros/opacos/etc. les puede afectar. Aquí hay un desglose básico de lo que significan los diferentes colores:

• Rojo : el rojo es el color del peligro y la pasión, así como de la emoción. Es un color muy fuerte y puede provocar fuertes reacciones en las personas. Iluminarlo a rosa lo hace más femenino y romántico, mientras que oscurecerlo a granate lo hace más tenue y tradicional.
• Naranja : el naranja es un color muy creativo que también se asocia con la aventura y la juventud. Es muy enérgico, también. Debido a los fuertes vínculos del naranja con el estilo de los años 70, también puede evocar una sensación retro.
• Amarillo : el amarillo es feliz, optimista y alegre. Es popular en diseños para niños y adultos por igual. Los tonos más pastel se usan a menudo como un color de bebé neutral en cuanto al género, mientras que los amarillos más brillantes son populares en los diseños creativos. Los tonos más oscuros de amarillo se vuelven dorados, lo que se asocia con la riqueza y el éxito.
• Verde : el verde tiene asociaciones variadas. Por un lado, provoca sentimientos de riqueza y tradición (particularmente los tonos más oscuros), mientras que por otro está fuertemente asociado con el medio ambiente y la naturaleza. Las hojas de lima a menudo se asocian con la renovación y el crecimiento.
• Azul : el azul suele asociarse con la lealtad y la confianza. Los azules más brillantes se pueden asociar con la comunicación, mientras que los azules más apagados y oscuros se pueden asociar con la tristeza y la depresión. El azul es el color más apreciado universalmente en el mundo, lo que puede explicar por qué tantas empresas optan por tonos azules para su marca.
• Púrpura : el púrpura es otro tono con significados variados. Durante mucho tiempo se ha asociado con la realeza y la riqueza (dado que el tinte púrpura era raro en muchas civilizaciones antiguas, estaba reservado para la realeza). Pero también está asociado con el misterio y la espiritualidad. El púrpura también puede evocar la creatividad.
• Negro : el negro implica sofisticación y lujo. Sin embargo, también puede estar relacionado con el dolor y la negatividad. Dependiendo de los otros colores de UX que se usen junto con el negro, puede sentirse moderno o tradicional, formal o informal.
• Blanco : el blanco está ligado a la pureza, la inocencia y la positividad. El blanco también es muy popular en los diseños minimalistas, debido a su neutralidad y sencillez. Al igual que el negro, el blanco adquiere fácilmente las características de otros colores con los que se usa.
• Gris : gris tiene varios significados, según el contexto. Puede ser conservador y sofisticado o lúgubre y aburrido. Puede ser sin emociones o de mal humor. También se puede asociar con el dolor y la tristeza.
• Marrón : el marrón (que en realidad es un tono naranja oscuro) se asocia con tener los pies en la tierra y estar conectado a tierra. También está asociado con la naturaleza e incluso con la comodidad. Y, por supuesto, puede estar relacionado con estar sucio o sucio.

Conocer estos significados básicos de los colores brinda a los diseñadores una base sólida sobre la cual construir paletas de colores para cualquier marca o producto.

La teoría del color, sin embargo, es en parte ciencia y en parte arte. El hecho de que un color generalmente se asocie con un sentimiento o estado de ánimo en particular no significa que no se pueda percibir de otras maneras combinándolo con diferentes colores, alterando el tono exacto o variando la forma en que se usa entre otros elementos de diseño.

Uso de colores UX no convencionales

El uso no convencional de colores UX es una excelente manera de diferenciar una marca. Y aunque se necesita más delicadeza que simplemente combinar cualquier color antiguo que un diseñador quiera combinar, no es tan difícil aprender a usar colores inesperados en diseños de UX.

Los colores de énfasis son el lugar más fácil para comenzar cuando se trata de agregar colores no convencionales a un diseño. Por ejemplo, el sitio web de un bufete de abogados podría usar una paleta de colores tradicional de azul marino y gris. Pero agregue algunos detalles en verde lima y, de repente, el diseño se distingue del mar de otros bufetes de abogados con sitios web en azul marino y gris. O mire este ejemplo de Hogan Lovells, que usa una paleta de colores blanco, gris y verde lima para crear un sitio web moderno que definitivamente se destaca de otros sitios de la industria legal. Sería atractivo para un público más joven y moderno que su sitio legal promedio.

Berdan Real Estate es otro sitio que utiliza una paleta de colores inesperada. El sitio de bienes raíces usa tonos de amarillo y melocotón, los cuales son mucho más enérgicos que el sitio de una propiedad promedio (donde dominan grandes franjas de azul, rojo y verde).

En general, los seguros no se consideran una industria moderna e innovadora, pero eso no significa que sus diseños no puedan serlo. El sitio web de Lemonade utiliza un esquema de color gris y blanco con detalles en fucsia. Es completamente inesperado en una industria que no es conocida por tomar riesgos.

Hay una multitud de otros ejemplos de colores UX no convencionales utilizados en la práctica en la web que pueden usarse como inspiración.

La regla 60-30-10

La regla 60-30-10 es una teoría simple para crear paletas de colores bien equilibradas y visualmente interesantes. La idea es que un color, generalmente algo bastante neutral (ya sea literal o psicológicamente), constituya el 60% de la paleta. Otro color complementario constituye el 30% de la paleta. Y luego se usa un tercer color como acento para el 10% restante del diseño.

Este método hace que sea mucho más fácil para los diseñadores comenzar a experimentar con paletas de colores no convencionales sin salirse demasiado de las normas esperadas dentro de una industria o marca. Agregar un toque de un tono inesperado puede elevar un diseño que, de otro modo, se ajusta a lo que se espera de una empresa en particular. También puede ser el primer paso hacia la creación de una paleta de marca que sea mucho más progresista que la de sus competidores, lo que diferenciará a la marca y la hará más memorable.

Conclusión

Si bien la teoría del color es un tema complejo, no es particularmente complicado aprender los conceptos básicos. A partir de ahí, los diseñadores pueden aprovechar su conocimiento para crear paletas de colores más variadas y sofisticadas para sus diseños.

Una paleta de colores bien diseñada, particularmente una que incluya algunos tonos inesperados, no es simplemente una elección estética. Puede tener efectos psicológicos significativos en los usuarios, que los diseñadores de UX deberían aprovechar para crear mejores experiencias.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Psicología del diseño y la neurociencia de Awesome UX
• IU oscuras. El bueno y el malo. Normas.
• Branding emocional para el diseño de productos sostenibles
• Usa tu inspiración: una guía para los tableros de humor
• Diseño persuasivo: uso efectivo de la psicología avanzada