Uso del color en interfaces UX/UI
Muchos piensan que la elección de colores para la interfaz de usuario es un asunto puramente subjetivo, que depende solamente del gusto y el modelo mental de belleza del diseñador. Sin embargo, el proceso de selección del color es mucho más complejo de lo que parece y juega un papel primordial en el diseño.
Como afirmamos en nuestro curso UX, en la lección de Diseño visual, el color se relaciona íntimamente con la personalidad. Ya metiéndonos de lleno en la psicología del color, sabemos que los colores tienen un gran impacto en nuestro estado de ánimo y comportamiento. Es por eso que el éxito de una plataforma, una app o cualquier producto depende en gran medida de los colores elegidos para el diseño.
El rojo de la imagen a continuación, ¿no te da energía? ¿Ganas de correr?
Un estudio publicado por Colorcom mostró...
- El 92,6% de las personas le da más importancia a los factores visuales cuando compran productos. Solo el 5,6% dijo que el tacto era lo más importante. El oído y el olfato atrajeron cada uno un 0,9%.
- Cuando se les preguntó acerca de la importancia del color al comprar productos, el 84,7% afirmó que el color representa más de la mitad entre los diversos factores importantes para elegir productos.
Aún hay más: la investigación reveló que las personas emiten un juicio subconsciente sobre una persona, entorno o producto dentro de los 90 segundos posteriores a la visualización inicial y que entre el 62% y el 90% de esa evaluación se basa sólo en el color. WHAAAAATTTTT 😱 Sí, así como lees.
Los colores adecuados pueden mejorar la conversión de un producto así como su usabilidad. Veamos algunos puntos clave (si eres diseñador gráfico, esto te resultará muuy familiar).
Círculo cromático
Para crear un buen diseño y utilizar los colores de manera efectiva, hay que saber cómo se forman los colores y cómo se pueden combinar entre sí.
El círculo cromático suele estar formado por colores primarios, secundarios y terciarios. Los primarios son aquellos tres pigmentos de colores que no pueden formarse mediante ninguna combinación de otros colores. Combinando los colores primarios (rojo, azul y amarillo) obtenemos los secundarios, y la mezcla de los colores primarios y secundarios nos da los colores terciarios.
¿Cómo los combinamos? La respuesta es: armoniosamente. Podemos asociar la palabra armonía con lo ordenado y agradable. Se trata de disponer los colores de forma tal que resulte atractivo y efectivo para los usuarios.
Cuando los colores están bien combinados, los usuarios se sienten tranquilos y entusiasmados, mientras que una desorganización les provocará disgusto y rechazo. Como vimos, el balance funciona así: one shot only. Como una obra de teatro, no hay rewind. O gusta o no gusta. Aquí te detallamos los esquemas de color básicos que funcionan de manera efectiva:
Monocromático
se basa en un solo color con sus tonos y matices. Siempre es una opción ganadora ya que es difícil cometer errores y crear un esquema de color estridente. Apto principiantes.
Complementario
el esquema complementario es la mezcla de colores colocados uno frente al otro en la rueda de colores. Este esquema difiere completamente de los previos ya que tiene por objetivo producir contraste. Por ejemplo, el botón verde sobre fondo rojo no pasa desapercibido en una interfaz. Este es nuestro esquema favorito (de hecho, alguien del equipo decoró su habitación en azules y naranjas, and it’s a real color bomb! ⚡).
Análogos
para crear una armonía análoga hay que usar colores ubicados uno al lado del otro en la rueda de colores. Este tipo de combinación se usa donde no es necesario el contraste, por ejemplo, el fondo de una app.
Triádico
cuando el diseño requiere más colores, se puede probar el esquema triádico. Se basa en tres colores separados que son equidistantes en la rueda de colores. Para que no sea una explosión de color (y genere rechazo en el usuario) recomendamos que elijas un color como dominante y los otros para acentuar. ¿Un ejemplo que utilizamos mucho? Naranja, magenta y azul. El azul como dominante y los demás en detalles.
Split-Complementarios
funciona como el anterior pero emplea más colores. Por ejemplo, si eliges el color rojo, debes tomar los dos adyacentes a su color opuesto, es decir, verde y azul. El contraste aquí no es tan nítido pero puedes usar más colores. Uno de ellos puede aparecer en pequeños botones, por ejemplo.
Tetrádico/Doble-Complementario
el esquema de color tetrádico es modo experto. Es difícil de equilibrar porque requiere mucho juego (y ojo). Se utilizan cuatro colores de la rueda que son pares complementarios. Si conectas los puntos en los colores elegidos, formarás el rectángulo. Los resultados son fantásticos si logras armonizarlos entre sí.
Psicología del color
Dime qué buscas transmitir y te diré qué color utilizar:
ROJO:
pasión, atrevimiento, importancia, fuerza, calor, energía, estimulación, masculinidad, excitación, exuberancia, osadía, desafío, agresión, impacto, tensión.
AMARILLO:
felicidad, amistad, alegría, advertencia, optimismo, caluroso, velocidad, amabilidad, autoestima, extroversión, ansiedad, irracionalidad, fragilidad, miedo.
NARANJA:
energía, vitalidad, diversión, seguridad, juguetón, calidez, confort, comida, privación, frustración, frivolidad, inmadurez.
ROSA:
sensibilidad, inocencia, optimismo, feminidad, romanticismo, ternura, infancia.
VERDE:
naturaleza, salud, paz, orgánico, equilibrio, restauración, conciencia, armonía, aburrimiento, estancamiento.
AZUL:
inteligencia, confianza, seguridad, serenidad, comunicación, eficiencia, lógica, reflexión, calma, frialdad, distanciamiento, falta emocional.
VIOLETA:
lujo, misterio, creatividad, magia, espiritualismo, visión, autenticidad, verdad, introversión, decadencia, supresión.
NEGRO:
sofisticación, protección, elegancia, sustancia, glamour, opresión, frialdad, amenaza, pesadez.
BLANCO:
virtud, pureza, juventud, bondad, limpieza, simplicidad, sofisticación, claridad, elitismo, frialdad, antipatía.
¿El favorito de la mayoría? Según la encuesta realizada por Joe Hallock, el AZUL. Respuesta esperable, ¿verdad? 🤭 A nosotros el azul nos transmite paz y calma. Y nos provoca muchísimas ganas de estar frente al mar tomando una limonada 🥲
Impacto del color
Según un estudio de la Universidad de Loyola, el color aumenta el reconocimiento de una marca hasta en un 80%.
Heinz es un buen ejemplo en cuanto a cómo utilizar el color a favor de nuestros objetivos. Cuando, en el año 2000, lanzaron el ketchup Heinz EZ Squirt Blastin' Green en el mercado, sucedió algo fenomenal a nivel ventas.
Se vendieron más de 10 millones de botellas en los primeros siete meses posteriores a su introducción. Las fábricas de Heinz trabajaron las 24 horas del día, los siete días de la semana para satisfacer la demanda. Resultado: $23 millones en ventas gracias al ketchup verde (¡el aumento de ventas más alto en la historia de Heinz!). Todo esto por un cambio de color. Por romper las reglas.
Más recursos
En estos sitios web puedes crear paletas de colores online:
Libro recomendado:
“Teoría del color”, de Eva Heller: link para comprar
Documental recomendado:
“Iris”. Aquí puedes ver el trailer de este documental sobre Iris Apfel, ícono de la moda, el diseño y el color, pero sobre todo verás la importancia del estilo propio y la construcción de la PERSONALIDAD.
“Vivir es la mejor inspiración. Y ésta te llega de la gente, al leer libros, visitar museos, caminar por la calle, ver una obra de teatro, escuchar una canción. Nunca sabes realmente por dónde va a venir. Pero si algo está claro es que tienes que moverte”. Iris Apfel