Home Design Hoe online kleurgebruik kan leiden tot een betere UX en conversie

Hoe online kleurgebruik kan leiden tot een betere UX en conversie

Het kleurenschema is één van de meest bekende basiselementen van webdesign. Kleuren zijn zeer bepalend voor de visuele uitstraling en herkenbaarheid van een website. Daarbij zijn de visuele en psychologische aspecten van kleuren erg belangrijk in de huisstijl van bedrijven. Kleurgebruik vanuit huisstijl laat zich echter niet één op één vertalen naar gebruik op de website.

Kleurenschema en e-commerce

Een juist gebruik van een kleurenschema in het ontwerp zorgt voor een visueel aangenaam en overzichtelijke uitstraling en zorgt dat gebruikers de website als “mooi”, “professioneel ogend” en “plezierig” karakteriseren.

Bovendien is online kleurgebruik een onmisbaar hulpmiddel voor snel, doelgericht en probleemloos uitvoeren van bepaalde acties op een website. Correct gebruik van kleuren leidt de gebruiker doelgericht door de site en verhoogt het de conversie. Toch ziet men het vaak over het hoofd dat het één op één toepassen van corporate kleuren in een online omgeving niet altijd goed werkt, vooral niet in e-commerce.

Gebruikersoriëntatieproces

We weten al lang dat bezoekers webpagina’s niet lezen, maar scannen. Gebruikers zoeken naar informatie of aanwijzingen om een taak uit te voeren. Dit proces is grotendeels onbewust en duurt soms slechts een fractie van een seconde. We onderscheiden de volgende fasen in het proces:

  • Eerst wordt de basis grid waargenomen met daarin de gebieden voor navigatie en content (Waar ben ik?)

    Grid voorbeelden
    Een aantal layout (grid) voorbeelden
  • Vervolgens worden afbeeldingen waargenomen: designvisuals en banners. (Wat valt er op?)
  • Daarna komen icoontjes en buttons aan de beurt. (Wat kan ik hier doen?)
  • Indien de gebruiker naar informatie zoekt, worden eerst:
  1. Titels “gelezen”, dan
  2. Subtitels, vetgedrukte tekstfragmenten en opsommingstekens
  3. om versneld vast te stellen waar de gezochte gedetailleerde informatie zich bevindt (volgens Inverted Pyramide principe):

Het omgekeerde piramide principe
Het omgekeerde piramide principe

  • Wanneer de gebruiker het uitvoeren van een bepaalde actie tot doel heeft, zoals het kopen van een product, wordt door de gebruiker meteen naar buttons en daar aan gerelateerde links gezocht. Hierbij wordt meestal niet eerst de bijbehorende tekst of uitleg gelezen (dat gebeurt pas in vervolg fase).

Interactie

Binnen e-commerce sites is het doen van aankopen, de bepalende succesfactor. De gebruiksvriendelijkheid wordt ook hier in hoge mate bepaald door kleurgebruik. Voorwaarde is dat de kleuren consistent gekoppeld worden aan de sleutel pagina-elementen.

Cruciaal hierbij is het gebruik van zogenaamde actiekleuren; de meest prominente en duidelijke kleur uit het gebruikte kleurenschema koppel je aan het actie-elementen van de website. Dit zorgt dat de mogelijke acties áltijd duidelijk opvallen op een pagina, wat zorgt voor een conversieverhogende, gelaagde structuur: eerst producten en acties, dan de informatielaag.

Betekenis en gebruik van de actiekleur

De actiekleur koppel je aan de menu’s, tabs, links en primaire buttons. Het is een goede praktijk om hierbij twee varianten te hanteren:

  1. primaire acties – Gebruik de meest prominente en in het oog springende kleur uitsluitend voor unieke, meest belangrijke acties (bestellen, betalen etc.).
  2. secondaire acties – Gebruik een duidelijke maar minder prominente kleur voor alle andere actie gerelateerde elementen, zoals minder belangrijke buttons (wenslijst, print, zoek etc.)

Wat overblijft zijn content en designelementen: voor de content en overige informatie gebruik je altijd een goed leesbaar lettertype, met voldoende leescontrast (donker op licht).

Praktijkvoorbeeld

Een schoolvoorbeeld van toepassing van alle bovengenoemde principes van online kleurgebruik is bol.com. Door gebruik van een duidelijk en consistent kleurschema weten gebruikers meteen wat ze op elke pagina kunnen doen (aanklikken).

bol.com voorbeeld
Consistent gebruik van actiekleuren

Blauw is hier de actiekleur en als gevolg hiervan is -letterlijk alles wat blauw is- aanklikbaar (A).

Alles wat overblijft, en ook niet blauw is, is statische informatie (“platte tekst”) (B).

De belangrijke uitzondering op deze regel is hier uiteraard de primaire actiekleur, die gereserveerd is voor de meest belangrijke en in het oog springende actie, nl. de button “In winkelwagentje” (C). De consument komt makkelijk bij de checkout.

Zo hoeft een bezoeker zich geen seconde bewust of onbewust af te vragen wat hij/zij kan of moet doen om de gewenste actie uit te voeren. Kleuren leiden de weg.

Toenemend belang van kleurenschema door mobiele apparaten

In de loop van de laatste paar jaar, is door snelle ontwikkelingen op mobiel gebied, het belang van het kleurenschema voor herkennen van mogelijke acties op een pagina verder toegenomen, mede door het ontbreken van het hover (rollover) effect in de touch-screen interfaces. Hierdoor moet het actiekleurenschema op de mobiele apparaten duidelijker zijn dan ooit.

Concluderend, de belangrijkste richtlijnen voor online kleurgebruik:

  • Maak gebruik van een duidelijk en consistent kleurpalet van maximum 5 hoofd- en steun-kleuren
  • Reserveer 1 steunkleur voor acties (links, buttons en menu’s)
  • Reserveer 1 unieke, meest prominente kleur voor primaire acties (conversie gerelateerd)
  • De rest moet je consistent toepassen door de gehele website en in overeenstemming zijn met de corporate style en design richtlijnen waarbij gebruikersvriendelijkheid nooit uit het oog verloren mag worden.

Meer lezen

Afscheid nemen van de ‘Gemiddelde positie’ in Google Ads

Na ruim 15 jaar trouwe dienst gaat een van de oudste metrics van Google Ads verdwijnen. De ‘gemiddelde positie’ kun je vanaf...

Wat houdt SEO precies in?

Veel bedrijven kiezen ervoor om tijd en geld te investeren in SEO. Als jij een online platform beheert, is de kans groot...

Vijf tips voor een succesvolle advertenties op YouTube

Advertenties op YouTube vertonen overeenkomsten met advertenties op andere kanalen. Toch moeten de advertenties op Youtube wel speciaal ontworpen worden voor het...

Vier tips voor het toegankelijk maken van je website

In Nederland heeft iedereen het recht om mee te doen aan de maatschappij. Het gebruiken van internet, computers en telefoons hoort hier ook bij....

Strong Customer Authentication: nieuwe online veiligheidsmaatregelen

Eerst bracht de GDPR al veel veranderingen te weeg voor webshops, maar de invoering van de Strong Customer Authentication (SCA) gaat weer...