Hvilken farge skal Call to action-knappene ha?
Fargevalg på knapper og bokser er alltid kilde til synsing og diskusjoner, og en typisk tidstyv i mange webprosjekter.
Men faktum er at selv om fargen på en knapp kan virke som en liten detalj, så kan riktig farge ha store konsekvenser for omsetningen. Komplett økte omsetningen med 30% over natten da de skiftet fra blass grønn til gul.
Her er en kjapp guide til hva du bør tenke på når du velger farger på knappene:
Kontrast
Fargen på den viktigste knappen – f.eks. “Kjøp nå” – bør skille seg såpass fra resten av innholdet at blikket naturlig glir mot knappen.
Se på dette eksempelet hvordan Barack Obama ikke bare bruker en klar Call to Action-farge, men også toner ned det andre valget for å oppnå det han ønsker; Nemlig samle e-postadresser slik at han kan kommunisere direkte med velgerne.
Et annet eksempel er Tusenfryd sin “Sesongkort-side. “ Her har de en hvit knapp, noe som egentlig er litt for blasst, men det fungerer siden resten av siden er gul.
NB: Tusenfryd bryter regelen om at en knapp bør se ut som en knapp, men det er en annen diskusjon!
Poenget er: Fargevalg på knapper må ses i sammenheng med fargevalget på andre elementer.
Helhet
Jeg har lenge vært tilhenger av at en bør ha et konsistent fargevalg og bruke de fargene en vanligvis bruker, men når det gjelder farger til Call to Action så er ikke designmanualen stedet å lete.
Call to Action handler nemlig ikke om å skape balanse. Det handler om å utløse atferd og da virker helhetstankegangen mot sin hensikt. For å skape oppmerksomhet må du bryte med helheten.
Derfor påstår jeg at på de knappene som er viktige for kjøpsprosessen på sidene dine – skal du bryte med “helhetstanken” og heller fokusere på å få brukerne til å trykke på “kjøp nå” eller “last ned” eller hva det nå måtte være. Da må knappen skille seg ut.
Dette betyr ikke at alle knappene skal ha ulike farger. Knapper som har samme funksjon skal se like ut.
Fargevalg på Call to Action
Dette er ingen fasit på hvilke farger som fungerer best, men i tider en må jobbe hardt for hver eneste krone er det verdt å ta en kikk på om fargevalg kan øke konverteringsraten.
Fargepsykologi er viktig og jeg skl prøve å gi et kort innblikk i hvordan ulike farger fungerer:
Gul
Gul er den fargen de fleste av oss oppdager først, og i Norge har den en bonuseffekt med at den ofte signaliserer gode tilbud.
Bruk den: Om du har mye elementer på siden og trenger å dra oppmerksomheten til knappen.
Rød
Rød er også en farge vi legger fort merke til og den er bevist å heve pulsen. En erotisk farge som engasjerer følelsene. Men den er også forbundet med anger og fare.
Bruk den: Om du har produkter/tjenester folk er følelsesmessig engasjert i. En god call to action farge.
Grønn
Grønn er en trygg og fin farge de fleste av oss liker. Men den er litt reaktiv. Du må vente på grønt lysfør du kan kjøre. Og på web er vi alle drosjesjåfører …
Bruk den: Tja. Jeg liker ikke grønne knapper, men den kan passe for trygghetssøkende personas og for å sende folk til testimonials eller andre sider som bygger opp tilliten til din virksomhet.
Jeg ville ikke brukt grønn på en kjøp-knapp slik som Elkjøp gjør her:
Blå
Blå er en passiv farge som maner til ettertanke. Anbefales ikke til bruk i Call To Action da den appellerer til passivitet. De fleste kjøp er forbundet med følelser. Det finnes jo andre “actions” enn kjøp, men følelser er involvert i de fleste beslutninger
Bruk den: om det du ønsker folk skal gjøre innebærer å senke følelsesnivået. (Kanskje i en konfliktløsningsapplikasjon?)
Jeg ville ikke brukt den slik Nordea gjør på sin forside:
Svart
Svart er forbundet med makt og mystikk, men også med eleganse. Brukt riktig kan den gi en fungerende call to action-effekt.
Bruk den: Om designet er veldig “cleant” og du har mye plass rundt knappen.
Her er et eksempel fra en Goth-butikk. De har jo ikke egentlig noen knapp, men dere skjønner poenget.
Oransje
Oransje er en god blanding av rødt og gult. Den har alle de positive egenskapene til gult og ingen av de negative fra rødt. Gir både oppmerksomhet og varme. Blir av mange regnet som den perfekte Call to Action-fargen.
Bruk den: så ofte du kan.
Amazon bruker oransje og i denne glitrende bloggen kan du lese litt om hvordan de jobber med å hele tiden optimalisere kjøpsprosessen.
Test, test, test
Hvordan folk reagerer på farger er kulturelt betinget, og noen målgrupper er mer glad i den ene fargen enn den andre. (Gothere liker svart, miljøvernere grønt osv) Så test det ut, mål – og finn den som fungerer best for deg og din målgruppe.
For eksempel bruker ProFlowers, som er helt rå på konverteringsrater, grønne kjøpsknapper. Les også om hva KP skriver om konvertering.
Er det noen som har erfaringer med å teste ulike farger? Fortell!
Innlegget ble skrevet 20. januar 2009, 14:23 under
Du kan følge med på tilbakemeldingene til dette innlegget gjennom RSS 2.0-feeden. Legg igjen en kommentar, eller trackback fra din egen side.
27 Kommentarer til "Hvilken farge skal Call to action-knappene ha?"
Det har veldig mye med konteksten (resten av designet) å gjøre. På et prosjekt endret jeg fra sorte knapper til grønne, og økte konverteringsraten fra 17 til over 40 prosent.
Enig, Tor! Har du en link vi kan se på?
Er helt enig med Tor og for så vidt også med deg, Kåre. Men med referanse til din formening om røde versus grønne knapper og fargeassosiasjoner, så er jeg litt uenig. Man kan jo tenke seg hva som hadde skjedd med konverteringen om man hadde hatt et påmeldingsskjema hvor man hadde en grønn avbryt knapp og en rød kjøp knapp. Hvor ville det vært naturlig for folk å klikke? (Ref. Don’t make me think)
Fargeassosiasjoner er ofte avhengig av setting og hvor bevisst fargebruken faktisk er. Brukes den for å oppnå kontraster eller for å skape assosiasjoner, eller kanskje begge deler? Som du sier med fargen gul, så har vi gjerne andre assosiasjoner til fargen gul enn hva f.eks. engelskmenn har.
Det hadde vært interessant å vite om gult fungerer for Komplett fordi folk forbinder det med billig eller om det er fordi det er den fargen som gir det beste kontrastnivået.
Personlig tror jeg kontrastnivå veier tyngre enn fargeassosiasjon, uten at jeg har sett eller lest noen rapporter på dette
Interessant er det uansett.
Kåre, er dessverre under en slags NDA på det – handler om en stor aktør i det norske markedet. Nå skal det også sies at det ikke kun var farge-byttet som gjorde store omveltninger – men det var en god del av prosessen
@Ricky: Kontrast er selvsagt viktig, men nå prøvde jeg å se på farge isolert.
Når det gjelder “avbryt” knapper har jeg et par sterke følelser:
1: Hvorfor i all verden skal vi ha en “avbryt-knapp?!!! Hvis kundene er så usikre at de må ha en avbrytknapp for å forstå at det ikke er for sent å la være å kjøpe, så har vi enten feil kunder, eller så gjør vi en dårlig jobb med å synliggjøre kjøpsprosessen. Hvem i all verden ønsker å gjøre det enkelt for kunder å angre kjøpet?
Det blir som om det stod en kar på rimi som kikket oppi handlekurvene til folk og spurte “er du sikker på at du skal ha det der?”, “Ikke for sent å sette den Grandisen tilbake”.
2. Hvorfor i all verden skal den – om enmå ha den- være rød? Hvorfor ikke ha den som en diskret blå? Den røde fargen får jo folk til å begynne å få følelser for “avbryt” (trekker den litt langt nå kjenner jeg.. men du forstår!)
Poenget er: Vi må skape tilliten folk behøver for å handle med oss på andre steder enn i kjøpsprosessen.
Vil og poengtere viktigheten av knappetekstene. Dette kan ha store utslag. Bevissthet rundt de gode og riktige triggerordene. Skal du feks bruke “kjøp” eller “fortsett”, “bestill” eller “gå videre”.
Jeg er enig i at avbrytknappen med fordel kan droppes, det var mer for å illustrere poenget med bruk av grønt versus rødt sammen (ref. dine formeninger om fargebruk på actionknapper).
Jeg mener fortsatt at assosiasjoner og følelser til forskjellige fargene er mindre viktig eller av ingen betydning når det kommer til bruk av farge på actionknapper. Jeg tror kontraster, plassering, tekst/symbolbruk og størrelse på knappen er det som veier tyngst hos folk og ikke hvor erotisk fargen på call to action knappen kan være.
I forhold til artikkelen du linker til rundt at kjøp er forbundet med følelser, så tror jeg du blander kortene litt. Eksempelet tar for seg merkevarebygging (hvor følelsene er tilknyttet produktet eller produsenten) og ser derfor ikke helt relevansen til bruk av farge på call to action knapper. Ja, følelser assosiert med produkt/produsent påvirker hvorvidt vi kjøper. Assosiasjonene vi har til fargen på handlevognen/eller uniformen til kassadamen gjør det ikke (satt litt på spissen
)
Poenget vil til syvende og sist være å finne den fargen+teksten+plasseringen+formen på knappen som fungerer for din site. Man skal selvfølgelig gjøre et utvalg (slik at man ikke tester en million kombinasjoner), men i utgangspunktet er det fullt mulig å teste ut utrolig mange kombinasjoner uten så stor risiko.
Man kan begynne på en side, eller en seksjon av nettstedet og foreta mindre tester der med Google Website Optimizer, for så å utvide testen når man har et statistisk valid datagrunnlag.
Det viktigste er ikke utformingen av knappen, men hvilken prosess man benytter seg av for å komme dit.
Avbryt-knappen kan fungere som et signal på at du faktisk ennå ikke har fullført bestillingen. Hvis det ikke finnes andre tydelige signaler på at bestillingen er ufullstendig, så kan du ende opp med at kunden tror de har fullført kjøpet….
Godt poeng, KP! Ellers er dette blogginnlegget også ganske interessant og relevant til dette innlegget. Det inneholder en del eksempler på forskjellige call to action knapper som fungerer bra. Det illustrerer godt hvordan farge er en av mange ingredienser som må til for å lage god call to action knapp.
Interessant spor…
Jeg tror ikke fargen i seg selv er det viktigste når man skgal designe, men mer at den knappen vi ønsker at kundene skal klikke på skiller seg kraftig ut fra andre mer trivielle valg. Min erfaring er at størrelsen på knappene i kombinasjoni med en farge som skiller seg ut og plassering (forventet plassering fra kunde), både girl brukerne den riktige oppmerksomheten (prioritert design) samtidig som en stor knapp plasesert riktig gir en trygghettydsfølelse for foratåelse av beprosessen (brukeren har kontroll) som igjen øker sansynligheten for handling.
Og igjen er det viktig å ikke bli grådig, men være kritisk til hvilke knapper som fortjener å bli synliggjort. For mange vil bare kanibalisere hverandre og redusere effekten
beklager at tastaturet mitt henger litt og krydrer innlegget med litt trykkleifer
Dette er artig.
Farge, tekst, størrelse, andre elementer på siden, skygge ++ Det er mye som spiller inn for en god Call to Action. Enig!
Men la meg spørre om en annen ting. Hvis kjøpet er viktigst, burde en ikke da designe siden til å passe call to action-knappen, og ikke call to action-knappen til å passe siden?
OG hvis du skal begynne med cta-knappen, så bør du gi den en farge i den rød-gule skalaen.
@KP – Igjen: avbryt-knappen er tegn på en svakt synliggjort kjøpsprosess. Da er det bedre med en tekst som f.eks. “Transaksjonen er 75% fullført, vi trenger bare …” eller en klar 1-2-3-stegnavigasjon.
@Ricky angående kjøpsbeslutninger. Poenget mitt er at alle beslutninger involverer følelser og derfor er det viktig å få med følelsene til folk som står i en beslutningssituasjon. Farger appellerer til følelser og bør derfor testes på CTA for å finne den fargen flest i din målgruppereagerer positivt på.
Det handler om å aktivere den høyre hjernehalvdelen (Trur eg) Shoppingsentre har jo lenge brukt musikk (som også går rett inn i følelsesregisteret) for å øke shoppinglysten.
Om et nettsted bør designes med utgangspunkt i CTA knapper er sikkert et tema i seg selv, personlig tviler jeg sterkt på det er en effektiv strategi
For raskt å følge opp dette med musikk og shoppingsentre, som er ganske interessant, selv om jeg ikke har så mye tro på det heller (litt negativ av meg
. Jeg har ennå ikke sett eller hørt noen rapporter eller empiri som underbygger den påstanden. Jeg vet at f.eks. DMX lever av dette, men de kan ikke vise til data som støtter påstanden. Tror dette er mer en myte/antakelse enn noe annet. Selvsagt finnes det et unntak; musikkbutikker, men den er jo gitt 
Jeg tror forsatt folk flkest handler rasjonelt, og i de tilfellene hvor folk også handler basert på følelser, så er det ofte tilknyttet en forhåndsdefinert oppfatning av et produkt eller en produsent og at dette veier tyngre enn hviklen farge disse produsentene har valgt på nettsidene og CTA knappene sine.
Det er ingen tvil om at musikk og farger påvirker både humør og oppførsel.
musikk og farger påvirker både humør og oppførsel.
Og jeg tror absolutt ikke vi er rasjonelle i det hele tatt. Et eksempel
Philip Stacks sitronpresse. Den koster vel ca 800 kroner i Norge. Hvem har et RASJONELT 800kroners sitronpresse-behov?
Musikk påvirker selvsagt humøret og oppførsel, det har jeg heller ikke betvilt. Det jeg ikke har noe tro på, er at musikk fører til at vi handler mer. Det finnes likevel et par unntak; utesteder (dersom høy musikk) og platebutikker.
Jeg har ennå tilgode å se en rapport som kan dokumentere at i f.eks. en butikk eller et shoppingsenter, så var det en signifikant økning i salg/omsetning som følge av at de hadde musikk på anlegget versus ingen musikk. Det er jo det som er poenget i denne sammenhengen, at endringen i oppførsel som musikken skaper, skal medføre (økt) salg. Artikkelen du linker til tar for seg musikk som terapi og annen oppførsel, ikke hvorvidt det er kjøpsutløsende.
Skitvekt er et annet eksempel på at man ikke nødvendigvis alltid er rasjonell i beslutningsøyeblikket, men hvorvidt dette henger sammen med temaet for innlegget her som var fargebruk er noe annet.
Forresten, om jeg hadde kommet inn på Rema 1000 og de hadde spilt Celine Dion på full pedal kan jeg trygt si at jeg ikke hadde kjøpt noe, men snudd i døren (100% bounce rate). Sånn sett kan musikk være kjøpsfohindrende
Med det sagt så hadde jeg nok ikke kjøpt noe mer om de hadde spilt HIM heller 
…I stand corrected!
CTA må skille seg ut. Don’t hide the Banana som Seth Godin ville sagt. Så om en har en oransje site så kan kanskje grønne knapper funke bedre enn rød, men skit idet: TEST!!!
Med musikk så gjelder det å ha en musikk som du ikke legger merke til, men som likevel får hjertet til å pumpe litt fortere. Du vil ikke at musikken tar bort fokuset, men at den skaper stemning. Og for å være fullstendig kynisk: En bør unngå musikk folk kjenner og pauser mellom låtene. Det skaper nemlig en tidsramme for folk og de kan da begynne å tenke “Oi, nå har vi vært her lenge”. Men nå er vi way off topic.
Tilbake til farger: Fant en velig kul sak på youTube: http://www.youtube.com/watch?v=voAntzB7EwE
sier kanskje noe om at farge kun betyr noe der fokuset til enhver tid er?
Avbryt-’knapper’ pleier å være i ren linketekst, og ikke noe grafikk. Iallefall det som virker å ha blitt standarden fra Sanfran’
Jeg styrer en nettbutikk (og har designet den) og vi bruker røde call to action knapper. Hadde satt stor pris på om dere hadde giddet å sjekke et ut og se hva dere synes.
http://www.mph.no/produkt/what_would_macgyver_do/bla
Det blir jo synsing, men jeg syntes handle-knappene ser bra ut. Når det gjelder “knappene” for å velge størrelse, så er jeg litt i tvil.
Andre forbedringsområder er “feilmeldingene dine”. Jeg vil anbefale deg å lese boken Defensive web design: http://astore.amazon.co.uk/kuttisme-21/detail/073571410X
Den beskriver hvordan feilmeldinger bør presenteres.
Jeg ser også at dere har slurvet med titteltaggene på siden deres. Ref:
http://www.kuttisme.no/2007/04/23/9-av-10-norske-nettsteder-slurver-med-tittel-taggene/
Hva anbefaler du på størrelses “knappene da”? Feilmeldingene skal endres til dette designet; http://mph.no/infobar_feil.jpg
Jeg endret også tittelen på siden nå. Men vi mangler fortsatt å gjøre den dynamisk slik at den endres på hver side.
Takk for svar, jeg setter stor pris på det
Test ulike størrelser, kjør noen A/B-tester. Ta en titt på Google Website optimizer: http://www.google.com/websiteoptimizer
Avbryt-knapper har sin hensikt i noen sammenhenger, f.eks. i nettbanker (bekreft, endre eller avbryt betaling).
I “Web Form Design” (s. 95) skriver Luke Wroblewski:
“Personally, I’m always hesitant to use red to label any action, due to that color’s close association with errors. Red is used so often to indicate something bad has happened on a form (…) that I’m quite wary of using it to represent either secondary or primary actions.”
Men mulig jeg beveger meg litt langt inn i skjemaland nå, i forhold til innlegget?
Den assosiasjonen stemmer og det er derfor en selskap som Amazon, Play, Yahoo heller kjører en oransje knapp.
Men den røde “feil” assosiasjonen er nok enda mer fremtredene i skjemaverden, ja!
Kommer det en oppfølger kalt “Hvilken tekst bør call-to-action knapper ha?”
På FINN reise har vi bare tatt de første barnestegene, men vi har gjort tester som viser at forskjellen mellom den eksisterende knappeteksten og de ulike kandidatene utgjorde alt fra en 50 % forbedring til en 12 % nedgang.
Det kan bety en hel del når utfallet er direkte knyttet til inntekten din…
DET hadde vært morsomt å dyppe skallen i!
Jeg har noen meninger, men svaret er nok “test, test, test!”
Legg igjen en kommentar