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

13. Structureren van de body met tussenkoppen en opsommingen

Na de titel en de lead start meestal de body. Deze geef je structuur met bijvoorbeeld tussenkoppen en opsommingen.

13.1 Betekenisvolle tussenkoppen

De richtlijnen

De richtlijnen van een goede titel gelden ook voor tussenkoppen:

  • Maak ze betekenisvol.
  • Zorg dat ze een goede beschrijving geven van de inhoud van de paragraaf.
  • Zet de belangrijkste woorden vooraan.
  • Lengte maximaal 60 tekens.
  • Stel geen vraag, maar probeer al het antwoord te geven.
  • De tussenkoppen vormen samen een inhoudsopgave van de pagina.

Een tussenkop hoef je niet te herhalen in de tekst eronder

Zie bijvoorbeeld deze tekst over het rijbewijs op gov.uk:

Replacing a driving licence

This will cost £ 20. You must replace your licence if it's been lost, stolen, defaced or destroyed.

Changing the name of address on your driving licence

There's no charge for this service. However, there's a £ 20 fee if you're a photo card licence holder and want to change your photo at the same time.

Je moet dus de tussenkop lezen om de tekst eronder te begrijpen. Veel mensen zullen dit in de schoolbanken anders hebben geleerd.

Hieronder nog een voorbeeld, waarbij de tussenkop niet herhaald wordt:

Meenemen

  • Alle reisdocumenten (paspoort en/of ID-kaart), ook als deze zijn verlopen.
  • Een recente kleurenpasfoto. Let op de eisen van de rijksoverheid.
  • Uw kind als het zijn of haar paspoort betreft.
  • Bankpas: het paspoort moet bij aanvraag met pin betaald worden.

Eigenlijk bevat een webtekst vrijwel geen dubbeling, alleen in de lead verwoord je nog een keer de inhoud van de titel.

Tussenkoppen zorgen dat mensen een tekst beter lezen

Als je betekenisvolle tussenkoppen gebruikt, lezen mensen teksten beter. Dat blijkt uit eyescan-onderzoek How People Read on the Web: The Eyetracking Evidence van Jakob Nielsen.

Nielsen komt in het artikel ook met andere patronen van hoe mensen kijken. Als je bijvoorbeeld betekenisvolle tussenkoppen gebruikt, dan blijken mensen daar ook echt naar te kijken. Het patroon dat dan ontstaat, noemt hij het layered-cake-patroon.

Layered-cake-kijkpatroon dat ontstaat bij het gebruik van tussenkoppen.
Bron: How People Read on the Web: The Eyetracking Evidence

Nielsen schrijft hierover:

"One of the most critical findings is that web content authors must create effective headings. No matter how the page is organized (…) headings help people to scan the content efficiently. People often look first at headings, and well-phrased headings can dramatically affect how well people work with a particular web page."

Met andere woorden: goed geformuleerde tussenkoppen zijn heel belangrijk voor jouw lezers.

Tussenkoppen zijn belangrijk voor zoekmachines

Ook voor zoekmachines zijn tussenkoppen belangrijk. In de publicatie Rebooting Ranking Factors Google.com staat:

Not all top URLs make use of H2 headings. Using them can give a domain a competitive advantage.

Voorbeelden van tussenkoppen

Voorbeeld 1: tussenkoppen zijn onvoldoende duidelijk

Hieronder de tussenkoppen van een artikel over de totstandkoming van een wet. De tussenkoppen zijn creatief geschreven, maar helpen niet om te begrijpen waarover de tekst gaat. Ze maken het scannend lezen niet makkelijker.

Van Wetsvoorstel tot Wet

  1. Hier klopt iets niet!
  2. Een voorstel
  3. Hoe denkt de politiek er over?
  4. Wordt het ja, nee of iets anders?
  5. Weten we het zeker?
  6. Nieuwe regels

De tussenkoppen bevatten geen relevante woorden, waardoor ze vrijwel geen betekenis geven over de inhoud. Meer betekenis geven de volgende koppen:

  1. Voorstel voor nieuwe wet
  2. Bespreking voorstel in commissie
  3. Bespreking in Tweede Kamer
  4. Vaststelling in Eerste Kamer
  5. Publicatie in Staatsblad: wet is actief

Voorbeeld 2: tussenkop ontbreekt

De contactpagina op de oude website van het Agentschap Telecom had de volgende koppen:

Contact

  • Hoofdkantoor Groningen
  • Kantoor Amersfoort
  • Postadres
  • Storing melden buiten kantoortijden
  • Information in English

Onder aan de pagina staat een contactformulier, zie hieronder. Een tussenkop boven dit formulier ontbreekt. Gebruikers van screenreaders, die de pagina scannen op tussenkoppen, krijgen zo niet de informatie dat de pagina ook een contactformulier bevat. Ook Google krijgt die informatie niet via de koppenstructuur van de pagina.

De oplossing is hier simpel: plaats boven het formulier (dus onder de Engelse informatie) een tussenkopje 'Contactformulier'.

Tussenkopje voor contactformulier ontbreekt

13.2 Opsommingen

Opsommingen maken het scannen van teksten makkelijker:

Bulleted lists, when done well, are extremely attractive elements. The eye goes to them frequently.

In het onderzoek is onderzocht waar mensen naar kijken. Dit is zichtbaar gemaakt in zogenaamde heatmaps. In de heatmap hieronder zie je hoe mensen stukken content overslaan om direct te springen naar de opsommingen.

Heatmap: opsommingen krijgen focus

In een andere vorm van eyetracking-onderzoek kijkt de Nielsen Norman Group naar de volgorde waarin de bezoeker naar de pagina kijkt. Hieronder zie je een voorbeeld waarin je de fixaties op de pagina zichtbaar gemaakt ziet. De bezoeker start met het lezen van de titel, kijkt naar de lead en springt gelijk naar de opsomming.

Heatmap: leesvolgorde is titel, lead, opsomming

Conclusie: opsommingen zijn belangrijk voor het scannend lezen.

Opsommingen vergroten ook de vindbaarheid van jouw site in Google. In het al eerder genoemde rapport Rebooting Ranking Factors Google.com staat:

In general: the higher a page ranks, the more likely it is that it contains a bullet point list.

Opsommingen worden beter gelezen, omdat ze helpen bij het beter begrijpen van een tekst. Ons brein weet dat de content in de opsommingen belangrijke content is. Hoa Loranger van de Nielsen Norman Group schrijft:

A few tiny dots attract the eye and can make a complex concept understandable. Readers perceive the bullets as shortcuts to succinct, high-priority content. It's not surprising that, in usability studies, we observe readers gravitate towards bulleted lists with fervor. Web readers want to digest content quickly.

Soorten opsommingen en gebruik van leestekens

Wij krijgen vaak de vraag hoe je nu in opsommingen met leestekens moet omgaan. We hanteren de richtlijnen die ook Jan Renkema (Schrijfwijzer) hanteert:

  • Is het item een zin, schrijf het als een zin. Dus start met een hoofdletter en eindig met een punt. Een item is een zin als het een onderwerp en werkwoord bevat.
  • Is het geen zin (dus het onderwerp of een werkwoord ontbreekt), gebruik dan geen leestekens zoals een puntkomma of een punt. Een hoofdletter aan het begin kan.

Deze richtlijn staat ook in het al genoemde artikel 7 Tips for Presenting Bulleted Lists in Digital Content.

Opsommingen maken het scannen makkelijker

Heb je een opsomming in je tekst, maak daar dan ook een echte opsomming van. Neem onderstaande tekst:

In het ontwerp peilbesluit worden nieuwe waterpeilen voor het afvoergebied Braakman, de Westelijke Rijkswaterleiding, De Grote of Oude Albertpolder en de Sint Pieterspolder in de gemeente Terneuzen voorgesteld die het waterschap in normale omstandigheden nastreeft en handhaaft.

Die wordt met een opsomming veel duidelijker:

In het ontwerp peilbesluit staan de nieuwe waterpeilen voor:

  • afvoergebied Braakman
  • de Westelijke Rijkswaterleiding
  • de Grote of Oude Albertpolder
  • Sint Pieterspolder

Houd de teksten van opsommingen kort

Nielsen schrijft hierover:

To make a bulleted list most attractive, keep the number of words per bullet to a minimum. These are called “bulleted lists” and not "bulleted paragraphs" for a reason. Sticking a bullet in front of a paragraph is no good.

Hieronder een voorbeeld waarin de opsommingsitems complete alinea's zijn:

Alle wateren binnen het beheersgebied van Waterschap Rivierenland, voor zover ze deel uitmaken van het watersysteem, hebben een functie. De wateren zijn van belang voor het functioneren van het watersysteem, maar sommige wateren zijn daarbij belangrijker dan andere. Er wordt onderscheid gemaakt in A-, B- en C-wateren:

  • A-wateren kunnen worden gezien als de 'slagaders' van het watersysteem. Ze hebben zowel een bergende als een aan- en afvoerende functie. Vanwege het waterhuishoudkundige belang van A-wateren worden ze door het waterschap zelf onderhouden. A-wateren hebben daarom een beschermingszone van 4 meter (5 meter in de gebieden Alblasserwaard, Vijfheerenlanden, Alm en Biesbosch).
  • B-wateren kunnen worden gezien als de 'aders' van het watersysteem. Ook B-wateren hebben een bergende en een aan- en afvoerende functie, maar zijn minder van belang voor het functioneren van het watersysteem in vergelijking met A-wateren. B-wateren worden onderhouden door de eigenaren van de aangrenzende percelen. Het waterschap voert jaarlijks controles uit (‘schouw') om de instandhouding van de B-wateren te waarborgen. B-wateren hebben een beschermingszone van 1 meter.
  • C-wateren kunnen worden gezien als de ‘haarvaten' van het watersysteem. Ze hebben alleen een waterbergende functie. C-wateren worden niet geschouwd, maar het waterschap en de eigenaren van de aangrenzende percelen hebben er wel een belang bij dat de wateren in stand worden gehouden. C-wateren hebben geen beschermingszone.

Als je zulke lange opsommingen gebruikt, verlies je het voordeel van de scanbaarheid van een opsomming. Je lost dit op met een korte opsomming, gevolgd door een tekst met kopjes:

Wij onderscheiden 3 soorten wateren:

  • A-wateren: de grootste wateren, vaak grotere rivieren en kanalen
  • B-wateren: middelgrote wateren, zoals kleine rivieren en kanalen
  • C-wateren: kleinere wateren, zoals sloten en beken

A-wateren

[paragraaf met tekst]

B-wateren

[paragraaf met tekst]

C-wateren

[paragraaf met tekst]

Maak de opsommingen taalkundig niet ingewikkeld

Soms maken mensen een opsomming door te starten met een zin die afgemaakt wordt in elk item, zoals in het voorbeeld hieronder:

Het nieuwe MVA:

  • is een kleine lichte MVA-laptop;
  • heeft een 1-vingerafdrukscanner;
  • heeft een draadloze muis;
  • krijgt een aangepaste tas;
  • heeft software met een modern uiterlijk en gebruik.

Deze constructie heeft 2 nadelen:

  • Taalkundig is de opsomming moeilijker om te begrijpen. De lezer moet steeds het intro van de opsomming lezen om elk item goed te kunnen begrijpen. Dit maakt het lezen lastiger.
  • Deze schrijfwijze is ook voor de schrijver zelf ingewikkeld; de items sluiten lang niet altijd goed aan op de start van de zin.

Ons advies is om een andere schrijfwijze te zoeken die deze problemen niet heeft, zoals hieronder.

Kenmerken nieuwe MVA:

  • kleine lichte laptop
  • 1-vingerafdrukscanner
  • draadloze muis
  • aangepaste tas
  • gebruiksvriendelijke software

En de tekst is gelijk een stuk korter: 44% minder woorden!

13.3 Paragraaf

Als je werkt met tussenkoppen, creëer je paragrafen.

Eerst even een toelichting op de termen paragraaf en alinea:

  • Een paragraaf bestaat uit 1 of meer alinea's. De Engelse term hiervoor is section.
  • Een alinea bestaat uit 1 of meer zinnen. De Engelse term hiervoor is paragraph.

De 1e alinea in een paragraaf begint vaak met een zin die krachtig de kernboodschap van de paragraaf vertelt. Dit is de zogenaamde topische zin (topic = onderwerp). We kunnen het nog iets scherper definiëren: de 1e zin probeert antwoord te geven op de vraag die de bezoeker heeft als hij deze paragraaf gaat lezen.

De ideale lengte van een paragraaf bestaat niet, bij voorkeur heeft hij wel meer alinea's. Een pagina met een tussenkop voor elke alinea leest onrustig, zoals in het voorbeeld hieronder.

Teveel tussenkoppen

13.4 Alinea

Een alinea gaat over 1 mini-onderwerp. Een alinea van meerdere zinnen begint met de belangrijkste boodschap in de 1e zin (topische zin). De lengte is maximaal 50 à 60 woorden.

Een alinea is zichtbaar als zelfstandig structuurelement, bijvoorbeeld door witruimte boven en onder de alinea. Let op dat je deze witruimte met css maakt, en niet door het toevoegen van lege alinea's of lege regels.

Meestal bevatten alinea's meer zinnen, maar dat hoeft niet. Bij de BBC hebben ze vaak 1 zin per alinea:

Clinton cancels California trip after pneumonia diagnosis

US Democratic presidential candidate Hillary Clinton has cancelled a campaign trip to California after being diagnosed with pneumonia.

Mrs Clinton was taken ill on Sunday at a 9/11 memorial ceremony and was seen stumbling as she left the event early.

The candidate's team initially said she was "overheated", later revealing she had been diagnosed on Friday with pneumonia.

Her doctor said she was now re-hydrated and "recovering nicely".

Mrs Clinton was due to leave for California on Monday morning for a two-day trip that included fundraisers, a speech on the economy, and an appearance on the Ellen DeGeneres Show.

BBC.com (pagina is niet meer beschikbaar)

13.5 Lineaire content

Mensen lezen niet alleen een tekst op een website, maar laten deze tegenwoordig ook oplezen. Blinde mensen krijgen de tekst als spraak of als braille-uitvoer. Zoekmachines zijn ook 'blind', zij indexeren de teksten.

Dit alles betekent dat het belangrijk is dat de informatie lineair is. Lineair betekent dat de informatie logisch achter elkaar staat. Omdat het een wat abstract begrip is gelijk maar even een voorbeeld. Hieronder zie je dat er in de tekst via een asterisk wordt verwezen naar een toelichting, die eronder staat.

Kosten

De kosten voor de aanvraag van een gehandicaptenparkeerkaart zijn € 110,00 inclusief een medische keuring*. U betaalt deze kosten bij de aanvraag. Liefst met pin, maar contant mag ook.

* Een medische keuring is nodig als u een eerste aanvraag doet. Terugbetaling van deze kosten is niet mogelijk. Ook niet als wij uw aanvraag afwijzen.

De lezer moet dus vanaf het sterretje eerst naar beneden voor de toelichting, om vervolgens weer naar boven te gaan om verder te lezen. Stel je voor hoe dat is als de tekst wordt opgelezen. Dat werkt niet. Ook niet voor zoekmachines. Verwijzen via een asterisk kan dus niet op een webpagina.

Maar er zijn ook problemen als je een tekst of knop rechts van de tekst zet, zie het voorbeeld hieronder.

Knop rechts van de content

Op een desktop staat de knop mooi rechts naast de content, maar op een tablet kan deze deze knop helemaal naar onderen verschuiven.

Ook in pdf-bestanden is informatie vaak niet lineair, bijvoorbeeld bij het gebruik van voetnoten. Met als gevolg: de content is niet toegankelijk voor mensen met een screenreader en zoekmachines kunnen de content niet goed indexeren.

Gebruik van voetnoten in een pdf. Tekst is daardoor niet lineair.
top

Feedback

Contact

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