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

17. Beeldinformatie

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

17.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.

17.2 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 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.

17.3 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.

17.4 Infographics

Infographics zijn informatieve illustraties. De kracht van een infographic is om met beeld een complexe boodschap snel inzichtelijk te maken.

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

Toch is ons advies om hiermee op een website voorzichtig te zijn. De meeste infographics zijn gedetailleerd en kunnen op een website niet goed bekeken worden. Je moet ook rekening houden met mobiele beeldschermen. Misschien is je infographic op een mobiel beeldscherm lastig leesbaar.

Heb je complexe content, dan kun je dit beter in tekst en eventueel met losse eenvoudige afbeeldingen uitleggen.

In de meeste gevallen is een infographic niet geschikt voor een website. Ook hier ons devies: twijfel je, doe het dan niet.

17.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.

17.6 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.

top

Feedback

Contact

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