Dit artikel is speciaal geschreven voor Usabilityweb Magazine
Goed kleurgebruik zou gebaseerd moeten worden op esthetiek, identiteit en usability. Helaas komt het in de praktijk meestal neer op gevoel en smaak. In dit artikel komen verschillende achtergronden aan bod die voorbij gaan aan het buikgevoel, maar die de basis kunnen vormen voor weloverwogen kleurgebruik.
Kleur als persoonlijkheid
Een groot aantal ontwerpers en opdrachtgevers staan niet vooraf stil bij de keuze voor kleur. Terwijl kleur voor een heel groot deel verantwoordelijk is voor de persoonlijkheid van een huisstijl of website. De keuze voor een specifieke kleur kan iets goedkoop maken of heel kostbaar, maar ook straalt een kleur vertrouwen uit of misschien wel rust. Ondanks dat is het geen rigide richtlijn, die overigens nog per cultuur kan verschillen.
Kleuren met betekenis (perceptie volgens onze cultuur) en associaties volgens Leonardo da Vinci zoals gepubliceerd op nl.wikipedia.org/wiki/Kleur
Oranje
Het bovenstaande tabel met betekenis en associatie is niet uitputtend, neem de kleur oranje bijvoorbeeld. Deze kleur staat voor “feest” en is bij uitstek een informele kleur. Niet gek dat veel bedrijven zoals EasyJet (en aanverwanten) en Orange hun persoonlijkheid aan deze kleur willen ontlenen. Weinig mensen zouden EasyJet aanvankelijk met “weelde” associëren, maar dankzij de betaalbare aanbiedingen van EasyJet kunnen meer mensen veel meer en verder reizen dan voorheen. Als dat geen “weelde” is…?
Een ander voorbeeld van weelde: Staatsloterij
Foto: Flickr.com: Red Push Buttons (Mash-Up)
Oranje zou overigens ook eetlust opwekken, stel je voor wat deze kleur voor een restaurant zou kunnen doen? Dergelijke associaties kunnen dus heel waardevol zijn bij het ontwerpen van een online uitstraling. In het boek “Principles of Beautiful webdesign” (Sitepoint.com) door Jason Beaird, met een interessant hoofdstuk over kleur-psychologie, verwijst de auteur naar een cd van Ken Nordine “Colors”. Een cd gevuld met gesproken “odes” aan kleur, die qua stemming en achtergrondmuziek overeen komen met de betekenis en associaties van kleur. Daarnaast is zijn de korte animaties op www.mariaclaudiacortes.com/colors/Colors.html naast leerzaam, ook erg vermakend.
Kleur in usability
Kleuren hebben in ons dagelijks leven een vaste betekenis. Een rood of groen stoplicht, een rode of blauwe kraan, wij leren van jongs af aan wat ze betekenen en nemen die betekenis onbewust ook mee bij het beoordelen van andere objecten met deze kleur.
Usability-puristen zullen grote moeite hebben om een activerende knop een een webpagina of formulier rood te maken. Rood betekend namelijk “alarm, pas op, onveilig”. Aan de andere kant is rood een kleur met een hoge attentie waarde, deze rode knop zou beslist opvallen op een pagina.
Tenminste… voor mensen zonder een visuele handicap. Één op de twintig mannen kan geen of slecht onderscheid zien tussen rood en groen.
“Was u die zelfmoordenaar?” Vroeg de commandant van vliegbasis Twente in 1965 aan M.Noothoven van Goor. De dienstplichtige militair zat in de kantine achter een biertje bij te komen, samen met de piloot die hem in zijn straaljager op een haar na had gemist. Van Goor reed in zijn auto over de weg die de startbaan kruiste. Bij het oprijden van de startbaan brandde de onderste lamp van het verkeerslicht en Van Goor gaf gas. Het dalende vliegtuig miste hem rakelings. Ook de piloot dacht dat zijn laatste uur geslagen was.
Na dit incident paste de luchtmacht de verkeerslichten aan. Rood kwam voortaan boven, groen onder. Van Goor, volledig kleurenblind voor rood en groen, had het onderste, rode stoplicht als groen geïnterpreteerd!
(Bron: www.kleurenblindheid.nl | NRC Handelsblad, W&O, 2001)
Testen voor kleurenblindheid
Hoewel er wordt gezegd kleurenblindheid op websites niet zoveel problemen geeft, voor de ontwerper en tester bestaan diverse manieren om te controleren of het gekozen kleurenpallet tóch voldoende contrast biedt bij een visuele afwijking. Op eenvoudige wijze kan vast gesteld worden of links, buttons en navigatie voor iedereen voldoende kunnen opvallen. Het is tevens een manier om te testen of het gekozen kleurenpallet geen overdaad aan variaties biedt, ongeacht de eventuele afwijking van de bezoeker.
Sim Daltonisme (OSX)
Voor Apple gebruikers bestaat het programma Sim Daltonisme (http://michelf.com/projects/sim-daltonism/). In een extern venster legt het programma (donatie-ware) een filter over het te testen gedeelte. Daarmee kunnen 8 verschillende kleurenblindheidafwijkingen getest worden op contrast en zichtbaarheid.
Online testtools
Tanja,
Je schrijft “Usability-puristen zullen grote moeite hebben om een activerende knop een een webpagina of formulier rood te maken. Rood betekent namelijk “alarm, pas op, onveilig”
Ik kan met stelligheid zeggen dat een rode knop meestal (ongeveer op 80% van de websites) ‘beter’ werkt. Beter in de zin van ‘ze klikken er meer op’.
Let op, dit is niet altijd zo (achtergrond, andere omgevingsfactoren en zelfs het type website kunnen een rol spelen).
Hoe ik dat weet? Omdat ik het gemeten heb.
Ik was geïntrigeerd naar het waarom, want rood dat is inderdaad, in onze cultuur, gecorreleerd met “alarm, pas op, onveilig” met ‘gevaar’ dus.
Een mogelijke verklaring kan zijn dat ons oudste gedeelte van ons brein (bestempelen ze ook wel eens als het reptielen brein) vooral getriggerd wordt door 3 zaken:
* Eten
* Seks
* Gevaar
Gevaar impliceert niet altijd een vlucht reflex. Razendsnel kan ons brein beoordelen ‘ok, dit is gevaarlijk, maar niet voor jou’ en dan blijkt dat ‘gevaar’ een magistrale aantrekkingskracht heeft.
Zie bv. ook de kijkfiles wanneer ergens een ongeluk heeft plaats gehad. We foeteren allemaal op degene die vertragen, maar we kijken allemaal wel héél graag zelf naar de ravage.