5 färgpsykologiska tips för att omedelbart göra e-handelsplatser bättre

Färgpsykologi för e-handelssajter

Som designer kan färgpsykologi kanske inte vara något du tänker på regelbundet, men du är troligtvis medveten om att något rött kan få dig att känna dig hungrig och att ett ljust, soligt gult rum kan få dig att känna dig lättsinnig och glad.

Att tillämpa färgpsykologin på e-handelswebbplatser webbdesign kan också ha en emotionell inverkan på besökare. Vilka färger du väljer för designen kan hjälpa till med varumärkesigenkänning och till och med hur sannolikt en kund är lita på ditt varumärke.

Färgpsykologi är i grunden hur färg påverkar människors känslor och beteenden. Får det dem att vilja köpa en artikel? Gör det dem lyckliga, eller visar det en seriös sida?

Färgpsykologi är dock inte så enkelt som rött gör dig hungrig och blått gör att du känner dig lugn. Det finns mycket mer som går in i färgpsykologi, och det har många skiktade aspekter. Mer om du gör detta för e-handelssajter är färgpsykologi desto viktigare.

Innehåll[Show]

Det finns inte en allmänt accepterad standard för hur färg påverkar alla. De känslor eller känslor som färgen skapar är mycket individuella från person till person. Dina egna livserfarenheter kan till och med påverka hur du ser en viss färg och de känslor som den väcker.

I Impact of Color in Marketing Study fann forskare det 90% av första intryck komma från om besökaren tycker att färgen är lämplig för varumärket och om det är lämpligt för det som säljs.

Om kunden tycker att färgen inte passar varumärket är det inte lika troligt att de litar på företaget.

Takeaway?

Var medveten om uppfattningar om färg, som mörka färger, svarta och gråa för robusta, manliga produkter och rosa och lila för flickaktiga produkter. Var bara inte så knuten till färgteorin att du ignorerar varumärke eller designens övergripande estetik.

Börja med en riktigt bra responsiv design och sedan kan du justera färgerna för att hitta de bästa för just ditt varumärke. Du vill också vara medveten om balansen mellan vitt utrymme och om den övergripande designen är tilltalande för det mänskliga ögat.

Hur färger påverkar omvandlingsfrekvensen

Hur man använder färgteori i e-handel webbplats design

När det gäller att tillämpa färgteori på e-handelsdesign är det bästa stället att börja med vilka färger som gör att användare vill köpa din produkt. Cirka 62-90% av den åsikt som en kund gör under de första 90 sekunderna på en webbplats bildas endast av färgval.

Rekommenderad läsning: 

25+ WordPress-teman för e-handel för onlinebutiker (2020)

 

Med det i åtanke kan du se varför det är viktigt att välja rätt färger för din design.

Det sista du vill göra är att stänga av kunder så att de studsar bort från din webbplats.

Som nämnts tidigare, vilken färg som kan locka läsare kan bero på ditt övergripande varumärke och om den kunden uppfattar det som lämpligt för ditt varumärke.

Till exempel, om du säljer motorcykeltillbehör, skulle du förmodligen inte använda en rosa köpknapp unless du säljer specifikt flickaktiga tillbehör till kvinnor. Du vill ha lite konsistens genom hela designen.

Så om du bestämmer dig för att använda röda uppmaningar (CTA) -knappar, bör dina CTA-knappar behålla den färgen genom hela designen. Det enda undantaget från detta är om du bara vill uppmärksamma en viss knapp och inte de andra.

Det som förmodligen är ännu viktigare än färgen du i slutändan väljer är att se till att dina färger är konsekventa på hela din webbplats. Om du bestämmer dig för att använda rött för att skapa en känsla av energi och friskhet, håll dig till den färgpalett från samtal till handlingsknappar till utvalda rubriker.

Se till att du inte använder kolliderande färger som kan skapa en klingande symbol för irritation för webbplatsbesökare.

färgpsykologi

Källa: WebpageFx

Navigera i färgval - hur gör jag det bästa valet?

Att veta vilka färger som ska användas när kan vara lite mer komplicerat, men det är möjligt att ta reda på vad som fungerar bäst för din webbplats.

Till exempel, om du vill skapa en känsla av förtroende, kan blått vara ett bra val. Vi förklarar lite mer nedan om vilka typer av känslor och känslor olika färger kan rikta sig mot.

Det är också smart att veta vilka färger dina konkurrenter använder och bestämma om liknande färger skulle fungera bra för dig eller om du vill sticka ut från tävlingen med mycket olika färger. Vissa webbplatser använder färg mycket bra. Här är några exempel:

  • Dick's sportartiklar använder en mörkgrön för att få en att tänka på naturen. Eftersom de säljer utomhusutrustning är detta det perfekta valet av färg för dem. Du hittar den här färgen i deras rubriker, försäljningsbannrar och några CTA-knappar.kukar sportar

 

  • Rue 21 är en klädaffär online som riktar sig till tonåringar och unga vuxna. Deras kläder är fräscha, billiga och roliga. Det är inte förvånande att färgerna som används på denna webbplats är unga, fräscha, ljusblå och rosa. Lägg också märke till att fokus ligger på den billiga prissättningen med små ljusrosa bubblor som visar de olika prisklasserna i butiken. Dessa är nästan en uppmaning till webbplatsbesökaren.

rue21 

Målpersoner och färg - vem är min produkt avsedd för?

 

Det är mycket viktigt att du förstår din målgrupp och vilka typer av färger de kan förvänta dig av din typ av webbplats. Så ditt första steg i att välja en färgpalett bör börja med att studera din demografiska mål.

Om du ännu inte har skapat en användarpersona för din målgrupp bör du skapa minst en.

Detta är i grunden en fiktiv person som representerar din mest troliga kund. Du kan ge honom eller henne ett namn, egenskaper, potentiell karriär och så vidare. Detta kan hjälpa dig att bättre förstå publiken som du skriver för, och du kan sedan rikta ditt innehåll - och dina färgval - mot denna personlighetstyp.

Det har till exempel visats att män tenderar att föredra blått med 57%, följt av grönt (14%) och svart (9%).

Ett exempel på användning av blått kombinerat med ett maskulint utseende är Mountain Productions Rigging Equipment and Services. Lägg märke till hur färgerna är djupa och mörka, vilket ger hela sidan ett maskulint utseende. Pops of blue ger en favoritfärg, vilket skapar en stark uppmaning till handling och sidan har tillräckligt med vitt utrymme för att balansera hela utseendet.

tackling

Kvinnor brukar också föredra blått med 35%, följt tätt av lila med 23% och rött med 9%.

Ett bra exempel på användningen av purpur i en webbdesign kan ses på webbplatsen för Claire's, som säljer prisvärda mode och smycken. Denna webbplats använder några band av lila, men den använder också starka stänk av ljus färg för att visa sin ungdomliga sida, särskilt i bilden av de unga tjejerna som bär Claires tillbehör.

Webbplatsen drar dock också in lite blått och förstår att blått är en favorit och pålitlig färg bland kvinnor. Du kommer till och med att upptäcka lite rött på den här webbplatsen, vilket bevisar att de som designade den tydligt förstår att de flesta kvinnor föredrar dessa färger framför andra.

I slutändan kan du verkligen inte gå fel med blått, eftersom de flesta gillar färgen och ser den som pålitlig och lugnande.
Claires

Färger och vad de förmedlar

 

Medan du bör komma ihåg att effekten en färg kan variera beroende på upplevelsen för personerna som tittar på en viss sida, det finns några tumregler om vad varje färg betyder att du kan använda för dina mönster:

1. Röd

Röd tenderar att förmedla:

  • Energi
  • Kraft
  • Passion
  • Kärlek


Rött kan skapa spänning, och det väcker uppmärksamhet. Lägg märke till hur webbdesignen nedan är ljus och energisk.

Fantasy Shopping använder rött i båda delarna av rubriken och för att utgöra en starkare punkt för en fråga och i själva designen. Lägg märke till hur den röda riktar din uppmärksamhet på vart designern vill att den ska gå.

balenciaga e-handelsplatser färg

XStore erbjuder en mjukare röd mall men den fortsätter att ha ett djärvt uttalande med de diagonala linjerna som kommer mot mitten. Kontaktpunkten leder dig direkt till huvudtexten. 

XStore

2. Gul

Gult framkallar ofta:

  • Joy
  • Energi
  • Värme
  • Gladlynthet


Gult skapar ofta känslor av lycka och lätthet.

 

Lipton Tea gör ett utmärkt jobb med att använda gult för att skapa en ljus och solig stämning. Inte bara är iste förknippat med glada tider, utan också med solte och sommar.

De ljusa gula i denna design gör dig lycklig och kan hjälpa dig att föreställa dig det roliga med en grill på baksidan. Det gör att du vill springa ut och köpa lite te så att du kan göra ditt eget soltebrygga, eller hur?

Lägg märke till hur även produktfoton återspeglar denna användning av solgult.

Lipton Tea - färgpsykologi för e-handelssajter

Citrons mall också förmedlar värme och livlighet genom sin design med en antydan till gult genom de olika sidorna.

Användare uppmuntras att flytta markören över det övre navet och ändra den genomskinliga svarta till ett gult streck. Denna design lyfter inte bara fram energi utan den uppmanar andra att känna sig föryngrade när de bläddrar igenom deras webbplats.

citron

3. Svart & Grått

Svart och grått skapar ofta en känsla av:

  • Myndighet
  • Kraft
  • Styrka
  • Manlighet
  • Neutralitet

Dessa färger skapar också en känsla av förtroende och pålitlighet.

Harley Davidson använder svarta och gråa mycket effektivt för att skapa en kraftfull, maskulin webbplats som talar om makt och auktoritet. Lägg märke till hur färgerna är ganska mörka förutom den orange CTA-knappen.

Du kan inte låta bli att se till den knappen, som effektivt trattar webbplatsbesökaren dit företaget vill att de ska gå.

Läs mer om svarta webbplatser och mörk webbdesign här.

Harley Davidson - färgpsykologi

Phoenix-temat använder också svart och grå i sin mall och har en stark och sofistikerad persona. Det är en snygg mall med minimala distraktioner.

Denna typ av webbplats tilltalar företagsledare som inte vill ha gimmicks och kom till webbplatsen för ett syfte. Om du är intresserad av att implementera minimalistiska webbdesigntekniker och mer kanske du vill kolla in det den här artikeln om minimala WordPress-teman.

Phoenix

4. Orange

Orange tenderar att främja:

  • Lycka
  • Spänning
  • Värme
  • Raffinemang

Som rött och gult kan orange skapa en känsla av energi och lycka. Det ses dock också som en mer sofistikerad färg. Ett bra exempel på användning av apelsin i en design är Sunny Delight Beverages. Eftersom det här är apelsinsmakade drycker är det vettigt att de använder den här färgen i sin design.

Kom ihåg att en del av färgens psykologi är att använda färger som besökaren förväntar sig att ditt varumärke använder. Sunny D använder detta koncept mycket bra. Designen använder orange kanter, orange navigeringsknappar och orange i sina bilder och logotyp. Justeringen av det djupblå och vita utrymmet erbjuder ett sofistikerat utseende som visar att drycken inte bara är för barn utan snarare för alla åldrar.

Soligt D

Lägg märke till hur Omegas mall har så mycket livskraft genom sin design på grund av den djärva orange stapeln. Det är en inbjudande layout och alla funktioner de vill påpeka är i orange. Estetiskt kan den här enkla designen innehålla mycket värde för ett potentiellt företag.

omega

5. Grön

Grön förmedlar ofta:

  • Natur
  • Tillväxt
  • Pengar
  • Fertilitet


Green väcker känslor av lugn och avkoppling. Du ser ofta märken som är miljövänliga eller relaterade till utomhus med den här färgen. Dessutom kan finansiella företag använda grönt för att visa att du kan tjäna pengar - tänk banker, pengarbloggar etc.

John Deere är ett bra exempel på användningen av grönt i en webbdesign.

De använder en mycket specifik nyans av grönt, och det är välkänt runt om i världen. Varumärkets traktorer finns i gröna och gula färger, och det är därför vettigt att dessa färger skulle dyka upp i John Deeres webbplatsdesign.

När allt kommer omkring har countrylåtar till och med skrivits om "John Deere Green."

Lägg märke till hur platsexemplet nedan använder den ljusgröna, men den har också en fin balans mellan neutrala färger för att förhindra att greenen blir för överväldigande.

En professionell designer kan ta en titt på sidans totala balans och se till att texten visas på ett läsbart sätt, men som fortfarande knyter ihop färgerna till det övergripande varumärkeskonceptet som hur Badgeland i NZ använder färgen grön för att återspegla deras varumärke på webbplatsen.

Detta är ett av de bästa exemplen på en webbplats som använder det som redan är känt om deras varumärkesfärg och översätter det till sitt designkoncept på ett smart sätt.

john deere green - färgpsykologi

Adeline Fashion kombinerar miljöstimuli och deras marknad i mallen. Den har naturlig estetik i designen som visar hur ett varumärke som är mer naturorienterat kan anpassa den här mallen och ändå ha en organisk tilltalning.

adeline

6. Blå

Blå ses vanligtvis som:

  • Pålitlig
  • Lugna
  • Wise
  • Lugn

Det finns många olika blå nyanser, och varje nyans kan skapa olika känslor. Till exempel kan en djup kungsblå skapa intryck av royalty och rikedom. Detta är en bra färg för lyxmärken att använda. Å andra sidan kan en ljus vatten skapa en känsla av ungdom och avslappnadhet. En ljusblå kan skapa en känsla av lugn.

Tänk på de saker du associerar olika nyanser av blått till och vilken nyans som representerar ditt varumärke bäst. Det finns många olika exempel på att företag använder färgen blått i sin design.

Kom ihåg att blått är en favoritfärg bland både män och kvinnor, så det är vettigt att den här färgen dyker upp ofta i olika webbdesigner.

Ett exempel på den blå färg som används effektivt i ett designkoncept är Skype.

Själva namnet får dig att tänka på himlen - och himmelblå. Skype införlivar denna förväntan i sin logotyp och genom hela sin design. Lägg märke till hur de skapar en balans med några neutrala färger och lägg sedan till en färgfärg i blått med sin uppmaning till handling.

Dessutom kan användning av ljusa färger indikera ungdom, kul eller femininitet. Var bara säker på att du använder dessa färger med måtta, annars riskerar du att överväldiga designen och webbplatsbesökaren. Den övergripande estetiken ska vara tilltalande och enkel att navigera.

Var också medveten om att använda gula och andra ljusa färger som kanske inte dyker upp i vitt eller kan tänka på ögonen.

Vissa människor föredrar att använda ljusare färger på en mörk webbdesign.

Men en mörk webbdesign kanske inte helt matchar tonen i dina produktutbud. Tänk på att en mörk design kan skapa en imponerande, tung och maskulin känsla. Exemplet ovan på Harley Davidson fungerar riktigt bra med mörka, djärva färger.

Men om du försöker sälja nagellack är detta utseende förmodligen inte för dig.

skype

VG Strepre har en liknande färgpalett med sin mall och använder också rundade knappar. Den kompletterande färgen lyfter fram specifika uppmaningar och fungerar bra med webbplatsens överkänsla.

Det sista du vill ha är att dina uppmaningar känner sig överväldigande.

stepre

Delad testning för att se vilka färger som fungerar bäst med din publik

 

Eftersom individuell uppfattning kan ha en sådan inverkan på vilka färger som fungerar bäst, är en smart sak att göra på din egen webbplats att ta reda på vilka färger din egen målgrupp föredrar. Du kan undersöka dem, men svaren är kanske inte lika exakta som att göra några enkla delningstester för att se vilka de svarar bäst på.

Du kan ställa in olika målsidor och spåra resultatet av konverteringar, tid på sidan etc.

Några saker du kanske vill testa är:

  • Rubriker i färg
  • Färg på CTA-knappar
  • Färg på bakgrunden
  • Balans mellan huvudfärg och neutrala färger

Prova olika kombinationer och se vilka som fungerar bäst för din webbplats. Använd starka färger för din CTA (röd, ljusrosa, blå).

Exempelvis testade Nature Air 17 olika målsidor för att se vilken som hade bättre omvandlingsfrekvenser. Genom A / B-test fann de att de mer framträdande CTA-färgerna ökade konverteringarna med så mycket som 591%.

Dessutom gjorde Performable ett test där de bytte sin hemsida CTA-knapp från grönt till rött och såg en 21% ökning av konverteringar.

Rött är en uppmärksamhet oavsett hur du skär det, och det är en färg som du åtminstone borde införliva på din webbplats ibland för en uppmaning till handling. Gör din egen A / B-testning med detta koncept och se vilken typ av resultat du får.

Takeaways för färgpsykologi

Färgpsykologi har så många olika element eftersom människor är unika individer. Även den kultur som en person kommer från kan skapa skillnader i hur de ser olika färger.

Dina första steg för att avgöra vilka färger som ska användas i designen bör börja med att ta reda på vem din demografiska mål är. Detta är ett viktigt steg för färgpsykologi och e-handelssajter.

Ta sedan hänsyn till de färger som majoriteten av människor associerar med den typ av produkt som erbjuds. Titta på tävlingen för att se vilka färger de använder. Medan du vill vara unik vill du också hålla fast vid åtminstone några konventionella standarder.

Slutligen gör några A / B-tester för att vara säker på att du har analyserat allt korrekt och vara öppen för att ändra saker om det behövs.

Att förstå färgpsykologi är viktigt, men var inte så knuten till den att du ignorerar grundläggande designtekniker eller sunt förnuft.

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...