10. Structureren van de body met tussenkoppen en opsommingen

10.1 Betekenisvolle tussenkoppen

De richtlijnen

• Maak ze betekenisvol.
• Zorg dat ze een goede beschrijving geven van de inhoud van de paragraaf.
• Zet de belangrijkste woorden vooraan.
• Lengte maximaal 50 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:

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:

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.

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. John Mueller van Google zegt daarover:

These heading tags in HTML help us to understand the structure of the page.

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.

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

Voorbeeld 2: tussenkop ontbreekt

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

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

10.2 Opsommingen

Opsommingen maken het scannen van teksten makkelijker

Nielsen Norman Group heeft dit met verschillende onderzoeken aangetoond. Zij zeggen:

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

Met zogenoemde heatmaps maken ze zichtbaar waar mensen naar kijken. In de heatmap hieronder zie je hoe mensen stukken content overslaan en direct naar de opsommingen springen.

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.

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

Die wordt met een opsomming veel duidelijker:

Opsommingen maken de tekst begrijpelijker

Ons brein weet dat content in opsommingen beknopte, belangrijke informatie 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.

Ook voor Google is een tekst met opsommingen begrijpelijker.

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.

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:

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:

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:

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.

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

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

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

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

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.

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.