Blog

  • Kleur Beïnvloedt Usability

    donderdag 21 januari 2010

    Kleurgebruik heeft grote impact op de gebruiksvriendelijkheid. Kleur accentueert. Het effect van kleur is dat het gevoel en emotie oproept. Onverstandig gebruik ervan vermindert de gebruiksvriendelijkheid. Te veel of verkeerde kleuren maken een user interface chaotisch en gebruikers weten niet meer wat belangrijk voor ze is. Met een klein aantal handvatten zijn de grootste kleurproblemen te vermijden.

    Kies maximaal drie kleurtonen

    Kleurwiel uit het programma Color Schemer
    Figuur 1: Kleurwiel uit het programma Color Schemer.

    Bij gebruik van weinig kleurtonen geef je rust. Heb je één kleurtoon bepaald, dan vind je de bijpassende kleurtonen met een kleurwiel. Een kleurwiel geeft de onderlinge relatie weer tussen kleuren. Hier zie je zo’n voorbeeld van een kleurwiel uit het programma ‘Color Schemer‘. De geschiktheid van kleurcombinaties kies je op basis van:

    • Complementair: twee tegenovergestelde kleuren, bijvoorbeeld rood en groen.
    • Gespleten complementair: een uitbreiding op ‘complementaire kleuren’. De tegen­over­gestelde kleur wordt dan gesplitst in twee kleuren die er direct naast liggen. Puur complementair zijn bijvoorbeeld paars en geel. Om gespleten complementaire kleuren te vinden splitsten we geel in gelig groen en gelig oranje. Paars, gelig oranje en gelig groen passen goed bij elkaar.
    • Triads: drie kleuren die zover mogelijk van elkaar verwijderd zijn, bijvoorbeeld rood, blauw en geel. Als een driehoek op het kleurwiel.
    • Analoog: drie kleuren die dicht naast elkaar liggen passen ook goed bij elkaar, zoals magenta, rood en rozig oranje.
    • Monochroom: Je kunt er ook voor kiezen om één kleurtoon te gebruiken. Met één kleurtoon in verschillende lichtsterktes of verzadiging bouw je prachtige websites.

    Gebruik warme kleuren voor voorgrond en koude kleuren voor achtergrond

    Als we naar buiten kijken zijn de objecten in de verte vaak wat meer blauw en verliezen de objecten iets aan kleurverzadiging en contrast. Door deze ervaring van mensen te gebruiken schep je gemakkelijk diepte in de web­pagina. Die diepte versterkt de hiërarchie in de web-elementen en zorgt ervoor dat bezoekers intuitief weten waarnaar ze moeten kijken. Met hiërarchie bedoel ik inactieve ten opzichte van actieve tabbladen of belangrijk ten opzichte van minder belangrijk.

    Verander kleurverzadiging en lichtsterkte om hiërarchie aan te geven

    Enkel verschillende kleurtonen (bijvoorbeeld warm tegenover koud) gebruiken om de hiërarchie mee aan te geven is onvoldoende. Personen ervaren elementen met verschillende kleurtonen wel als anders, maar tegelijkertijd als even belangrijk. Daarnaast maak je het voor kleurenblinde bezoekers extra moeilijk. Zorg dus voor verschillen in zowel kleurverzadiging als lichtsterkte om de hiërarchie van elementen aan te geven. Een actief licht geel tabblad tussen licht blauwe tabbladen zou ik dus afraden. Een donker geel (bruin) tabblad springt er veel beter uit.

    Gebruik blauw voor links in tekstblokken

    Usability is sterk gericht op het verwachtingspatroon van mensen, op hun intuïtie. Omdat nagenoeg iedereen er aan gewend is dat links blauw zijn, is het goed om je daaraan te houden.

    Test je website in grijstinten

    Of je de juiste kleurverzadiging of lichtsterktes hebt gebruikt kun je goed zien door je website of applicatie in grijstinten te bekijken. Je ziet dan goed of je website nog steeds duidelijk is en of er genoeg contrast tussen de actieve en inactieve elementen is voor kleurenblinde bezoekers. Mijn foto’s bekijk ik ook vaak in grijstinten tijdens het bewerken. Eerst kijk ik of een foto in grijstinten er goed uitziet en kijk daarna of kleur iets aan de foto toevoegt. Zodra kleur inderdaad het ‘verhaal’ interessanter maakt publiceer ik de foto in kleur, anders in grijstinten.

    Kleurtonen moet je gebruiken om extra herkenning of emotie toe te voegen. Gebruik kleurtonen niet om onderscheid te maken tussen verschillende elementen op je website. Ga in eerste instantie uit van grijstinten en voeg daarna kleur toe.

    Terug naar overzicht
Usability

De gebruiksvriendelijkheid van een website is bepalend voor het uiteindelijke succes... Lees verder