Kleuren beschikken over een sterke functie: een groene banaan is nog niet rijp, rode lippen nodigen meer uit om te kussen, grijze etenswaren zijn doorgaans niet erg smakelijk en brengen de gezondheid in gevaar. De oorsprong ligt in de biologie; kleuren helpen mens en dier om juiste keuzes te maken en zo uiteindelijk te overleven. De functies van kleur liggen zo diep verankerd in ons systeem dat we onbewust een groot deel van onze keuzes laten afhangen van de kleur die we waarnemen. Daarom zijn de kleuren die je online kiest van groot belang voor de waardering bij de ontvanger. Vind je het moeilijk om kleuren voor je website te kiezen? In dit artikel bespreek ik enkele functionele en emotionele aspecten van online kleurgebruik en de zaken waar je rekening mee kunt houden wanneer je kleur wilt inzetten in je online uitingen.

Kleurfuncties

Online is het juiste kleurgebruik nog veel meer aan de orde. Producten uit bijvoorbeeld een webshop zijn immers niet tastbaar en bezoekers kunnen ze ook niet proeven of ruiken. Bovendien is een computerscherm nog altijd weinig menselijk, dus ‘die vriendelijke stem van de verkoopster’ helpt je online ook niet verder. Het enige dat rest is het bekijken van en het lezen over producten, 2 voornamelijk visuele aangelegenheden. Aangezien de bezoeker misschien overgaat tot het bestellen van het product is het aan jou de taak de bezoeker visueel zoveel mogelijk te verleiden. Wist je dat mensen gemiddeld binnen 90 seconden nadat ze een product hebben gezien een (onbewust) oordeel vellen over een product en dat dat oordeel voor 85% (pdf) is gebaseerd op de kleur?

Kleurgebruik in een advertentie

Identiteit en zichtbaarheid

Sta je op het punt een visuele huisstijl te definiëren? Dan is het verstandig je vandaag de dag expliciet te focussen op je online kleurenpalet. Niet alleen je logo, briefpapier en visitekaartjes verdienen aandacht; het is verstandig ook juist alle mogelijke online uitingen onder de loep te nemen. Denk hierbij aan je website, mailings, social media en apps. Leg je kleuren vast in huisstijlregels, maar reserveer wel speelruimte zodat je jezelf niet te veel beperkingen oplegt.

Stel vooraf vast wat je met je website wilt bereiken en houd hierbij rekening met je doelgroep. Zij dienen zich thuis te voelen in een omgeving waarmee zij zich kunnen associëren.

Kleuren en je identiteit: signalen uitzenden, emoties bespelen

De kleuren die je laat zien, zeggen iets over je identiteit:

  • Wie ben je?
  • Waar ligt je oorsprong?
  • Waar sta je voor?
  • Hoe wil je op je doelgroep/ anderen overkomen?

Mede om die reden hanteren mensen en merken dus kleuren in hun kleding, make-up, sieraden, logo en huisstijl en reclame-uitingen om een boodschap te communiceren:

  • Lage prijzen
  • Degelijkheid
  • Gezond
  • Betrouwbaar
  • Luxe
  • Sportief

Aangezien mensen kleuren (onbewust) koppelen aan emoties is het dus raadzaam om op je website kleuren te gebruiken die aansluiten bij de verwachtingen van je doelgroep. Dat hoeven niet per definitie kleuren te zijn die je bezoekers ‘mooi’ vinden: kleur kan ook een signaal afgeven dat de bezoeker op de juiste plek verkeert om zijn of haar taak te verrichten.

Tegenover de publiekslieveling blauw staat zijn complementaire (tegenovergestelde) kleur oranje. Oranje is naast bruin de minst favoriete kleur. Mensen associëren oranje vaak met ‘goedkoop’, ‘niet expressief’ of ‘gewoon’. En laten we eerlijk zijn, wie wil nu over zo’n imago beschikken? Toch is het voor merken die deze kleuren gebruiken vaak een middel om aan te geven: ‘Kom in mijn winkel, daar betaal je nooit te veel en zijn we er voor gewone mensen’.

Hieronder tref je een overzicht van kleuren en de emoties/ waarden die mensen hier (onbewust) aan toekennen. Bij het definiëren van je visuele (online) huisstijl kun je hier gebruik van maken. Waarschijnlijk herken je bepaalde waarden  in de logo’s van bekende merken.

Kleurentabel

Verschillen tussen mannen en vrouwen

Vraag je af of je doelgroep overwegend uit mannen of vrouwen bestaat. Het is namelijk verbazingwekkend hoe groot de verschillen in de kleurvoorkeuren tussen de beide seksen zijn. Mannen prefereren doorgaans fellere kleuren, grijswaarden en schaduwkleuren (kleuren gemengd met zwart), terwijl vrouwen juist de voorkeur geven aan zachtere kleuren en tinten (kleuren gemengd met wit). Ook de voorkeur voor specifieke kleuren wijkt af: onderzoek heeft uitgewezen dat het merendeel van de mannen helemaal niets heeft met de kleur paars. Ben je bekend met je doelgroep, dan kun je hier rekening mee houden.

Knoppen: de online klikmagneten

Een knop geeft doorgaans aan dat je bezoeker een bepaalde actie kan verrichten (‘call-to-action’) en dat er dus iets staat te gebeuren zodra erop wordt geklikt. Natuurlijk wil je dat jouw bezoeker die ene taak verricht die jij voor hem of haar voor ogen hebt. Je dient er dus voor te zorgen dat je knoppen opvallen en dat ze er voor je bezoeker zo aantrekkelijk mogelijk uitzien. Dit kun je bereiken met de stijl, maar bovenal met de kleur van je knoppen. Juist hier kun je inspelen op de sturende emotionele kracht van kleur en is het effect ervan goed meetbaar:

  • Een groene knop kan bijvoorbeeld suggereren: ‘Het is oké: als je mij aanklikt worden je wensen in vervulling gebracht. Maak je vooral geen zorgen‘.
  • Een rode knop zou kunnen betekenen: ‘Klik nu op mij, voordat het te laat is‘.

Zorg voor contrast met omliggende kleuren op je pagina, je ‘klikmagneet’ dient eruit te springen. Houd tekst in knoppen goed leesbaar door contrasterende kleuren te gebruiken en voorkom hiermee dat bezoekers moeten nadenken over de functie ervan.

Bestelknoppen
Stel je bent een stoere vent en je wil een prijzige spijkerbroek bestellen. Welke knop zou jij indrukken?

Tekst en kleur

Tekst en kleur zijn – zeker online – niet altijd even goede vrienden. Teksten zijn er om te worden gelezen. Wil je dat als bezoeker makkelijk kunnen doen, dan is het van belang dat het contrast tussen de tekst en de achtergrond zo groot mogelijk is. Een boek leest altijd nog het prettigst wanneer er zwarte tekst op witte pagina’s staat, online is dat niet veel anders. Toch kun je in platte tekst best spelen met kleur zolang je hier functionaliteit (leesbaarheid) voorop stelt.

Markante koppen

Bezoekers zijn doorgaans lui wanneer het aankomt op het lezen van online teksten. Ze scannen de tekst door het lezen van koppen en subkoppen. Inhoudelijk zouden die dus compact moeten zijn en een duidelijke indicatie moeten geven betreffende de onderliggende alinea’s. Visueel gezien kun je hier de aandacht op vestigen door deze koppen ‘vet’ te maken of een afwijkend lettertype te gebruiken, maar zeker ook door daar meer opvallende kleuren voor te gebruiken.

Laat links niet links liggen

Hyperlinks hebben een aparte status binnen online tekstgebruik; ze vertellen de bezoeker dat hij of zij bijvoorbeeld naar een andere pagina kan navigeren en hebben voor de opvallendheid een ander uiterlijk dan de omliggende tekst. Van oorsprong zijn hyperlinks blauw en onderlijnd; dit gaf in de beginjaren van het internet het beste contrast op de standaard grijze/ neutrale achtergrondkleur van de browsers. Links die eenmaal waren bezocht, kregen een paarse kleur zodat de bezoeker wist dat hij de betreffende pagina al eerder had bezocht.

Inmiddels is er veel veranderd en kun je de kleuren van je tekstlinks beter laten matchen met je huistijlkleuren. Probeer echter wel consistent te blijven in het gebruik van je links en definieer er aparte kleuren (en stijlen) voor in je kleurenpalet. Gebruik bijvoorbeeld 2 varianten: extra opvallende tekstlinks waarvan je graag wilt dat je bezoeker er op klikt (om bijvoorbeeld naar een van je productpagina’s te gaan) en minder opvallende tekstlinks (een subtiele kleur- of stijlvariant van je platte tekst) voor bijvoorbeeld links naar je algemene voorwaarden of externe websites.

Waarom moeilijk doen als het ook makkelijk(er) kan?

Er zijn diverse online tools beschikbaar die je kunnen helpen bij het samenstellen van je online kleurenpalet. Zo kun je op basis van de kleuren van je logo bijpassende kleuren bij elkaar zoeken. Hoewel ik in een volgend artikel nader in ga op de technische aspecten van online/digitaal kleurgebruik en daar ook enkele gereedschappen zal bespreken, vind je hieronder alvast een aantal handige tools om online kleuren samen te stellen. Probeer ze maar eens uit.

Test je kleuren

Helaas worden kleuren niet op alle beeldschermen consistent weergegeven. Gebruik je bijvoorbeeld lichte grijstinten, dan kan het zo zijn dat deze er op oudere of slecht afgestelde beeldschermen anders uitzien dan op het retinascherm van je tablet of smartphone. In het ergste geval zijn zeer lichte kleuren helemaal niet zichtbaar. Wees met subtiele kleurnuances dus extra voorzichtig en test deze vooraf. Verzamel bijvoorbeeld je complete kleurenpalet in een afbeelding en plaats deze in een HTML-bestand waarin je hexadecimale kleuren gebruikt en bekijk deze op zoveel mogelijk verschillende beeldschermen.

Ben je benieuwd naar de impact van het kleurgebruik bij je online bezoekers en vraag je jezelf af wat nu het effect is van de kleuren die je gebruikt? In dat geval kun je door middel van A/B-testen kijken wat bepaalde kleuren teweegbrengen. Bij een dergelijke test wordt gemeten welke versie het best door je bezoeker wordt beoordeeld. Zo kun je bijvoorbeeld experimenteren met tekstkleur of call-to-action-knoppen om te kijken of je bezoekers meer bereid zijn je content te lezen of om tot een bestelling over te gaan. De mogelijkheden met dit soort tests zijn praktisch oneindig. Handige tools hiervoor zijn bijvoorbeeld Visual Website Optimizer, Optimizely of de gratis experimenten binnen Google Analytics.

Heb je vragen? Aarzel dan niet om hieronder een reactie achter te laten.

Delen
Reacties
  • C.A.F van der Male 21 maart 2014 om 19:29

    Interessant. Redelijk wetenschappelijk en toch goed leesbaar. Ik zal het doorsturen aan mijn vriend en kleur-educatie deskundige, Hans Vrijmoed.

  • Anita van Helvoirt 18 april 2014 om 15:34

    Dankjewel voor deze bruikbare tips. Wetenschappelijk en toch goed begrijpbaar voor een amateur zoals ik. Groetjes Anita.

Reageer

Praat mee over dit onderwerp