Leesbaarheid. Een onderdeel dat bij het bouwen van een website of -shop vaak wordt onderschat. In deze blog delen we 5 tips voor een beter leesbare website of -shop.

Want hoe belangrijk is dat nou? Als het er maar mooi uitziet, toch? Wrong! De leesbaarheid is juist één van de belangrijkste aspecten. Het kan namelijk het verschil betekenen tussen het wel of niet lezen van een blogartikel, wel of geen conversie. In deze blog delen we vijf tips voor een beter leesbare pagina. Waar moet je op letten?

Een beeldscherm is geen boek

Voordat ik een aantal praktische tips met je deel is er één overkoepelend thema dat aandacht vereist. Een beeldscherm is namelijk geen boek, en leest dus ook anders dan een boek. Lang werd hier bij de opmaak van een webpagina niet bewust bij stilgestaan. En dat zou dus wel moeten! De afstand tot het beeldscherm is namelijk anders dan bij een boek. Ook heb je bij beeldschermen te maken met variabele helderheid en contrast. Verder moet er rekening gehouden worden met de breedte van de regels en het aantal karakters dat deze regels tellen. Op deze vragen geef ik je vandaag antwoord!

Via het internet zijn er duizenden gratis lettertypes, zogenaamde webfonts, te downloaden, de een nog spannender dan de ander. Maar hoe leesbaar is dat spannende lettertype? Leesbaarheid en rust moet altijd voorop staan. Er zit niemand te wachten op 5 verschillende soorten lettertypes op één pagina die niet fijn te lezen zijn.

Er zijn een aantal factoren waar je op moet letten bij de keuze van een lettertype. Zo is het raadzaam om het aantal diverse lettertypen waar mogelijk tot 1 te beperken. Indien mogelijk is het slim om voor lopende tekst een zogenaamd machine lettertype te gebruiken. Een machine lettertype is een lettertype dat op bijvoorbeeld elke Windows machine staat. Denk bijvoorbeeld aan Verdana of Arial. Deze lettertypes worden al jaren gebruikt zijn erg herkenbaar en beter qua performance; de lettertypes hoeven niet via een server te worden gedownload en staan al op de machine (bijvoorbeeld een laptop).

1. Lijkende letters

Toch eigenwijs, en liever een “leuk” lettertype? Let dan bijvoorbeeld ook op het verschil in vorm tussen de letter l en letter i. Vaak lijken deze letters (te) veel op elkaar, waardoor een tekst net wat minder makkelijk wegleest. Ook is het oog in gesloten letters van belang. Bijvoorbeeld bij de “o”, “d” en “p”. Controleer altijd of deze letters niet “dichtlopen”. Met name als ze in de bold-variant worden weergegeven.

2. Groter is niet altijd beter

Buiten het feit dat je aandacht moet besteden aan welke letters je gebruikt, moet je natuurlijk ook aandacht hebben voor de manier waaróp die letters op een scherm staan. Dit is namelijk minstens zo belangrijk.

Bold

Vaak beginnen blogs en artikelen met een dikgedrukte (bold) alinea om de introductie aan te duiden. Dit is alleen een stuk lastiger te lezen dan “normale” tekst. Hierop focussen is moeilijker en bovendien zijn dikgedrukte/bold woorden bedoeld voor accenten: woorden die meer van belang zijn.

Nog een voordeel: een aantal belangrijke (zoek)woorden bold maken heeft ook een positief effect op de indexeerbaarheid van je website. Je maakt hiermee duidelijk onderscheid in gewicht en hiërarchie, in tegenstelling tot een hele alinea bold maken. Think before you ink, dus!

All caps

Ook is het af te raden om alles in kapitalen te typen, oftewel Caps Lock to the max. Dit komt niet alleen agressief over, maar zorgt er ook voor dat je zin minder snel wordt gelezen. Tot wel 25% trager! En aangezien we het allemaal ontzettend druk hebben tegenwoordig neemt niemand daar de tijd voor. Gevolg: je verliest een hoop bezoekers!

Alinea grootte

Er zit niemand te wachten op enorme lappen tekst. Helemaal niet op ‘het vluchtige web’. Dat nodigt niet uit. Houd dus rekening met hoe lang je alinea’s zijn en probeer lange stukken te doorbreken met bijvoorbeeld een quote of een afbeelding. Wanneer je op desktop kijkt is de ideale lengte van een alinea 5 regels. Op mobiel daarentegen heb je aan 2 tot 3 regels al meer dan genoeg, afhankelijk van hoe lang je zinnen zijn.

3. Contrast is key

Natuurlijk zou je je website het liefst zoveel mogelijk onderdompelen in de kleuren van je huisstijl. Zo ook de tekst. Maar niet alle kleurcombinaties zijn hiervoor geschikt. Ook hier geldt weer: leesbaarheid boven alles. Er moet genoeg contrast zijn om de ene kleur van de andere te kunnen onderscheiden. Klinkt makkelijk, maar blijkt in de praktijk toch moeilijker dan gedacht.

Denk bijvoorbeeld eens aan je mobiele telefoon. De kans is groot dat je die zo hebt ingesteld dat de lichtsterkte van je scherm zich automatisch aanpast aan de lichtomstandigheden. Misschien heb je zelfs een avond stand die een oranje gloed geeft aan scherm. Ook dan moet de tekst op een website nog goed leesbaar zijn. Houd hier dus rekening mee. Wil je er zeker van zijn dat het contrast bijna altijd goed is? Kies dan voor zwarte tekst op een witte achtergrond. Verder zijn er diverse online tools om het contrast van twee kleuren te controleren. Hierbij krijg je direct uitsluitsel of het contrast optimaal is.

Een voorbeeld: Color Contrast Checker van WebAIM

Formaat en stijl

Maar niet alleen kleuren moeten het juiste contrast hebben. Ook het formaat en de stijl moet van elkaar verschillen. Het moet bijvoorbeeld duidelijk zijn wat een kop is en wat de lopende tekst is. Dit kun je bijvoorbeeld aanduiden door:

• Koppen een andere kleur te geven
• Koppen groter te maken dan lopende tekst
• Extra witruimte in te voegen boven de kop
• Een ander lettertype voor koppen te gebruiken. Dit wordt ook wel ‘font pairing’ genoemd. Gebruik bij twijfel altijd hetzelfde lettertype voor zowel koppen als de lopende tekst.

4. Keep it contained

Zoals hierboven al is geschreven lezen we op een beeldscherm anders dan in een boek. Niet alleen is een boek minder breed dan het scherm van de gemiddelde desktop, we houden het ook op een andere afstand. Volgens het Baymard Institute is er een optimale regelbreedte:

Desktop: 60 karakters inclusief spaties

Mobiel: 40 karakters inclusief spaties

Maar waarom? Nou, hierom: wanneer een regel te lang is zullen je ogen problemen hebben met focussen op de tekst. Het wordt je namelijk moeilijk gemaakt om te zien waar een regel begint en eindigt. Daarnaast wordt het lastiger om de juiste regel te pakken te krijgen, en te houden!

Is je regel te kort? Dan moet het oog te vaak op en neer bewegen, waardoor je lezer niet in de juiste flow terecht komt. Dit kan zorgen voor stress. De kans is dat dat ze eerder naar de volgende regel skippen, zonder de vorige af te maken.

Een voorbeeld van een website die deze regelbreedte geoptimaliseerd hebben is NOS.nl. Deze site bestaat voor het overgrote deel uit tekst. Dan is het natuurlijk wel handig als deze tekst te lezen is!

5. Converteren kun je leren

Wat voor website of webshop je ook hebt, het uiteindelijke doel is altijd het genereren van conversies. Door de leesbaarheid van je website steeds opnieuw te testen, met verschillende lettertypes, kleuren en regelbreedtes verhoog je de kans op een conversie. De website is hierdoor beter leesbaar. Gevolg: bezoekers blijven beter gefocust, lezen prettiger en blijven langer op je website.

Je kunt dit professioneel en grondig doen, waarbij je een UX lab inricht om de leesbaarheid te testen. Hier kunnen ze bijvoorbeeld met speciale brillen precies meten hoe een tekst gelezen wordt. Wij kunnen hierbij helpen. Ook zijn er goedkopere opties als het laten uitvoeren van een quick scan. Hierbij brengen onze UX professionals binnen BZTRS helder in kaart wat er verbeterd kan worden in het kader van leesbaarheid. Neem contact op voor een vrijblijvende afspraak met een UX professional.

De conclusie van dit verhaal is dan ook als volgt: redeneer altijd als eerst vanuit leesbaarheid, dan pas vanuit design. Want hoe mooi je website ook is, wanneer de leesbaarheid te wensen overlaat zal dat geen conversies betekenen en misschien zelfs irritaties opleveren. En die associatie wil je absoluut niet bij jouw product of dienst.