• 02
    jan

    Het belang van goede leesbaarheid

    Als bedrijf wil je het jouw (potentiële) klanten natuurlijk zo makkelijk mogelijk maken. Website gebruikers haken namelijk snel af wanneer ze op je website moeten zoeken naar relevante content. Als vormgever bij Freshheads is het niet alleen mijn taak om een project er mooi uit te laten zien, dat is slechts het halve werk. Het is zeker net zo belangrijk om ervoor te zorgen dat er een visuele hiërarchie ontstaat waarbij goede leesbaarheid centraal staat. In dit artikel laat ik een aantal simpele technieken zien waarmee je dit kunt bereiken.

    In de afbeelding hieronder zie je een lijst met artikelen waarvan de leesbaarheid niet optimaal is. De artikelen zijn samengeklonterd tot één grote brok tekst, er zijn geen specifieke focuspunten of attentiewaarde. Hierdoor is de lijst moeilijk te scannen door de gebruiker.

    Witruimte
    In onderstaand voorbeeld is de overzichtelijkheid verbeterd door meer witruimte toe te passen. Niet alleen tussen de artikelen zelf maar ook tussen de datum en de introtekst, hierdoor is het makkelijker om de titels te scannen. Als laatste is ook de regelhoogte groter gemaakt zodat de tekst minder massief oogt. Merk ook op dat de lijnen tussen de artikelen overbodig geworden zijn bij het gebruik van meer witruimte. De lijst met artikelen oogt nu al een stuk luchtiger, de artikelen zijn herkenbaar als afzonderlijke blokken.

    Proportie en kleurgebruik
    In het volgende voorbeeld zie je wat proportie en kleur kunnen betekenen voor de leesbaarheid van een pagina. De titels zijn een stuk groter gemaakt en in een ander lettertype geschreven. Doordat de datum in lichtgrijs geplaatst wordt onder de titel ontstaat er een visuele scheiding tussen de titel en de introductietekst. De titels zijn donkerblauw van kleur waardoor ze niet alleen meer opvallen maar ook de indruk geven dat er op geklikt kan worden. Deze combinatie van eigenschappen zorgt ervoor dat content makkelijker te scannen is.

    Focus
    Wanneer je bovenstaande eigenschappen van witruimte, proportie en kleurgebruik verder doortrekt kan je verschillende focuspunten en hiërarchie  creëren op de pagina. In de volgende afbeelding zie je hier een voorbeeld van. De afbeelding en tekst van het eerste artikel zijn fors groter gemaakt, hierdoor krijgt het artikel meer aandachtswaarde. Met deze techniek kan je de focus leggen op het meest recente of belangrijkste artikel. Daaronder volgen standaard artikelen en als laatste nog een aantal artikelen dat alleen bestaat uit een (kleinere) titel. De focuswaarde van deze lijst is dan van boven naar onder: belangrijk, minder belangrijk, minst belangrijk.

2 reacties

  1. Heerlijk duidelijk vertaald van tekst naar beeld. Leuk artikel om te lezen.

  2. Een prima artikel, erg interessant en duidelijk.