Enkele bekende webshops zoals Bol.com, Coolblue, Ebay, Tweedehands,… maken gebruik van de kleur ‘blauw’. Bij webshops zoals Coolblue overheerst deze kleur over de gehele website, terwijl dit bij andere webshops subtiel naar voren gebracht wordt.

Waarom blauw?

De kleur blauw wordt om verschillende redenen toegepast. Zo staat blauw voor ‘onzijdigheid’ in het geslacht. Met deze kleur wordt hier geen onderscheid ingemaakt, maar worden zowel mannen als vrouwen aangetrokken. Dit is toch wel zeer belangrijk bij een webshop dat iedereen zich aangetrokken voelt. Bovendien zorgt blauw ervoor om de rust ergens in terug te vinden. Het is een zeer neutrale kleur die rust en kalmte uitstraalt. Wanneer iemand tot rust zal komen op een webshop, zal hij ook meer vertrouwen krijgen en sneller geneigd zijn om iets te kopen.

Kleurgebruik Bol

Als eerste voorbeeld zal ik kijken naar de website en applicatie van Bol.com. Deze website maakt subtiel gebruik van de blauwe kleur. Het blauw kunnen we terugvinden in een stukje van de menubalk, in enkele buttons en in links. De rest van de pagina bestaat uit wit en beige. Het wit is een koudere kleur dan blauw, wat zorgt voor een strakke uitstraling en een professioneel ogende website. Verder geeft de witte achtergrond mij ook een ‘vrij gevoel’. Er komt geen drukte op mij af en dat voelt aan alsof de website mij nergens toe verplicht. Dit is een gevoel dat je als bezoeker/koper erg op prijs stelt. Voor de rest komen er niet veel andere kleuren aan bod op deze website. Er worden kleine accentjes gelegd met groene ( groen = opvallend, rustig) kleuren (heel beperkt) om bezorgopties duidelijk te maken en rood (opvallend, actie, enthousiast) om de prijs te duiden.

bol2

Bol.com gebruikt over de hele website hetzelfde lettertype. Het onderscheid tussen titels, tekst of links wordt gemaakt door de grootte en kleur van de tekst aan te passen. Dit is positief, want je krijgt geen overvloed te zien aan lettertypes, wat zeer netjes en overzichtelijk is. Ik vind dit zeer aangenaam om dezelfde stijl te zien over de gehele website, met hier en daar een verschil in kleur of grootte. De zwarte tekst op de witte pagina’s zorgen voor een zeer goed en leesbaar contrast. De soms blauwe, rode of groene tekst is iets minder leesbaar, maar omdat dit heel subtiel en meestal voor slechts enkele woorden gebruikt wordt, is dit zeker en vast niet storend. In tegendeel, het zorgt zelfs voor een beetje dynamiek en afwisseling in de website!

Het rustige gebruik van kleuren en het verspreiden van deze kleuren (rood staat niet tegen groen of blauw) maakt deze website toegankelijk voor mensen met kleurenblindheid. Omdat alle kleuren gescheiden staan van elkaar, er veel rekening gehouden is met structuur en witruimtes en de kleuren subtiel gebruikt zijn, is het voor een kleurenblinde veel gemakkelijker om zich een weg te banen doorheen deze webshop.

Kleurenblind en Bol.com

Zowel mensen die lijden aan Deuteranopia (foto links) als Protanopia (foto rechts) kunnen deze webshop nog steeds gebruiken zoals het moet. Bol.com heeft hier rekening mee gehouden en deze types van kleurenblindheid in kaart gebracht. Mensen die hier last van hebben, zullen de webshop als volgt waarnamen (gemaakt via proof setup in Photoshop):

 

Kleurgebruik IndustrialPainter

Ik ben op zoek gegaan naar een voorbeeld waar de rustige en overtuigende blauwe kleur op een totaal verkeerde manier werd toegepast. Dit vond ik op deze website, IndustrialPainter.com. Deze site heeft de voordelen van blauw iets te sterk opgenomen en helemaal verkeerd toegepast. Alles wat je ziet op de website draait rond blauw; de menubalk, draaiende logo’s, datum, tijd, video’s, foto’s, laadbalken,…  Voor mij is dit vrij duidelijk: er is té veel gebruik gemaakt van blauw, waardoor dit nu zelfs een averecht effect heeft op de bezoeker. De bezoeker komt niet meer tot rust, maar wordt eerder afgeschrikt door de overvloed een felle blauwe tinten.

Op deze verschrikkelijke website valt meteen het gebruik van verschillende lettertypes op. het lettertype dat gebruikt werd in het logo, past totaal niet bij de andere fonts op de website. Het lettertype voor grote titels is verschillend van het font van de ondertitels, van de menu én van de body tekst. Alsof dit nog niet erg genoeg is, is de tekst spierwit op een donkerblauwe achtergrond. Hier krijg je echt last van aan je ogen! Ook de gele, rode én oranje kleuren komen niet tot stand op deze felle blauwe achtergrond…

Voor kleurenblinden is deze website een echte nachtmerrie! Er worden zoveel kleuren gebruikt, felle kleuren, dat het voor een kleurenblinde onmogelijk is om nog iets van structuur waar te nemen op deze website. Dit is wel vrij normaal, aangezien dit voor mij, zonder kleurenblind te zijn, al een hele opdracht is om dingen goed te kunnen zien op deze site.

Conclusie

Gebruik op je website, webshop of in je applicatie de juiste kleuren. Deze kleuren moet je kiezen aan de hand van de gevoelens die je wil opwekken bij je bezoekers. Wil je dat je bezoekers tot rust komen? Kies dan bijvoorbeeld voor blauw. Wil je nu dat de mensen honger krijgen bij het bezichtigen van je site? Dan kies je het beste voor oranje. Het is wel heel belangrijk dat je deze kleuren op een juiste manier gebruikt. Ook hier telt het principe: “less is more”. Hoe subtieler je de kleuren kan verwerken in je site, hoe beter het effect op je bezoekers. Het bescheidener gebruiken van een welbepaalde kleur, komt ook veel netter en professioneler over dan het teveel gebruiken van een kleur.

Zorg er tevens voor dat ook de lettertypes aansluiten bij deze gevoelens. Om een overvloed aan lettertypes te vermijden, gebruik je het best maximaal 2 à 3 fonts. Dit kan een font zijn voor grote titels, een font voor inleidingen/intro’s en een font om de body tekst op te maken. Als je nog meer fonts zal gebruiken, zal dit teveel van het goede zijn en ongestructureerd overkomen voor je gebruikers. Kies ook voor een goede kleur van je letters. Dit moet opvallend en goed te lezen zijn, maar je moet er natuurlijk ook geen hoofdpijn van krijgen. Zwart en wit worden het meest frequent gebruikt om deze reden. Ze zijn goed leesbaar (vooral zwarte tekst op een witte achtergrond) en geven rust aan het oog van de gebruiker.

Auteur: Arno Stalpaert

Bronnen: Bol.comIndustrialPainter.com

Screenshots: genomen door mezelf