Il ruolo del colore nella UX

Comprendere la psicologia del colore è un aspetto chiave della creazione di una tavolozza di colori che funzioni bene nel design digitale. Sebbene il colore sia talvolta considerato da alcuni designer come una scelta puramente estetica, in realtà è una componente chiave dell'impatto psicologico di un design sugli utenti e, in quanto tale, della sua UX.

Una tavolozza di colori ben congegnata può elevare un design da "buono" a "ottimo", mentre una tavolozza di colori mediocre o cattiva può sminuire l'esperienza complessiva di un utente e persino interferire con la sua capacità di utilizzare un sito o un'app.

Sebbene la teoria del colore in generale sia un argomento complesso e l'uso del colore nel design UX copre molto di più della semplice creazione di una tavolozza dall'aspetto gradevole (come l'accessibilità e gli effetti psicologici anche di sfumature diverse all'interno della stessa tonalità); i designer possono incorporare gradualmente un uso migliore del colore nei loro progetti senza dover ripensare l'intero processo. Una volta che un designer ha coperto le basi, una delle parti più gratificanti della teoria del colore è imparare a incorporare colori più inaspettati nei loro progetti.

La psicologia del colore

La teoria del colore e gli effetti psicologici che il colore può avere sugli utenti è un argomento complesso e spesso soggettivo. Ma ci sono alcuni aspetti che possono essere affrontati a un livello più universale.

Cose come i significati comuni dei colori principali (primari, secondari e terziari), le tavolozze dei colori tradizionali e le variazioni culturali nei significati dei colori sono tutte abbastanza semplici. I designer possono facilmente apprendere queste nozioni di base e applicarle al loro lavoro. Ma ci sono punti più fini da imparare quando si tratta di usare i colori nel design UX .

L'impatto emotivo dei colori dell'interfaccia non dovrebbe essere trascurato. E mentre alcuni colori sono "universali" nel design UX (come nero, bianco e grigio, almeno uno dei quali viene utilizzato praticamente in ogni buon design in circolazione), i colori con cui sono combinati possono avere un enorme impatto su la percezione di un utente.

Naturalmente, anche il modo in cui viene utilizzato il colore può avere un impatto drammatico su come viene percepito. Ad esempio, il blu utilizzato come colore principale in un design moderno e minimalista avrà una sensazione molto diversa rispetto allo stesso blu utilizzato come colore di accento in un design aziendale più complesso.

Differenze culturali nel colore

Un problema che i designer tendono a trascurare sono le differenze culturali che possono esistere attorno ai diversi colori. Ad esempio, in molte culture occidentali, il bianco è associato a cose come purezza, innocenza e speranza. Ma in alcune parti dell'Asia, il bianco è associato alla morte, al lutto e alla sfortuna.

Alcuni colori hanno generalmente connotazioni positive indipendentemente dalla cultura (come l'arancione), mentre altri, come il bianco, variano notevolmente tra i diversi paesi. Questo può certamente complicare la vita di un designer quando cerca di creare un design che attiri il pubblico più vasto possibile.

È importante che i designer esaminino le implicazioni culturali delle loro tavolozze di colori in base al pubblico previsto per il prodotto o il sito web. Se un prodotto si rivolge a un pubblico mondiale, assicurati di bilanciare i colori e le immagini utilizzate per evitare connotazioni culturali negative. Se un prodotto sarà principalmente rivolto solo a una cultura particolare, i designer possono prestare meno attenzione alle implicazioni che la tavolozza scelta potrebbe avere in altre culture.

Abbinare i colori UX al marchio

I valori del marchio dovrebbero svolgere un ruolo chiave nella creazione di una tavolozza di colori. Ma non sono l'unico fattore importante. Anche le norme del settore sono fondamentali, così come i colori già utilizzati dai concorrenti. L'uso di una tavolozza di colori quasi identica alla concorrenza principale di un marchio è un ottimo modo per generare confusione e garantire che il marchio non si distingua.

Certo, ci sono eccezioni a questo. Prendi, ad esempio, McDonald's e Wendy's. Entrambi sono ristoranti fast food in diretta concorrenza tra loro. Ed entrambi usano una tavolozza di colori rossa e gialla. Tuttavia, guardando i loro loghi, il logo di Wendy è principalmente rosso con accenti gialli, mentre quello di McDonald's è l'opposto. Anche il loro packaging utilizza questi colori in modi diversi, differenziando ulteriormente tra i marchi. Per questo motivo, nessuno dei due sarebbe facilmente confuso con l'altro, anche se i loghi e altri segni identificativi venissero rimossi dalla confezione.

Il primo passo per creare una tavolozza di colori del marchio che supporti i valori del marchio è capire il significato dei vari colori e come renderli più chiari/luminosi/più scuri/più opachi/ecc. può influenzarli. Ecco una ripartizione di base di cosa significano i diversi colori:

• Rosso — Il rosso è il colore del pericolo e della passione, oltre che dell'eccitazione. È un colore molto forte e può suscitare forti reazioni nelle persone. Alleggerendolo al rosa lo rende più femminile e romantico mentre scurire la tonalità al marrone lo rende più tenue e tradizionale.
• Arancio — L'arancione è un colore molto creativo associato anche all'avventura e alla giovinezza. È anche molto energico. A causa dei forti legami dell'arancione con lo stile anni '70, può anche evocare un'atmosfera retrò.
• Giallo — Il giallo è felice, ottimista e allegro. È popolare nei design per bambini e adulti. Più tonalità pastello sono spesso utilizzate come colore neutro per il bambino, mentre i gialli più luminosi sono popolari nei design creativi. Le tonalità più scure del giallo diventano oro, che è associato alla ricchezza e al successo.
• Verde : il verde ha varie associazioni. Da un lato, provoca sentimenti di ricchezza e tradizione (in particolare tinte più scure), mentre dall'altro è fortemente associato all'ambientalismo e alla natura. I verdi di lime sono spesso associati al rinnovamento e alla crescita.
• Blu : il blu è spesso associato alla lealtà e alla fiducia. I blues più luminosi possono essere associati alla comunicazione, mentre i blues più spenti e più scuri possono essere associati alla tristezza e alla depressione. Il blu è il colore più universalmente apprezzato al mondo, il che potrebbe spiegare perché così tante aziende optano per le tonalità blu per il loro marchio.
• Viola — Il viola è un'altra tonalità con vari significati. È stato a lungo associato alla regalità e alla ricchezza (poiché la tintura viola era rara in molte civiltà antiche, era riservata ai reali). Ma è anche associato al mistero e alla spiritualità. Il viola può anche evocare la creatività.
• Nero — Il nero implica raffinatezza e lusso. Tuttavia, può anche essere legato al dolore e alla negatività. A seconda degli altri colori UX utilizzati insieme al nero, può sembrare moderno o tradizionale, formale o casual.
• Bianco — Il bianco è legato alla purezza, all'innocenza e alla positività. Il bianco è anche molto popolare nei design minimalisti, grazie alla sua neutralità e semplicità. Come il nero, il bianco assume facilmente le caratteristiche degli altri colori con cui viene utilizzato.
• Grigio — Il grigio ha vari significati, a seconda del contesto. Può essere conservatore e sofisticato o squallido e noioso. Può essere privo di emozioni o lunatico. Può anche essere associato a dolore e tristezza.
• Marrone : il marrone (che in realtà è una tonalità scura di arancione) è associato all'essere con i piedi per terra e radicato. È anche associato alla natura e persino all'intimità. E, naturalmente, può essere associato all'essere sporchi o sporchi.

Conoscere questi significati di base dei colori offre ai designer una solida base su cui costruire tavolozze di colori per qualsiasi marchio o prodotto.

La teoria del colore, tuttavia, è in parte scienza e in parte arte. Solo perché un colore è generalmente associato a una particolare sensazione o stato d'animo non significa che non possa essere percepito in altri modi combinandolo con colori diversi, alterando la tonalità esatta o variando il modo in cui viene utilizzato tra altri elementi di design.

Utilizzo di colori UX non convenzionali

L'uso non convenzionale dei colori UX è un ottimo modo per distinguere un marchio. E mentre ci vuole più finezza della semplice combinazione di vecchi colori che un designer ha voglia di combinare, non è così difficile imparare a usare colori inaspettati nei progetti UX.

I colori accentati sono il punto di partenza più semplice quando si tratta di aggiungere colori non convenzionali a un design. Ad esempio, il sito Web di uno studio legale potrebbe utilizzare una tavolozza di colori tradizionale di blu navy e grigio. Ma aggiungi alcuni accenti verde lime e improvvisamente il design si distingue dal mare di altri studi legali con siti Web blu navy e grigi. Oppure guarda questo esempio di Hogan Lovells, che utilizza una tavolozza di colori bianco, grigio e verde lime per creare un sito Web moderno che si distingue decisamente dagli altri siti del settore legale. Farebbe appello a un pubblico più giovane e moderno rispetto al tuo sito legale medio.

Berdan Real Estate è un altro sito che utilizza una tavolozza di colori inaspettata. Il sito immobiliare utilizza sfumature di giallo e pesca, entrambi molto più energici del sito di proprietà medio (dove dominano ampie fasce di blu, rosso e verde).

Le assicurazioni non sono generalmente considerate un'industria moderna e rivoluzionaria, ma ciò non significa che i loro progetti non possano esserlo. Il sito Web di Lemonade utilizza una combinazione di colori grigio e bianco con accenti fucsia. È del tutto inaspettato in un settore che non è noto per correre rischi.

C'è una moltitudine di altri esempi di colori UX non convenzionali usati nella pratica sul web che possono essere usati come ispirazione.

La regola 60-30-10

La regola 60-30-10 è una semplice teoria per creare tavolozze di colori ben bilanciate e visivamente interessanti. L'idea è che un colore, generalmente qualcosa di abbastanza neutro (letteralmente o psicologicamente), costituisce il 60% della tavolozza. Un altro colore complementare costituisce il 30% della tavolozza. E poi un terzo colore viene utilizzato come accento per il restante 10% del disegno.

Questo metodo rende molto più facile per i designer iniziare a sperimentare con tavolozze di colori non convenzionali senza uscire troppo dalle norme previste all'interno di un settore o di un marchio. L'aggiunta di un tocco di una tonalità inaspettata può elevare un design che altrimenti si adatta a ciò che ci si aspetta da una particolare azienda. Può anche essere il primo passo verso la creazione di una tavolozza del marchio che sia molto più lungimirante rispetto ai suoi concorrenti, distinguendo così il marchio e rendendolo più memorabile.

Conclusione

Sebbene la teoria dei colori sia un argomento complesso, non è particolarmente complicato imparare le basi. Da lì, i designer possono sfruttare le loro conoscenze per creare tavolozze di colori più varie e sofisticate per i loro progetti.

Una tavolozza di colori ben progettata, in particolare quella che include alcune sfumature inaspettate, non è solo una scelta estetica. Può avere effetti psicologici significativi sugli utenti, che i designer di UX dovrebbero sfruttare per creare esperienze migliori.

• • •

Ulteriori letture sul blog di Toptal Design:

• Psicologia del design e neuroscienze di Awesome UX
• UI scure. Il buono e il cattivo. Cose da fare e da non fare.
• Branding emotivo per la progettazione di prodotti sostenibili
• Usa la tua ispirazione: una guida ai Mood Board
• Design persuasivo: utilizzare efficacemente la psicologia avanzata