5 väripsykologiavinkkiä verkkokauppasivustojen parantamiseksi välittömästi

Väripsykologia verkkokauppasivustoille

Suunnittelijana väripsykologia ei ehkä ole jotain, mistä ajattelet säännöllisesti, mutta olet todennäköisesti tietoinen siitä, että jotain punaista voi saada sinut nälkäiseksi ja että kirkas, aurinkoinen keltainen huone voi saada sinut tuntemaan itsesi kevyeksi ja onnelliseksi.

Väripsykologian soveltaminen verkkokauppasivustojen web-suunnitteluun voi myös vaikuttaa emotionaalisesti sivuston kävijöihin. Mitkä värit valitset suunnittelulle, voivat auttaa tunnistamaan tuotemerkin ja jopa kuinka todennäköinen asiakas on luottaa brändiin.

Väripsykologia on pohjimmiltaan tapa, jolla väri vaikuttaa ihmisten tunteisiin ja käyttäytymiseen. Saako se heidät haluamaan ostaa tuotteen? Tekeekö se heistä onnellisuutta vai näyttääkö se vakavaa puolta?

Väripsykologia ei kuitenkaan ole niin yksinkertaista kuin punainen saa sinut nälkäiseksi, ja sininen saa sinut tuntemaan olosi rauhalliseksi. Väripsykologiaan menee paljon enemmän, ja siinä on monia kerrostettuja puolia. Enemmän, jos teet tämän verkkokauppasivustoille, väripsykologia on sitäkin tärkeämpää.

Sisällys[show]

Ei ole yleisesti hyväksytty standardi sille, miten väri vaikuttaa kaikkiin. Värin luomat tunteet tai tunteet ovat hyvin yksilöllisiä henkilöstä toiseen. Omat elämäkokemuksesi voivat jopa vaikuttaa siihen, miten näet tietyn värin ja sen aiheuttamat tunteet.

Tutkimuksessa havaittiin värin vaikutusta markkinointitutkimuksessa 90% ensivaikutelmista tulevat siitä, onko kävijä mielestä väri sopiva tuotemerkkiin ja onko se sopiva myydylle.

Jos asiakkaan mielestä väri ei sovi tuotemerkille, he eivät todennäköisesti luota yritykseen.

Nouto?

Ota huomioon värien käsitykset, kuten tummat värit, mustat ja harmaat karuille, miehellisille tuotteille ja vaaleanpunaiset ja purppurat tytöille. Älä kuitenkaan ole niin sidottu väriteoriaan, ettet välitä brändäystä tai suunnittelun yleistä estetiikkaa.

Aloita todella hyvällä reagoivalla suunnittelulla ja sitten voit säätää värejä löytääksesi parhaimmat omalle brändillesi. Haluat myös olla tietoinen valkoisen tilan tasapainosta ja siitä, onko kokonaismuoto miellyttävä ihmissilmälle.

Kuinka värit vaikuttavat muuntokursseihin

Väriteorian käyttäminen verkkokauppasivustojen suunnittelussa

Kun on kyse väriteorian soveltamisesta verkkokaupan suunnitteluun, paras paikka on aloittaa siitä, millä väreillä käyttäjät haluavat ostaa tuotteesi. Noin 62-90% asiakkaan mielipiteestä, jonka asiakas antaa verkkosivustolla ensimmäisten 90 sekunnin aikana, muodostuu pelkästään värivalinnasta.

Suositeltua lukemista: 

25+ parasta verkkokaupan verkkokaupan WordPress-teemaa (2020)

 

Tässä mielessä voit nähdä, miksi on tärkeää valita oikeat värit suunnittelulle.

Viimeinen asia, jonka haluat tehdä, on sammuttaa asiakkaat, jotta he poistuvat sivustostasi.

Kuten aiemmin mainittiin, mikä väri saattaa houkutella lukijoita, voi riippua kokonaisbrändistäsi ja siitä, pitääkö asiakas sitä brändisi kannalta sopivana.

Jos esimerkiksi myyt moottoripyörätarvikkeita, et todennäköisesti käyttäisi vaaleanpunaista ostopainikettaless myyt erityisesti tyttömäisiä asusteita naisille. Haluat olla johdonmukainen koko suunnittelussa.

Joten, jos päätät käyttää punaisia ​​toimintakehotuspainikkeita, CTA-painikkeidesi tulisi säilyttää tämä väri koko suunnittelussa. Ainoa poikkeus tähän on, jos haluat vain kiinnittää huomion yhteen tiettyyn painikkeeseen eikä muihin.

Mikä on todennäköisesti vielä tärkeämpää kuin valitsemasi väri, on varmistaa, että värisi ovat yhdenmukaisia ​​koko sivustossasi. Jos päätät käyttää punaista tunnetta energian ja tuoreuden luomiseksi, pidä kiinni tästä väripaletista toimintakehotuspainikkeista suosittuihin otsikoihin.

Varmista, ettet käytä ristiriitaisia ​​värejä, jotka saattavat luoda häiritsevän symbolin verkkosivuston kävijöille.

väripsykologia

Lähde: WebpageFx

Värivaihtoehdoissa liikkuminen - miten voin tehdä parhaan valinnan?

Tietäen, mitä värejä milloin käyttää, voi olla hieman monimutkaisempaa, mutta on mahdollista selvittää, mikä toimii parhaiten sivustollesi.

Esimerkiksi, jos haluat luoda luottamuksen tunteen, sininen voi olla hyvä valinta. Selitämme hieman alla, millaisiin tunteisiin ja tunteisiin eri värit saattavat kohdistaa.

On myös älykästä tietää, mitä värejä kilpailijasi käyttävät, ja päättää, sopivatko samanlaiset värit sinulle hyvin vai haluatko erottua kilpailusta hyvin erilaisilla väreillä. Jotkut sivustot käyttävät väriä hyvin. Tässä on muutama esimerkki:

  • Dickin urheiluvälineet käyttää tummanvihreää saadakseen ajattelemaan ulkoilmaa. Koska he myyvät ulkovarusteita, tämä on täydellinen värivalinta heille. Löydät tämän värin otsikoista, myyntibannereista ja joistakin toimintakehotuspainikkeista.munaa urheilua

 

  • Rue 21 on online-vaatetusliike, joka on suunnattu teini-ikäisille ja nuorille aikuisille. Heidän vaatteensa ovat tuoreita, halpoja ja hauskoja. Ei ole yllättävää, että tällä sivustolla käytetyt värit ovat nuoria, raikkaita, kirkkaita sinisiä ja vaaleanpunaisia. Huomaa myös, että painopiste on halpassa hinnoittelussa, jossa on vähän kirkkaan vaaleanpunaisia ​​kuplia, jotka osoittavat myymälän eri hintaluokat. Nämä ovat melkein kehotus toimia sivuston kävijälle.

rue21 

Kohdepersonas ja väri - kenelle tuotteeni on tarkoitettu?

 

On elintärkeää ymmärtää kohdeyleisösi ja sen tyyppiset värit, joita he odottavat verkkosivustoltasi. Joten ensimmäinen askel värivalikoiman valinnassa on aloitettava kohde-väestötietojen tutkimisella.

Jos et ole vielä luonut käyttäjähenkilöä kohdeyleisöllesi, sinun on luotava ainakin yksi.

Tämä on pohjimmiltaan kuvitteellinen henkilö, joka edustaa todennäköisintä asiakasta. Voit antaa hänelle nimen, piirteet, mahdollisen uran ja niin edelleen. Tämä voi auttaa sinua ymmärtämään paremmin yleisöä, jolle kirjoitat, ja voit sitten suunnata sisältösi - ja värivalinnat - tähän persoonallisuustyyppiin.

Esimerkiksi miesten on osoitettu suosivan sinistä 57%, jota seuraa vihreä (14%) ja musta (9%).

Yksi esimerkki sinisen käytöstä yhdistettynä maskuliiniseen ulkoasuun on Mountain Productionsin takilaitteet ja -palvelut. Huomaa, kuinka värit ovat syvät ja tummat, antaen koko sivulle maskuliinisen ilmeen. Siniset popit tuovat suosikkivärin, mikä luo vahvan toimintakehotuksen, ja sivulla on riittävästi valkoista tilaa tasapainottaakseen koko ulkoasua.

riki

Naiset suosivat yleensä myös sinistä 35%, jota seuraa tarkalleen purppura 23% ja punainen 9%.

Hyvä esimerkki violettien käytöstä verkkosuunnittelussa näkyy Clairen verkkosivustolla, joka myy kohtuuhintaisia ​​muoteja ja koruja. Tämä verkkosivusto käyttää joitain purppuranvärisiä nauhoja, mutta se käyttää myös voimakkaita kirkkaita värejä osoittamaan heidän nuorekas puolensa, erityisesti Clairen lisävarusteita käyttävien nuorten tyttöjen kuvassa.

Sivusto vetää kuitenkin myös hieman sinistä, ymmärtäen, että sininen on suosikki ja luotettava väri naisten keskuudessa. Voit jopa huomata punaisia ​​tällä verkkosivustolla, mikä osoittaa, että ne, jotka suunnittelivat sen, ymmärtävät selvästi, että useimmat naiset pitävät näistä väreistä parempia.

Viime kädessä et todellakaan voi mennä pieleen sinisen kanssa, koska useimmat ihmiset pitävät väristä ja pitävät sitä luotettavana ja rauhoittavana.
Claires

Värit ja mitä ne välittävät

 

Vaikka sinun on pidettävä mielessä, kuinka värin vaikutus voi vaihdella tietyn sivun katselijoiden ihmisten kokemusten perusteella, on olemassa joitain nyrkkisääntöjä siitä, mitä kukin väri tarkoittaa, että voit käyttää mallejasi:

1. Punainen

Punainen välittää:

  • energia
  • teho
  • Intohimo
  • Rakkaus


Punainen voi luoda jännitystä, ja se herättää huomiota. Huomaa, kuinka alla oleva verkkosivujen suunnittelu on kirkas ja energinen.

Fantasy Shopping käyttää punaista otsikon molemmissa osissa ja antaa vahvemman pisteen kysymykseen ja itse suunnitteluun. Huomaa, kuinka punainen kiinnittää huomiosi mihin suunnittelija haluaa sen menevän.

balenciaga-verkkokauppasivustojen väri

XStore tarjoaa pehmeämmän punateemaisen mallin, mutta siinä on edelleen rohkea lausuma, jossa lävistäjät tulevat kohti keskustaa. Keskipiste johtaa sinut suoraan päätekstiin. 

XStore

2. Keltainen

Keltainen herättää usein:

  • Ilo
  • energia
  • lämpö
  • Iloisuus


Keltainen aiheuttaa usein onnellisuuden ja keveyden tunteita.

 

Lipton Tea tekee erinomaisen työn keltaisen käyttämisestä kirkkaan ja aurinkoisen tunnelman luomiseksi. Jäätee ei liity pelkästään onnellisiin aikoihin, vaan myös aurinkoteeseen ja kesään.

Tämän muotoilun kirkkaat keltaiset saavat sinut onnelliseksi ja voivat auttaa sinua kuvaamaan takapihan grillin hauskaa. Se saa sinut ajamaan heti ulos ja ostamaan teetä, jotta voit tehdä oman aurinkoteesi, eikö vain?

Huomaa, kuinka jopa tuotekuvat heijastavat tätä aurinkoisen keltaista käyttöä.

Lipton Tea - verkkopalvelusivustojen väripsykologia

Sitruunan malli myös välittää lämpöä ja elävyyttä muotoilunsa avulla keltaisella sävyllä eri sivuilla.

Käyttäjiä kannustetaan siirtämään kohdistin yläsivun yli muuttamalla läpikuultava musta keltaiseksi. Tämä muotoilu ei vain korosta energiaa, vaan se kutsuu myös muita tuntemaan itsensä nuoremmiksi selatessaan sivustoaan.

sitruuna

3. Musta ja harmaa

Musta ja harmaa luovat usein tunteen:

  • Viranomainen
  • teho
  • Vahvuus
  • miehisyys
  • puolueettomuus

Nämä värit luovat myös luottamuksen ja luotettavuuden tunteen.

Harley Davidson käyttää mustia ja harmaita erittäin tehokkaasti vahvan, maskuliinisen verkkosivuston luomiseen, joka puhuu voimasta ja auktoriteetista. Huomaa, kuinka kaikki värit ovat melko tummia, lukuun ottamatta oranssia CTA-painiketta.

Et voi auttaa, mutta vetää silmäsi painikkeeseen, joka kanavoi sivuston kävijää sinne, missä yritys haluaa heidän menevän.

Lue lisää mustat verkkosivustot ja tumma verkkosivujen suunnittelu täällä.

Harley Davidson - väripsykologia

Phoenix-teema käyttää myös musta ja harmaa mallissaan ja sillä on vahva ja hienostunut persoona. Se on tyylikäs malli, jolla on vähän häiriöitä.

Tämän tyyppinen sivusto vetoaa yritysjohtajiin, jotka eivät halua temppuja ja tulivat sivustolle yhtä tarkoitusta varten. Jos olet kiinnostunut toteuttamaan minimalistisia verkkosuunnittelutekniikoita ja muuta, kannattaa ehkä tarkistaa tämä artikkeli minimaalisista WordPress-teemoista.

feeniks

4. Oranssi

Oranssi pyrkii mainostamaan:

  • Onnellisuus
  • jännitys
  • lämpö
  • kehittyneisyys

Kuten punainen ja keltainen, oranssi voi luoda energian ja onnen tunteen. Sitä pidetään kuitenkin myös hienostuneempana värinä. Hyvä esimerkki oranssin käytöstä suunnittelussa on Sunny Delight Beverages. Koska nämä ovat appelsiinimakuisia juomia, on järkevää, että he käyttävät tätä väriä suunnittelussaan.

Muista, että osa värien psykologiasta käyttää värejä, joita sivuston kävijä odottaa brändisi käyttävän. Sunny D hyödyntää tätä konseptia erittäin hyvin. Kuvassa ja logossa käytetään oranssia reunoja, oransseja navigointipainikkeita ja oranssia. Syvän sinisen ja valkoisen tilan rinnakkaisuus tarjoaa hienostuneen ilmeen, joka osoittaa, että juoma ei ole vain lapsille, vaan kaiken ikäisille.

Aurinkoinen D.

Huomaa, kuinka Omegan mallilla on niin paljon eloisuutta suunnittelunsa ansiosta rohkean oranssin palkin takia. Se on kutsuva asettelu ja kaikki ominaisuudet, jotka he haluavat korostaa, ovat oransseja. Esteettisesti tämä yksinkertainen muotoilu voisi pitää potentiaalista yritystä arvokkaana.

Omega

5. Vihreä

Vihreä välittää usein:

  • luonto
  • Kasvu
  • Raha
  • Hedelmällisyys


Vihreä herättää rauhallisuuden ja rentoutumisen tunteita. Näet usein ympäristöystävällisiä tai ulkoiluun liittyviä tuotemerkkejä, jotka käyttävät tätä väriä. Myös rahoitusyhtiöt saattavat käyttää vihreää osoittaakseen, että voit ansaita rahaa - ajattele pankkeja, rahablogeja jne.

John Deere on hyvä esimerkki vihreän käytöstä verkkosivujen suunnittelussa.

He käyttävät hyvin erityistä vihreää sävyä, ja se tunnetaan hyvin ympäri maailmaa. Tuotemerkin traktorit ovat vihreitä ja keltaisia, joten on vain järkevää, että nämä värit näkyvät John Deeren verkkosivujen suunnittelussa.

Loppujen lopuksi country-kappaleita on kirjoitettu jopa John Deere Greenistä.

Huomaa, kuinka alla oleva esimerkki käyttää kirkasta vihreää, mutta siinä on myös mukava neutraalien värien tasapaino, jotta vihreä ei ole liian ylivoimainen.

Ammattimainen suunnittelija voi tarkastella sivun yleistä tasapainoa ja varmistaa, että teksti näkyy luettavalla tavalla, mutta joka silti sitoo värit brändin yleiskonseptiin, kuten miten Badgeland Uusi-Seelanti käyttää vihreää väriä heijastamaan tuotemerkkiään sivustolla.

Tämä on yksi parhaista esimerkeistä sivustosta, jossa hyödynnetään tuotemerkin väreistä jo tunnettua ja muunnetaan se älykkäästi suunnittelukonseptiinsa.

john deere green - väripsykologia

Adeline Fashion yhdistää mallissa ympäristön ärsykkeet ja niiden markkinat. Siinä on luonnollinen estetiikka suunnittelussa, mikä osoittaa, kuinka luontoon suuntautunut tuotemerkki voi muokata tätä mallia ja silti olla orgaaninen.

adeline

6. Sininen

Sininen nähdään yleensä:

  • Luotettava
  • Calm
  • Viisas
  • Seesteinen

Sinistä on monia erilaisia ​​sävyjä, ja jokainen sävy voi luoda erilaisen tunteen. Esimerkiksi syvä kuninkaallinen sininen voi luoda vaikutelman kuninkaallisuudesta ja vauraudesta. Tämä on hyvä väri ylellisyystuotemerkkien käyttöön. Toisaalta kirkas vesi voi luoda tunteen nuoruudesta ja rennosta. Vaaleansininen voi luoda tunteen rauhallisuudesta.

Ajattele asioita, joihin yhdistät erilaiset siniset sävyt ja mikä sävy edustaa brändiäsi parhaiten. On olemassa monia erilaisia ​​esimerkkejä yrityksistä, jotka käyttävät sinistä väriä suunnittelussa.

Muista, että sininen on suosikki väri sekä miehillä että naisilla, joten on järkevää, että tämä väri näkyy usein erilaisissa verkkosivujen malleissa.

Yksi esimerkki sinisestä väristä, jota tehokkaasti käytetään suunnittelukonseptissa, on Skype.

Jo nimi saa sinut ajattelemaan taivasta - ja taivaansinistä. Skype sisällyttää tämän odotuksen heidän logoonsa ja koko suunnitteluun. Huomaa, kuinka he luovat tasapainon neutraaleilla väreillä ja lisäävät sitten sinisen väripyynnön toimintakehotuksellaan.

Lisäksi kirkkaiden värien käyttö voi osoittaa nuoruutta, hauskuutta tai naisellisuutta. Varmista vain, että käytät näitä värejä maltillisesti, tai muuten saatat rajoittaa suunnittelua ja sivuston kävijää. Yleisen esteettisen tulisi olla miellyttävä ja helppo navigoida.

Muista myös käyttää keltaisia ​​ja muita vaaleita värejä, jotka eivät välttämättä näy valkoisilla tai voivat rasittaa silmiä.

Jotkut ihmiset haluavat käyttää kirkkaita värejä tummassa verkkosuunnittelussa.

Tumma web-suunnittelu ei kuitenkaan välttämättä vastaa täysin tuotevalikoimaasi. Muista, että tumma muotoilu voi luoda vaikuttavan, raskaan ja maskuliinisen tunnelman. Yllä oleva esimerkki Harley Davidsonista toimii todella hyvin tummien, rohkeiden värien kanssa.

Kuitenkin, jos yrität myydä kynsilakkaa, tämä ilme ei todennäköisesti ole sinua varten.

skype

VG Strepre sisältää a samanlainen väripaletti mallineen ja käyttää myös pyöristettyjä painikkeita. Täydentävä väri korostaa tiettyjä CTA: ita ja toimii hyvin sivuston yli-tuntuman kanssa.

Viimeinen asia, jonka haluat saada, on CTA: nne tuntea ylivoimainen.

stepre

Jaettu testaus nähdäksesi, mitkä värit toimivat parhaiten yleisösi kanssa

 

Koska yksilöllisellä käsityksellä voi olla tällainen vaikutus siihen, mitkä värit toimivat parhaiten, yksi älykäs asia omalla verkkosivustollasi on selvittää, mitä värejä oma kohdeyleisösi mieluummin haluaa. Voisit tutkia heitä, mutta vastaukset eivät välttämättä ole yhtä tarkkoja kuin yksinkertaisen jaetun testauksen suorittaminen nähdäksesi, mihin he vastaavat parhaiten.

Voit määrittää erilaisia ​​aloitussivuja ja seurata tulosten tuloksia, sivulla vietettyä aikaa jne.

Joitakin asioita, jotka haluat ehkä testata, ovat:

  • Otsikoiden väri
  • CTA-painikkeiden väri
  • Taustan väri
  • Tasapaino pää- ja neutraalivärien välillä

Kokeile erilaisia ​​yhdistelmiä ja katso, mitkä sopivat parhaiten sivustollesi. Käytä kirkkaita rohkeita värejä CTA: ssa (punainen, kirkkaan vaaleanpunainen, sininen).

Esimerkiksi Nature Air kokeili 17 erilaista laskeutumissivua saadakseen selville, kumman tulosprosentit olivat paremmat. A / B-testauksen avulla he havaitsivat, että näkyvämmät CTA-värit kasvattivat tuloksia jopa 591%.

Lisäksi Performable teki testin, jossa he vaihtivat kotisivun CTA-painikkeen vihreästä punaiseksi ja näkivät konversioiden kasvun 21%.

Punainen on huomiota herättävä tekijä riippumatta siitä, kuinka leikkaat sen, ja se on väri, joka sinun tulisi ainakin sisällyttää sivustoosi ajoittain toimintakehotusta varten. Suorita oma A / B-testauksesi tällä konseptilla ja katso, millaisia ​​tuloksia saat.

Väripsykologian takeaways

Väripsykologiassa on niin monia eri elementtejä, koska ihmiset ovat ainutlaatuisia yksilöitä. Jopa kulttuuri, josta henkilö kotoisin voi luoda eroja siinä, miten he näkevät eri värit.

Ensimmäisten vaiheidesi määrittelemisessä käytettävät värit tulisi aloittaa selvittämällä, kuka kohderyhmäsi on. Tämä on olennainen vaihe väripsykologian ja verkkokaupan sivustoissa.

Ota seuraavaksi huomioon värit, joita suurin osa ihmisistä yhdistää tarjottavaan tuotetyyppiin. Katso kilpailustasi nähdäksesi, mitä värejä he käyttävät. Vaikka haluat olla ainutlaatuinen, haluat myös noudattaa ainakin joitain tavanomaisia ​​standardeja.

Suorita lopuksi joitain A / B-testejä varmistaaksesi, että olet analysoinut kaiken oikein, ja ole valmis muuttamaan asioita tarvittaessa.

Väripsykologian ymmärtäminen on tärkeää, mutta älä ole niin sitoutunut siihen, että sivuutat suunnittelun perustekniikat tai terveen järjen.

kirjailijasta
David Attard
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...