Come designer, la psicologia del colore potrebbe non essere qualcosa a cui pensi regolarmente, ma probabilmente sei consapevole che qualcosa di rosso può farti sentire affamato e che una stanza gialla luminosa e solare può farti sentire spensierato e felice.
L'applicazione della psicologia del colore al web design dei siti di e-commerce può anche avere un impatto emotivo sui visitatori del sito. I colori che scegli per il design possono aiutare con il riconoscimento del marchio e anche la probabilità che un cliente lo faccia fidati del tuo marchio.
La psicologia del colore è fondamentalmente il modo in cui il colore influisce sulle emozioni e sui comportamenti delle persone. Gli fa venire voglia di acquistare un oggetto? Li rende felici o mostra un lato serio?
Tuttavia, la psicologia del colore non è così semplice come il rosso ti fa venire fame e il blu ti fa sentire calmo. C'è molto di più nella psicologia del colore e ha molte sfaccettature stratificate. Inoltre, se lo fai per i siti di e-commerce, la psicologia del colore è ancora più importante.
Non c'è un file standard universalmente accettato per come il colore influisce su tutti. Le emozioni o sentimenti che il colore crea è molto individuale da persona a persona. Le tue esperienze di vita possono persino influenzare il modo in cui vedi un colore specifico e le sensazioni che evoca.
Nello studio sull'impatto del colore nel marketing, i ricercatori lo hanno scoperto 90% delle prime impressioni derivano dal fatto che il visitatore ritenga che il colore sia appropriato per il marchio e se sia appropriato a ciò che viene venduto.
Se il cliente ritiene che il colore non sia appropriato per il marchio, è improbabile che si fidi dell'azienda.
Il cibo da asporto?
Sii consapevole delle percezioni del colore, come i colori scuri, neri e grigi per i prodotti robusti e virili e rosa e viola per i prodotti femminili. Tuttavia, non essere così legato alla teoria del colore da ignorare il marchio o l'estetica generale del design.
Inizia con un design reattivo davvero eccezionale e poi puoi modificare i colori per trovare i migliori per il tuo marchio particolare. Dovrai anche essere consapevole dell'equilibrio dello spazio bianco e se il design generale è piacevole per l'occhio umano.
Come utilizzare la teoria del colore nella progettazione di siti di e-commerce
Quando si tratta di applicare la teoria del colore al design di e-commerce, il miglior punto di partenza è con quali colori gli utenti vogliono acquistare il tuo prodotto. Circa il 62-90% dell'opinione che un cliente esprime nei primi 90 secondi su un sito web è formata dalla sola scelta del colore.
Letture consigliate:
25+ migliori temi WordPress di e-commerce per negozi online (2020)
Con questo in mente, puoi capire perché è fondamentale scegliere i colori giusti per il tuo design.
L'ultima cosa che vuoi fare è spegnere i clienti in modo che rimbalzino via dal tuo sito web.
Come accennato in precedenza, il colore che potrebbe attirare i lettori può dipendere dal tuo marchio generale e se quel cliente lo percepisce come appropriato per il tuo marchio.
Ad esempio, se vendi accessori per motociclette, probabilmente non utilizzerai un pulsante di acquisto rosa unless stai vendendo specificamente accessori femminili alle donne. Vuoi avere una certa coerenza in tutto il design generale.
Quindi, se decidi di utilizzare i pulsanti rossi di invito all'azione (CTA), i tuoi pulsanti CTA dovrebbero mantenere quel colore per tutto il design. L'unica eccezione è se desideri attirare l'attenzione su un pulsante in particolare e non sugli altri.
Ciò che probabilmente è ancora più importante del colore che alla fine scegli è assicurarti che i tuoi colori siano coerenti in tutto il tuo sito. Se decidi di utilizzare il rosso per creare un senso di energia e freschezza, rimani fedele a quella tavolozza di colori dai pulsanti di chiamata all'azione ai titoli in primo piano.
Assicurati di non utilizzare colori contrastanti che potrebbero creare un tintinnante simbolo di fastidio per i visitatori del sito web.
Fonte: WebpageFx
Navigazione tra le scelte di colore: come faccio a fare la scelta migliore?
Sapere quali colori usare e quando può essere un po 'più complicato, ma è possibile capire cosa funziona meglio per il tuo sito.
Ad esempio, se vuoi creare una sensazione di fiducia, il blu può essere una buona scelta. Spiegheremo un po 'di più di seguito su quali tipi di emozioni e sentimenti diversi colori potrebbero prendere di mira.
È anche intelligente sapere quali colori stanno utilizzando i tuoi concorrenti e decidere se colori simili funzionerebbero bene per te o se vuoi distinguerti dalla concorrenza con colori molto diversi. Alcuni siti utilizzano molto bene il colore. Qui ci sono un paio di esempi:
- Dick's Sporting Goods utilizza un verde scuro per far pensare ai grandi spazi aperti. Dal momento che vendono attrezzature per esterni, questa è la scelta perfetta di colore per loro. Troverai questo colore nelle intestazioni, nei banner di vendita e in alcuni pulsanti CTA.
- Rue 21 è un'azienda di abbigliamento online che si rivolge a adolescenti e giovani adulti. I loro vestiti sono freschi, economici e divertenti. Non sorprende che i colori utilizzati in questo sito siano blu e rosa giovani, freschi e luminosi. Si noti inoltre che l'attenzione è rivolta ai prezzi economici con piccole bolle rosa brillante che mostrano le diverse fasce di prezzo nel negozio. Questi sono quasi un invito all'azione per il visitatore del sito.
Target Personas and Color - a chi è destinato il mio prodotto?
È di vitale importanza comprendere il tuo pubblico di destinazione e i tipi di colori che si aspettano dal tuo tipo di sito web. Quindi, il tuo primo passo nella scelta di una tavolozza di colori dovrebbe iniziare con lo studio del tuo target demografico.
Se non hai ancora creato una persona utente per il tuo pubblico di destinazione, dovresti crearne almeno una.
Questa è fondamentalmente una persona immaginaria che rappresenta il tuo cliente più probabile. Puoi dargli un nome, tratti, potenziale carriera e così via. Questo può aiutarti a capire meglio il pubblico per il quale stai scrivendo e puoi quindi orientare i tuoi contenuti e le tue scelte di colore verso questo tipo di personalità.
Ad esempio, è stato dimostrato che gli uomini tendono a preferire il blu del 57%, seguito dal verde (14%) e dal nero (9%).
Un esempio dell'uso del blu combinato con un look maschile è Mountain Productions Rigging Equipment and Services. Nota come i colori sono profondi e scuri, dando all'intera pagina un aspetto maschile. Pops of blue portano un colore preferito, creando un forte invito all'azione e la pagina ha abbastanza spazio bianco per bilanciare l'intero look.
Anche le donne tendono a preferire il blu del 35%, seguite da vicino dal viola al 23% e dal rosso al 9%.
Un buon esempio dell'uso del viola in un web design può essere visto nel sito web di Claire's, che vende abiti e gioielli a prezzi accessibili. Questo sito web utilizza alcune bande di viola, ma utilizza anche forti macchie di colore brillante per mostrare il loro lato giovanile, in particolare nell'immagine delle ragazze che indossano gli accessori di Claire.
Tuttavia, il sito attira anche un po 'di blu, capendo che il blu è un colore preferito e di fiducia tra le donne. Individuerai persino del rosso su questo sito Web, a dimostrazione che coloro che lo hanno progettato capiscono chiaramente che la maggior parte delle donne preferisce questi colori rispetto agli altri.
In definitiva, non puoi davvero sbagliare con il blu, dal momento che alla maggior parte delle persone piace il colore e lo considera affidabile e calmante.
Colori e cosa trasmettono
Anche se dovresti tenere presente che l'impatto di un colore può variare in base alle esperienze delle persone che visualizzano una determinata pagina, ci sono alcune regole pratiche su ciò che ogni colore significa che puoi applicare ai tuoi progetti:
1. Rosso
Il rosso tende a trasmettere:
- Energia
- Potenza
- Passione
- Amore
Il rosso può creare eccitazione e attira l'attenzione. Nota come il design del sito web di seguito sia luminoso ed energico.
Fantasy Shopping utilizza il rosso in entrambe le parti dell'intestazione e per porre un punto più forte a una domanda e nel design stesso. Nota come il rosso attira la tua attenzione su dove il designer vuole che vada.
XStore offre un modello a tema rosso più morbido ma continua ad avere una dichiarazione in grassetto con le linee diagonali che arrivano verso il centro. Il punto focale ti porta direttamente al testo principale.
2. Giallo
Il giallo evoca spesso:
- Gioia
- Energia
- Calore
- Allegria
Il giallo crea spesso sentimenti di felicità e leggerezza.
Lipton Tea fa un ottimo lavoro nell'usare il giallo per creare un'atmosfera luminosa e solare. Non solo il tè freddo è associato ai momenti felici, ma anche al tè del sole e all'estate.
I gialli luminosi in questo design ti rendono felice e potrebbero aiutarti a immaginare il divertimento di un barbecue in giardino. Ti fa venire voglia di correre fuori e comprare del tè in modo da poter preparare il tuo tè solare, non è vero?
Notate come anche le foto dei prodotti riflettano questo uso del giallo solare.
Anche il modello di limone trasmette calore e vivacità attraverso il loro design con un pizzico di giallo in tutte le varie pagine.
Gli utenti sono incoraggiati a spostare il cursore sul menu di navigazione superiore, cambiando il nero traslucido in un tratto di giallo. Questo design non solo evidenzia l'energia, ma invita gli altri a sentirsi ringiovaniti durante lo scorrimento del loro sito.
3. Nero e grigio
Il nero e il grigio spesso creano un senso di:
- Autorità
- Potenza
- Forza
- Mascolinità
- Neutralità
Questi colori creano anche una sensazione di fiducia e affidabilità.
Harley Davidson utilizza neri e grigi in modo molto efficace per creare un sito Web potente e maschile che parla di potere e autorità. Notare come i colori siano tutti abbastanza scuri ad eccezione del pulsante arancione CTA.
Non puoi fare a meno di attirare la tua attenzione su quel pulsante, che incanala efficacemente il visitatore del sito dove l'azienda vuole che vada.
Per saperne di più, leggi siti web neri e web design scuro qui.
Il tema Phoenix utilizza anche nero e grigio all'interno del suo modello e ha un carattere forte e sofisticato. È un modello elegante con distrazioni minime.
Questo tipo di sito fa appello ai leader aziendali che non vogliono espedienti e sono venuti sul sito per uno scopo. Se sei interessato a implementare tecniche di web design minimaliste e altro, potresti dare un'occhiata questo articolo sui temi minimi di WordPress.
4. Arancione
L'arancia tende a promuovere:
- Felicità
- Eccitazione
- Calore
- raffinatezza
Come il rosso e il giallo, l'arancione può creare una sensazione di energia e felicità. Tuttavia, è anche visto come un colore più sofisticato. Un buon esempio dell'uso dell'arancia in un design è Sunny Delight Beverages. Poiché si tratta di bevande al gusto di arancia, ha senso che utilizzino questo colore nel loro design.
Ricorda che parte della psicologia dei colori sta usando i colori che il visitatore del sito si aspetta che il tuo marchio utilizzi. Sunny D utilizza molto bene questo concetto. Il design utilizza bordi arancioni, pulsanti di navigazione arancioni e arancioni nelle immagini e nel logo. La giustapposizione dello spazio blu profondo e bianco offre un aspetto sofisticato che mostra che la bevanda non è solo per i bambini, ma piuttosto per tutte le età.
Nota come il modello di Omega abbia così tanta vivacità attraverso il loro design a causa della barra arancione in grassetto. È un layout invitante e tutte le caratteristiche che vogliono sottolineare sono in arancione. Esteticamente, questo semplice design potrebbe avere molto valore per una potenziale azienda.
5. verde
Il verde spesso trasmette:
- Natura
- Crescita
- Denaro
- Fertilità
Il verde evoca sensazioni di calma e relax. Vedrai spesso marchi ecologici o legati all'aria aperta che utilizzano questo colore. Inoltre, le società finanziarie potrebbero usare il verde per dimostrare che puoi fare soldi - pensa alle banche, ai blog sui soldi, ecc.
John Deere è un buon esempio dell'uso del verde nella progettazione di un sito web.
Usano una tonalità di verde molto specifica ed è ben nota in tutto il mondo. I trattori del marchio sono disponibili nei colori verde e giallo, quindi ha senso che questi colori vengano visualizzati nel design del sito Web di John Deere.
Dopotutto, sono state scritte persino canzoni country su "John Deere Green".
Si noti come l'esempio di sito riportato di seguito utilizza il verde brillante, ma ha anche un buon equilibrio di colori neutri per evitare che il verde sia troppo opprimente.
Un designer professionista può dare un'occhiata all'equilibrio generale della pagina e assicurarsi che il testo venga visualizzato in un modo che sia leggibile, ma che colleghi i colori al concetto generale del marchio come il modo in cui Badgeland in Nuova Zelanda utilizza il colore verde per riflettere il proprio marchio sul sito.
Questo è uno dei migliori esempi di un sito che utilizza ciò che è già noto sul colore del proprio marchio e lo traduce nel proprio concetto di design in modo intelligente.
Adeline Fashion combina stimoli ambientali e il loro mercato all'interno del modello. Presenta un'estetica naturale all'interno del design, mostrando come un marchio più orientato alla natura può personalizzare questo modello e avere ancora un fascino organico.
6. Blu
Il blu è solitamente visto come:
- Fidato
- Calm
- Saggio
- Sereno
Ci sono molte diverse sfumature di blu e ogni sfumatura può creare un'emozione diversa. Ad esempio, un blu reale intenso può creare l'impressione di regalità e ricchezza. Questo è un buon colore da usare per i marchi di lusso. D'altra parte, un'acqua brillante può creare una sensazione di giovinezza e disinvoltura. Un azzurro può creare una sensazione di calma.
Pensa alle cose a cui associ le diverse tonalità di blu e quale tonalità rappresenta il tuo marchio meglio. Ci sono molti diversi esempi di aziende che utilizzano il colore blu nel design.
Ricorda che il blu è il colore preferito sia dagli uomini che dalle donne, quindi ha senso che questo colore compaia spesso in vari design di siti web.
Un esempio del colore blu utilizzato in modo efficace in un concetto di design è Skype.
Il nome stesso ti fa pensare al cielo - e all'azzurro. Skype incorpora questa aspettativa nel proprio logo e in tutto il design. Nota come creano un equilibrio con alcuni colori neutri e poi aggiungono un tocco di colore in blu con il loro invito all'azione.
Inoltre, l'uso di colori vivaci può indicare giovinezza, divertimento o femminilità. Assicurati solo di usare quei colori con moderazione, o rischi di travolgere il design e il visitatore del sito. L'estetica generale dovrebbe essere piacevole e semplice da navigare.
Fai anche attenzione all'uso di gialli e altri colori chiari che potrebbero non apparire sul bianco o che potrebbero affaticare gli occhi.
Alcune persone preferiscono utilizzare colori più brillanti su un web design scuro.
Tuttavia, un dark web design potrebbe non corrispondere completamente al tono delle tue offerte di prodotti. Tieni presente che un design scuro può creare un'atmosfera imponente, pesante e maschile. L'esempio sopra di Harley Davidson funziona davvero bene con colori scuri e audaci.
Tuttavia, se stai cercando di vendere smalto per unghie, questo look probabilmente non fa per te.
VG Strepre dispone di un file tavolozza di colori simile con il suo modello e utilizza anche pulsanti arrotondati. Il colore complementare evidenzia CTA specifici e funziona bene con l'atmosfera eccessiva del sito.
L'ultima cosa che vuoi avere è che i tuoi CTA si sentano travolgenti.
Split test per vedere quali colori funzionano meglio con il tuo pubblico
Poiché la percezione individuale può avere un tale impatto su quali colori funzionano meglio, una cosa intelligente da fare sul tuo sito web è capire quali colori preferisce il tuo pubblico di destinazione. Potresti esaminarli, ma le risposte potrebbero non essere accurate come condurre alcuni semplici test divisi per vedere a quali rispondono meglio.
Puoi impostare diverse pagine di destinazione e monitorare i risultati delle conversioni, il tempo trascorso sulla pagina, ecc.
Alcune cose che potresti voler testare includono:
- Colore dei titoli
- Colore dei pulsanti CTA
- Colore di sfondo
- Equilibrio tra colore principale e colori neutri
Prova diverse combinazioni e vedi quali funzionano meglio per il tuo sito. Usa colori vivaci e audaci per il tuo invito all'azione (rosso, rosa brillante, blu).
Ad esempio, Nature Air ha provato 17 diverse pagine di destinazione per vedere quale aveva tassi di conversione migliori. Attraverso i test A / B, hanno scoperto che i colori CTA più importanti hanno aumentato le conversioni fino al 591%.
Inoltre, Performable ha eseguito un test in cui ha scambiato il pulsante CTA della home page da verde a rosso e ha visto un aumento del 21% delle conversioni.
Il rosso attira l'attenzione, indipendentemente da come lo tagli, ed è un colore che dovresti almeno incorporare nel tuo sito occasionalmente per un invito all'azione. Fai i tuoi test A / B con questo concetto e guarda che tipo di risultati ottieni.
Takeaways della psicologia del colore
La psicologia del colore ha così tanti elementi diversi perché le persone sono individui unici. Anche la cultura da cui una persona proviene può creare differenze nel modo in cui vede i diversi colori.
I primi passi per determinare quali colori utilizzare nel design dovrebbero iniziare con il capire chi è il tuo target demografico. Questo è un passaggio essenziale per la psicologia del colore e i siti di e-commerce.
Quindi, prendi in considerazione i colori che la maggior parte delle persone associa al tipo di prodotto offerto. Guarda i tuoi concorrenti per vedere quali colori stanno usando. Mentre vuoi essere unico, vuoi anche attenersi ad almeno alcuni standard convenzionali.
Infine, conduci alcuni test A / B per assicurarti di aver analizzato tutto correttamente e di essere aperto a cambiare le cose se necessario.
Comprendere la psicologia del colore è importante, ma non essere così legato da ignorare le tecniche di progettazione di base o il buon senso.
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
e molti altri ...