Omslag van 'Handboek webcontent: meer focus, minder content'

16. Beeldinformatie met afbeeldingen

Beeldinformatie is informatie die met beeld wordt overgebracht, bijvoorbeeld met een foto, een icoontje of een infographic. Hoewel beeld op het web heel belangrijk is, is een tekst niet altijd beter te begrijpen met een afbeelding. Ook video bespreken we in dit hoofdstuk.

16.1 Foto's

Er zijn 2 soorten foto's:

  • taakondersteunende foto's
  • sfeerfoto's

Taakondersteunende foto's

Als je online een jurk wilt kopen, dan is een foto van de jurk onmisbaar. Zo'n foto is betekenisvol voor jouw taak. Een foto bij je LinkedIn-profiel is meestal ook zinvol, want een profiel met foto geeft mensen meer informatie over jou.

Goed onderzoek naar het nut van foto's op websites vinden we (wederom) bij Jakob Nielsen van de Nielsen Norman Group. Hij onderzocht een grote groep mensen met eyetracking. Hij schrijft over het gebruik van foto's:

Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to 'jazz up' web pages.

In het onderzoek is gekeken naar 2 soorten foto's: foto's van mensen en foto's van producten.

Foto's van mensen blijken zinvol als het echte mensen zijn én als de foto's nodig zijn voor de uitvoering van de taak van de bezoeker. Hieronder een foto van de medewerkers van een bedrijf. Je ziet dat er echt naar de gezichten is gekeken.

Mensen kijken naar relevante foto's van personen
Bron: Photos as Web Content - Nielsen Norman Group

Maar bij een 'sfeerfoto' worden de gezichten nauwelijks bekeken, zoals te zien in de foto hieronder van een aantal studenten.

Foto's die niet betekenisvol zijn worden nauwelijks bekeken
Bron: Photos as Web Content - Nielsen Norman Group

Over deze laatste foto schrijft Nielsen:

Most likely, the dean or other manager asked designers to 'jazz up' the page so the university would look more exciting and thus attract more applications. But on the Web, jazzed-up = ignored.

Bij foto's van producten zie je iets soortgelijks. Op een winkelsite met boekenkasten en boekenplanken kijken mensen uitgebreid naar de afbeeldingen, zie hieronder. Blijkbaar is het belangrijk voor de kopers om te zien hoe de kast of de boekenplank eruitziet.

Foto's van boekenkasten blijken belangrijk
Bron: Photos as Web Content - Nielsen Norman Group

Maar bij een beeldscherm kopen blijkt dat heel anders te liggen. Dan is een afbeelding veel minder belangrijk, zoals je hieronder op de website van Amazon ziet. De specificaties in tekst zijn veel belangrijker.

Foto's van TV's blijken niet belangrijk
Bron: Photos as Web Content - Nielsen Norman Group

De conclusie van het onderzoek is dat foto's zinvol zijn als ze echt inhoudelijk iets toevoegen voor de taak van de bezoeker.

Sfeerfoto's

Webredacties plaatsen vaak foto's onder het mom van 'een goede sfeer creëren'. Het onderzoek van Nielsen ondergraaft dat argument.

Mensen negeren foto's die voor hen geen belangrijke informatie overbrengen. Waarschijnlijk is zo'n 90% van de afbeeldingen op overheidssites niet nodig, sterker nog: ze hebben waarschijnlijk een negatieve invloed op de bruikbaarheid van de websites. Daar zijn verschillende redenen voor:

  • Mensen moeten meer scrollen om bij de content te komen.
  • Het scannen van de informatie is moeilijker omdat er meer content staat.
  • De laadtijd van de pagina is langer (afbeeldingen zijn altijd veel zwaarder dan tekst).

Ook bij sites van patiëntenorganisaties, zorginstellingen en onderwijsinstellingen kan waarschijnlijk een groot deel van de afbeeldingen weg.

Kijk ook maar eens op sites van provincies en waterschappen: het wemelt van de afbeeldingen, maar ze zijn zelden gerelateerd aan een taak van de bezoeker. Afbeeldingen zijn dan zendergerichte content.

Op steeds meer gemeentesites zie je nog weinig afbeeldingen, bijvoorbeeld op de sites van de gemeenten Roosendaal en Vught.

Daar komt nog bij dat het veel tijd kost om een afbeelding te plaatsen. Denk bijvoorbeeld aan:

  • juiste foto kiezen
  • copyright regelen
  • foto bewerken tot juiste formaat
  • plaatsen op de site
  • controleren of de afbeelding goed staat
  • corrigeren als het niet goed is gegaan

Een eenvoudige nieuwsrubriek kost zo een paar uur werk per week.

Er zijn natuurlijk ook sites waarop afbeeldingen wel heel belangrijk zijn, zoals nieuwssites als nu.nl of bbc.com. Hier komen mensen met een andere intentie dan op een overheidssite of een site van een patiëntenvereniging.

Conclusie: beeldmateriaal is belangrijk voor het begrijpen van teksten, als het beeldmateriaal de inhoud van de tekst ondersteunt. Foto's voor sfeer werken meestal averechts; ze verslechteren de gebruiksvriendelijkheid van de site. En het plaatsen kost vaak veel tijd.

16.2 Icoontjes

Icoontjes zijn gestileerde afbeeldingen die bedoeld zijn om een bepaald concept uit te beelden. De betekenis is globaal, in tegenstelling tot foto's, die een specifieke en concrete functie hebben.

Hieronder een voorbeeld van icoontje voor 'home':

Icoontje van een huisje voor 'home'

Goede icoontjes zijn vaak universeel. Mensen hoeven het icoontje niet nog te 'leren' als ze op jouw site komen. Jakob Nielsen noemt dit recognition rather than recall, met andere woorden: herkenning is belangrijker dan herinnering.

Maar net als met foto's is er ook hier een sterke overwaardering voor icoontjes. In veel gevallen draagt het icoontje niets bij aan de betekenis en het gebruiksgemak.

Gebruik je icoontjes, dan is het bijna altijd goed om daarbij ook de tekst te tonen. Een bekend voorbeeld hierbij is de hamburger, 3 liggende streepjes die een aanduiding zijn voor het menu op een mobiele site, zie hieronder.

Hamburger: icoontje voor menu in mobiele weergave

Uit het onderzoek van Aurora Bedford – Icon Usability – blijkt dit hamburger-icoontje voor veel mensen niet duidelijk. Zij adviseert om er altijd het woord 'menu' bij te zetten. Veel sites gebruiken ook dit icoontje niet meer, maar kiezen voor alleen tekst: 'Menu'.

Het doel van icoontjes is vaak het ondersteunen van de navigatie, niet het duidelijker maken van de betekenis van een bepaalde tekst. Dat laatste doe je juist weer met foto's. Icoontjes gebruik je om een globale betekenis over te brengen, foto's voor een specifieke, concrete betekenis.

Icoontjes op sites kunnen dus zinvol zijn om mensen ergens naar toe te leiden. Is de lezer op de pagina met de content die hij gaat lezen, dan hoort het icoontje daar niet meer thuis. Hieronder zie je een icoontje van Publicaties. Behalve dat het icoontje niet universeel is en niet begrepen zal worden, heeft het hier ook geen functie meer, omdat de bezoeker het niet nodig heeft om te navigeren.

Icoontje als categorie-aanduiding en niet voor navigatie

Maar ook voor navigatie zijn icoontjes vaak niet handig, zoals in het voorbeeld hieronder:

Icoontjes voor toptaken op een gemeentesite

Zonder icoontjes is het waarschijnlijk net zo duidelijk, misschien zelfs nog duidelijker. Vaak wordt dan als argument gebruikt dat mensen beter kunnen navigeren met deze icoontjes. We vragen dan altijd of ze dit getest hebben en tot nu toe blijkt dat nog nooit het geval ...

Sta je voor de keuze om wel of geen icoontjes te gaan gebruiken, dan kun je onze vuistregel gebruiken voor alle contentbeslissingen: 'Bij twijfel, niet doen'.

Wij kennen nog weinig wetenschappelijke ondersteuning voor het gebruik van icoontjes. Het is de vraag of icoontjes wel altijd de boodschap versterken. Als je icoontjes weglaat, merk je dan dat mensen minder makkelijk kunnen navigeren? Wij zijn benieuwd naar goede A/B-testen.

16.3 Infographics: maak ze geschikt voor het web

Infographics zijn heel populair op het web. Vooral in social media zijn ze populair en blijken ze ook goed te werken, zoals op Twitter en op Facebook.

In 1 afbeelding een heel verhaal vertellen is de wens van veel communicatieadviseurs. Zorg wel dat de infographic is aangepast aan de mogelijkheden en beperkingen van het web.

Infographic aangepast aan het web

De mogelijkheden en beperkingen van het web stellen eisen aan de communicatie met infographics. Zorg dat je rekening houdt met:

  1. Zoekmachines
  2. Verschillende beeldschermen
  3. Bruikbaarheid voor mensen die blind of slechtziend zijn

Ten eerste moet de informatie indexeerbaar zijn door zoekmachines. Communicatie op het web zonder rekening te houden met zoekmachines is net zoiets als een billboard ophangen in je achtertuin: je mist veel potentiële kijkers en klanten.

Ten tweede heb je te maken met het gebruik van verschillende beeldschermen. Mensen bekijken het web via de desktop, maar ook op een tablet en een mobiele telefoon. De infographic moet dus op kleine schermen ook goed leesbaar zijn. Vaak heb je daar verschillende versies van dezelfde infographic voor nodig.

Tot slot: houd rekening met mensen die de afbeelding niet of niet goed kunnen zien, bijvoorbeeld omdat zij slechtziend of blind zijn. Daarvoor is het nodig dat je de infographic ook volledig in tekst uitlegt. En je moet zorgen dat het contrast in de infographic voldoet aan de regels die hiervoor gelden.

Infographic optimaliseren voor het web

Zorg voor verschillende versies van de infographic voor verschillende beeldschermen.

Moderne websites hebben als motto 'Mobile First', met andere woorden: zorg dat de informatie mobiel ook goed bruikbaar is. Dat betekent vaak dat je verschillende versies van een infographic nodig hebt, ook voor mobiel en tablet.

De New York Times doet dit op een mooie manier. Hieronder zie je 2 versies van dezelfde infographic: 1 voor desktop en 1 voor mobiel.

Links de infographic op een desktop, rechts dezelfde aangepast aan mobiel

Kies bij voorkeur voor html

De taal van het web is html. Maak je infographic daarom bij voorkeur in html. Dit zal voor veel mensen niet mogelijk zijn, maar dit is wel hoe het eigenlijk zou moeten. Zie ook dit voorbeeld van een infographic in html.

Zorg voor goed contrast tussen tekst en achtergrond.

Zorg voor een goed contrast tussen tekst en achtergrond. Het contrastratio moet voor gewone tekst minimaal 4,5 zijn.

Dit is niet alleen belangrijk voor mensen die minder goed zien. Een beeldscherm leest altijd minder makkelijk dan papier, dus een goed contrast is handig voor iedereen. Ook is de kwaliteit van beeldschermen heel verschillend.

Zorg voor een goed leesbaar lettertype

Lezen vanaf een beeldscherm stelt eisen aan het lettertype. In het algemeen is een schreefloos lettertype het beste. Zorg ook dat het voldoende groot is.

Infographic toegankelijk ontsluiten

Omschrijf de infographic in tekst

De makkelijkste en vaak ook de beste manier om een infographic toegankelijk aan te bieden is de informatie ook in tekst aan te bieden. Dat lijkt wellicht overbodig, maar een tekstuele uitleg blijkt voor veel mensen heel handig. Sommige mensen zijn nu eenmaal minder visueel ingesteld.

Door de infographic in tekst uit te leggen heb je deze ook toegankelijk gemaakt voor mensen met een visuele beperking. Een alternatieve tekst bij de afbeelding is niet nodig.

Bied een tekstalternatief

Wil je liever geen uitgeschreven tekst bij de infographic, dan kun je deze tekst ook via een link op een andere pagina aanbieden. Deze link kun je via css zo maken dat deze alleen zichtbaar is voor de screenreader.

Nadeel van deze oplossing is dat deze tekst vaak niet goed wordt bijgehouden, want de redacteur en de meeste gebruikers zien deze tekst niet meer. Ook is het de vraag of Google deze tekst wel goed indexeert.

Bij pdf: zorg dat pdf ook toegankelijk is

Staat de infographic in een pdf, zorg dat deze pdf óók toegankelijk is. Zorg bijvoorbeeld dat de eigenschappen goed zijn ingevuld.

16.4 Beeldstrip als alternatief voor een infographic

Sommige infographics lenen zich uitstekend voor een beeldstrip. Voordelen van een beeldstrip zijn:

  1. Ze zijn makkelijk responsive te maken. Werken dus ook op een mobiele telefoon.
  2. Ze zijn makkelijk toegankelijk te maken.
  3. Ze zijn beter te begrijpen.

Voorbeeld van een beeldstrip.

16.5 Banners

Een bijzondere vorm van beeld zijn banners. Meestal zijn dit afbeeldingen met tekst erin. Hieronder een voorbeeld van een banner op een gemeentesite.

Banner

Banners om je eigen content aan te prijzen zijn onzinnig. Iets anders is het als je een commerciële site bent en je businessmodel (mede) gebaseerd is op banners, zoals nu.nl of 9292.nl. Voor hen werken banners wel goed en zijn ze essentieel.

Het is niet toevallig dat Google nooit met banners is gaan werken. Hun Google Ads-advertenties zijn schoolvoorbeelden van goede microcontent: korte titel en korte lead, en beide zijn maximaal betekenisvol. De advertenties hebben ook geen afbeelding.

We zien voor non-profitorganisaties weinig toegevoegde waarde voor banners. Wil je ergens extra aandacht op richten, maak dan een goed blokje microcontent. Dat bestaat uit een betekenisvolle korte aanklikbare titel en een betekenisvolle snippet.

16.6 Laaggeletterdheid en beeld

Het klinkt logisch om te veronderstellen dat juist laaggeletterden baat hebben bij beeld. Wij kennen echter geen onderzoek dat dat ondersteunt.

Het onderzoek van Joyce Karreman naar laaggeletterdheid laat het tegendeel zien. Zij onderzocht bij laaggeletterden of zij een folder beter begrepen als deze verrijkt was met extra beeldinformatie. Zij schrijft:

Uit een test onder meer dan honderd laaggeletterde groenwerkers bleek dat een heldere tekst op het taalniveau van de doelgroep het beste werkt. De toevoeging van pictogrammen en rolmodellen is overbodig en leidt zelfs af.

16.7 Video

Video heeft heel veel voordelen, maar ook enkele nadelen.

Om maar met het nadeel te beginnen, het is een tijdgebonden medium. Als je een uitleg wilt krijgen over hoe je nu laminaat moet leggen, dan is een video handig om het hele proces uitgelegd te krijgen. Nadeel is dat je de hele video moet kijken. Je kunt wel een beetje door de video scrollen, maar echt handig is het niet.

Maar als je alleen wilt weten hoe je een Ikea-kast in elkaar moet zetten, kan een instructie in stappen handiger zijn. Je kunt dan heen en weer springen in de informatie en je kunt even iets lezen, schroefje er in draaien en weer even iets lezen (dus niet tijdgebonden).

Enkele jaren terug nog hadden sommige gemeenten voor alles een video: hoe je een paspoort moest aanvragen, hoe je een melding kon doen. Dat is allemaal onnodig gebleken. Een duidelijke tekstuele uitleg is dan veel beter.

Maar er zijn ook veel voordelen. Er zijn veel onderwerpen die je met een korte video heel duidelijk kunt uitleggen. Kijk bijvoorbeeld naar de video's van de Nederlandse Transplantatie Stichting.

Gebruik je video, let dan op het volgende:

  • Voeg ondertiteling toe.
  • Breng je ook informatie over met alleen beeld, voeg dan audiodescriptie toe. Maar handiger is: probeer dit te voorkomen en zorg dat tekst in beeld ook als spraak aanwezig is.

Ondertiteling is belangrijk voor mensen die doof zijn of geen geluid op hun computer/device hebben of kunnen gebruiken.

Audiodescriptie is het beschrijven van dingen die je kunt zien op de video, maar niet kunt horen. Dit is belangrijk voor blinden en slechtzienden. Bij audiodescriptie voeg je dus gesproken teksten toe aan je video.

Voor het aanbieden van video kun je uitstekend gebruik maken van sites als YouTube of Vimeo. De video kun je dan via een iframe embedden op je eigen site.

Meld dan wel dat je cookies gebruikt en dat de gegevens door Google of andere partijen gebruikt kunnen worden.

16.8 Tips voor video toegankelijk op YouTube

Met dank aan de tips op 200ok.nl.

  • Voeg het title-attribuut toe aan het iframe-element. Beschrijf in een paar woorden de inhoud van de video (SC 4.1.2).
  • Voeg ondertiteling toe als er gesproken wordt in de video (SC 1.2.3)
  • Voeg audiodescriptie toe indien nodig. (SC 1.2.4, SC 1.2.6)
  • Zorg voor genoeg contrast van de tekst in de video (SC 1.4.3)
  • Schakel sneltoetsen uit. Wijzig de standaard van YouTube van disablekb=0 naar 1 (SC 2.1.4).
    src="https://www.youtube.com/watch?v=XXXXXXX&disablekb=1"
  • Zet het automatisch afspelen (autoplay) van de video uit. Gebruik de standaardinstelling van YouTube: autoplay=0.
  • Toon Show controls. Hou YouTube's standaard aan: controls=1.
  • Zorg dat volledig scherm mogelijk is. Gebruik YouTube's standaard fs=1.
  • Laat het YouTube-logo staan, zodat de gebruiker eenvoudig de video op YouTube kan bekijken. Gebruik YouTube's standaard modestbranding=0.
top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.