Websites versterken met kleur

Als websitebeheerder wil jij alles uit je website halen. De beste lay-out, de hoogste snelheid en de leukste content. Je wilt immers website bezoekers trekken en afhankelijk van je doelen zo lang mogelijk vasthouden of snel laten converteren. Maar ook websites met de leukste content, de hoogste snelheid en de beste lay-out worden weggeklikt als het juiste gevoel bij de bezoeker ontbreekt. Benieuwd wat jij hieraan kan doen met de inzet van kleur?

Wat doet kleur op een website?

Websitebezoekers willen snel en gemakkelijk relevante content vinden. Maar niet alleen dat, ze willen het juiste gevoel op de website hebben: is de website wel betrouwbaar? Wordt er niet te veel op een aankoop gepusht? En denken bezoekers überhaupt of ze op een relevante website zijn? Dit alles kan worden beïnvloed met kleur.

Het juiste kleurgebruik maakt websites aantrekkelijker, overzichtelijker en gebruiksvriendelijker. Met de juiste kleuren kan jij snel en effectief een goede (eerste) indruk maken op de bezoeker. Gebruik jij de verkeerde kleuren? Dan kan dit jouw website, conversies en doelen dwarsbomen. Het gebruik van kleuren kan dus worden ingezet voor functionele eigenschappen en voor het oproepen van emoties.

• Functionele eigenschappen: kleuren dragen niet alleen bij aan het appeal van een website. De juiste kleuren zijn complementair aan de website lay-out en website structuur. Zo kunnen bepaalde elementen op de website makkelijker worden gevonden en gebruikt. Zoals het menu, de zoekbalk en CTA’s.
• Emoties: kleuren prikkelen verschillende emoties. Een goede website prikkelt de juiste emoties. Vinden er op jouw website duurdere aankopen plaats? Dan profiteer jij van een website die rust en veiligheid uitstraalt. Verkoop jij op jouw website producten met hoge omloopsnelheid? Dan kunnen kleuren ingezet worden om de conversiesnelheid te verhogen. Daarover later meer.

TIP: laat belangrijke elementen op de website, zoals CTA’s opvallen door een hoog contrast te creëren met de achtergrond.

Voordat we de wereld van kleurgebruik induiken, is het nuttig om kleuren beter te begrijpen. Waar bestaat een kleur uit? Waarom vallen kleuren wel of niet in de smaak? En wat doen de verschillende kleuren met ons?

Waar bestaat een kleur uit?

Kleuren worden vaak alleen ingedeeld op tint(naam); zoals rood, blauw, geel en groen. De veel voorkomende fout is het weglaten van de andere twee dimensies van kleur, namelijk: helderheid en verzadiging.

Juist de inzet van helderheid en verzadiging leidt tot het gewilde effect om emoties op te roepen. Deze dimensies bepalen namelijk in grote mate de emotionele impact. Zo wordt bijvoorbeeld de setting van een veiling (=concurrerend) versterkt door kleuren met een hoge helderheid en lage verzadiging. Een bijeenkomst (=samenwerkend) wordt daarentegen juist weer versterkt door een lage helderheid en een hoge verzadiging.

Het verschil in lichte en donkere versies van een kleur is onderdeel van de dimensie helderheid. Zoals donkergroen of lichtgroen. Bij verzadiging wordt er onderscheid gemaakt in felle en fletse kleuren. Felle kleuren zijn levendig en hebben een hoge verzadigdheid, zoals: geel, oranje en rood. Fletse kleuren zijn daarentegen grauw en hebben een lage verzadigdheid, zoals: zwart, grijs en bruin.

De juiste kleur voor jouw website

Als websitebeheerder ga je met de nieuwe kennis over kleuren direct aan de slag. Je kiest voor jouw website de juiste tint, helderheid en verzadiging. Aangezien jij de conversies wil versnellen, ga je voor een hoge helderheid en lage verzadiging. Toch vallen de resultaten tegen. Hoe kan dit zijn gebeurd?

Natuurlijk willen we kleuren die bijdragen aan de vooraf opgestelde doelen. Zoals het verhogen van het aantal nieuwsbrief abonnees, aantal ingevulde contactformulieren of het aantal verkopen. Toch moeten we niet alleen kijken naar het doel. Er zijn namelijk nog drie andere factoren, namelijk: geschiktheid, esthetiek en waarde.

1. Geschiktheid: Kleuren moeten geschikt zijn voor jouw dienst en/of product. Neem daarin de semantische betekenis mee. Zo zullen pijnstillers niet in het rood worden verpakt vanwege de associatie met pijn. Kies kleur daarom niet alleen op basis van voorkeur.

2. Esthetiek: kleuren moeten niet alleen functioneel zijn, maar moeten ook visueel aantrekkelijk zijn. Luxueuze en exotische producten zullen gaan voor aantrekkelijke kleuren en kijken minder snel naar de pragmatische eigenschappen. Visueel aantrekkelijke kleuren kunnen de aandacht trekken, merkloyaliteit en gebruiksvriendelijkheid vergroten en de geloofwaardigheid verbeteren.

3. Waarde: Kleuren moeten rekening houden met sociale standpunten. Zo zal het kleurgebruik van kleding gebaseerd zijn op de meest actuele modetrends, waardoor zij een hogere sociale waarde hebben. Als laatste moet er gekeken worden naar het pragmatische standpunt. Zo is skikleding vaak fel gekleurd zodat het veel contrast heeft met de omgeving. Hierdoor kan ik geval van nood iemand snel worden gevonden.

Nu jij de juiste balans weet te vinden in geschiktheid, esthetiek en waarde, kan jij de verschillende marketingdoelen aanvullen met het gebruik van kleur. Maar welke doelen zijn dit precies? Uiteindelijk kunnen kleuren drie marketingdoelen aanvullen, namelijk: aandacht, actie en voorkeur.

1. Aandacht: Met (veel) contrast kan de aandacht worden getrokken. Heel handig voor CTA-knoppen. Moet een bestelknop de aandacht trekken? Laat deze dan een sterk contrast hebben met de achtergrond.
2. Conversies: Moeten er meer conversies worden bereikt? Gebruik dan warme kleuren. Samen met een hoge verzadiging en lage helderheid. Dit speelt in op impulsiviteit.
3. Voorkeur: Creëren een positief gevoel als jij voorkeur wil oproepen. Hierbij spelen kleuren met een korte golflengte een rol. Zoals groen en blauw. Over de precieze implementatie later meer.

Kleurassociaties

Je hebt een marketingdoel opgezet, de juiste tint, helderheid en verzadiging toegepast. Daarnaast heb je gelet op de geschiktheid, esthetiek en waarde. Toch werkt het kleurgebruik beter bij de ene bezoeker dan bij de andere. Hoe komt dit?

Elke individu heeft unieke associaties met een kleur. Zo kan één blij worden bij het zien van de kleur rood en de ander boos. Dit komt omdat kleuren associaties oproepen in het brein. Heb jij tweemaal een sollicitatiegesprek gemist door een rood stoplicht? Grote kans dat de kleur rood frustratie oproept. Win jij daarentegen de loterij met een rood lot, dan is jouw associatie met rood waarschijnlijk een stuk positiever.

Associaties zijn aangeleerd vanuit gender stereotypering, zijn ontstaan door gebeurtenissen of zijn door evolutie aanwezig. Laten we een kijkje nemen in de eerste twee: aangeleerde associaties en associaties door gebeurtenissen. De theorie over kleurvoorkeur en evolutie is (nog) minder goed onderzocht.

1. Aangeleerde associaties

Vind jij dat blauw passend is bij jongens en roze bij meiden? Dan is de kans groot dat jij aangeleerde kleurassociaties hebt. Niet gek want elke cultuur heeft ze. Zo worden er van jongs af aan verschillende kleurassociaties meegegeven.

De totstandkoming van deze associaties kan worden verklaar vanuit de Gender Theory. Zo worden kinderen van jongs af aan blootgesteld aan gender stereotypes, denk aan: de kleur ballonen, taart en speelgoed op een verjaardag. Volgens deze theorie ontwikkelen beide geslachten daarom een voorkeur voor de ‘gepaste’ kleur.

Jij kan met je website hierop inspelen: heb jij een website gericht op jongens? Maak dan ook gebruik van kleuren waar jongens zich mee associëren. Heb jij een website voor meiden? Dan profiteer jij ervan om kleuren te kiezen waar meiden zich mee associëren. Niet gek dat de meeste heren- en vrouwenzaken vaak gekleurd zijn naar de gender stereotypes.

2. Associaties vanuit gebeurtenissen

Bij associaties uit gebeurtenissen spreken we over de Ecological Valence Theory (EVT). Volgens deze theorie worden kleuren en gevoelens met elkaar verbonden. Ben jij een enorme Ferrari fan en word jij enthousiast als je één in levenden lijve spot? Dan is er een grote kans dat rood wordt verbonden met het gevoel van enthousiasme. Niet gek dat je daarom een voorkeur creëert voor de kleur rood.

Het geheel aan kleurassociaties

Elke websitebezoeker verwerkt kleur dus op een andere manier. Zo kunnen associaties bij één sterk aanwezig zijn en bij de andere misschien niet eens bestaan. Ben jij een voetbalfan? Dan zal de kleur oranje waarschijnlijk sterke associaties hebben met het Nederlandse elftal. Ben jij een Formule 1 fan? Dan is de kans groot dat McLaren een sterkere associatie heeft. Hoe sterker de associatie is, hoe sneller die op de voorgrond treedt.

Alle associaties vormen samen het associatieve netwerk. Waarin kleur knooppunten vormt met andere aspecten, zoals: oranje met McLaren of met Elftal. Ook wordt het gevoel dat iemand heeft bij deze kleuren opgeroepen. Zie jij McLaren als aartsrivaal van jouw favoriete F1 team? Grote kans dat oranje dan geen positieve gevoelens oproept. Heeft het Elftal net een belangrijke wedstrijd gewonnen, dan kan oranje wellicht weer positieve reacties oproepen.

Het activeren van deze knooppunten gaat geheel onbewust. Bevind jij je op een website en trekt een oranje banner de aandacht? Dan worden alle knooppunten die hebben te maken met oranje geprikkeld. Waarin de sterkste associaties op de voorgrond treden.

Is de kleur goed of slecht?

Voorkeuren van kleur kunnen dus sterk uiteenlopen. Dat kan moeilijk zijn als websitebeheerder. Gelukkig kun jij rekening houden met drie belangrijke factoren, namelijk: ervaring, context en cultuur. Zo kan de Ferrari liefhebber erg houden van de kleur rood, maar zal hij niet blij worden bij rood als hij naar zijn investeringen kijkt. De voorkeur van kleur hangt namelijk ook af van andere factoren.

• Ervaring: houd rekening met je doelgroep en bestaande associaties. Zo kan rood worden verbonden met slechte prestaties als het gaat om een investeerder, maar zal het bij een tomatenboer juist weer kunnen staan voor een goede oogst.
• Context: houd rekening in welke context de kleur wordt gebruikt. Zo kan in de context van dating rood staan voor passie en liefde. Daarentegen zal tijdens het investeren rood staan voor verlies.
• Cultuur: houd rekening met kleur associaties vanuit de cultuur. In Japan wordt wit geassocieerd met de dood. In Nederland wordt daarentegen zwart geassocieerd met de dood.

Hoe beïnvloedt kleur ons

Dat kleur ons beïnvloedt is onderhand wel duidelijk. Maar hoe gebeurt dit dan? Waarschijnlijk ken je het wel: je bent op een website en ziet je een item dat je heel graag wil hebben, sterk afgeprijsd op de voorpagina. Je voelt de hartslag toenemen en er komt een vleug adrenaline bij vrij. Want jij wil nog voordat het uitverkocht is kunnen profiteren van deze mogelijkheid.

Deze vorm van reageren noemen wij een arousal reactie, welke gekenmerkt wordt door een hogere hartslag, bloeddruk en adrenaline. Arousal, afhankelijk van je marketingdoelstellingen, kan de activatie van bezoekers doen versterken of doen afzwakken. Wil jij voor arousal zorgen? Kies dan voor kleuren met lange of korte golflengtes, zoals: rood en paars.

Een tweede vorm van reageren op kleur is de evaluatieve reactie, oftewel hoe leuk vinden de bezoekers een kleur. Ook hierin is de golflengte van een kleur bepalend. Zo roepen korte golflengtes de sterkste reactie op en lange golflengtes de minste sterke reacties. Wil jij dat een website leuk wordt gevonden? Kies dan voor kleuren met een korte golflente, zoals: paars en blauw.

Een reactie kan dus op twee manieren plaatsvinden:
• Arousal reactie: lichamelijke reactie in de vorm van een hogere hartslag, bloeddruk of adrenaline. Arousal reacties kunnen, afhankelijk van je marketingdoelstellingen, activatie van bezoekers versterken of afzwakken.
• Evaluatieve reactie: reactie waarin iemand bepaald of zij een kleur wel of niet leuk vinden. Evaluatieve reacties kunnen worden versterkt om jouw website leuker te magen in de ogen van de bezoeker.

Alle kennis toepassen

Laten we kijken hoe we alle kennis kunnen implementeren op een website. Waar we onderscheid kunnen maken in de markt toepassing en de dimensies van kleur. In het overzicht hieronder kan jij in één oogopslag kleuren vinden die aanvulling geven op jouw marketingdoelen.

Kijk in de tabellen welke markt toepassingen allemaal van belang zijn. Tel daarna in de gehele kolom het aantal vinkjes die bij jou van toepassing zijn. De hoogste scores zijn de kleuren die het meeste aanvulling geven op jouw website.

Veel of weinig arousal?

We hebben eerder gezien dat er twee reactievormen zijn, namelijk: arousal en evaluatieve reacties. Arousal kan ervoor zorgen dat iemand een hogere hartslag krijgt en niet kan wachten om op de bestelknop te klikken. Maar wil je altijd veel arousal?

• Veel arousal: Het oproepen van veel arousal is nuttig in situaties waar jouw bezoekers direct moeten handelen. Veel arousal zorgt voor opwinding en intuïtieve beslissingen. Zoals het abonneren op de nieuwsbrief, het achterlaten van contactgegevens of het aankopen van een product/dienst. Veel arousal is daarnaast handig om veilingen te bevorderen. In deze situaties wil jij kleuren gebruiken met een lange of korte golflengte, bijvoorbeeld: rood, oranje of geel.

• Weinig arousal: Met weinig arousal kan je daarentegen de waargenomen wachttijd doen afnemen. Moet iemand wachten op de website of wil je lange vragenlijsten minder tijdrovend laten lijken? Dan is het oproepen van weinig arousal een handig tool. Weinig arousal zorgt voor een relaxte sfeer en bevorderd rationele beslissingen. Verder kan je met weinig arousal situaties bevorderen waar onderhandeld moet worden. Gebruik in deze gevallen kleuren zoals: groen, blauw en paars.

Aansluiting vinden met de merkpersoonlijkheid

Buiten het oproepen van de gewilde reactie, wil je natuurlijk dat de kleuren jouw merk uitstralen en complementair zijn aan jouw merkpersoonlijkheid. We zetten de kleuren en hun aansluiting met merkpersoonlijkheid nog iets genuanceerder op.

Hoeveel kleuren moet je kiezen?

Je hebt uit de tabellen verschillende kleuren gevonden, maar je weet niet of je alle vier, vijf of zes kleuren moet gebruiken. Geen zorgen, er zijn een aantal makkelijke vuistregels. Zo kunnen we kijken naar het producttype en de hoeveelheid content.

Zijn jouw producten utilitair? Zoals een pan, een hamer of een stofzuiger. Gebruik dan weinig kleuren. Gebruik daarentegen bij hedonische producten meer kleuren om luchtiger over te komen.

Ook bij de hoeveelheid content is het nuttig om kleurgebruik af te stemmen. Bevat de content veel verschillende elementen? Dan is het handig om de achtergrond te verzachten in kleuren. Daarentegen kan content met weinig elementen weer profiteren van meer kleurgebruik.

Meer kleuren combineren

Wil jij meerdere kleuren gebruiken? Houd er dan rekening mee dat kleuren goed samen gaan. Hierbij kan gekeken worden naar drie onderdelen, namelijk: paar voorkeur, paar harmonie en figurale voorkeur. Bij allerdrie de voorkeuren is de relatie tussen voor- en achtergrond de leidende factor.

Zo zijn kleuren in tegengestelde vakken visueel aantrekkelijker als zij verschillende tinten gebruiken. Zoals alle elementen op de voorgrond tegenover alle elementen op de achtergrond. Daarentegen zijn kleuren in hetzelfde vak aantrekkelijker met dezelfde tint. Bijvoorbeeld alle elementen op de achtergrond.

Inspelen op de drie voorkeuren werkt alleen met de juiste kleurenschema’s. Zo zorg jij ervoor dat kleuren elkaar aanvullen en niet elkaar tegenwerken. Er zijn vier populaire kleurenschema’s om meerdere kleuren met elkaar te combineren, namelijk: monochromatisch, analoog, triadisch en complementair.

1. Monochromatische kleurenschema

In het meest eenvoudige kleurenschema, de monochromatische, worden meerdere kleuren gebruikt van dezelfde tint. Dit kleurenschema werkt goed bij chique merken of als er een eenvoudig bericht moeten worden gedeeld.

2. Analoge kleurenschema

Bij dit kleurenschema worden kleuren gebruikt die dicht op elkaar liggen in de kleurencirkel. Waarin de verschillende tinten harmonieus werken. Dit kleurenschema werkt bij merken die een prettig en vertrouwd gevoel willen afgeven.

3. Triadisch kleurenschema

In dit kleurenschema worden kleuren gebruikt die elk 120 graden afstand van elkaar liggen. Waarin één kleur bijvoorbeeld op de achtergrond treedt en de andere op de voorgrond. Het triadische kleurenschema is de populairste methode om kleuren samen te voegen.

4. Complementair kleurenschema

In het complementaire kleurenschema worden kleuren gebruikt die pal tegenover elkaar liggen in de kleurencirkel. De sterk contrasterende kleuren ervoor dat het veel aandacht trekt. Ook handig bij de kleurenkeuze van CTA-knoppen.

Bij het gebruik van meerdere kleuren wil je dus zorgen dat kleuren elkaar aanvullen. Kijk daarom onder andere naar het producttype en de hoeveelheid content die jij gaat plaatsen op de website.

Nu jij alles weet over kleur, is het tijd om je eigen website onder de loep te nemen. Laat kleuren aanvulling geven op de buikbaarheid van je website, je product en natuurlijk de marketingdoelstellingen. Vergeet niet je doelgroep uit het oog te verliezen door te kijken naar associaties en voorkeuren.