Stäng Huvudmeny

Färger som konverterar. Optimera din design – så här!

UX-Design Webbpsykologi

Röd knapp konverterar bäst va? Eller var det grön?

Eller, är det olika för Asiater och Européer?

Eller, spelar det egentligen någon roll?

Vad sägs om att vi lägger skrönan om att det finns en ”perfekt knappfärg” bakom oss en gång för alla?

Istället tittar vi på en metod för att hitta en färg som funkar för just dig.

I din färgpalett. För dina besökare. För dina konverteringsmål.

 

Hypotes: Det finns en absolut/perfekt knappfärg

Det finns få saker som folk har så starka åsikter om som design. Och ofta är det de med minst kunskap om ämnet som tydligast yttrar sina tankar (HiPPO’s någon?).

Så vi vill gå från: åsikter/attityder, till fakta/kunskaper/principer.

Och det första vi kanske tänker på då är att det finns en ”bästa knappfärg”?! Något i stil med:

”Om vår målgrupp är västerländska yngre tävlingsinriktade män, och vi vill väcka impulsen för dom att – Jag borde slå till nu – då ska vi alltid använda orange”.

Typ.

Och det finns sådana färgteorier. Att en viss färg fungerar bäst för att väcka en viss känsla för en viss målgrupp.

Här är ett test som vår partner Widerfunnel gjorde som har bevis för detta arbetssätt: Using color psychology to increase conversions

 

Röd eller grön knapp?

Vi började bloggposten med frågan om röd eller grön knapp. Låt oss höra vad var grundare John Ekman har att säga om den saken:
 

John ekman

Det kan inte undgått någon att Conversionista är väldigt rött företag. Och jag har ofta fått frågan:

– ” Du John, är inte så att rött signalerar fara, typ när man kommer in på en röd hemsida så vill man bara fly därifrån, eller hur tänker ni”?

Jag visste inte riktigt vad skulle svara på den frågan, men så fick jag svaret en dag då jag tittade upp på fasaden på Mörby centrum.

Där satt en tavla med olika varumärken och affärer som finns inuti. Det var nästan bara röda varumärken. Och jag tänkte såhär:

-” Om nu rött är så himla farligt, skulle inte en människa våga ge sig in på vare sig ICA, Hemköp eller H&M?! Men vänta nu – det är ju några av Sveriges och världens mest framgångsrika handlare, som byggt sin framgång just genom sin förmåga att få folk att kliva in i deras butiker. Det är något lurt här.”
 

 

Det verkade alltså som att rött var bra på att skapa uppmärksamhet. Inte alls farligt. Och då kanske rött är den bästa knappfärgen?!

Ett A/B-test som Hubspot utförde resulterade i 21% uplift för en röd CTA vs. en grön:
 

Ok – är vi alltså överens om att rött är bäst nu?

Tyvärr så är bara så att det finns en massa andra tester som visar på det motsatta dvs att grönt är det bästa.

Tyvärr så finns det ganska lite bevis i konverteringsoptimeringsvärlden på att det är just en viss färg som klår andra färger generellt.

Så här kan vi hålla på i oändlighet. Och för att bryta oss ur den loopen, måste vi hitta ett annat angreppssätt. Kanske släppa tanken på att det finns en absolut bästa färg, utan att det snarare handlar om att hitta den färg som passar bäst i relation till de övriga färger ni använder?!

 
Alright – vi växlar över till hypotesen. Det gäller att hitta den färg som fungerar bäst i relation till våra övriga färger. Och vilka är det som bestämmer om de övriga färgerna?!
 

Enter – Varumärkespolisen

Några som också vill ha en åsikt kring hur våra webbsidor ska se ut är de som ansvarar för varumärket eller ”The business prevention unit” som Tim Ash på Site Tuners kallar dem.

Och varför blir det då ofta en bitter fajt mellan varumärkesfolket och de som ska designa våra landningssidor och knapparna på dem? John Ekman igen:
 

Vi tror att det är grunden handlar om en konflikt mellan ”synas” och ”inte synas”.

Den grafiska profilen är gjord för att varumärket ska finnas i bakgrunden. Den ska väcka en känsla men inte stå i fokus. I fokus ska ditt erbjudande eller din kampanj stå.

Men så kommer vi med vår sak som vi vill ska synas – nämligen knappen man ska trycka på. Och så försöker vi använda den grafiska manualen – vars främsta jobb är att se till att saker inte syns – och så ska vi använda den på någonting som ska synas.

Nu blir det härdsmälta!!

Jag kommer ihåg när vi jobbade med ett stort logistikföretag vars profil-färg är blå. Vi frågade om vi kunde få den digitala grafiska manualen.

Det kom en PDF på 170 sidor.

Då sa vi:
– ”Nej vi behöver inte hela den grafiska manualen, bara det som gäller det digitala”.
– ”Det här är det digitala”, svarade kunden.

Essensen av den manualen var:

– ”Vad ni än gör får ingenting sticka ut eller synas. Allting ska vara olika nyanser av blått. Ni får absolut inte göra en knapp som folk ser eller fattar att de kan klicka på. Den ska ha samma blå färg som allt det andra.”

Vad vill vi då?

Vi vill inte kasta bort den manualen – vi vill bara komplettera den. Med en enda färg – den färgen som är din primära handlingsfärg. Den färgen ska komplettera den övriga paletten inte konkurrera med den.

 
Makes sense – eller hur?

Och vad ska den färgen vara då? Ja det handlar resten av bloggposten om.
 

Hitta ett perfekt komplement

Låt oss säga att vi är överens om att det inte handlar om att hitta den ”absolut” bästa knappfärgen utan snarare den ”relativt” bästa knappfärgen, dvs. den färg som är bäst i relation till dina övriga färger.

Den som kompletterar din färgpalett och kontrasterar perfekt.

Så långt kan vi vara överens. Frågan är då vad vi menar med ”perfekt kontrast”?

Nu öppnar vi dörren för tyckande igen. Så helst av allt skulle vi vilja hitta en ”objektiv metod” som utifrån en färgskala helt enkelt ger oss ett svar på vad som är den perfekta komplementet.
 

Enter Angie Schottmuller

Vi får räkna Angie som en av världens mest inflytelserika personer inom konverteringsoptimering.

Hon är lite av en schweizisk armékniv för optimering. Hon både kodar, designar, optimerar laddtider och har råkoll på alla psykologiska principer. (och Ja – hon har talat på Conversion Jam – och Ja det var mycket uppskattat).

Angie tog sig an uppgiften att hitta den perfekta komplementfärgen, och kom fram till det som hon kallar för: Clockwork Conversion Color Test.

Och det är så briljant i sin enkelhet att vi helt enkelt tänker låna upplägget rakt av.
 

Clockwork Conversion Color Test

Använd en komplementfärg till era CTA

Reservera en ”färgzon” till era CTA

Använd en ”ren” färg till era CTA

Använd skuggor, toner och nyanser i den övriga designen

 
 

Använd en komplementfärg

(Innan ni gör något annat, se till att ni utgår från RGB, standard för bildskärmar).

Ta en titt på er sida, vilken är den dominerande färgen?
Lokalisera den på färghjulet:
 

 
Dra nu en linje genom origo till motsatt sida cirkeln.
 

 
Ta da! Ni har hittat er komplementfärg, den ligger alltså 180 grader från den dominanta sidfärgen.

Hur ser det här ut i praktiken? Låt oss ta en titt på conversionista.se
 

 

 
Vår valda CTA-färg ligger runt 150 grader från vår dominanta röda färg i färghjulet, inte helt enligt regelboken med andra ord, men till vårt försvar, åtminstone inom rätt färgzon.
 

Reservera en ”färgzon”

Repetera INTE din CTA-färg, eller liknande nyanser i fler element på sidan.


Reservera istället färger som faller inom 45 grader från komplementfärgen och gör det lätt för ögat att identifiera er CTA i färgskalan på sidan (om regeln alltid följs förankrar ni även färgen som något som indikerar en knapp).
 
 

Använd en ”ren” färg

Välj en färg där ljusstyrka (brightness) och mättnad (saturation) är >85%.

Och hur vet man det tänker kanske ni? – öppna färgen i en HSB-palett:
 
HSB-palett
 

 
I färghjulet innebär det att man använder dig av nyanser utan inslag av svart, vitt eller grått (yttersta lagret). 
 
 

… Men använd skuggor, toner & nyanser på resten av sidan

Se till att övriga sidan inte konkurrerar med din CTA.

Använd färger där ljusstyrka och mättnad  är <85% för resten av designen.

Det vill säga, färger med svarta, vita och grå toner som ligger utanför den färgzon ni reserverat för er CTA.
 

 

Tillägg för en optimerad CTA

Genom att följa Angie’s modell har ni garanterat en CTA som inte riskerar att försvinna i sidans övriga element, och ni slipper sia om er publik föredrar rött eller grönt.

Som redan nämnt – optimering handlar ju sällan om enskilda variabler, därför får ni inte glömma innehållet i er CTA:

Läsbarhet & Kontrast
Vit text på gul bakgrund är rätt dålig idé… Se till att ni följer WCAG’s riktlinjer för kontrast och läsbarhet – prova er set-up HÄR.

Välj rätt typsnitt
På samma tema, se till att ert typsnitt är lätt att läsa.
Oavsett vad era designers har att säga om saken. HÄR kan ni läsa om vilka effekter fel typografi kan få.

Testa din Copy
Copy är jätteviktigt, så självklart ska du A/B-testa den på din CTA. Alltid. Läs mer om potentiellt uplift HÄR
 

Men hallå? Vart har ni datan?

En mycket bra fråga – visst låter modellen klockren, men fungerar den egentligen i praktiken?

Det korta svaret är att vi inte själva testat, eller sett resultat av andras tester. Det är helt enkelt ”uncommon sense” – det är det närmaste ett objektivt ramverk för CTA-färger som vi har hittat.

Med det sagt, kommer vi självklart att ta första bästa möjlighet att testa hypotesen (och hoppas självklart att ni också tänker det!) – tills dess, stay tuned!

Om du själv har testat färger, dela gärna med dig av dina resultat i kommentarerna.

 


Om Webmaster

Comments