Rød knapp konverterer best, ikke sant? Eller var det grønn?
Eller, er det ulikt for asiater og europeere?
Eller spiller det egentlig noen rolle?
Hva om vi bare legger myten om at det finnes en «perfekt knappfarge» bak oss en gang alle?
Istedenfor kan vi se på en metode for å finne en farge som fungerer for nettopp deg.
I din fargepalett. For dine besøkende. Til ditt konverteringsformål.
Hypotese: Det finnes en endelig/perfekt knappfarge
Det finnes få ting folk har så sterke meninger om som design. Ofte er det de med minst kunnskap om emnet som ytrer sine meninger sterkest.
Så vi vil gå fra: meninger/holdninger til fakta/kunnskap/prinsipper.
Det første vi tenker på da er dette med at det finnes en «beste knappfarge». Noe i denne duren:
«Om vår målgruppe er unge, østlandske, konkurranseorienterte menn, og vi vil vekke en impuls i dem om at – Jeg burde slå til nå! – da skal vi alltid bruke oransje».
Noe sånt.
Og det finnes slike fargeteorier. At en bestemt farge passer best for å vekke en bestemt følelse hos en bestemt målgruppe.
Her er en test som vår partner Widerfunnel gjorde, som har bevis for denne måten å arbeide på: Using color psychology to increase conversions.
Rød eller grønn knapp?
Vi begynte blogginnlegget med spørsmålet om rød eller grønn knapp. La oss høre hva vår grunnlegger John Ekman har å si om saken:
Det kan ikke gå noen hus forbi at Conversionista er et veldig rødt foretak. Og jeg har ofte fått spørsmålet:
«Du, John. Er det ikke sånn at rødt signaliserer fare, og man for eksempel bare vil forte seg bort derfra om man kommer inn på en rød hjemmeside? Hvordan tenker du?»
Jeg visste ikke helt hva jeg skulle svare på det spørsmålet, men så kom svaret til meg en dag da jeg tittet opp på fasaden på Mörby Centrum.
Der stod det en tavle med ulike varemerker og forretninger som finnes der inne. Det var nesten bare røde varemerker. Og jeg tenkte:
«Om det er sånn at rødt er så himla farlig, så hadde vel ikke et eneste menneske turt å bevege seg inn på ICA, Hemköp eller H&M? Men vent nå – det er jo noen av Sveriges og verdens mest fremgangsrike forhandlere, som har bygget sin fremgang nettopp på sin evne til å få folk til å gå inn i deres butikker. Det er noe lurt her.»
Det virket altså som om rødt fungerte bra for å skape oppmerksomhet. Ikke farlig i det hele tatt. Og da er kanskje rødt den beste knappfargen?
En A/B-test som HubSpot utførte resulterte i 21% økning for en rød CTA vs. en grønn:
Ok – så da er vi enige om at rødt er best nå?
Dessverre så er det sånn at det finnes mange andre tester som viser det motsatte, dvs. at grønt er det beste.
Det finnes dessverre ganske lite bevis i konverteringsoptimaliseringsuniverset på at det er nettopp én bestemt farge som overgår andre farger generelt.
Vi kan holde på sånn som dette i det uendelige. Og for at vi skal kunne bryte ut av sirkelen må vi finne en annen angrepsmetode. Kanskje slippe tanken om at det finnes en absolutt beste farge, og heller la det handle om å finne den fargen som fungerer best i forhold til de andre fargene dere bruker?
All right – vi bytter over til hypotesen. Det gjelder å finne den fargen som fungerer best i forhold til våre øvrige farger. Og hvem er det som tar avgjørelser når det gjelder de øvrige fargene?
Enter – Varemerkepolitiet
Noen som også vil ha en mening om hvordan våre nettsider skal se ut, er de som er ansvarlige for varemerket, eller «The Business Prevention Unit» som Tim Ash på Site Tuners kaller dem.
Og derfor blir det vel en bitter kamp mellom varemerkefolket og dem som skal designe våre landingssider og knappene på dem? John Elkman igjen:
Vi tror at grunnen er en konflikt mellom «synes» og «ikke synes».
Den grafiske profilen er laget for at varemerket skal finnes i bakgrunnen. Den skal vekke en følelse, men ikke stå i fokus. Det er ditt tilbud eller din kampanje som skal stå i fokus.
Men så kommer vi med vår greie som vi vil at skal synes – nemlig knappen man skal trykke på. Vi prøver å bruke den grafiske håndboken – dens viktigste jobb er å sikre at ting ikke synes – og så skal vi bruke den på noe som vi ønsker at skal synes.
Nå blir det krise!!
Jeg husker den gangen vi jobbet med et stort logistikkforetak med blå profilfarge. Vi spurte om vi kunne få den digitale grafiske håndboken.
Det kom en PDF på 170 sider.
Da sa vi:
«Nei, vi trenger ikke hele den grafiske håndboken, bare det som gjelder det digitale».
«Det er dette som er det digitale», svarte kunden.
Essensen av denne manualen var:
«Hva enn dere gjør, ingenting skal stikke ut eller synes. Alt skal være ulike nyanser av blått. Dere får absolutt ikke lage en knapp som folk ser eller forstår at de kan klikke på. Den skal ha samme blåfarge som alt det andre.»
Hva gjør vi da?
Vi vil ikke kvitte oss med den håndboken – vi vil bare legge til noe. Én eneste farge; den fargen som er din primære handlingsfarge. Den fargen skal komplementere den øvrige paletten, ikke konkurrere med den.
Makes sense – eller?
Men hva skal den fargen da være? Jo, det er det resten av blogginnlegget handler om.
Å finne en perfekt komplementærfarge
La oss si at vi er enige om at det ikke handler om å finne den absolutt beste knappfargen, men om å finne den relativt beste knappfargen, dvs. den fargen som fungerer best i forhold til dine øvrige farger.
Den som komplementerer din fargepalett og kontrasterer perfekt.
Så langt kan vi være enige. Spørsmålet blir da hva vi mener med «perfekt kontrast»?
Nå åpner vi døren for synsing igjen. Helst skulle vi ha funnet en «objektiv metode» som ut ifra en fargeskala rett og slett gir oss svaret på hva som er den perfekte komplementærfargen.
Enter Angie Schottmuller
Vi kan regne Angie som en av verdens mest innflytelsesrike personer innen konverteringsoptimalisering.
Hun er litt som en Swiss Army Knife for optimalisering. Hun både koder, designer, optimaliserer sidehastighet og har stålkontroll på alle psykologiske prinsipper. (Ja – og så har hun pratet på Conversion Jam, og det slo veldig godt an).
Angie tok på seg oppgaven med å finne den perfekte komplementærfargen, og kom frem til det som hun kaller for: Clockwork Conversion Color Test.
Det er så briljant i sin enkelhet at vi rett og slett låner oppsettet slik det står.
Clockwork Conversion Color Test
✔️Bruk en komplementærfarge til din CTA
✔️Reserver én «fargesone» til din CTA
✔️Bruk en «ren» farge til din CTA
✔️Bruk skygger, toner og nyanser i det øvrige designet
Bruk en komplementærfarge
(Før du gjør noe annet, pass på at du går ut ifra RGB, standard for bildeskjermer).
Ta en titt på siden din. Hvilken farge er det som dominerer?
Lokaliser den på fargehjulet:
Dra så en linje gjennom sentrum til motsatt side av sirkelen.
Ta da! Du har funnet en komplementærfarge. Den ligger altså 180 grader fra den dominerende sidefargen.
Hvordan ser dette ut i praksis? La oss ta en titt på Conversionista.se
Vår valgte CTA-farge ligger rundt 150 grader fra vår dominerende rødfarge i fargehjulet. Ikke helt etter regelboken med andre ord, men til vårt forsvar – i det minste i riktig fargesone.
Hold deg til én fargesone
Ikke repeter din CTA-farge eller lignende nyanser i flere elementer på siden.
Bruk istedenfor farger som befinner seg innenfor 45 grader fra komplementærfargen og gjør det enkelt for øyet å identifisere CTA-en i fargeskalaen på siden (om regelen alltid følges, forankrer du fargen som noe som indikerer en knapp).
Bruk en «ren» farge
Velg en farge der lysstyrke (brightness) og metning (saturation) er >85%.
Og hvordan vet man det, tenker du kanskje? Finn frem fargen i en HSB-palett:
I fargehjulet innebærer det at du bruker nyanser uten innslag av svart, hvitt etter grått (ytterste laget).
… Men bruk skygger, toner og nyanser på resten av siden
Pass på at øvrige sider ikke konkurrerer med din CTA.
Bruk farger der lysstyrke og metning er <85% i resten av designet.
Det vil si, farger med svarte, hvite og grå toner som ligger utenfor den fargesonen du holdt deg til for CTA.
Ekstra for en optimalisert CTA
Ved å følge Angies modell har du garantert en CTA som ikke risikerer å forsvinne i sidens øvrige elementer, og du slipper å vite om ditt publikum foretrekker rødt eller grønt.
Som allerede nevnt – optimalisering handler jo sjeldent om enkeltstående variabler. Derfor må du ikke glemme innholdet i CTA-en:
✔️Lesbarhet og kontrast
Hvit tekst på gul bakgrunn er en dårlig idé … pass på at du følger WCAGs retningslinjer for kontrast og lesbarhet – test ut ditt oppsett HER.
✔️Velg riktig font
I samme tema, pass på at fonten er lett å lese. Uansett hva designerne har å si om saken. HER kan du lese om hvilke effekter feil typografi kan få.
✔️Test din Copy
Copy er kjempeviktig, så selvsagt skal du A/B-teste den på din CTA. Alltid. Les mer om potensiell økning HER.
Men hallo? Hvor har dere dataene?
Et godt spørsmål. Visst høres modellen klokkeren ut, men fungerer den egentlig i praksis?
Det korte svaret er at vi ikke har testet det selv, eller sett resultatet av andres tester. Det er rett og slett «uncommon sense» – det er det vi har funnet som kommer nærmest et objektivt rammeverk for CTA-farger.
Når det er sagt, så kommer vi selvsagt til å ta første sjansen vi får til å teste hypotesen (og vi håper selvsagt at dere tenker det samme!) – inntil da, stay tuned!
Har du testet farger selv? Del gjerne dine resultater i kommentarfeltet.
