DOOR DE OGEN VAN
KLEUREN BLINDEN
Seminar (DreamDiscoverDo) Claudia Hoving 1623027 11 juni 2015 Jaar 3 - Blok D Hanneke Ponten Hogeschool Utrecht 1
Inhoudsopgave
I. II. III. IV. V. VI. VII.
Inhoudsopgave Inleiding & onderzoeksopzet Wat is kleurenblindheid precies? Welke soorten kleurenblindheid bestaan er? Waar wordt kleur voor gebruikt bij websites? In hoeverre beïnvloeden kleuren de mens? Wat wordt er verstaan onder de gebruiksvriendelijkheid van websites? Wat voor problemen ondervinden kleurenblinden op het internet? Hoe wordt een website toegankelijk gemaakt voor kleurenblinden? Conlusie Bronnen Bijlage – Reflectieverslag
4 5 6 8 11 13 15 17 21 25 27 29
2
“Wat nou als diegene iets totaal anders ziet dan ik?”
3
Inleiding & onderzoeksopzet Inleiding Als CMD-er leer ik te ontwerpen voor een specifieke gebruiker. Ik verdiep mij in mijn gebruiker om er achter te komen wat hem of haar beweegt en wat zijn of haar voorkeuren en gewoontes zijn. Ik probeer als het ware door de ogen van mijn gebruiker te kijken. Maar wat nou als diegene iets totaal anders ziet dan ik? Kleurenblinden hebben een afwijkende kijk op de wereld, die voor nietkleurenblinden lastig voor te stellen is. Om te kunnen begrijpen wat kleurenblindheid precies inhoudt, heb ik mij verdiept in de werking van het oog, hoe vanuit daar de afwijking tot stand komt en welke soorten afwijkingen er voorkomen. Door de juiste kennis over kleurenblindheid kan men zich enigszins verplaatsen in een kleurenblinden. In een poging om mijzelf te verplaatsen in een kleurenblinde, probeerde ik mijn hoofdvraag “Hoe kan ik als designer rekening houden met kleurenblinden als het gaat om usability van websites?” te beantwoorden.
Het beeld van een kleurenblinde.
Feit is dat designers bij het creëren van de optimale usability zich onder andere bezighouden met kleur. Hoe belangrijk deze kleur daadwerkelijk is, wordt pas duidelijk wanneer dit wegvalt. Hoe ervaart een kleurenblinde de gebruiksvriendelijkheid van verschillende websites? Door middel van onderzoek en tests probeer ik hier achter te komen. Evenals wat kleur over het algemeen met de mens doet. Wat voor een impact heeft kleur op een mens en wat voor invloed heeft dit op zij of haar gedrag? Na het struinen door vele kleurenstudies en psychologiën, kan ik hier een antwoord op geven. Uit dit onderzoeksverslag zal blijken waar op gelet moet of kan worden als het gaat om het ontwerpen van een website die toegankelijk is voor kleurenblinden. Onderzoeksopzet Hoofdvraag Hoe kan ik als designer rekening houden met kleurenblinden als het gaat om usability van websites? I. II. III. IV. V. VI. VII.
Deelvragen Wat is kleurenblindheid precies? Welke soorten kleurenblindheid bestaan er? Waar wordt kleur voor gebruikt bij websites? In hoeverre beïnvloeden kleuren de mens? Wat wordt er verstaan onder de gebruiksvriendelijkheid van websites? Wat voor problemen ondervinden kleurenblinden op het internet? Hoe wordt een website toegankelijk gemaakt voor kleurenblinden?
4
kleu·ren·blind bn -en 1 niet in staat (bep.) kleuren te onderscheiden
5
I. Wat is kleurenblindheid precies? Term kleurenblind In het woordenboek staat het woord ‘kleurenblind’ als volgt omschreven; niet in staat (bep.) kleuren te onderscheiden (Boer, W.Th. de, 2006). Deze definitie maakt de term kleurenblind verwarrend. Gehele en gedeeltelijke kleurenblindheid of daltonisme, waarbij iemand een of meerdere kleuren niet kan waarnemen, komt zelden voor. Het gros van de mensen die kleurenblind is, kan wel degelijk kleuren waarnemen maar kan deze minder goed onderscheiden van elkaar. Een juiste term hiervoor is ‘kleurenzwakte’ (Oudenampsen, D., & Flikweert M., 2010). Opbouw en werking van het oog Met het blote oog kan men niet zien of iemand kleurenblind is. Zowel wij niet aan de buitenkant, als een oogarts in het oog zelf. In het oog bevindt zich een lenzenstel, diafragma en een lichtgevoelige filmplaat. Het diafragma ligt tussen de twee verschillende lenzen van het lenzenstelstel in. Het hoornvlies is het voorste gedeelte van je oog dat zich bevindt in het midden van het oogwit. Daarna volgt de iris of het regenboogvlies met de pupil als kleine opening in het midden. Direct hierachter bevindt zich de ooglens. Het lenzenstelsel zorgt ervoor dat wij scherp kunnen zien. Licht uit onze omgeving wordt weerkaast in onze ooglens. Deze bundelt al het licht en projecteert deze op de binnenkant van onze oogbol, de lichtgevoelige filmplaat die we het netvlies noemen. Het netvlies bestaat uit fotoreceptoren, dit zijn lichtgevoelige cellen. Deze cellen kunnen onderverdeeld worden in twee soorten, staafjes en kegeltjes. Het oog bestaat uit zo’n 120 miljoen staafjes. Deze staafjes bevinden zich in het gehele netvlies. Zij zorgen ervoor dat we in het donker kunnen zien. Wanneer het donker is of schemert, werken alleen de staafjes. Met de staafjes kunnen we geen details of kleur waarnemen. Daarnaast bestaat uit het oog uit zo’n 6 miljoen kegeltjes. Deze kegeltjes zitten dicht bij elkaar in het netvlies, middenachter de ooglens. De bundel van al deze kegeltjes heet de fovea of gele vlek. Met de kegeltjes kijken we wanneer er voldoende (kunst)licht is, hiermee kunnen we details en kleuren zien. Het beeld dat geprojecteerd wordt op het netvlies wordt omgezet in elektrische signalen. Deze signalen worden via de oogzenuw, die zich achter het netvlies bevindt, naar de hersenen geleid. Onze hersenen zetten deze signalen weer om in het juiste beeld en maakt ons bewust van hetgeen dat wij waargenomen hebben.
6
Kleurenblindheid ontstaat door een afwijking van de kegeltjes in het netvlies. Er bestaan drie soorten kegeltjes met ieder een eigen spectrale gevoeligheid. De kegeltjes kunnen benoemd worden aan de hand van het golflengtegebied waarin ze hun grootste gevoeligheid hebben. De termen short, long en medium worden gebruikt voor het gebied van kortgolvig tot langgolvig licht. (Deutscher, G., 2012). 2% van alle kegeltjes is gevoelig voor de kleur blauw: S-kegeltjes 33% van alle kegeltjes is gevoelig voor de kleur groen: M-kegeltjes 65% van alle kegeltjes is gevoelig voor de kleur rood: L-kegeltjes (Uvijls, A., 1998) Dit zijn de primaire kleuren die door eindeloos te combineren alle mogelijke kleuren van het kleurenspectrum kunnen creëren. Kleuren die wij zien worden ontleed in verschillende componenten die ieder van deze drie kegeltjes kan verwerken. De signalen die de kegeltjes afgeven worden dan in de hersenen weer samengevoegd tot de kleur die wij zagen. De verhouding van absorptie van de kleuren zorgt ervoor dat onze hersenen kunnen bepalen welke kleur we exact waarnamen. Een gelijktijdige stimulatie of verdeling van alle drie de soorten kegeltjes zorgt ervoor dat wij wit waarnemen. Erfelijkheid Kleurenblindheid kan zowel aangeboren als verworven zijn. Aangeboren of congenitale kleurenblindheid is de meest voorkomende vorm. Hiervan is sprake bij zowel rood- en groen-zwakte als bij roodgroen kleurenblindheid. We spreken hierbij van geslachtsgebonden recessieve overerving. De afwijking die deze kleurenblindheid veroorzaakt ligt op het X-chromosoom. Dit betekent dat de afwijking doorgegeven kan worden door zowel man als vrouw. Omdat er sprake is van recessieve overerving, komt kleurenblindheid enkel tot expressie als beide genen de afwijking bevatten. Wanneer een aandoening recessief erfelijk is, overheerst het goede gen altijd. Bij vrouwen geldt dus dat zij alleen kleurenblind kunnen worden wanneer beide X-chromosomen de afwijking bevatten. Wanneer slechts één van de X-chromosomen de afwijking bevat is een vrouw draagster. In principe kan een meisje enkel geboren worden met kleurenblindheid wanneer de vader kleurenblind is en de moeder draagster of ook kleurenblind is. Over het algemeen worden alleen mannen kleurenblind aangezien de kans klein is dat beide X-chromosomen de afwijking bevatten. Omdat mannen slechts één X-chromosoom hebben, worden zij altijd kleurenblind als deze ene chromosoom de afwijking bevat. Er is dan namelijk geen X-chromosoom met het ‘goede’ gen om dit op te heffen. Mannen kunnen de kleurenblindheid niet doorgeven aan hun zoons (Y) maar hun dochters zijn altijd drager van het gen (X) (LICG, 2011). Kleurenblindheid die niet aangeboren is, kan het gevolg zijn van bijvoorbeeld een netvliesaandoening. Bij verworven kleurenblindheid is er vrijwel altijd sprake van blauw-zwakte of blauw-geel kleurenblindheid.
7
II. Welke vormen van kleurenblindheid bestaan er? Kleurenzien kan verdeeld worden in verschillende vormen.
Het beeld bij normale trichromatopsie.
3 kleuren Wanneer men in staat is om alle kleuren uit het kleurenspectrum te onderscheiden dan spreken we van normale trichromatopsie. Dit betekent dat alle drie de soorten kegeltjes van het netvlies goed functioneren. Wanneer een persoon wel alle kleuren waar kan nemen, net zoals een trichromaat, maar moeite heeft om deze van elkaar te onderscheiden, dan spreken we van anomale trichromatopsie. Deze vorm komt overeen met de term kleurzwakte, bij deze vorm is er sprake van een verminderde gevoeligheid van de kegeltjes voor een of meerder kleuren. De zwakte is onder te verdelen per kleur: deuteranomalie (groen-zwakte) Deze vorm komt bij 1 op de 20 mannen voor en is daarmee de meest voorkomende vorm van kleurenblindheid. Tevens is dit de vorm van kleurenblindheid die het meest bij vrouwen voorkomt, desondanks wordt slechts 0,4% van de vrouwen geboren met deze afwijking. Bij deze zwakte is er sprake van een verschuiving van het opnemingsvermogen van de M-kegeltjes naar het rode gedeelte van het spectrum. Alle kleuren waar een groene tint in zit, worden rossig. De kleuren; groen, groen-geel, geel en oranje, worden rode tinten. protanomalie (rood-zwakte) Deze vorm komt bij 0,1% van de mannen voor en is erg zeldzaam bij vrouwen. Bij deze zwakte is er sprake van een verschuiving van het openingsvermogen van de L-kegeltjes naar het groen gedeelte van het spectrum. Alle tinten die rood bevatten worden groenig, zoals; rood, oranje, geel en geelgroen. De kleuren magenta en violet neigen naar blauwe tinten. tritanomalie (blauw-zwakte) Deze vorm bestaat maar komt vrijwel nooit voor. 2 kleuren Wanneer een persoon slechts de kleuren waar kan nemen die samengesteld zijn door twee primaire kleuren, spreken we van dichromatopsie. Dit is een vorm van gedeeltelijke kleurenblindheid. Hierbij geldt dat het oog totaal ongevoelig is voor een bepaalde kleur door het ontbreken van een van de soorten kegeltjes. Ook deze vorm is onder te verdelen per primaire kleur: deuteranopie (ontbreken van de M-kegeltjes) Ongeveer 1% van de mannen heeft deze vorm van kleurenblindheid, onder de vrouwen is dit slechts 0,01%. Alle kleuren die een deuteranoop kan zien zijn een mix van rood en blauw. De ‘kleur’ wit wordt in hun geval dan ook gevormd door slechts deze twee primaire kleuren.
8
protanopie (ontbreken van de L-kegeltjes) Ongeveer 1% van de mannen en slechts 0,02% van de vrouwen heeft deze vorm van kleurenblindheid. De kleuren die een protanoop kan zien, zijn enkel de kleuren die samengesteld worden door groen en blauw. Een gelijke stimulatie van de M- en S-kegeltjes zorgt voor de kleur wit. 66% van alle kegeltjes in het netvlies, zijn L-kegeltjes. Wanneer iemands L-kegeltjes ontbreken, betekent dit dat hij of zij ook minder licht binnen oppakt. Dit zorgt ervoor dat alle kleuren die rood bevatten donkerder worden. Zowel bij deuteranopie als bij protanopie spreken we van rood-groen kleurenblindheid. Mensen met een van deze twee vormen van kleurenblindheid kunnen de kleuren rood en groen niet of nauwelijks van elkaar onderscheiden. De kleuren groen, geel, oranje en rood, lijken voor deuteranopen en protanopen oker/geel. De kleuren magenta, violet en blauw, lijken alle drie blauw. tritanopie (ontbreken van de S-kegeltjes) Ongeveer 0,002% van de mannen en 0,001% van de vrouwen heeft deze vorm van kleurenblindheid. Tritanopen hebben moeite om de kleuren blauw en geel van elkaar te onderscheiden, we spreken dus van blauw-geel kleurenblindheid. Alle kleuren die een tritanoop kan waarnemen, zijn een mix van de kleuren groen en rood. Kleuren geel, oranje, rood en magenta neigen naar het rood en de kleuren blauw, groen en violet neigen naar het blauw(-groen). Het aandeel in de informatievoorziening voor de hersenen van de S-kegeltjes is erg klein, slechts 2% van alle kegeltjes is namelijk blauwgevoelig. Hierdoor lijkt het beeld van een tritanoop, ondanks het ontbreken van de S-kegeltjes, het meest op het beeld van een nietkleurenblinde. 1 kleur zien Wanneer een persoon slechts enkele kleuren waar kan nemen, spreken we van atypische achromatopsie. De meest bekende vorm hiervan is de blauwkegel monochromasie. Bij deze vorm zijn zowel de kegeltjes die gevoelig zijn voor groen, als die gevoelig zijn voor rood, verloren gegaan. De blauwgevoelige kegeltjes zijn de enige die functioneren, maar zijn slechts in geringe aantallen aanwezig in het netvlies. Hierdoor pakt een blauwkegel monochromaat weinig licht op en kan slecht in details zien. Echter, een persoon met deze vorm van kleurenblindheid heeft beter zicht dan iemand met gehele kleurenblindheid maar het kleurenbeeld komt vrijwel overeen (Uvijls, A., 1998, p. 179).
9
0 kleur Wanneer een persoon ongevoelig is voor alle kleuren, spreken we van typische achromatopsie. Dit is de vorm die door vele mensen geassocieerd wordt met kleurenblindheid maar is tevens ook de vorm van kleurenblindheid die enorm zeldzaam is. Alle kegeltjes van deze kleurenblinde ontbreken, hierdoor wordt alles in zwart-wit en grijstinten gezien. Een volledig kleurenblinde kan dus ook een staafjesmonochromaat genoemd worden. Buiten een afwijkend kleurenbeeld, is een typische achromaat ook slechtziend. Daarnaast heeft deze vorm van kleurenblindheid, anders dan alle andere vormen, ook uitwendige symptomen. Gehele kleurenblindheid gaat vaak gepaard met een trillend oog (nystagmus) en lichtschuwheid (fotofobie) (Uvijls, A., 1998, p. 180). Doordat er alleen gebruik gemaakt wordt van de staafjes, is het oog van een gehele kleurenblinde te vergelijken met dat van een nachtdier. Het kost dus vooral moeite om waar te nemen bij daglicht.
10
III. Waar wordt kleur voor gebruikt bij websites? Interne consistentie en uniformiteit “Onder interne consistentie verstaan we de mate waarin verschillende onderdelen van één ontwerp met elkaar overeenkomen. Onder uniformiteit, een vorm van interne consistentie, verstaan we vooral de mate waarin verschillende onderdelen er hetzelfde uitzien.” (Put, W. Van der, 2006, p. 168). Onder andere met kleur kan er gezorgd worden voor eenheid op een website. Door alle onderdelen van één onderwerp dezelfde kleur te maken, snapt de bezoeker dat dit bij elkaar hoort. Dit zorgt ervoor dat de bezoeker sneller vindt waar hij/zij naar opzoek is aangezien het duidelijk is in welke hoek er gezocht moet worden of hoe het betreffende element eruit zal zien. Deze interne consistentie is te zien bij rubrieken en bijvoorbeeld in navigatie. Kleur wordt hier gebruikt om content te categoriseren. Door ieder menu-item een andere kleur te geven en deze kleur eventueel door te voeren in de bijbehorende pagina’s, is het voor de bezoeker duidelijk welke informatie en elementen bij elkaar horen. Bijvoorbeeld bij een webshop van een warenhuis, hierbij wordt het menu-item ‘Koken’ en alle bijbehorende opties rood gekleurd en ‘Wonen’ blauw. Opvallen Wanneer het gewenst is dat een bepaald element (button, tekst) opvalt, wordt er vaak gekozen om een afwijkende kleur te gebruiken. Hierdoor kan de aandacht van de bezoeker naar een element getrokken worden. (Cannon, T., 2012) Hoe groter het contrast tussen de kleuren die gebruikt worden, hoe meer het element in het oog springt. Hierbij geldt wel dat de opvallende kleur voor de rest niet te veel gebruikt moet worden. Het element met de afwijkende kleur wordt over het algemeen het eerst opgemerkt en later het beste herinnert. We spreken hierbij ook wel van het psychologische principe ‘het isolatie effect’ (Dam et al., 1974). Dit principe zien we terug in navigatiebalken, zowel in gehele navigatiebalken als in gedeeltes daarvan. Door het menu-item dat de bezoeker heeft geselecteerd en naar de juiste pagina heeft gebracht, te highlighten, wordt het duidelijk waar hij/zij zich bevindt. Vaak verschijnt deze kleur al wanneer men met zijn muis over het betreffende menu-item gaat. Kleur is een van de meest gebruikte veranderingen bij een mouse-over. Emoties Daarnaast wordt kleur vaak gebruikt om de juiste emoties op te roepen bij bezoekers. Dit is zowel toepasbaar op websites, winkels als restaurants. Door middel van de juiste kleuren kan de stemming van iemand verbetert worden of bijvoorbeeld de eetlust verhoogt worden. Fastfood ketens zoals KFC en voorheen ook Mc Donalds, maken gebruik van de kleur rood. Buiten dat rood een kleur is die opvalt, blijkt uit onderzoek dat de kleur rood effect heeft op de stofwisseling en dus werkt als eetlustopwekker. De kleur blauw wordt ook regelmatig gebruikt voor restaurants, terwijl deze kleur juist een eetlustremmer schijnt te zijn.
11
Echter, door de rust die de kleur blauw uitstraalt, kunnen klanten ontspannen en is de kans dat ze langer blijven tafelen groter. Als zijnde eetlustremmer is de kleur blauw dus ook interessant voor All-ucan-eat-restaurants waarbij er voor een bepaalde tijd en prijs gegeten mag worden. Behalve het veranderen van iemands stemming, kan ook de perceptie verandert worden, zoals door juist kleurgebruik het gevoel te creëren dat de wachttijd minder lang duurt. Uit onderzoek blijkt dat wanneer er rood licht wordt gebruikt, zoals in casino’s, de tijd langer lijkt te duren. Onder blauw licht lijkt deze tijd juist sneller te gaan en lijken objecten eveneens kleiner. (Satyendra Singh, 2006, p. 786)
Hoewel rood staat voor ‘stoppen’ en groen voor ‘gaan’ en ‘veilig’, werd er met 21% meer geklikt op de rode button dan op de groene button (Muhammad, F., 2013).
Call-to-action Veel bedrijven met een website hebben een bepaalde gewenste handeling van hun bezoeker voor ogen. Dit kan bijvoorbeeld het aanmelden zijn voor een nieuwsbrief, het registeren van een account of het kopen van een product of dienst. Hiervoor moet de aandacht van de bezoeker gegrepen worden en hem/haar aanzetten tot een handeling of actie (call-to-action). Deze call-to-action zien we vaak in de vorm van een opvallende button. Een goede call-to-action button wordt gevormd door de juiste plaatsing, vorm (en grootte), boodschap en kleur (Olyslager, P. 2011). Er is veel onderzoek gedaan naar de perfecte kleur voor een call-toaction button, er is echter geen specifieke call-to-action button. De vier kleuren die het meest gebruikt worden en het meest effectief zijn, zijn rood, groen, oranje en blauw. Op basis van de effecten van deze kleuren kan er per website een juiste keuze gemaakt worden die past bij de vormgeving. Door A/B testing kan er snel gekeken worden waar de bezoeker eerder op zou klikken. Rood is een kleur die de aandacht trekt van mensen en hen opwind. Een rode button met de juiste tekst, geeft mensen het gevoel dat ze moeten drukken voor het te laat is. Dit heeft als effect dat er impulsief wordt gehandeld zonder lang te twijfelen. Oranje is een kleur die, net zoals rood de aandacht trekt, maar op een vriendelijke manier. Anders dan rood schikt oranje niet af. Oranje geeft energie en zet daarmee mensen aan op actie te ondernemen. Groen is een kleur die gesuggereerd wordt met ‘goed’ en ‘doorgaan’, wat afgeleid is van de stoplichten. Bij het zien van een groene button voelt men geen druk en heeft het gevoel klikken altijd goed zal zijn. Blauw is een kleur die betrouwbaarheid uitstraalt. De buttons ogen professioneel waardoor men al snel gelooft in de positieve gevolgen van het klikken op de button. Door de rust en het gevoel van veiligheid voelt het klikken op de buttons natuurlijk en ongedwongen. (Campbell, N., 2014)
12
IV. In hoeverre beïnvloeden kleuren de mens? Onderzoek naar de impact van kleur op marketing van de Universiteit van Winnipeg toont aan dat mensen binnen 90 secondes na hun eerste visuele indruk, meestal onbewust, een beeld vormen over een onderwerp (zoals een omgeving, product of persoon). Maar liefst 62% tot 90% van dit beeld wordt gebaseerd op uitsluitend de kleur (Satyendra Singh, 2006, p. 783). We kunnen dus stellen dat kleur een krachtige invloed heeft op de psychologie van een mens. Aangezien iedere kleur een eigen golflengte en betekenis heeft, beïnvloed iedere kleur de mens op een andere manier. Sinds de Middeleeuwen is men al bezig met het onderzoek naar de psychologie van kleur (Cao, J., 2015). Er bestaan dan ook vele kleurentheoriën, maar kleuren en hun effect blijven een controversiële kwestie. De betekenis van kleur is subjectief en niet universeel. De betekenis van kleur verschilt bijvoorbeeld per cultuur, religie en zelfs per geslacht. Zo blijkt uit onderzoek dat mannen zich meer aangetrokken voelen tot zwart, wit en grijstinten dan vrouwen. En worden vrouwen eerder afgeleid door combinaties van de kleuren blauw en rood dan mannen. Daarbij schijnen volwassen deze kleuren meer te prefereren dan kinderen (Satyendra Singh, 2006, p. 785). Hoewel de verschillende kleurenstudies elkaar tegenspreken en in detail verschillen, zijn er een aantal effecten van kleuren te noemen waarover, in het Westen, vrijwel door iedereen hetzelfde geschreven en gedacht wordt. Hieronder een lijstje van de meest gebruikte kleuren: Geel stimuleert zowel onze hersenen als ons zenuwsysteem en activeert onze herinnering. De kleur wordt geassocieerd met optimisme, energie, vreugde en positiviteit. Groen werkt ontspannend, verlichtend en verzachtend, daarnaast geeft het een gevoel van harmonie. De kleur wordt geassocieerd met het milieu, de natuur en ‘het goede’. Blauw werkt rustgevend en geeft het gevoel van koelte. De kleur straalt vertrouwen, betrokkenheid en vrede uit, daarnaast geeft het een gevoel van kalmte. Paars kalmeert ons brein en stimuleert creativiteit en spiritualiteit. De kleur is een balans tussen rust (blauw) en stimulatie (rood) en wordt als mysterieus en royaal ervaren. Rood stimuleert energie en kan effect hebben op de bloeddruk en hartslag. De kleur wordt geassocieerd met ‘fout’, gevaar en angst, maar ook als bescherming en liefde. Oranje stimuleert activiteit en wekt socialiteit op. De kleur wordt gezien als een milde vorm van rood en straalt warmte en energie uit. Wit wekt het gevoel van fris- en opgeruimdheid op en helpt voor mentale helderheid. De kleur wordt geassocieerd met netjes, schoon, puur en neutraliteit. Zwart geeft iemand het gevoel van onopvallendheid en leegte. De kleur wordt geassocieerd met mysterie en duisternis maar ook met kracht en luxe. (Smith, K., 2013)
13
De levendigheid van kleuren draagt ook bij aan het effect van een kleur. Zo roepen de kleuren met een hoge levendigheid, zoals geel, oranje en rood, een gevoel van energie op en maken mensen alerter. Kleuren met een lagere levendigheid daarentegen, zoals groen, blauw en paars, zorgen voor kalmte en een ontspannen gevoel
14
V. Wat wordt er verstaan onder de gebruiksvriendelijkheid van websites? “Website-usability is de mate waarin een website, een webpagina of een onderdeel daarvan kan worden benut door specifieke gebruikers om specifiek doelen effectief, efficiënt en naar tevredenheid te bereiken in een specifieke gebruikscontext.” (Put, W. van der, 2006). Peter Kentie schreef in zijn boek ‘Webdesign in de praktijk’, dat usability draait om het beantwoorden van de vraag ‘Wat wil de gebruiker’ (2005). Aangezien het gaat om specifieke doelen en een specifieke doelgroep, die voor iedere website verschillend is, zijn er geen standaardoplossingen. Kernwoorden Bij usability kunnen we het hebben over drie kernwoorden; effectiviteit, efficiëntie en tevredenheid. Deze kernwoorden worden door NEN- en ISO-norm 9241-11 (1998) als volgt gedefinieerd: Effectiviteit: nauwkeurigheid en volledigheid waarmee gebruikers gespecificeerde doelen bereiken. Efficiëntie: middelen die worden verbruikt in relatie tot de nauwkeurigheid en volledigheid waarmee gebruikers doelen bereiken. Tevredenheid: vrijwaring van ongemak en positieve houdingen ten opzichte van het gebruik van het product. Synoniemen Usability is een breed begrip waarvan wordt gesteld dat er vele synoniemen zijn. Zo worden de begrippen functionaliteit, user experience (UX), de gebruikersbeleving en user-centered design, in het boek Website-usability (2006) als synoniemen gezien. In alle gevallen wordt er gestreefd naar het maximaliseren van de kwaliteit voor de gebruiker. Bezoeker Het belangrijkste van website-usability is dat de gebruiker centraal staat. Er moet in korte tijd en zonder ergernissen kunnen worden voldaan aan zijn of haar behoeften. Het is belangrijk dat een bezoeker de website snapt, alles kan vinden en kan navigeren naar waar hij of zij wil. Internet is een snel medium dat men enorm veel verschillende mogelijkheden biedt. Wanneer een website binnen een paar secondes niet te begrijpen is voor een bezoeker of niet voldoet aan de behoeftes, wordt er snel weggeklikt. Verschillende elementen Bij het optimaliseren van usability komen enorm veel verschillende elementen kijken. Zoals bijvoorbeeld de navigatie en structuur van de website. Onbewust probeert een bezoeker, bij het bezoeken van een nieuwe website, de volgende vragen te beantwoorden: ‘Waar ben ik?, Waar kan ik heen gaan?, Waar ben ik al geweest?, Hoe kom ik daar?’. Wanneer hij of zij niet direct antwoord kan geven op deze vragen, wordt de hoop gevestigd op een zoekmachine die helpt om op de juiste plek te komen. Op het moment dat deze zoekmachine niet het gewenste resultaat geeft, zal de bezoeker in de meeste gevallen afhaken.
15
Een duidelijke navigatie en logische structuur is dus belangrijk om te kunnen voldoen aan de behoefte van de bezoeker. Daarnaast is ook de tekst en taalkeuze belangrijk. De tekst en taal moet aansluiten bij de doelgroep. Vragen die hierbij passen zijn; Welke taal spreekt mij doelgroep? Welke tone of voice past bij de doelgroep? Moet er getutoyeerd worden of gevousvoyeerd? Bij meerdere doelgroepen, moet er een functie zijn om te wisselen van taal. Hierbij moet ook bedacht worden in welke taal de talen weergegeven worden of dat er een pictogram toegevoegd moet worden. Ditzelfde geldt voor bijvoorbeeld geldeenheden die verandert kunnen worden. Visueel ontwerp is ook zeker van belang. Er moet worden nagegaan welke stijl en kleurpalet bij de identiteit van de website past, maar ook wat de doelgroep aanspreekt. Hoe breedt en lang wordt de pagina? Welk fontgrootte moet er gebruikt worden? Hoe wordt er gezorgd voor de juiste eenheid? etc.
Testen van een website door middel van eyetracking.
Testen Het belangrijkste onderdeel van het optimaliseren van usability is het testen. Wanneer de functionaliteit van de website niet wordt getest bij de doelgroep, kan er nooit met zekerheid gezegd worden dat er sprake is van een optimale usability. Door middel van focusgroepen, usabilityscans, A/B testing en eye tracking kan er snel en gericht onderzocht worden hoe de doelgroep de website gebruikt. Het is verstandig om dit regelmatig te blijven doen. Zowel de betreffende doelgroep als technologieën veranderen waardoor de usability constant verbetert kan worden. Design versus Usability Webdesigners hebben over het algemeen een haat-liefde verhouding met usability. Webdesigner proberen een zo aantrekkelijk mogelijke website te ontwerpen, terwijl usability experts de functionaliteit belangrijker vinden. Hoewel webdesigners zich bezig houden met het creëren van iets nieuws, waarbij ze creatief en vernieuwd proberen te zijn, zijn usabilityexperts vooral bezig met het verbeteren van iets bestaands. Waar een usabilityexpert gericht is op fouten, problemen en vaak kritiek heeft, denkt een webdesigner vaak in oplossingen en mogelijkheden. Onderaan de streep hebben beide partijen hetzelfde doel, een goed ontworpen website. Het enige verschil is hun definitie van kwaliteit (Put, W. Van der, 2006, p. 164).
16
V. Wat voor problemen ondervinden kleurenblinden op het internet? Simulatie Het beeld van een kleurenblinde is voor mij als niet-kleurenblinde lastig voor te stellen is. Gelukkig zijn er tegenwoordig een hoop simulators die afbeeldingen, websites of zelfs het gehele beeld van je computer omzetten in het zicht van een kleurenblinde. Op die manier kunnen nietkleurenblinden zelf ondervinden hoe het is om kleurenblind te zijn. Rood & groen Het grootste deel van alle kleurenblinden kan de kleuren rood en groen niet of nauwelijks van elkaar onderscheiden. Problemen waar zij tegenaan lopen, worden dus vaak veroorzaakt door een combinatie van deze twee kleuren. Helaas zijn dit ook vaak kleuren die samen worden gebruikt omdat de betekenis herkenbaar is. Rood en groen hebben een tegengestelde betekenis (goed-fout, rijden-stoppen) en zijn hierdoor voor niet kleurenblinden duidelijk te onderscheiden. Rood en groen zien we natuurlijk terug in stoplichten maar ook in knoppen op machines en het slot van een toilet. Online hebben de kleuren rood en groen vaak dezelfde soort betekenis als offline. Rode buttons worden bijvoorbeeld gebruikt voor ‘annuleren’ en groene button voor ‘ga door’. Het is waarschijnlijk dat kleurenblinden de kleuren van deze buttons door elkaar halen of niet kunnen onderscheiden, echter door de tekst ‘annuleren’ en ‘ga door’, snappen ook zij de functie van de buttons. Het komt maar weinig voor dat buttons zelf geen titel hebben. Testpersonen Door middel van onderzoek heb ik geprobeerd een idee te krijgen van de problemen die kleurenblinden ondervinden op internet. Allereerst heb ik kleurenblinden gezocht met de vraag of ik hen wat vragen zou mogen stellen. Al gauw had ik vijf testpersonen verzamelt die mee wilde werken aan mijn onderzoek. Vier van deze testpersonen hebben deuteranomalie, waaronder één vrouw. De vijfde mannelijke testpersoon heeft protanomalie. Mijn testpersonen hebben dus alle vijf vooral moeite met de kleuren rood en groen. Probleemwebsites Aangezien het voor een niet-kleurenblinde lastig is om websites op te zoeken die wellicht problemen opleveren, heb ik dit bij mijn testpersonen neergelegd. Ik heb gevraagd een lijstje door te geven met websites die ze niet goed begrepen of het gevoel hadden dat deze niet toegankelijk genoeg waren voor hen. Dit leidde tot een opmerkelijk resultaat, want geen van de testpersonen kon een specifieke website noemen. Drie van de testpersonen gaven wel aan moeite te hebben met grafieken op websites. Het probleem bij grafieken is dat ze de verschillende onderdelen niet uit elkaar kunnen houden waardoor ze de grafiek niet goed begrijpen. Daarnaast is het kleurenvakje van de legenda vaak zo klein dat ze daar ook niet wijzer van worden.
17
Een van de testpersonen zei problemen te ondervinden met het instellen van bijvoorbeeld een achtergrondkleur. Toevallig stond de kleurkiezer van Twitter tussen de slechte voorbeelden van de website Wearecolorblind. Zoals bij Twitter geven websites met een kleurenkiezer vaak het gehele spectrum weer. Dit maakt het voor een kleurenblinde erg lastig om te kiezen en om een idee te vormen van de kleur. Microsoft Word heeft daarentegen een kleurkiezer die ook voor kleurenblinden goed te gebruiken is. Als de muis over een kleur komt, verschijnt de naam van de kleur als alttekst. Ook al ziet de kleurenblinde een andere kleur, hij of zij weet welke kleur hij daadwerkelijk selecteert. Dit voorkomt dat hij of zij onduidelijke combinaties maakt of het verkeerde gevoel opwekt. Aangezien mijn testpersonen geen voorbeelden hadden, ben ik zelf gaan zoeken naar goede voorbeelden van websites met een slechte gebruiksvriendelijkheid als het gaat om kleurenblinden. Door middel van de applicatie ColorOracle, had ik de mogelijkheid om mijn gehele beeld om te zetten in het zicht van een kleurenblinde. Daardoor kon ik bij het zoeken naar websites alvast een globale check doen. Daarbij vroeg ik mij direct af in hoeverre deze simulatie overeenkomt met het echte zicht van een kleurenblinde. Helaas kon ik dit niet voor 100% testen aangezien de applicatie enkel het zicht van een deuteranoop, protanoop en tritanoop simuleert, dit zijn vormen van dichromatopsie. Mijn testpersonen hebben de vormen deuteranomalie en protanomalie, deze vorm van kleurenblindheid is minder heftig. Ik heb mijn testpersonen uiteindelijk vier voorbeelden voorgelegd. Ik heb maar één website kunnen vinden die naar mijn idee problemen op zou kunnen leveren. Daarom heb ik er voor de rest voor gekozen om onderdelen van websites te testen. Website groenlinks Bij deze website worden veel verschillende tinten groen gebruikt in combinatie met rood. Aangezien rood en groen de problemenkleuren zijn, verwachtte ik dat deze website lastig zou zijn voor mijn testpersonen. Echter, om linkjes aan te duiden gebruikt GroenLinks pijltjes, dit lost het probleem van de kleuren direct op. Om deze website toch te kunnen testen, heb ik de pijltjes weg gephotoshopt. Deze gephotoshopte versie heb ik getest. Resultaten Drie van mijn testpersonen gaven aan geen moeite te hebben met de website. Zij waren in staat om de website net zoals andere websites te gebruiken. Twee van mijn testpersonen ondervonden problemen bij deze website. Zo hadden ze vooral onder het kopje ‘DOE MEE’ niet door wat wel linkjes waren en wat niet. Het iets lichtere vlak groen viel voor hen volledig weg tegen het donkere groen.
18
Wanneer zij met hun muis over het vlak kwamen werd deze echter wel zichtbaar. Daarnaast zagen zij geen verschil bij de mouse-overs onder het kopje ‘AGENDA’. Alle links die onderstreept waren, konden ze het makkelijk herkennen als zodanig. Grafieken Google Analystics Drie van de vijf testpersonen gaf aan problemen te ondervinden met grafieken. Ik verwachtte dus dat zij inderdaad moeite zouden hebben met het voorbeeld van Google Analystics. Hetgeen dat belangrijk was, was dat uit mijn test zou blijken waar zij dan precies moeite mee hadden. Daarnaast was ik nieuwsgierig of de overige twee testpersonen ook moeite zouden hebben om de grafieken te ontcijferen. Wellicht gaven zij het eerder niet aan omdat zij nooit grafieken bekijken of besefte ze niet dat ze de grafieken niet goed kunnen waarnemen. Ik vroeg mijn testpersonen welke taartpunt en staafje ‘referral’ aangaf en welk rondje ‘paid search’. Aangezien de percentages niet helemaal klopten met de grootte van de vlakken, konden ze alleen antwoorden op basis van kleur. Gesimuleerd beeld.
Gesimuleerd beeld.
Gesimuleerd beeld.
Resultaten Bij de ‘active visitors’, zagen alle testpersonen geen enkel verschil tussen het balkje ‘direct’ (rood) en het balkje ‘referral’ (groen). Op basis van de volgorde van de legenda, gokten zij dat het derde balkje stond voor ‘referral’. Bij de ‘Traffic types’ werden er echt minder problemen ondervonden. Slechts twee van de testpersonen koppelden het oranje vlak aan ‘referral’. Door een verminderde levendigheid van de kleur groen die gebruikt is in de taartpunt, is het onderscheid tussen groen en rood hier geen probleem. Echter, in de legenda lijken de kleuren vrijwel gelijk. Het grootste probleem hier is dat de kleuren rood en oranje veel op elkaar lijken. De cirkels werden het moeilijkst gevonden omdat er door de overlap van de cirkels veel verschillende tinten ontstaan die voor hen hetzelfde lijken. Hierdoor ontstond er als het ware een groot groenig vlak. Drie van de testpersonen gaven aan dat de bovenste cirkel ‘paid search’ aangaf. Twee hiervan gaven wel toe dat het een gok was aangezien het verschil tussen de bovenste (rood) en die links daarnaast lastig te zien was (groen). Een van de testpersonen wist met zekerheid ‘het bovenste cirkeltje’ te antwoorden. De laatste testpersoon zag geen enkel verschil tussen het rode en groene cirkeltje en kon dus geen antwoord geven op mijn vraag.
19
Navigatiebalk CSS Tricks Een navigatiebalk is een belangrijk element van de website en kan een grote rol spelen in de usability. Eerder heb ik het al gehad over het nut van het categoriseren van content. Op de website CSS Tricks, geven ze ieder menu-item een eigen kleur mee. Ze hebben het kleurenspectrum aangehouden qua volgorde wat de kleuren oranje, rood, paars, blauw, groen, geel en grijs naast elkaar plaatst. Ik vroeg mijn testpersonen hoeveel verschillende categorieën zij zagen op basis van kleur.
Gesimuleerde beelden van de navigatiebalk.
Resultaten Twee van de testpersonen zagen, enkel kijkend naar de kleuren, dat er 6 verschillende categorieën waren. Zij zagen alle kleuren behalve de kleur grijs. Deze kleur was voor niemand goed te onderscheiden, ook niet voor mij, als niet-kleurenblinde. De zes kleuren waren voor deze twee testpersonen prima te onderscheiden. De drie andere testpersonen zagen slechts drie verschillende kleuren en daardoor dus drie categorieën. De kleuren van Blog en Jobs, Video’s en Forums en Almanac en Snippets leken erg op elkaar. Aangezien deze kleuren uit elkaar lagen was het geen groot probleem. Echter bij Almanac en Snippets grenzen de kleuren paars en blauw aan elkaar. Dit zag er voor mijn testpersonen uit als één blauw vlak. Tabel BBC Op de website Wearecolorblind.com stond een voetbaltabel tussen de foute voorbeelden. Hoewel de rode, groen en grijze streepjes klein zijn, zijn ze voor mij als niet-kleurenblinde goed waar te nemen. Ik was nieuwsgierig of mijn testpersonen überhaupt zagen dat er verschil zat tussen de streepjes. Ik vroeg hen of zij mij konden vertellen wat de volgorde winnen, verliezen en gelijkspel was van de laatste 10 wedstrijden van Tottenham. Zij mochten hierbij niet hun muis gebruiken.
Gesimuleerd beeld van de laatste 10 webstrijden.
Resultaten Voor geen van mijn kleurenblinden was de tabel over de laatste 10 wedstrijden van Tottenham te ontcijferen. Twee van mijn testpersonen gaven aan te kunnen zien dat het balkje van de derde en zesde wedstrijd lichter van kleur waren dan de rest. Op basis hiervan konden ze bepalen dat in deze wedstrijden gelijkspel gespeeld was. De rode en groene balkjes waren echter niet te onderscheiden van elkaar, de legenda kon daar ook niet bij helpen. Op het voorbeeld van Google Anylatics na, waren mijn voorbeelden geen goede voorbeelden van een echte slechte website. Ik heb beelden moeten manipuleren en mijn testpersonen moeten vragen enkel naar de kleur te kijken. In ieder voorbeeld werd er gebruik gemaakt van een mouse-over of tekst waardoor het betreffende stukje content alsnog te begrijpen zal zijn voor een kleurenblinde. Dit betekent echter niet dat de websites een optimale gebruiksvriendelijkheid en toegankelijkheid hebben.
20
VII. Hoe wordt een website toegankelijk gemaakt voor kleurenblinden? Er zijn drie punten waar men op moet letten bij het ontwerpen van websites die ook toegankelijk moeten zijn voor kleurenblinden. I. Redundante (kleur)codering Dit betekent dat er voor gezorgd moet worden dat er naast kleur altijd nog een ander kenmerk aanwezig is ter onderscheiding (Clark, J., 2002). Een ander kenmerk kan bijvoorbeeld vorm, positie, afmeting of tekst zijn. Op die manier mag er vanuit gegaan worden dat wanneer kleur wegvalt, door kleurenblindheid of bijvoorbeeld een zwart-wit beeldscherm, men nog steeds de juiste betekenis of boodschap af kan leiden. Hieronder een aantal voorbeelden van juiste toepassing of gebrek aan redundante codering:
Gesimuleerd beeld.
Gesimuleerd beeld.
Gesimuleerd beeld.
Onderlijnen van een link Omdat de kleur rood voor protanopen donkerder uitvalt, is de link in de afbeelding hiernaast niet te onderscheiden van de rest. Wanneer hier gebruik was gemaakt van onderlijning was deze link voor iedereen herkenbaar. Er zou ook gekozen kunnen worden voor een ander fontstyle, zoals bold of italic, maar onderstreepte letters staan algemeen bekend als ‘link’. Deze vorm van links zijn het beste bekend van de zoekresultaten van Google die deze in 1996 introduceerde (Warren, T., 2014). De permanente onderlijning is in 2014 verandert in enkel onderlijning bij een mouse-over. Toevoegen van een vorm De kleuren rood, groen en geel lijken voor zowel deuteranopen als protanopen erg veel op elkaar. Wanneer deze kleuren samen en/of naast elkaar gebruikt worden, is het lastig deze kleuren van elkaar te onderscheiden. iChat heeft in dit voorbeeld een extra toegankelijkheidsfunctie. Er kan ingesteld worden dat de verschillende statussen zowel een eigen kleur als vorm hebben. Het gebruik van vorm is ook verstandig wanneer er vanuit de tekst verwezen wordt naar een bepaald element. Zinnen zoals “Meld je dan nu aan door op de groene knop te klikken” zijn lastig voor kleurenblinden, zeker wanneer er ook ander kleurige knoppen aanwezig zijn. Door te verwijzen naar “de ronde groene knop”, snapt iedereen welke knop er wordt bedoeld (er vanuit gaande dat niet alle knoppen rond zijn). Duidelijke foutmelding Aanmeld- of contactformulieren bevatten vaak vereiste vlakken die ingevuld moeten worden. Wanneer er wordt geprobeerd om het formulier eerder af te ronden dan dat al deze vakken (goed) ingevuld zijn, wordt er een foutmelding gegeven. Als dit enkel gebeurd door het rood omlijnen van het vak, valt de foutmelding voor kleurenblinden niet genoeg op. Dit kan opgelost worden door het vak zowel in te kleuren met een afwijkende kleur als een omlijning te geven. Door middel van tekst onder het vak en bovenaan het formulier kan het vergeten of onjuist ingevulde vak makkelijker herkent worden.
21
Gesimuleerd beeld.
Gesimuleerd beeld.
Normale trichromatopsie
Deutera- Protanopie nopie
Tritanopie
Gebruiken van pictogrammen en iconen De kleurencombinatie die in de vensters van iOS gebruikt worden, is hetzelfde als die van iChat. Deze kleurcombinatie wordt vaak gebruikt omdat de betekenis van deze kleuren begrijpelijk is voor mensen door het gebruik van stoplichten. Deze kleuren werden bij Windows gebruikt om de verschillende standen aan te geven; uitschakelen, slaapstand en opnieuw opstarten (zie pag. 17). In het geval van iOS staat rood voor wegklikken van een venster, wat in dit geval de gevaarlijkste actie is. Oranje zorgt ervoor dat het venster dicht wordt geklapt maar wel blijft bestaan, deze actie is dus minder erg. En met groen wordt het venster vergroot of verkleint, maar het venster blijft hoe dan ook geopend. Op het eerste gezicht lijken deze buttons hetzelfde voor kleurenblinden. Echter, wanneer ze de handeling willen verrichten en met hun muis in de linker bovenhoek komen, ontstaan er icoontjes in de buttons. Dit zorgt ervoor dat de buttons te onderscheiden zijn en de functie duidelijk is. Op het moment dat kleur wegvalt, zijn pictogrammen en iconen het snelst waar te nemen (Mertz, N., 2012). Toevoegen van tekst Door tekst of leestekens toe te voegen, is de boodschap zonder kleur ook duidelijk. In tabellen zien we vaak dat vakken waarin positieve getallen groen gekleurd zijn en vakken met negatieve getallen een rode kleur hebben. Zoals in het voorbeeld te zien is, kunnen kleurenblinden deze twee vlakken lastig van elkaar onderscheiden. Doordat de negatieve vakken een – voor het getal hebben staan, is het verschil duidelijk. Het toevoegen van tekst kan ook verstandig zijn bij (cirkel)diagrammen. Door het percentage en het onderwerp in de staaf of het taartpunt zelf neer te zetten, kan er geen verwarring ontstaan. II. Veilige kleurcombinaties Cynthia Brewer van de Universiteit van Pennsylvana (1997, p. 217) heeft onderzoek gedaan naar de juiste kleurkeuzes voor kaarten, zodat kleurenblinden deze ook goed kunnen lezen. De richtlijnen uit dit onderzoek zijn ook toepasbaar op het web. Er zijn twee basis richtlijnen: Kleurcombinaties; paren die samen gebruikt kunnen worden zonder dat deze verward worden met elkaar. Kleurgradaties; verschillende tinten van dezelfde kleur waarmee bijvoorbeeld progressie weergeven kan worden. Er zijn acht verschillende kleurenparen met de drie bijbehorende gradaties (licht, donker en daar tussenin). Zwart en wit behoren ook tot deze kleurenparen. Uit hetzelfde onderzoek blijkt ook dat vrijwel iedereen deze kleuren hetzelfde noemt, ook al zien kleurenblinden een ander kleur.
22
In het voorbeeld hiernaast is te zien dat een kleurenblinden geen verschil ziet tussen een paar van de aangrenzende menu-items. Opvallend is dat dit zelfs gebeurd op de website Wearecolorblind, een website die is opgezet voor en door kleurenblinden. Door middel van de hier voor genoemde kleurenparen kunnen de aaneengrenzende menu-items van elkaar onderscheiden worden. III. Voldoende contrast Het is belangrijk dat het contrast altijd gemaximaliseerd wordt, zowel bij tint, helderheid en verzadiging. De juiste hoeveelheid contrast is vooral belangrijk bij voor- en achtergrond (Gabriel-Petit, P., 2007). Dit zien we terug bij tekstvakken maar bijvoorbeeld ook bij buttons. Wanneer de kleuren te dicht bij elkaar liggen in het kleurenspectrum of (bijna) dezelfde helderheid of verzadiging hebben, zijn de kleuren lastig van elkaar te onderscheiden. Dit zorgt ervoor dat wanneer de kleuren op elkaar gebruikt worden (tekst/achtergrond), de tekst niet gelezen worden. In principe is het altijd een goede oplossing om tekst met een lichte kleur op een donkere achtergrond te gebruiken of anders om. Zo is het het veiligst om voor tekst altijd zwart op wit te gebruiken, dit is namelijk altijd goed leesbaar. Bij andere kleuren kan er bijvoorbeeld gebruik gemaakt worden van monochromatische kleurpaletten. Dit is een palet van verschillende tinten van dezelfde kleur. De twee uiterste kleuren, licht-donker, kunnen altijd op elkaar gebruikt worden. Om te zien of er genoeg verschil van helderheid aanwezig is in de gekozen kleuren, is het handig om het beeld om te zetten in zwart-wit. Verschil tussen de grijstinten laat het verschil tussen de helderheid zien. Op internet zijn er veel verschillende testers te vinden die uitrekenen of er genoeg contrast aanwezig is tussen kleuren. Daarnaast kan de diagram hiernaast, toegepast door Arthur en Passini, worden gebruikt. De diagram toont het contrast tussen gekleurde tekst en verschillende achtergronden. Het contrast moet minstens 70 zijn op een schaal van 1 tot 100 (geciteerd in Mijksenaar, P., 2011). Deze diagram is oorspronkelijk opgezet voor bewegwijzering maar kan ook voor andere doeleinden, zoals websites, gehanteerd worden.
23
Hoe kan ik als designer rekening houden met kleurenblinden als het gaat om usability van websites?
24
Conclusie & antwoord op hoofdvraag 8,5% van de gehele Nederlandse bevolking is kleurenblind en 95% van al deze kleurenblinden is van het mannelijke geslacht. 1 op de 12 mannen in Nederland is kleurenblind, dit zijn zo’n 700.000 mannen. Op het moment dat je als ontwerper een website moet vormgeving die enkel en alleen gericht is op mannen, dan is het verstandig om de website zo toegankelijk mogelijk te maken voor kleurenblinden. Echter, slecht 200.000 van deze kleurenblinden is daadwerkelijk blind voor een kleur. De rest van de 500.000 kleurenblinden is enkel minder gevoelig voor een kleur.
Is het wel echt nodig?
Dit heeft als gevolg dat de meeste programma’s die het zicht van een kleurenblinde kunnen simuleren, niet het zicht weergeven waar we het meest mee te maken hebben. De meest voorkomende vorm van kleurenblindheid is deuteranomalie, ook wel groen-zwakte. De meeste simulaties geven het zicht weer van een deuteranoop. Het beeld dat gecreëerd wordt, geeft duidelijk aan wat de probleemkleuren zijn, het zicht van iemand met deuteranomalie zal echter minder heftig zijn. Voordeel hiervan is wel, dat op het moment dat ontwerpers de website testen met het zicht van een deuteranoop, zal het voor iemand met deuteranomalie ook altijd goed zijn. Daarnaast roept dit de vraag op of het wel echt nodig is om rekening te houden met kleurenblinden. Aan de ene kant blijkt uit mijn eigen tests dat kleurenblinden niet bewust problemen ondervinden bij websites. Hoewel zij de kleuren niet zien zoals ze bedoelt zijn, kunnen zij prima hun weg vinden. Door gebrek aan tijd heb ik helaas geen onderzoek kunnen doen naar het gedrag op een website van een niet-kleurenblinde in vergelijking met een kleurenblinde. Mijn verwachting is dat beide personen op de juiste plek van de website kunnen komen, maar dat het tijdsbestek waarin ze dit doen, verschillend zal zijn. Door het wegvallen van bepaalde kleuren voor een kleurenblinde, valt er een hulpmiddel weg. Zoals eerder beschreven worden kleuren gebruikt om eenheid te creëren en belangrijke elementen in het oog te laten springen. Ik verwacht dat een kleurenblinde langer de tijd nodig zal hebben om de categorieën door te hebben en de belangrijke buttons te vinden. Aan de andere kant zal er niet zo veel onderzoek gedaan worden en zo veel bronnen te vinden zijn over kleurenblindheid als het geen echt probleem is. Het probleem is alleen online niet even groot als offline. Hoewel er wordt aangegeven dat websites prima te begrijpen zijn, worden er wel problemen ondervonden bij specifieke content. Wanneer een onderzoek enkel visueel weergegeven wordt door middel van grafieken en tabellen, zullen kleurenblinden al snel afhaken. Zonder rekening te houden met kleurenblinden kunnen vooral websites die veel mannelijke bezoekers hebben, te maken krijgen met daling van hun bezoekersaantal.
25
Redundante codering: Er moet naast kleur altijd nog een ander kenmerk aanwezig zijn ter onderscheiding
Ik denk dat het zeker de moeite waard is om een beetje te denken om de kleurenblinde medemens. Gelukkig hoeft het rekening houden met kleurenblinden maar een kleine moeite te zijn. De basisregel die altijd gehanteerd kan worden is “Zorg dat de betekenis van content, buttons en andere elementen ook te begrijpen is op basis van een ander bron dan kleur”. Daarbij geldt ook dat wanneer iets geen belangrijke functie of betekenis heeft, er in principe niets aangepast hoeft te worden. Rekening houden met kleurenblinden betekent dus niet dat je website alleen nog maar paars met geel mag zijn. De kleurenparen dienen gebruikt te worden wanneer het niet anders kan en wanneer het gaat om aaneengrenzende kleuren. Daarnaast is contrast iets dat ook maximaliseert moet worden voor niet-kleurenblinden. Het belangrijkste is dat een kleurenblinde de website net zo goed moet kunnen begrijpen als een niet-kleurenblinde. Je zou kunnen stellen dat wanneer een website in het zwart-wit toegankelijk is, maakt het niet uit of de button groen, rood of paars is. Een oplossing om de emoties die worden opgeroepen door een bepaalde kleur in stand te houden is echter een stuk lastiger. Wanneer kleurenblinden groen en rood niet van elkaar kunnen onderscheiden, zullen ze bij een datingssite (rood voor liefde) wellicht in eerste instantie het gevoel hebben dat het om een milieuvriendelijke organisatie gaat. Zo ver ik weet is er helaas geen manier om te voorkomen dat kleuren verkeerd worden waar genomen en daardoor de verkeerde emoties afgeven. Ontwerpers zullen er dus genoegen mee moeten nemen dat een percentage van hun doelgroep, niet de juiste gevoelens heeft. Het voordeel van het rekeninghouden met kleurenblinden is dat je website ook toegankelijk is voor die 700.000 kleurenblinden. Dit kan als gevolg een hoger bezoekersaantal en een hogere algemene waardering hebben. Daarnaast wordt er tegelijkertijd ook rekening gehouden met het steeds slechter wordende zicht van ouderen. En als laatst, een website die voor iedereen toegankelijk is, oogt professioneler dan een website die bepaalde bevolkingsgroepen buitensluit.
26
Bronnen Boer, W.Th. de. (ed.) (2006). Van Dale: pocketwoordenboek Nederlands (4e dr.). Utrecht – Antwerpen: Van Dale Lexicografie. Brewer, C.A. (1997). Spectral Schemes: Controversial Color Use on Maps. Cartography and Geographic Information Systems, 24, 4, p. 203-220. Geraadpleegd op 10 mei via: http://www.personal.psu.edu/cab38/ Pub_scans/Brewer_1997_Spectral_CaGIS.pdf Campbell, N. (2014). Top Colors for Call-to-Action Buttons. Geraadpleegd of 19 mei 2015 via: http://www. productivedreams.com/top-colors-for-call-to-actionbuttons/ Cannon, T., (2012). An Introduction to Color Theory for Web Designers. Geraadpleegd op 18 mei 2015 via: http://webdesign.tutsplus.com/articles/anintroduction-to-color-theory-for-web-designers-webdesign-1437 Cao, J. (2015). How to create the right emotions with color in webdesign. Geraadpleegd om 15 mei 2015 via: http://thenextweb.com/dd/2015/04/07/how-tocreate-the-right-emotions-with-color-in-web-design/ Clark, J. (2002). Type and Colour. In Clark, J., Building Accessible Websites. Indiana: New Riders Publishing. Geraadpleegd op 10 mei 2015 via: http://joeclark.org/ book/sashay/serialization/Chapter09.html Dam, G. van, Peeck, J., Brinkerink, M., & Gorter, U. (1974). The Isolation Effect in Free Recall and Recognition. The American Journal of Psychology, 87, 3, p. 497. DOI: 10.2307/1421391 Deutscher, G. (2012). Door de bril van de taal: Hoe woorden de wereld kleuren. [Through the Language Glass: Why The World Looks Different In Other Languages] (Laar, F. van de, Vert.). Houten: Uitgeverij Unieboek – Het Spectrum ( Oorspronkelijk werk gepubliceerd in 2010) Gabriel-Petit, P. (2007). Ensuring Accessibility for People With Color-Deficient. Geraadpleegd op 11 mei 2015 via UX Matters: http://www.uxmatters.com/mt/ archives/2007/02/ensuring-accessibility-for-peoplewith-color-deficient-vision.php
Het Oogziekenhuis Rotterdam (2015). Werking van het oog. Geraadpleegd op 29 april 2015 via Oogziekenhuis: https://www.oogziekenhuis.nl/het-oog/werking-vanhet-oog.html Idler, S. (2012). How to Design Effective Navigation Menus. Geraadpleegd op 18 mei 2015 via Usabilla: http://blog.usabilla.com/how-to-design-effectivenavigation-menus/ Kentie, P. (2005) Webdesign in de praktijk (5e dr.). Amsterdam: Addison-Wesley. LICG (2011). Praktisch: meer over erfelijkheid. Geraadpleegd op 30 april 2015 via Landelijk Informatiecentrum Gezelschapdieren: http://www. licg.nl/ContentSuite/upload/lig/pra/Meer_over_ erfelijkheid1_2%282%29.pdf Mertz, N. (2012). How and Why Icons Improve Your Web Design. Geraadpleegd op 18 mei 2015 via http://blog. usabilla.com/how-and-why-icons-improve-you-webdesign/ Mijksenaar, P. (2011). Kleur in transit. In Brand, J., & Zwaag, A. van der (red.), Kleur in Beeld, p. 232-233. Arnhem: ArtEZ Press Muhammad, F. (2013). Complete Guide on Color Psychology and Its Impact on Landing Page Conversions. Geraadpleegd op 18 mei 2015 via: https://www. instapage.com/2014/04/23/color-psychology/ Nederlands Normalisatie-instituut (1998). Ergonomische iesen voor kantoorarbeid met beeldschermen (VDT’s). Deel 11: Leidraad voor de bruikbaarheid. NEN-EN-ISO 9241-11 Olyslager, P. (2011). Call To Action Buttons and the Psychology of Color. Geraadpleegd op 22 mei 2015 via http://www.paulolyslager.com/call-to-action-buttonspsychology-color/ Oudenampsen D., & Flikweert M. (2010). Een onnodige handicap: Maatschappelijke belemmeringen voor kleurenblinden. Utrecht: Verwey Jonker Instituut.
27
Put, W. van der (2006). Website-usability: Gebruikersvriendelijke websites in de praktijk. Benelux: Pearson Education. Singh, S. (2006). Impact of color on marketing. Management Decision, 44, 6, p. 783 – 789. DOI:10.1108/00251740610673332 Smith, K. (2013). Color meaning, Understanding color. Geraadpleegd op 22 mei 2015 via Sensational Color: http://www.sensationalcolor.com/category/ understanding-color/theory#.VXdsxFyqqhk STZ (2004). Kleurenzien en blindheid. Geraadpleegd op 29 april 2015 via Oogartsen: http://www.oogartsen.nl/ oogartsen/glasvocht_netvlies/kleurenblindheid/ Put, W. van der (2006). Website-usability: Gebruikersvriendelijke websites in de praktijk. Benelux: Pearson Uvijls, A. (1998). Kleurenzien en kleurzinstoornissen voor de practice. ‘s Gravenhage: Kugler Publications. Warren, T. (2014). Google removes underlined links, says goodbye to 1996. Geraadpleegd op 22 mei via: http:// www.theverge.com/2014/3/13/5503894/googleremoves-underlined-links-site-redesign
28
Bijlage – Reflectieverslag
Het geeft je de mogelijkheid om je te verdiepen in een onderwerp waar je altijd al in geïnteresseerd bent geweest maar waarvoor je nooit de tijd hebt gehad of de moeite hebt genomen om het te gaan onderzoeken.
Ik heb Seminar als een leuk vak ervaren. Het geeft je de mogelijkheid om je te verdiepen in een onderwerp waar je altijd al in geïnteresseerd bent geweest maar waarvoor je nooit de tijd hebt gehad of de moeite hebt genomen om het te gaan onderzoeken. Daarentegen vond het jammer dat dit onderzoek binnen 5 á 6 weken afgerond moest zijn, dit beperkte mij enigzins in de hoeveelheid informatie die ik wilde verkrijgen. Het bedenken van een geschikt onderwerp en daarbij een goede hoofdvraag vond ik erg lastig. Uit een mini-brainstorm kwamen de volgende drie potentiële onderwerpen; brand entertainement, magazines en kleurenblindheid. Buiten dat het mij moest interesseren, was het ook belangrijk dat er bronnen over te vinden waren. Al snel kwam ik er achter dat er voor brand entertainment te weinig bronnen te vinden waren en dat een hoofdvraag die paste bij magazines niet binnen 6 weken te beantwoorden zou zijn. Daarbij werd ik bij het zoeken naar bronnen voor kleurenblindheid, steeds enthousiaster over het onderwerp. Het eerste gedeelte van mijn onderzoek verliep erg voorspoedig. Er was veel informatie te vinden over kleurenblindheid en de verschillende vormen. Hiermee sneed ik mezelf wel in de vingers aangezien ik het zo interessant vond, ging ik veel te ver door met mijn onderzoek. Dit resulteerde in veel informatie die niet relevant genoeg was en weinig tijd voor de rest. Het tweede gedeelte van mijn onderzoek werd lastiger. Er zijn zo veel verschillende kleurtheorieën geschreven dat het voor mij moeilijk was om te beslissen welke ik aan moest houden. Uiteindelijk heb ik dit opgelost door een aantal theorieën naast elkaar te leggen en daar de meest overeenkomende punten uit te halen. Ik heb mijn deelvragen ietwat aangepast om tot een beter resultaat te komen. Door betere deelvragen was ik in staat gerichter onderzoek te doen en mijn hoofdvraag volledig te dekken. Het onderzoek onder mijn testpersonen had ook wat voeten in de aarde. Gelukkig had ik in redelijk korte tijd mijn testpersonen weten te verzamelen en was het mogelijk om het onderzoek in de vorm van een gesprek te doen. Hetgeen dat veel tijd kostte was het zoeken naar goede voorbeelden die ik kon testen bij mijn doelgroep. Dit was ook het moment dat het voor mij duidelijk werd dat hetgeen dat ik als probleem had gezien, wellicht niet zo’n groot probleem is. Even heb ik moeite gehad met deze wendig van mijn onderzoek en conlusie aangezien het zo anders was dan hetgeen dat ik verwacht had. Uiteindelijk is, een dit geval, negatieve conclusie, ook een conclusie. Na het afronden van het gehele onderzoek bleek deze conclusie minder af te wijken van de beoogde conclusie en was deze helder te formuleren.
29
30
