“Il colore è un mezzo di esercitare sull’anima un’influenza diretta. Il colore è un tasto, l’occhio il martelletto che lo colpisce, l’anima lo strumento dalle mille corde” diceva Wassily Kandinsky, noto pittore russo.

Lo sapevi che in realtà i colori non esistono?

Cap.1: i colori non esistono

In realtà la gamma di colori che percepiamo è il risultato delle lunghezze d’onda che stimolano dei recettori speciali nei nostri occhi, noti come coni e bastoncelli. Il motivo per cui possiamo affermare che i colori non esistono, deriva dal fatto che questi recettori, tra le diverse bande che costituiscono lo spettro magnetico, rispondono solo ad alcune di esse, contenute in un intervallo detto “spettro visibile”. La verità è che i colori sono una rielaborazione delle informazioni ricevute dalla riflessione della luce. 

Non vi siete mai chiesti perché la notte non vediamo i colori? Beh la risposta è proprio in questa spiegazione, poiché in assenza di luce non vi è alcuna riflessione e quindi vediamo gli oggetti per la loro reale tonalità.

La cromia esiste perché il cervello umano riesce a processarne l’essenza. Possiamo dedurre quindi che il bianco e nero non sono dei colori, ma sono più semplicemente una rappresentazione di assorbimento e riflessione assoluti. Infatti se un oggetto assorbe tutte le lunghezze d’onda della luce incidenti su di esso, risulterà nero. Viceversa, se un oggetto riflette la totalità delle lunghezze d’onda incidenti, ai nostri occhi apparirà bianco.

Spiegata ora, la reale natura dei colori, andiamo ad analizzare l’influenza che essi hanno sulle persone.

Cap.2: la psicologia del colore

La psicologia del colore è uno studio che consiste nell’analizzare in maniera dettagliata l’effetto di percezione e comportamento umano del colore. Non solo i sentimenti ma anche molte azioni dell’essere umano sono influenzate dal colore. Per entrare nello specifico del nostro campo, il colore è la determinante che può far sì che un utente continui a visitare il nostro sito web. Il corretto utilizzo del colore può spingere il fruitore all’acquisto di un nostro prodotto o a migliorare l’usability di una piattaforma.

Infatti secondo uno studio, tra il 62-90% dell’impressione iniziale dei consumatori si basa solo sulle scelte di colore e proprio per questo le scelte cromatiche giocano un ruolo centrale nella creazione di un sito web e/o di un brand di successo.

A conferma di ciò, un altro studio condotto da Google, ci dice che un utente impiega meno di 50 millisecondi per formarsi un’opinione su un sito web. Dopo soli 0.05 secondi l’utente medio ha già deciso se continuare la navigazione di un sito oppure abbandonare la sessione e tornare ai risultati di ricerca. La prima impressione che un utente si fa di un sito web dipende da diversi fattori, tra i quali senza dubbio, i colori e gli accostamenti cromatici utilizzati sulla pagina.

Per il mio prodotto digitale quindi quale colore uso?

Cap.3: l’uso dei colori sul web

Aziende e prodotti diversi scelgono colori diversi per identificare il loro marchio. Ma perché?

Il colore, come suddetto, non è solo un modo efficiente per catturare l’attenzione dei vostri potenziali clienti e dei consumatori, ma è un modo per comunicare con loro a livello emotivo, quasi subconscio.

All’interno di un sito web o di un’app possiamo individuare, il più delle volte, uno sfondo di colore neutro come il nero, il bianco o il beige ad esempio, mentre i colori più vivaci sono solitamente utilizzati per le componenti di una pagina. Dobbiamo anche evidenziare però che recenti trend sottolineino come all’interno dell’economia di una pagina web o di un’app, i colori neutri ottengano sempre più un carattere dominante.

Di fatti, in tal caso, la loro funzione equivale a quella del famoso white space, ossia servono per gerarchizzare il testo, per prioritizzare dei contenuti o per permettere all’utente di prendere una pausa da lunghi paragrafi di testo.

Come vedremo nel prossimo capitolo, i colori neutri vengono utilizzati spesso da brand che puntano sul progresso, sulle nuove tecnologie e sull’alta qualità.

Andando avanti possiamo individuare i colori caldi, come rosso, arancione e giallo che esprimono un forte carattere, attirando l’attenzione dell’utente e venendo soprattutto utilizzati su componenti specifiche come bottoni e CTA (Call To Action). Attenzione però a non abusare nell’utilizzo di queste cromie all’interno di una singola schermata, poiché tenderanno a perdere la loro connotazione positiva evocando sensazioni opposte come pesantezza e/o aggressività.

Le tonalità di verde e di blu, invece, creano sull’essere umano un effetto calmante. Il blu, trasmette fedeltà e sicurezza ed infatti è molto presente in siti web e app di banche o assicurazioni.

Piccola digressione: avevate mai fatto caso al colore delle pareti della sala operatoria ed a quello dei camici dei medici che vi sono all’interno? Sono verdi. La scelta non è estetica, ma estremamente funzionale. Infatti il colore verde è considerato espressione di relax, di distensione ed essendo complementare del colore rosso, quando viene macchiato dal sangue risulterà poco visibile alla nostra vista.

La percezione di un colore dipende anche da quale tonalità dello stesso viene utilizzata. Ad esempio, le tonalità più delicate non possono essere usate per attirare l’attenzione degli utenti, però possono aiutare a trasmettere un senso di armonia e equilibrio.

Andiamo a vedere ora le principali caratteristiche di ogni colore e le varie applicazioni.

Cap.4: il significato dei colori

Il mondo occidentale, come conseguenza sia dei processi evolutivi che del nostro background culturale, ha associato idee ed emozioni ai colori primari.

Eccone di seguito una più specifica analisi:

• Rosso: È sicuramente il colore più vibrante e stimolante dello spettro. È il primo colore che notiamo, poiché è capace di attirare la nostra attenzione, basti pensare al famoso “codice rosso” molto utilizzato nei film. Esprime un senso di urgenza. È stato dimostrato da alcuni studi che l’utente medio tende a spendere ed acquistare più in fretta, quasi in modo impulsivo quando vi è la presenza di questo colore.
  
  Il rosso, però, va usato con equilibrio e coscienza. Infatti questo determinato colore viene utilizzato con accezione negativa per segnalare anche un  pericolo o una situazione spiacevole.Spesso utilizzato nel settore della ristorazione ed alimentare, viene sconsigliato per ambiti economico-finanziari. Un esempio pratico può essere un menù oppure una form, cioè tutti quegli elementi che consentono all’utente di interagire con un layout generando un’esperienza.
  
  Brand: Coca Cola, KFC, Kellogg’s, Virgin, Netflix.

• Blu: Il blu, senza ombra di dubbio, è il colore più usato nel web. Questo colore trasmette sensazioni rilassanti e positive, trasmettendo benessere, tranquillità e pace. Grazie a queste sue caratteristiche, viene spesso contrapposto al è il colore più usato nel web. Basti pensare al contrasto tra il fuoco (rosso) e l’acqua (blu). Nelle sue tonalità chiare, soprattutto, ispira fiducia ed aiuta ad una calma e razionale riflessione.
  
  Essendo un colore positivo che trasmette fiducia e sicurezza sono poche le situazioni in cui è preferibile non usarlo. Affidabilità e solidità sono due punti di forza di questo colore, ma probabilmente non è consigliabile per progetti accattivanti che vogliono impattare visivamente, in quanto si propone come una tonalità seria e quasi distaccata.
  
  Brand: Dell, American Express, Facebook, Twitter, Volkswagen. 
   
• Giallo: Il giallo come l’arancione trasmette energia. È un colore che stimola la creatività e che fin dai primi anni della nostra vita iniziamo a conoscere grazie ai disegni in quanto colore del sole.
  
  Una piccola curiosità: il colore giallo essendo una cromia che attira l’attenzione viene erroneamente associato alla creazione dei post-it. In realtà non fu una scelta consapevole, bensì il creatore dei post-it, Spenser Silver, dovendo svolgere dei test ed avendo bisogno di carta utilizzò gli unici fogli di carta rimasti in magazzino, proprio di colore giallo.
  
  Viene utilizzato in ambito creativo e tecnologico e per questo è consigliato per un particolare e creativo layout di un sito web o di un’app. È stato dimostrato, inoltre, che se si ha bisogno di una combinazione cromatica per far leggere chiaramente e far ricordare più facilmente è consigliabile utilizzare il nero su uno sfondo giallo.
  
  Sconsigliato invece se si vuole comunicare eleganza e professionalità in quanto risulta un colore molto giovanile.
  
  Brand: UPS, Nikon, National Geographic, Ikea, McDonald’s.

• Verde: Il verde può essere identificato come il colore più rilassante dello spettro. Piacevole e rassicurante viene associato a speranza, salute e natura ed infatti possiamo trovarlo su portali dedicati al mondo animale e naturale. Approfondendo l’analisi del colore, possiamo evidenziare come nelle sue tonalità più scure ispiri fiducia ed infatti è spesso sfruttato da aziende legali o finanziarie.
  
  Al contrario bisogna porre molta attenzione alle sue cromie più chiare in quanto un verde acceso viene spesso associato alla giovinezza ed all’immaturità e quindi sconsigliato per chi invece  vuole trasmettere un senso di affidabilità e sicurezza.
  
  Brand: Spotify, Android, Holiday Inn, Starbucks, Animal Planet.

• Viola: Il viola spesso dedicato sul web ad un pubblico prettamente femminile, deriva dall’unione della sobrietà del blu alla passione del rosso. Fin dall’antichità è stato associato alla nobiltà ed alla regalità, per la sua estrema eleganza. Ad oggi invece possiamo trovarlo spesso accostato al mondo della religione e della spiritualità.
  
  Nell’ambito web viene sfruttato da aziende che si impegnano nella vendita di prodotti per la cura della persona, come profumi, cosmetici ed intimo. Come per il giallo, è un colore amato dai bambini e che quindi si lega bene alla vendita di articoli per l’infanzia.
  
  Brand: Milka, Taco Bell, Syfy, Wycon.

• Grigio: Il grigio è un colore formale, solenne ma allo stesso tempo affidabile ed elegante. Essendo un colore che trasmette compostezza e serietà è utilizzato moltissimo da brand di automotive e di tecnologia. Accostato al bianco ed al nero offre un design chiaro e pulito.
  
  Legato al concetto della saggezza e dell’esperienza è facilmente sfruttabile da coloro che vogliono puntare sulla propria stabilità e sul proprio prestigio al fine di guadagnare la stima e la fiducia dei propri consumatori.
  
  Brand: Apple, Wikipedia, Mercedes, Audi.

Cap.5: bottoni e CTA

In base a tutto ciò che vi ho precedentemente spiegato quindi, tutti gli utenti, inevitabilmente, vengono influenzati dai colori utilizzati all’interno di una pagina web o di un’app ed agiscono in base alle associazioni inconsce che essi provocano. Fondamentale dunque la scelta di un corretto colore per il bottone di una CTA (Call To Action) al fine di migliorare la conversion rate.

Il conversion rate, in italiano tasso di conversione, è la percentuale di visitatori unici che hanno effettuato la specifica azione che l’inserzionista ha definito essere l’obiettivo della creazione della pagina web (fonte: wikipedia). Per essere più chiari, per azione specifica si intende ad esempio l’iscrizione ad una newsletter o l’acquisto di un prodotto che risulterebbe come una positiva risposta alla sopracitata CTA e che quindi permetterebbe di calcolare è la percentuale di visitatori unici.

Un call-to-action button è costituito da cinque elementi, che, nella migliore delle ipotesi, dovrebbero coesistere in armonia tra loro e con il design del sito:

• Forma;
• Dimensioni;
• Testo del bottone;
• Posizione;
• Colore;

Tutti questi elementi influenzano la conversion rate, ma diversi studi, hanno però dimostrato che è il colore a ricoprire un ruolo centrale nel miglioramento dei KPIs (Key Performance Indicator). In uno studio effettuato da Maxymiser, ad esempio, un’azienda è stata in grado di incrementare i click verso il checkout dell’11% solo cambiando i colori della propria pagina web. 

Le conversion rate migliori derivano dall’utilizzo di colori caldi come appunto il rosso, l’arancione ed il giallo.  

Da non sottovalutare anche l’utilizzo del verde. Nella nostra cultura infatti il verde viene associato al colore del semaforo, il quale rappresenta una sorta di “via libera” e che dunque porta il consumatore a valutare il click come una scelta corretta. 

Infine, da evitare per bottoni e CTA, i colori scuri (vedi nero e/o marrone), i quali hanno una conversion rate molto bassa.

Una volta scelto il mio colore primario, come posso creare una palette completa?

Cap.6: palette cromatiche

I dettagli cromatici di una web app ad esempio, devono essere scelti in funzione del colore principale. 

Per realizzare delle corrette palette cromatiche, esistono dei tool che ti permettono di individuare il colore secondario (due al massimo). Eccone di seguito alcuni:

• Adobe Color
• Colordot
• Coolors

Cap.7: conclusione

“Il semplice colore, può parlare all’anima in mille modi diversi.”

Questa frase di Oscar Wilde spiega perfettamente quale deve essere il nostro obiettivo finale. Attraverso l’uso sapiente dei colori abbiamo la possibilità, anzi il dovere, di creare un legame più profondo con il nostro fruitore, optando per scelte coerenti al fine di favorire la navigazione del nostro sito web o app e quindi di proporre una corretta usability.

E tu quali colori hai scelto per il tuo sito web o per la tua app?