8 Extra

Het toepassen van kleuren in interfaces

Bij het ontwerpen van een interface voor een systeem moet je als ontwerper in de huid van de gebruiker kunnen kruipen. In een aantal opzichten zal die gebruiker anders reageren dan de ontwerper, maar een aantal dingen zullen ze gemeen hebben.

Mensen reageren over het algemeen op dezelfde manier op bepaalde kleuren, bijvoorbeeld. Dat komt voor een deel omdat kleuren in onze maatschappij een bepaalde betekenis hebben gekregen.

De betekenis van kleur / Welke kleur(en) wil jij?

Opdracht yes / no

Waarom zou dit scherm nare gevolgen kunnen hebben?

Klik hier

 

Het HSB-model

Kleuren worden weergegeven in 3 componenten: rood, groen en blauw. Dit wordt het RGB-model genoemd. Daarbij worden kleuren ook nog weergegeven in 3 andere begrippen: het HSB-model. HSB-kleuren worden ook gemaakt met behulp van drie getallen. Het eerste getal (en de H) staat voor de Hue, de tint. Dit is een kleur op de regenboog. De plaats op de regenboog wordt aangegeven door een getal tussen 0 en 1.

De S van HSB staat voor Saturation, ofwel verzadiging. Dit geeft aan hoe fel de kleur is. Een minimale waarde voor de verzadiging betekent dat er geen enkele kleur meer is, het is grijs; een maximale waarde geeft aan dat de kleur op z'n felst is.
De B van HSB staat voor Brightness, ofwel helderheid. Dit geeft aan hoe licht de kleur is. Een minimale waarde betekent geen enkel licht: zwart; een maximale waarde wil zeggen dat de kleur voluit getoond wordt.

Je kunt dit verschil in helderheid zien als je in Word een kleur kiest:

De helderheid van de kleur groen kun je veranderen door het driehoekje op de balk te verschuiven.

 

Er zijn drie regels om ervoor te zorgen dat je tekst niet wegvalt tegen de achtergrond, en ook leesbaar is voor mensen die kleurenblind zijn:

  • Overdrijf het verschil in helderheid tussen de voorgrond en de achtergrond en vermijd kleuren die dichtbij elkaar liggen, en een vergelijkbare mate van helderheid hebben, zelfs als ze verschillen in verzadiging of tint.
  • Kies donkere kleuren uit de rechterhelft van de kleurencirkel tegen lichte kleuren van de linkerhelft.
  • Vermijd kleuren die dicht naast elkaar liggen in de kleurencirkel.

Opdracht leesbaarheid tekst

Zou de combinatie van rood en oranje een leesbare tekst opleveren?

Klik hier

 

Er zijn formules die berekenen of de mate van helderheid en de kleuren zelf voldoende van elkaar verschillen. De formules worden hier niet behandeld. Je kunt wel uittesten welke combinatie van kleuren een leesbaar resultaat oplevert. Klik in onderstaande applet op een toets uit de linkerkolom om een kleur voor de tekst te kiezen. Klik op een kleur uit de rechterkolom om een achtergrond te kiezen. Je ziet vervolgens of het verschil tussen de kleuren en hun mate van helderheid voldoende is.

Kleuren hebben niet alleen een bepaalde betekenis omdat er afspraken over zijn gemaakt. Rood wordt vaak gebruikt voor gevaar of stoppen/niet doen. Kleuren hebben ook een emotionele waarde. Zo staat rood niet alleen voor gevaar of stoppen, maar ook voor warm bijvoorbeeld. Voor veel mensen uit eenzelfde cultuur hebben kleuren dezelfde emotionele waarden. Per cultuur kunnen die waarden echter wel verschillen.


Bekijk het filmpje over kleuren op de website Color in Motion. Dat doe je door op de voorstelling te klikken. Denk erom: het duurt even voordat het filmpje is geladen.

Het filmpje laat zien welke gevoelens bepaalde kleuren oproepen.

Klik hier voor website.

De invloed van taal en tekst

Ook taal helpt je om de sfeer en de helderheid van je systeem te bepalen.

De sfeer blijkt uit je woordkeuze en de vraag of je je publiek aanspreekt met je en jij of met u. Je moet van te voren dus goed bedenken welk publiek je wilt aanspreken. Stel jezelf een aantal vragen als:
 

  • Wie is het?
  • Wat moet hij of zij met mijn tekst?

We bekijken achtereenvolgens twee fragmenten uit het journaal (klik op de hyperlinks om de pdf's te openen):

Beide fragmenten gaan over kinderen die te dik zijn. Het eerste fragment is afkomstig uit het NOS-journaal, het tweede fragment uit het jeugdjournaal.

 

Opdracht NOS- en jeugdjournaal

Vergelijk de beide teksten met elkaar. Beantwoord vervolgens de onderstaande vragen die betrekking hebben op het stukje uit het jeugdjournaal:

  1. Wat is er weggelaten?
  2. Wat is er blijven staan?
  3. Wat is er veranderd?
  4. Wat is er toegevoegd?

Nadat je deze vragen hebt beantwoord, kun je door te klikken op de knop "klik hier" controleren of jouw bevindingen overeenkomen met de onzen.

Klik hier

 

Voor wie schrijf je?

Om te bepalen wie je publiek is, kun je jezelf afvragen of hoe oud ze zijn en welke
opleiding ze hebben. Zowel leeftijd als opleidingsniveau bepalen de woorden die je kiest
en de lengte van je zinnen. Hoewel het voor een digitaal medium sowieso beter is om
korte zinnen te gebruiken, geldt dat helemaal als je denkt dat je publiek niet gewend is
veel te lezen. En gebruik ook niet teveel lijdende voorwerpen: een tekst met een lijdende
vorm wordt ook vaak minder goed begrepen.

Wat moet iemand met je tekst?

Waarvoor dient je tekst? Moet je tekst informatie bieden, iemand overhalen iets te
kopen, iemand vermaken? Moet iemand snel mijn tekst kunnen lezen, of ga je ervan uit
dat hij of zij er veel tijd voor uit trekt?
Probeer je in ieder geval te verplaatsen in degene die je tekst leest. Meestal heeft
iemand een bepaalde vraag in gedachten als hij informatie zoekt. Probeer je tekst dan
ook op die manier aan te bieden, en speel in op mogelijke vragen. Vraag je ook af of je
lezer het prettig vindt om persoonlijk te worden aangesproken. Niet iedereen is daarvan
gediend.

Lees het onderstaand nieuwsitem. Centraal staat de verwende jeugd.

Herschrijf deze tekst nu zodanig dat het bericht geschikt is voor het jeugdjournaal

Het lettertype:

Ook het lettertype dat je gebruikt is van invloed op de sfeer en de helderheid van je
tekst. Grof gezegd zijn er schreefloze letters, zoals Verdana, en schreven zoals Times New
Roman. Sommige ontwerpers raden aan schreefloze letters alleen te gebruiken voor
koppen en in langere teksten schreven te gebruiken. De krullen van de schreven zouden
je ogen beter langs de regel leiden. Anderen raden het gebruik van schreefloze letters
juist aan voor langere teksten omdat schreven als bitmapafbeelding slecht overkomen.
De manier waarop letters op je beeldscherm verschijnen hangt af van de manier waarop
de informatie over de letter wordt bewaard: als bitmap of als wiskundige berekening.
Wat bij de ontwerper mooi kan ogen, hoeft bij de gebruiker er niet hetzelfde uit te zien.
Een andere reden om schreven niet te gebruiken is dat de uitstraling die ze hebben: een
beetje arrogant en serieus.

  • Het arrangement 8 Extra is gemaakt met Wikiwijs van Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt, maakt en deelt.

    Auteur
    Bètapartners Je moet eerst inloggen om feedback aan de auteur te kunnen geven.
    Laatst gewijzigd
    2014-12-18 14:55:58
    Licentie

    Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding-GelijkDelen 3.0 Nederland licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding en publicatie onder dezelfde licentie vrij bent om:

    • het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat
    • het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
    • voor alle doeleinden, inclusief commerciële doeleinden.

    Meer informatie over de CC Naamsvermelding-GelijkDelen 3.0 Nederland licentie.

    Dit materiaal is achtereenvolgens ontwikkeld  en getest in een SURF-project  (2008-2011: e-klassen als voertuig voor aansluiting VO-HO) en een IIO-project (2011-2015: e-klassen&PAL-student).  In het SURF project zijn in samenwerking met vakdocenten van VO-scholen, universiteiten en hogescholen e-modules ontwikkeld voor Informatica, Wiskunde D en NLT.  In het IIO-project (Innovatie Impuls Onderwijs) zijn in zo’n samenwerking modules ontwikkeld voor de vakken Biologie, Natuurkunde en Scheikunde (bovenbouw havo/vwo).  Meer dan 40 scholen waren bij deze ontwikkeling betrokken.

    Organisatie en begeleiding van uitvoering en ontwikkeling is gecoördineerd vanuit Bètapartners/Its Academy, een samenwerkingsverband tussen scholen en vervolgopleidingen. Zie ook www.itsacademy.nl

    De auteurs hebben bij de ontwikkeling van de module gebruik gemaakt van materiaal van derden en daarvoor toestemming verkregen. Bij het achterhalen en voldoen van de rechten op teksten, illustraties, en andere gegevens is de grootst mogelijke zorgvuldigheid betracht. Mochten er desondanks personen of instanties zijn die rechten menen te kunnen doen gelden op tekstgedeeltes, illustraties, enz. van een module, dan worden zij verzocht zich in verbinding te stellen met de programmamanager van de Its Academy (zie website). 

    Gebruiksvoorwaarden:  creative commons cc-by sa 3.0

    Handleidingen, toetsen en achtergrondmateriaal zijn voor docenten verkrijgbaar via de bètasteunpunten.

     

    Aanvullende informatie over dit lesmateriaal

    Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:

    Toelichting
    Deze les maakt onderdeel uit van de e-klas 'Mens-machine interactie' voor havo 5 en VWO 5 en 6 voor het vak informatica.
    Leerniveau
    VWO 6; HAVO 5; VWO 5;
    Leerinhoud en doelen
    Informatica;
    Eindgebruiker
    leerling/student
    Moeilijkheidsgraad
    gemiddeld
    Trefwoorden
    c4 informatiesysteemontwikkeling, c8 interactie mens-machine, e-klassen rearrangeerbaar
  • Downloaden

    Het volledige arrangement is in de onderstaande formaten te downloaden.

    Metadata

    LTI

    Leeromgevingen die gebruik maken van LTI kunnen Wikiwijs arrangementen en toetsen afspelen en resultaten terugkoppelen. Hiervoor moet de leeromgeving wel bij Wikiwijs aangemeld zijn. Wil je gebruik maken van de LTI koppeling? Meld je aan via info@wikiwijs.nl met het verzoek om een LTI koppeling aan te gaan.

    Maak je al gebruik van LTI? Gebruik dan de onderstaande Launch URL’s.

    Arrangement

    IMSCC package

    Wil je de Launch URL’s niet los kopiëren, maar in één keer downloaden? Download dan de IMSCC package.

    Meer informatie voor ontwikkelaars

    Wikiwijs lesmateriaal kan worden gebruikt in een externe leeromgeving. Er kunnen koppelingen worden gemaakt en het lesmateriaal kan op verschillende manieren worden geëxporteerd. Meer informatie hierover kun je vinden op onze Developers Wiki.