Colori per logo e website: applicare la psicologia alla pratica

L’85% dei consumatori dice che il colore è il primo fattore per la scelta di un prodotto: quanto sei attento ai colori che scegli?

Nel precedente articolo abbiamo informato i lettori di come i colori impattano sulla mente delle persone, che siano clienti o meno.

Ogni pattern ha infatti una strutturata reazione a livello emozionale nell’uomo. Il rosso è passione, il viola benessere, il verde relax e via dicendo.
A questo punto andremo a studiare quali sono metodi e tecniche per creare un sito attraente e coinvolgente per gli utenti.

E con la conoscenza psicologica dalla propria parte, si saprà quali saranno i colori migliori da sfruttare in ogni punto del sito web.

La strategia di design e patter è un elemento chiave per aumentare web reputation. Il suo risultato farà percepire al pubblico informalità, eleganza, serietà e ogni altro tipo di immagine.

Essere quindi sempre informati sul valore del proprio nome online.

Prima di proseguire consigliamo la lettura della Parte 1 per essere attrezzati al meglio per questo percorso:

Preso appunti? Bene, cominciamo.

Il fattore più importante nell’esperienza di acquisto

Proponiamo subito una statistica riguardante l’impatto che i colori hanno sulle scelte di acquisto (Credit: neilpatel.com)

Pare incredibile, quasi falso. In realtà si tratta di una statistica affidabile e accurata che rivela tendenze fondamentali.

Ecco perchè l’aspetto del colore non può essere lasciato al caso. Come si può vedere dal grafico:

• il 93% degli utenti considera il colore e l’apparenza del prodotto fondamentale;
• l’85% dei clienti dichiara di acquistare un prodotto in primo luogo per il suo colore;
• il colore accresce dell’80% il riconoscimento del brand da parte dei consumatori.

Cifre potenti che fanno la differenza sia a livello di vendite che di fiducia nel marchio. Ed è quindi chiaro come questo vada a verificarsi anche nel processo di customer experience complessivo, sia fisico che online.

In questo caso, ci focalizziamo su quella che è l’esperienza web. La società Facebook Inc è proprietaria dei due principali social network del momento, ossia il suo omonimo e poi Instagram. E le differenze sono enormi.

1. Individuare il target

Il primo compito a casa è quello di conoscere il pubblico a cui si rivolge. Uomini o donne, adulti o ragazzi, ceto medio o abbiente.

Questo perchè in base al target si avranno reazioni differenti davanti a certi pattern.

UOMINI vs DONNE

Andiamo qui a proporre un sondaggio che prende in campione uomini e donne di diverse fasce d’età. Su questi viene quindi studiata la preferenza dei colori, suddivisa tra sesso ed età. (Credit: www.joehallock.com)

A sinistra sono descritte le preferenze maschili, mentre a destra compaiono quelle femminili, sulla media delle scelte in base all’età

• blu 57% <–> blu 35%
• verde 14% <–> viola 23%
• nero 9% <–> verde 14%
• rosso 7% <–> rosso 9%

Sul versante dei meno graditi si hanno invece:

• marrone 27% <–> arancione 33%
• arancione 22% <–> marrone 20%
• viola 22% <–> grigio 17%
• giallo 13% <–> giallo 13%

Come si può vedere si ha una vittoria assoluta riguardo il colore blu su entrambi i sessi e una netta sconfitta per marrone e arancione. Si può quindi vedere come i gusti siano spesso coincidenti tra uomini e donne.

Le maggiori differenze compaiono quando si analizza il fattore età.

RAGAZZI vs ADULTI

Proponiamo dei grafici che mostrano rispettivamente i colori più e meno apprezzate da ogni fascia d’età presa in analisi.

Le differenze sono evidenti al primo sguardo. Seppur blu dal versante like e marrone-arancione da quello dislike restino certezze, di variazioni se ne hanno molte.

Ci teniamo però a fare un appunto. Nonostante l’accuratezza delle cifre, per un fattore di marketing è consigliabile considerare i ragazzi dai 14-15 anni in su (inizio periodo liceale) come facenti parte della fascia successiva.

Ecco perchè è quindi necessario conoscere il target del proprio pubblico. In questo modo si avranno dati in mano per poter applicare strategie di design su logo e sito.

E nel caso in cui si fosse nuovi sul mercato e il pubblico fosse ancora sconosciuto o incerto? Due possibilità:

• effettuare test a-b con differenti combinazioni di pattern per individuare il migliore;
• pensare a quale potrà essere il pubblico o scegliere quello su cui si vorrà puntare, in base ai propri prodotti.

2. Creare pattern strategici

Presentiamo ora un’illustrazione della ruota dei colori, simile a quella dell’articolo Parte 1. Accanto sono inoltre presenti accoppiamenti strategici tra le varie sfumature.

Queste non sono casuali: sono infatti strutturate per andare a risaltare al meglio quei dati colori e creare così pattern coinvolgenti.

MONOCROMATICO

In questo schema la scelta andrebbe a cadere su diverse sfumature di un unico colore. Possono differire in luminosità, saturazione e tinta.

Pro:

• sensazione di unità e flusso, ottimo per siti monopagina/lunghe pagine che conducono l’utente in un cammino. Possono essere ad esempio l’esposizione del prodotto o la storia dell’azienda. Un esempio ne è il sito Davroc, con il bianco/grigio che domina la pagina, accompagnato da toni neri;
• si tratta della composizione più facile per l’occhio. Se ben strutturato, l’utente sarà naturalmente invogliato a osservare e, nel caso. proseguire nello scorrimento.

Contro:

• può risultare poco accattivante e senza elementi cattura-attenzione. Questo vale specialmente in siti web dove l’intento è quello di vendere il prodotto online e non di farsi conoscere. Si può quindi pensare di creare spot di attenzione sfruttando altri colori accesi e, ancor meglio, quelli complementari. Newcompanyname è un esempio di componente monocromatica spezzata da altri colori per le interazioni.

COMPLEMENTARE

I colori complementari sono tali perchè esaltano a vicenda la propria luminosità. Sono semplici da scoprire: risiedono l’uno dalla parte opposta dell’altro. E quindi giallo-viola, rosso-verde, blu-arancione e via dicendo.

Pro:

• come detto, l’utente percepirà questo accostamento di colori in maniera intensa, riuscendo quindi a catturarne meglio l’attenzione. Un’idea può quindi essere impostare un colore principale e utilizzare poi il suo complementare nei punti in cui si vuole che l’utente sia focalizzato. Seppur non complementari per uno spicchio, Injob.com mostra l’accoppiamento verde-viola.

Contro:

• c’è il rischio di cadere in pattern troppo vistosi e “sgargianti”, perchè i complementari si rafforzano a vicenda. Valutare quindi lo stile della propria azienda e del prodotto: vendi insegne neon? Perfetto! Sei un servizio di pompe funebri? Forse è meglio rivalutare il monocromatico…

ANALOGO

Il pattern in questione prende colori appartenenti a spicchi vicini tra loro. Possono essere 2, 3, 4, senza un limite dichiarato, ma evitando di trasformare la pagina nel vestito di Arlecchino.

Pro:

• simile al monocromatico, crea un’immagine piacevole per l’occhio, che si sente a suo agio e coinvolto nello schema. Al contrario del sopracitato è qui possibile creare punti di interesse per l’utente sfruttando unicamente i colori analoghi, giocando magari su luminosità e saturazione. Il sito web Getdonedone.com parla da sé

Contro:

• troppo pochi colori potrebbero creare una pagina poco interessante, mentre troppi cadere nella confusione. Calibrare quindi bene il numero e anche la posizione dei colori scelti, pensando sempre al tipo della propria azienda

TRIADICO

Il nome parla chiaro: sono 3 i protagonisti in questione. Come per i complementari, fare riferimento alla ruota e vedere quali sono le tre sfumature che creano il simbolo del “pericolo nucleare”.

Pro:

• appare come una somma tra armonia e facilità d’osservazione (monocromatico) con la vivacità dei colori (complementare). Viene solitamente utilizzato in una struttura 1+2. Si sceglie quindi un colore principale e gli altri due secondari, ma non è una regola fissa. L’importante è mantenere le medesime caratteristiche l’uno con l’altro (stile, contrasto, luminosità).

Contro:

• come nel caso dell’analogo, bisogna sapere come disporre correttamente i pattern nelle pagine. E qui il rischio di caos è maggiore, perchè i colori sono nettamente diversi tra loro.

3. Organizzare il tutto

Chiediti chi sei.

E se hai già la risposta in mano, tanto meglio.

Individuando la propria personalità, come azienda o come sito web di un privato, è la chiave di un perfetto design.

Si parte da questo per individuare qual è il corretto pattern destinato al pubblico:

• toni accesi/forti che quasi brillano da sè –> dinamicità, neon, colori complementari saturati
• toni neutri/freddi che trasmettono integrità –> bassa saturazione, monocromatico/analogo, staticità

E a questi si aggiungono altre variabili come:

• il tema trattato –> Natura? Verde, marrone – Tecnologia? Argento, nero – Vacanza? Blu, giallo, bianco
• il pubblico di interesse, come mostrato dai grafici nella sezione precedente
• il budget del pubblico –> Carta bianca? Oro, nero, viola – Limitato? Arancione, rosso, giallo

Inoltre la ruota dei colori fornisce una ristretta gamma di ogni variazione del colore. I fattori che influenzano ogni pattern sono moltissimi e ognuno di loro porta a creare effetti diversi sul risultato.

Colori ben saturati e luminosi cattureranno l’attenzione nei singoli punti, andando a perderla però sul design generale della pagina. Ryanair ne è un esempio

L’attenzione sui giusti punti

In ogni sito web ci sono punti più importanti di altri, a seconda dei propri obiettivi.

Vendere un prodotto, far scoprire il servizio, ottenere i contatti dell’utente. In base all’obiettivo preposto, i colori dovranno seguire il miglior schema possibile.

Per avere un’efficace call-to-action, questa dovrà come prima cosa essere riconoscibile nell’immediato. E tralasciando in questo articolo ogni altro dettaglio, riflettere sul colore.

• complementare –> background colore 1, call-to-action colore 2
• monocromatico (e analogo)–> background sfumature colore principale, call-action colore luminoso e d’impatto
• triadico –> background di 1/2 colori, call-to-action con il/i restanti

Non esagerare (oppure farlo bene)

Prendiamo come esempio il più celebre sito di tutti i tempi, tempestato da utenti in tutto il mondo ogni secondo di ogni giornata. Esatto, Google.com.

E qual è il suo colore principale? Il bianco!

Nel web design di oggi viene riservata grande attenzione alla sensazione di spazio e libertà dell’utente. Il visitatore si deve sentire a proprio agio e libero di muoversi in autonomia tra le diverse pagine.

E i colori sono uno degli elementi che permettono di raggiungere questo risultato, se ben bilanciati. Altrimenti entra in gioco il caso, trasformandosi così in The Million Dollar Site.

L’ultima parola alla web reputation

Ogni parametro diventa fondamentale nella scelta del miglior colore per il proprio sito, che sia un’azienda o un privato. Ma in conclusione, noi di ReputationUP bilanciamo l’ultima parola su quello che oggi è l’aspetto fondamentale del mondo online: la reputazione.

Il proprio apparire in pubblico determinerà infatti quale sarà l’immagine percepita della persona/marchio. Serietà? Fiducia? Risparmio? Lusso?

Ormai sappiamo che i colori parlano chiaro. Conoscere perciò la web reputation che si possiede o si deciderà di avere e muoversi in quella direzione.

E per avere la mano dell’esperto, noi siamo qui per questo.