Opmaak van tekst voor web

Op dit moment ben ik bezig met een re-design van deze blog en ben op verschillende onderwerpen aan het oriënteren wat er beter kan. Eén daarvan is de opmaak van tekst. Het zijn geen zaligmakende richtlijnen, maar een samenvatting van een selectie -voor mij- nuttige artikelen. Het is een document dat in-progress is en vul daarom vooral aan wanneer je iets mist of het anders ziet.

Onderwerpen:

  • Fonts: ‘Serif vs Sans Serif
  • Fonts: Uitlijnen vs uitvullen,
  • Ordenen en groeperen

Fonts: ‘Serif vs Sans Serif’

tdbnl_sansvsserif.png

Een discussie die bij ons nog wel eens opwaait is die van fontkeuze een ook “Serif vs Sans Serif” die we recentelijk in het voordeel van de Sans Serif hebben afgesloten (Bron: kurafire.net). Diverse online studies hebben de leesbaarheid onderzocht en kwamen tot een algemene conclussie. Teksten in Serif fonts minder snel gelezen door proefpersonen dan teksten in Sans Serif . Er zijn wel een aantal significante kanttekeningen tav gebruik van Serif of Sans Serif fonts.

Serif pro

  • Nuttig voor mensen met een lees-handicap. i, l en 1 lijken nl bij Sans Serif fonts te veel op elkaar,
  • Serif fonts zijn oorspronkelijk ontworpen vóór leesbaarheid! De schreven (voetjes) helpen de lezer naar de volgende letter te glijden, makkelijk voor de lezer om oog te fixeren waar het lees (niet dwalen). Mn geschikt voor grote stukken tekst (maw. offline),
  • Hebben een zeker ‘appeal’ (subjectief).

Serif con

  • Kleiner dan 12px moeilijk leesbaar voor meeste mensen (clutter),
  • Kan door sommige OS’en soms slecht getoond worden (anti-aliassing) en daardoor ‘nog’ slechter leesbaar zijn.

Sans Serif pro

  • Leesbaarheid bij kleinere fontgrootte’s,
  • In tegenstelling tot offline lezen, leest de Sans Serif online sneller, dit is aangewezen in diverse studies,
  • Er bestaat een zekere -visuele- voorkeur onder gebruikers voor een Sans Serif font (online), ondanks een grote groep Arial/Verdana haters.

Sans Serif pro

  • Dyslectische mensen lezen dit minder goed (kleine groep,
  • Ongoing discussie over ‘Serif vs Sans Serif‘ in de tijdgeest,
  • Grote groep die visueel iets tegen Arial/Verdana hebben (wederom tijdgeest, Arial/Verdana komen oubollig over).

Misschien Serif voor headings en Sans Serif voor bodycopy!? Bronnen: kurafire.net, Usability.about.com, grc.nasa.gov, Anatomy of Web Fonts, psychology.wichita.edu. Eigenwijs? Mijn keuze is toch op een Serif gevallen. Met veel witruimte, interline en een groter corps, durf ik te gaan voor stylish én leesbaarheid.

Fonts: uitlijnen

tdbnl_uitlijnen.png

Uitlijnen. Ik heb er eigenlijk weinig over te zeggen, behalve dat ik uitvullen in 90% van alle gevallen géén oplossing vindt. Voor drukwerk, wanneer je de tussenruimtes van tekst goed kunt reguleren, vind ik het eigenlijk al een slechte oplossing. De leesbaarheid is slecht (Lees ook op Usabilityweb) en optisch is het slechts in een heel enkel geval mooi. Laat dus staan voor web, waar je tussenruimtes nagenoeg niet kunt beheersen. Het zal wel de enige erfenis zijn die ik van mijn aller eerste stage heb over gehouden. Uitlijnen altijd links, de eerste regel altijd korter houden dan de volgende en geen ‘hoerenjong‘ achterlaten. Verder schrijft Gene Liebel een artikel op usability.about.com:

  • Tekst links uitlijnen wordt sneller gelezen dan uitgevulde teksten,
  • Snelle lezers waarderen een opmaak van 2 kolommen, uitgevulde tekst,
  • Langzame lezers waarderen een enkel koloms opmaak, links uitgelijnd.

En…

  • Langere zinnen zorgen over het algemeen voor vlotter leesgedrag,
  • Kortere zinnen zorgen juist voor beter begrip van de tekst,
  • Optimale lengte van een regel is tussen de 45 en 65 karakters,

Hmm…wat te doen: fixed of fluid opmaak? Tenslotte zegt Gene:

  • Klikken naar een andere pagina, ipv scrollen, zorgt voor een beter begrip van de context.

Over ‘scrollen vs paging’ ben ik nog niet uit. In sommige usability testen verbaast het me hoe mensen door pagina’s heen vliegen met een scrollwieltje op de muis. Het kan door de ervaring van de gebruikers komen, dat ze steeds meer geconfronteerd worden met scrollen ipv paging. Echter, op té veel sites vind je een custom browser die niet werkt met dat scrollwieltje. En dan houdt de lol al snel op. Dus ben ik nog op zoek naar studies die hier dieper op ingaan. Hoeveel content moet je maximaal op een pagina toestaan. Of maakt groeperen en ordenen hierin voldoende verschil om dat min of meer los te kunnen laten? RIA’s zijn wel leuk en aardig, maar er zijn verschillende type bezoekers. Zij die willen klikken/ervaren en kopen en zij die eerst willen lezen.

Groeperen en Ordenen

Website scanning

Iets wat ik wél als zaligmakend houd, zijn de richtlijnen van Nielsen (4) tav. schrijven voor web. “A wall of text is deadly for an interactive experience�?. Hele lappen tekst zijn intimiderend, saai en vermoeiend om te lezen. Maar zelfs tekst opdelen in kleine stukken is niet voldoende. Bezoekers scannen de pagina, dus maak gebruik van:

    • tussenkopjes
    • opsommingen
    • benadruk keywords
    • korte paragrafen
    • ‘the inverted pyramid’
    (conclussie, toelichting, onderbouwing)
    • losse schrijfstijl
    • geen zware woorden en beperkte terminologie

Het is vooral ‘the inverted pyramid’ (conclussie, toelichting, onderbouwing) die mijn interesse heeft gevonden. Het verbaast me hoe prettig pagina’s zijn die zowel scanbaar zijn opgemaakt als volgend die formule zijn opgebouwd (Check Useit.com, de lengte van de zinnen wringt hier imho, maar wie ben ik om daar wat van te vinden). Behalve groeperen en ordenen, maakt copywriting ook een groot verschil en voor meer daarover verwijs ik je graag naar Copyblogger. Andere goede artikelen waren Worden uw webteksten wel gelezen? en Typografie en leesbaarheid beide op Usabilityweb.nl en daar een link gevonden naar Typografie en vormgeving op het net.

Wordt vervolgt…

1 thought on “Opmaak van tekst voor web”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.