UX e psicologia: cosa comunicano i colori nel design

Quando si pensa allo UX design, raramente la prima cosa che viene in mente è il colore. Si tratta di un aspetto talvolta trascurato, magari dettato dall’esterno perché stabilito sulla base del colore aziendale. 

Eppure il colore è un aspetto fondamentale non solo per la UI, ma anche per la UX, che si tratti di un sito web o di un’applicazione mobile. Il colore è un primo livello di significato, trasmette emozioni all’utente e ne modula l’attenzione e il comportamento.

In pratica, la palette che scegliamo non ha un solo scopo decorativo, ma è un vero e proprio strumento strategico. Ma come si utilizzano i colori nel design? E che significato hanno? 

Colore e design: non solo nel mondo web

Prima della nascita del world wide web, il colore è stato -e continua a essere- di interesse per le più varie discipline umane. Non è infatti solo appannaggio del design, ma anche della scienza, della psicologia e della filosofia.

A partire dal fisico Isaac Newton, che nel 1672 dimostra che la luce è la somma dei sette colori dell’arcobaleno, fino alla Bauhaus, con la teoria dei colori di Johannes Itten, che teorizza che ci siano combinazioni cromatiche armoniche, che trasmettono equilibrio e coerenza visiva, e contrastanti, che generano dinamismo e attraggono l’attenzione. 

E come tralasciare il contributo di Johann Wolfgang von Goethe? Lo scrittore sostiene che il colore sia ben più che un mero calcolo matematico, ma piuttosto un incontro tra luce e tenebra. Inoltre, nel suo saggio “La teoria dei colori” connoterà emotivamente ciascun colore: il giallo per l’allegria, l’arancione per la vitalità e il calore umano, il blu come simbolo di calma malinconica, nostalgica, e così via.

Lo stato dell’arte: cosa sappiamo oggi del colore

Oggi siamo saturi di conoscenze sul colore. Sappiamo che dal punto di vista della fisica il colore è l’assorbimento o riflesso delle lunghezze d’onda differenti che compongono la luce bianca. Conosciamo la prospettiva fisiologica, che ci dice che i coni presenti sulla nostra retina sono sensibili alle diverse lunghezze d’onda e in questo modo differenziano tra diversi colori.

Abbiamo inoltre sviluppato modelli di colore diversi, per interpretare come nascono i diversi colori nell’arte, nella stampa e, adattandoci alla realtà che ci circonda, quando sono rappresentati da luce colorata su uno sfondo nero, come negli schermi dei nostri computer.

Inoltre, abbiamo appreso che esistono vari schemi cromatici, cioè modalità di associare i colori per ottenere effetti diversi:

• I colori tra loro opposti nella ruota cromatica sono detti complementari e creano un forte contrasto, che dà risalto all’elemento.
• I colori analoghi sono tra loro adiacenti e pertanto armonici, creando coesione e ordine.
• Gli schemi di colori triadici sono composti di tre colori ugualmente distanziati tra loro nella ruota e offrono una maggiore varietà rispetto alla sola combinazione di complementari e analoghi. Ne esiste anche una variante a quattro colori.
• Infine, gli schemi monocromatici trasmettono raffinatezza e ordine estremi, variando un singolo colore in diverse tonalità o saturazioni.

Scegliere la palette giusta è una questione di psicologia

L’impatto del colore sulla psiche umana, come abbiamo visto, è oggetto di studio da secoli. I colori evocano sentimenti differenti, mediati anche dal contesto e dalla cultura. Ad esempio, in alcune lingue africane non esiste una distinzione lessicale tra “blu” e “verde” e pertanto la percezione di una distanza tra questi due colori è attenuata. O ancora, in Occidente il bianco è un colore associato alla purezza, e viene infatti utilizzato tradizionalmente per l’abito della sposa, ma in molte culture asiatiche è il colore del lutto. 

Ma non serve spostarsi in altri paesi per trovare significati diversi ai colori. Pensiamo al rosso, che tipicamente è associato alla passione e all’amore, ma è anche il colore con cui sottolineiamo gli errori, nella vita reale (la classica sottolineatura rossa della maestra sul compito) e anche digitale (per esempio, in un form in cui un campo non è stato compilato correttamente).

L’associazione tra colori ed emozioni: una convenzione

Nella progettazione di un prodotto digitale contano anche i colori scelti come palette, solitamente un primario, un secondario ed eventualmente un terziario. Immagina di sviluppare una piattaforma per la meditazione guidata. Nel tuo immaginario, probabilmente, sarà di colori che evocano la calma e l’equilibrio, come il blu o il verde; difficilmente, invece, l’avrai immaginata in rosso o giallo, colori caldi, vitali e più adatti ad altri utilizzi.

Per cercare di tradurre in parole una percezione solitamente latente, il significato dei colori può essere riassunto come:

Conoscere queste associazioni ti permetterà di comprendere meglio cosa si aspetta il tuo utente e di usarlo a tuo vantaggio per offrirgli la miglior esperienza sulla piattaforma.

Sfruttare il colore per veicolare un messaggio

Avendo coscienza di come il colore possa venir percepito dall’utente è importante capire fin da subito come vogliamo influenzare la sua percezione, a partire dal branding del nostro prodotto digitale.

Sceglieremo quindi colori caldi, che trasmettono forza e allegria, per un brand rivolto ai giovani, che offre esperienze conviviali o legato allo sport, per esempio. Alcuni esempi sono:

• Tablo, che a partire dal colore del logo mostra subito il carattere sociale della piattaforma.
• McDonald’s, che storicamente combina giallo e rosso, rimandando alla gastronomia e dandosi un tono leggero, adatto a un fast-food.
• Anche le Fonzies, le famose patatine al formaggio, scelgono di utilizzare lo stesso schema di colori. In realtà, lo schema è molto diffuso anche per altre marche di snack salati, basta pensare alle Pringles o alle Lay’s.
• Nickelodeon, il famoso canale di cartoni per bambini, utilizza nel proprio logo l’arancione. Anche altri marchi della stessa categoria prediligono colori caldi, come ad esempio Boing (in rosso).

Viceversa, per prodotti legati alla produttività, come in generale per la maggior parte dei business B2B, sceglieremo colori freddi, più professionali e che trasmettono solidità. Ecco esempi di brand che utilizzano colori freddi:

• Microsoft Word ed Excel impiegano rispettivamente tonalità di blu e di verde, che trasmettono il carattere produttivo del prodotto. Gli stessi colori vengono ripresi dai competitor (anche, probabilmente, per una questione di associazione tra la funzionalità e il colore), come i prodotti equivalenti di Google e la suite LibreOffice.
• La maggior parte dei client di posta elettronica utilizzano il blu, a partire da Gmail, ma anche Mail di Apple, Outlook e Libero.

Ovviamente, il rispetto di questi schemi di colore non è obbligatorio, anzi, può essere strategico anche stravolgere la percezione dell’utente; l’importante è procedere sempre con consapevolezza anche sull’aspetto cromatico.

Dalla UI alla UX: come rendere il colore funzionale

Al di là del significato psicologico, il colore nel design web ha anche un aspetto funzionale. L’utilizzo del colore corretto è necessario per orientare l’utente nella piattaforma e guidarlo alle azioni corrette.

Usare il colore per trasmettere un significato

Esistono delle convenzioni che ci portano ad associare i colori a diverse situazioni. Ci vengono trasmesse dal mondo che ci circonda e che forniscono indizi utili che ci fanno comprendere cosa aspettarci prima ancora di aver analizzato a fondo la situazione.

Se aprendo una piattaforma web, per esempio, vediamo comparire un banner in giallo, prima ancora di leggerne il contenuto percepiamo che, probabilmente, c’è qualcosa a cui dobbiamo prestare attenzione. Lo stesso banner, di colore blu, ci avrebbe probabilmente preannunciato una nota meramente informativa.

Allo stesso modo, difficilmente presteremmo attenzione a un messaggio d’errore se fosse color ottanio, ma sicuramente lo noteremmo se scritto in rosso, o possiamo aspettarci che la compilazione di un questionario sia andata a buon fine se compare un feedback in verde.

Mantenere coerenza tra significato e colore fa sì che l’utente sappia sempre cosa sta succedendo, senza dover spendere risorse mentali per interpretarlo.

Colori e accessibilità: un must

Ci sono poi delle linee guida da rispettare per rendere la piattaforma accessibile. Abbiamo già parlato in un altro articolo di WCAG e accessibilità, ossia delle direttive stabilite dal Consorzio del Web (W3C) per rendere i siti maggiormente fruibili per tutti gli utenti e adeguarli anche alle persone con disabilità.

Il colore gioca un ruolo molto importante per via del contrasto del testo. Perché un testo sia facilmente leggibile, sia per l’utente senza disturbi visivi che per utenti con difficoltà aggiuntive, come il daltonismo, è necessario utilizzare colori che contrastino tra di loro. 

Ma attenzione: in questo caso a far fede non è il contrasto cromatico, ma la diversa luminanza nei colori utilizzati. Infatti, un testo rosso su verde, sebbene siano colori cromaticamente opposti, non è necessariamente facile da leggere, perché si tratta di differenze di tono. Il tipo di contrasto richiesto per la leggibilità, invece, è quello tra chiaro e scuro, come un testo nero su bianco (o viceversa).

A Mabiloft crediamo nell’importanza di ogni aspetto, sia nel design che nello sviluppo. Se stai pensando di sviluppare una piattaforma e vuoi una consulenza su come progettare un’esperienza digitale che comunichi anche attraverso il colore, possiamo aiutarti. Chiedici una consulenza senza impegno, saremo felici di aiutarti.