Effectieve webteksten schrijven
Wat als u uw lezers in de helft van de tijd, meer dan 30% méér van uw tekst kon laten herinneren? Dat zou uw website een stuk effectiever maken nietwaar? Een eye-tracking onderzoek uitgevoerd door usability guru Jakob Nielsen eind 2005 bewijst dat dit mogelijk is. In dit artikel beschrijf ik de drie voornaamste onderzoeksresultaten die dit onderzoek onder 255 testpersonen opleverde en de aanbevelingen die u waardevol inzicht geven in het schrijven van teksten voor uw website.
#1 Herschrijven + herindelen = onthouden
In het onderzoek werd een artikel herschreven met daarin meer witruimtes, minder afbeeldingen, kleine icoontjes en kortere zinnen. Het effect was dat lezers de helft minder tijd nodig hadden om de tekst te lezen, maar na afloop 34% meer van de tekst onthielden. In onderstaande afbeelding ziet u het originele en herschreven artikel.
De analyse van het kijkpatroon van de proefpersonen is verwerkt in een zogenaamde ‘heatmap’. De rode zones geven een hoge fixatielengte van de ogen aan en de witte zones een lage fixatie. De heatmap ziet u in onderstaande afbeelding.
Zoals u kunt zien wordt de gereviseerde tekst minder intensief gelezen, maar wel veel beter onthouden. Ook interessant is om te zien dat de afbeeldingen weinig aandacht trekken.
Aanbevelingen voor website teksten:
- Maak korte heldere zinnen
- Maak lijstjes met ‘bulleted items’ (zoals dit lijstje)
- Verwijder onnodige afbeeldingen
- Gebruik voldoende witruimtes
- Gebruik goede koptitels en alinea titels
- Geef duidelijk aan op welke pagina de lezer zich bevindt
#2 Heldere vormgeving en pagina indeling is essentieel
Uit een tweede test op hoofdpagina’s van websites is gebleken dat teksten die niet expliciet zijn en afbeeldingen die niet relevant zijn, geen aandacht trekken, afleiden en dus ruimte verspillen. In onderstaande afbeelding ziet u een pagina die de lezers moet verleiden tot het lezen van nieuws (top stories).
In de bijbehorende heatmap hieronder ziet u dat de lezers de mooie sfeerafbeelding van de trein geen aandacht gaven en pas bij de “top stories” aankwamen na een tijdje over de pagina te hebben gezwermd. Dit laat dus zien dat de pagina niet erg effectief is in het direct onder de aandacht brengen van het nieuws. Verloren tijd dus als je aanneemt dat bezoekers zich vaak maar enkele seconden op een pagina bevinden.
Vervolgens is een andere versie van dezelfde pagina getest. Hierin zie je duidelijk dat deze pagina meer in staat is om de bezoekers direct naar het nieuws te leiden, en daar te houden. De belangrijkste verandering is het weglaten van de grote sfeerafbeelding en het duidelijker benoemen van de tekstonderdelen (bijvoorbeeld ‘also see’ in plaats van ‘synthetic ties’, ‘aar forum’ en ‘joint line’). Ook hier zie je duidelijk dat de sfeerafbeelding geen enkele fixatie krijgt.
Tips voor pagina ontwerp
- Presenteer teksten zodat ze eenvoudig te ‘scannen’ zijn op een website
- Gebruik een eenvoudige navigatiestructuur
- Vervang nutteloze afbeeldingen door nuttige, of anders door witruimte
#3 Relevante afbeeldingen trekken aandacht
Een interessante uitkomst is dat lezers van een webpagina irrelevante afbeeldingen vermijden. Sterker nog, ze creëren barrières voor de teksten. Afbeeldingen die de aandacht trekken voldoen volgens Niels aan de volgende eigenschappen:
- Relevant voor de inhoud van de webpagina,
- Duidelijk te identificeren,
- Laten toegankelijke mensen zien (duidelijk te onderscheiden gezichten)
- Laten afbeeldingen van ‘echte mensen’ zien, dus geen modellen (stock foto’s). Lezers beoordelen teksten met afbeeldingen van modellen als advertenties en zullen de tekst derhalve vermijden,
- Laten het gebied van de genitaliën zien (krijgt een langere fixatie door voornamelijk mannen, ongeacht het geslacht van de afgebeelde persoon).
In onderstaand voorbeeld werden de testpersonen gevraagd op een website over dansers informatie op te zoeken van een specifiek persoon. Hun ogen bekeken vrijwel alle gedeeltes van de webpagina, behalve de foto. De foto laat de voeten van een danser zien, en is meer decoratief dan relevant.
Algemene afbeeldingen ‘voor de vorm’ kunnen dus beter vermeden worden. Vervang deze door relevante, of anders helemaal geen afbeeldingen. Als voorbeeld wordt gegeven dat een pagina over een specifieke maaltijd een mooie foto van deze maaltijd moet bevatten, en geen ‘algemene’ afbeelding van bijvoorbeeld een mes en vork. Iets dat veel voorkomt.
Al met al hopelijk weer wat interessante inzichten over het opmaken en schrijven van webpagina’s. Vragen, opmerkingen of suggesties hoor ik graag via de reactiemogelijkheid bij dit artikel. Succes!
Klik hier voor het uitgebreide artikel (Engels).



21. mrt, 2007 














Kijk dit zijn de leuke artikelen! Dat eyetracking sowieso is een bijzonder interessante techniek waar ik meer mee zou willen doen. Er zijn genoeg methoden om ontwerpen mee te testen, maar heatmaps leveren een bijzonder interessante informatiebron voor de toekomst
Inderdaad. Soms levert het ook nog wat onverwachte feitjes op ook. Zo wist ik bijvoorbeeld niet dat mannen zich zo fixeerden op de ‘private area’ van personen en dieren (..). Alleen rijst de vraag bij mij op; wat voor communicatieve meerwaarde heeft dat
Prachtig die geïlustreerde voorbeelden. Ik heb je direct bij mijn Reader gezet!
Afbeeldingen zijn bijna nog belangrijker dan de tekst. Met een afbeelding kan de bezoeker snel de inhoud van de tekst begrijpen en besluiten wel of niet verder te lezen. Een relevante afbeelding is hier van groot belang.
Chris ( http://www.internetredactie.com )
jacco