!"#$%&'
()$&*
+",#$*"#
*-(.%)/0$"!
!"#$%&'( )*+,-+./,0+1+,2$+1+., +.,3*/0$+&*.%+.4,5'..++&,6+, 2$+1,*7,$8,*.)$&8'/*+,$0+&,/+,9&+.%+.:, ;$+,-3.,6+,2'/,2'.,;+/,9+7/,2$+.<,=&,*7,9*6,8*6,++., *./+&+77+,$./7/''.,*.,2+,8'.*+&,>''&$#,8+.7+.,,.3, >+&-+1*6-,;+/,*./+&.+/,%+9&3*-+.,'17,*.)$&8'/*+9&$.:,*.,2+, 0$&8,0'.,/+-7/,$#,;+/,?$8#3/+&(7?;+&84,5''&,8$+/,6+,'17, *.)$&8'/*+'&?;*/+?/,$#,1+//+.,+.,>'/,2*+.,6+,/+,0+&8*62+.<, !"#$$"#%&'()$*+#,--*.&'#$*#/0#1$$2#&"30*4-%&$#,0*(%# 5&%6$,&77$2(8#2&'+%#9$%#.$2-"6*&'+#%$# .$6*&')$"#90$#4$"7$"#046--"# 4$%#%$+7%#0) &"%$*"$%7&%$7: "#$!%&'()!*+,-.!/,0 123(#4.5")4*6"47/8-49.%: 1#2!3,.45!-$!677.
!"#$%&#'
! ! "#$%!$ &'$%($)*$!"# +,(-(./ !"#$$%&'() *#+(,'-!"#$%&'#()*#%+,-../0'#,//.#1/2)3# (/4#%+(--"#,-0#4/"546#./44/0'#%+# .//51--7$/)'#/0#$)87-79$)/:#;<#$/4# 0--4#%(#//0#'%9&(/046#//0# %04=/7+#,-0#<%.'/7#%<#=/15)4/6 #)"#+7%1//7#-.4)*'#//0#,)5&/./# 1-.-05#4/#,/7"7)*3/0#,%%7#//0# %+4)(-./#3/17&)"/75>/7,-7)03:# ?--71)*#"%/54/7#)"#//0#.)/<'/##,%%7# ϐ ,-0#./44/75: ()01%2+.(1)!3$#(4)!().$%0+*$!Het begrijpen en ondersteunen van de web-lezer
Een scriptie over het strategisch inzetten van schermtypografie binnen webdesign om de
experience van schermlezen en informatieverwerking te ondersteunen.
Extra voorwoord
Een woord van dank gaat uit naar de mensen die me hebben gesteund bij het schrijven van mijn scriptie. Mark Meeuwenoord voor zijn geduld en inspirerende denkbeelden. Laura voor haar hulp, delen van
ervaringen en de verzorging tijdens mijn werkzaamheden.
Inhoudsopgave
0. Inleiding 5
1. Beschouwing op de ontwikkeling en toepassing van schermtypografie 6
Moderne typografie 6
Leesbaarheid en leesgemak 8
Usability van webtekst 9
Belang van usability vriendelijke typografie 11
Lezen van het beeldscherm 11
2. Het onderscheid tussen lezen van print en scherm bij informatieconsumptie 13
Papier vs pixel 13
Informatieconsumptie op het internet 13
3. Het scanbaar maken van informatie 16
Hiërarchie aanbrengen op het scherm 16
Indeling van informatie door middel van een grid 18
Hiërarchie binnen tekst 20
Scanbare tekst 21
4. Typografische keuzes ter bevordering van leesbaarheid 22
Witruimte en marges 23
Lettergrootte en lijnhoogte 24
Lijnlengte 26
Letterkeuze 27
Kleur en contrast 29
Conclusie 31
Bibliografie 33
* dit is een blanke pagina en duidt op het begin.
0. Inleiding
De manier waarop mensen in het dagelijks leven informatie consumeren kende in de afgelopen jaren een drastische verschuiving richting het medium internet. Eerder dit jaar melde het Centraal Bureau voor de Statistiek (CBS) dat Nederlanders steeds meer het media-‐aanbod op internet benutten.1 Hiermee is het gebruik van internet als informatiebron de laatste jaren
enorm toegenomen. Mensen spenderen meer tijd achter de computer dan voor de tv. Ook worden er minder fysieke kranten en tijdschriften gelezen. Door deze verandering zijn de televisie en print media niet langer meer de hoofdleverancier van informatie.
Een jaar geleden stopte Winkler Prins met het uitgeven van de gedrukte vorm van zijn encyclopedieën, omdat deze niet meer werden verkocht. Een ander voorbeeld waarbij print media vervangen wordt is het verminderde gebruik van de papieren kranten. Het aandeel Nederlandse internetgebruikers dat nieuws of kranten op internet leest of download, steeg tussen 2005 en 2008 met ruim een derde. De totale binnenlandse oplage van de dagbladen daalde tussen 2002 en 2008 met ongeveer 16 procent, van 4,3 miljoen tot 3,6 miljoen.1
Deze verschuivingen veranderen de manier waarop we lezen, leren en onderzoeken. Internet maakt het gemakkelijk om oude en nieuwe informatie te verspreiden en te consumeren. Print media zoals boeken en kranten worden in toenemende mate gedigitaliseerd en geremedieerd voor het gebruik via de digitale weg. Doordat we meer informatie van een beeldscherm lezen wordt de rol van schermtypografie, ofwel het vormgeven en indelen van tekst en letters, vanuit het oogpunt van usability almaar belangrijker.
Het probleem dat zich voordoet bij deze verschuiving is dat huidige schermtechnologie de prettige en intieme leeservaring van papier nog niet weet te evenaren. Lezen van een scherm vergaat ons namelijk langzamer en is vermoeiender dan het lezen van papier. Het doel van deze scriptie is niet om uit te zoeken hoe het ene medium het andere kan overtreffen, maar stelt de vraag hoe we door middel van schermtypografie de ervaring van schermlezen prettiger kunnen maken. Hierbij richten we ons op de presentatie van tekst op internetsites. Hoe kunnen bewuste keuzes in schermtypografie bijdragen aan de leeservaring en
informatieverwerking van schermtekst? Om antwoord te geven op deze vraag wordt eerst bekeken hoe typografie zich heeft ontwikkeld op het scherm en hoe de inhoud en opbouw van tekst zich verhoudt tot informatieverwerking. Daarnaast is het belangrijk om te onderzoeken hoe mensen lezen van een scherm en hoe ze omgaan met informatie op internet. Aan de hand daarvan wordt er een antwoord gegeven hoe websites ingedeeld kunnen worden om
gebruikers te begeleiden bij het lezen en begrijpen van de informatie. Daarna gaan we,
gebruikmakend van verricht onderzoek, kijken naar aanpassingen die we kunnen aanbrengen in typografie om het schermlezen comfortabeler te maken. Op deze manier leren we de moderne internetgebruiker begrijpen en kunnen we beter inspelen op zijn behoeften en wensen bij schermlezen.
1. Beschouwing op de ontwikkeling en toepassing
van schermtypografie
Moderne typografie
Rond 1930 formuleerde een belangrijke Engelse typograaf genaamd Stanley Morison, bekend van zijn veelgebruikte lettertype Times New Roman: “Typografie is de kunst van het ordenen van drukmateriaal in overeenstemming met een bepaald doel; van zodanig de letters rangschikken, de ruimte verdelen en het schrift beheersen, als nodig is om de lezer de tekst zo goed mogelijk te laten begrijpen”. 2
Vandaag de dag is deze omschrijving redelijk conservatief om meerdere redenen.
Voorheen was papier, in de vorm van boek of krant, de belangrijkste drager van typografie. Vandaag de dag deelt het die rol met mediadragers als beeldschermen, telefoons en e-‐ readers. Maar ook in de openbare ruimte zien we veel speciaal gebruik van typografie terug op winkelruiten, verkeersborden en reclame-‐uitingen. Die ontwikkeling is vooral op te dragen aan de uitvinding van de Graphical User Interface, die computers voor
persoonlijk gebruik dichterbij zou brengen.
Computers die deze techniek ondersteunden werden ontwikkeld bij Xerox PARC in de jaren zeventig. Het waren deze computers die de manier waarop tekst wordt weergegeven op een scherm voor altijd heeft veranderd. De pixels op het scherm, die apart
aanspreekbaar waren, konden tekst weergeven in nieuwe lettertypen, formaat en dikte. In 1984 was het uiteindelijk de Apple Macintosh die lettertypen naar het computerscherm bracht op een manier zoals we die vandaag de dag nog steeds gebruiken. 3 Hiermee was het fenomeen desktop publishing geboren. Het maakte het opmaken van pagina’s voor kranten of tijdschriften een stuk gemakkelijker en sneller. En daarbij had je ook het eerste beeldscherm dat een werkelijke weergave kon geven van hoe je werk eruit zou komen te zien. Snelle ontwikkelingen in software en hardware, en het snel dalen van de kosten maakte dat de populariteit van desktop publishing sterk steeg. Dit zorgde voor een golf aan nieuwe lettertypen en trends in schermtypografie. Het maakte nieuwe lettercombinaties en opmaakmethoden mogelijk, uitingen die voorheen zonder de computer bijna niet te maken waren. Maar door het computerscherm werd het ook duidelijk dat sommige lettertypen niet geschikt waren voor het beeldscherm. Tot op de dag van vandaag blijven ontwerpers zoeken naar en experimenteren met verschillende lettertypen bij het
ontwerpen voor print en web. Maar het kiezen van het juiste lettertype is nog geen typografie.
Het doel achter het inzetten van typografie kent ook meer toepassingen dan vroeger. Met typografie kan ook worden ook geëxperimenteerd en is als kunstvorm daarom ook erg interessant. In tegenstelling tot wat we tegenwoordig steeds vaker zien, waren de lettertypen van typograaf Stanley
Morison en zijn tijdgenoten volledig gericht op leesbaarheid en
herkenbaarheid. In huidige trends binnen typografie wordt er getracht een zo uniek mogelijk werk te maken voor artistieke doeleinden. Dit gaat dikwijls ten koste van de leesbaarheid. Maar dat hoeft bij een dergelijke uiting helemaal niet vervelend te zijn, het doel is hierbij heel anders. Bijvoorbeeld het creëren van letters met een uniek karakter of een opvallende opmaak, puur voor het krachtig uitdragen van de boodschap of het in het oog springen. De ontwerper
kan verschillende doelen voor ogen hebben. Nogal eens worden hierbij de grenzen van leesbaarheid en herkenbaarheid opgezocht.
Het gebruik van unieke lettertypen kent ook een commerciële kant binnen grafisch
ontwerp, zoals het toepassen van opvallende lettertypen in affiche’s, advertenties en ander commercieel drukwerk. Ontwerpers van reclamemateriaal maken gebruik van typografie om een thema of een stemming te verbeelden. Zo worden grote vette teksten, in
combinatie met gebruik van opvallende kleuren, vormen en beelden, vaak gebruikt om de aandacht te trekken. Typografie weerspiegelt ook vaak een merk in de vorm van een logo. Hierbij draagt het lettertype vaak een bepaalde emotie met zich mee. Zo kunnen klassieke lettertypen gebruikt worden om een sterke persoonlijkheid of authenticiteit uit te stralen, terwijl de meer moderne fonts gebruikt kunnen worden voor een schone, neutrale
uitstraling. Letters kunnen intrigeren en nieuwsgierig maken, schreeuwen en fluisteren. Ook kleuren dragen een bepaalde emotie en associaties met zich mee. Daarmee is
typografie zowel binnen de reclamewereld en als kunstvorm een waardevolle esthetische aangelegenheid.
Typografie, of het nu bedoeld is voor leesbare doeleinden of voor artistieke expressie, het is in veel gevallen een gevoelskwestie. Wanneer we het hebben over lezen van langere teksten, is typografie een vaardigheid die ervoor moet zorgen dat de tekst een duidelijke en een leesbaarheid bevorderende vorm krijgt. Hierbij staat de gebruiker of lezer centraal. Goede typografie kan hierbij zorgen voor rust en comfort bij het lezen..
Leesbaarheid en leesgemak
Wie denkt met alleen goede typografische keuzes klaar te zijn heeft het mis. Een
belangrijke factor die bijdraagt aan leesbare tekst is copywriting. Een logische lijn in het verhaal en passend woordgebruik kan helpen bij de informatieverwerking van de lezer. Zo zijn er boeken waarin je regelmatig een zin nog eens over moet lezen voordat je begrijpt wat er precies staat, terwijl je een ander boek in één keer uitleest. Op internet ervaar je websites soms als druk en moeilijk leesbaar, andere als heel overzichtelijk en begrijpelijk. De leesbaarheid van een tekst duidt datgene aan wat deze gemakkelijker te lezen maakt dan andere. Het Nederlandse woord ‘leesbaar’ wordt in het woordenboek gedefinieerd als “aangenaam om te lezen”, maar kan tevens uitgelegd worden als duidelijk en boeiend. In het Engels bestaat er een tweedeling van de Nederlandse term ‘leesbaar’. Als men spreekt van leesbaar in de betekenis van duidelijk, visueel leesbaar, dan heeft men het over ‘legibility’. Hierbij gaat het vooral om de letters die de tekst opmaken, bijvoorbeeld door verschillen in contrast of lettergrootte. Wanneer het gaat over leesbaarheid die ontstaat door de mate van begrijpelijkheid, door de inhoudelijke kwaliteit van een tekst, heeft men het over ‘readability’. 4 Hierbij gaat het bijvoorbeeld om woordgebruik en zinsopbouw, schrijven in jip-‐en-‐janneke-‐taal of het veelvuldig gebruiken van vakjargon. In het Nederlandse zouden we hier het woord ‘leesgemak’ kunnen hanteren, maar deze wordt niet officieel in de Nederlandse taal erkend. De leesbaarheid van een tekst kan gemeten worden aan de hand van het gemak en snelheid waarmee de tekst gelezen kan worden. Een tekst heeft een grote mate van leesbaarheid als hij snel begrijpelijk is en daarmee zorgt voor een tevreden lezer.
Vaak wordt er gesuggereerd dat wie in jip-‐en-‐janneke-‐taal schrijft, zorgt voor een heldere tekst. Maar recentelijk onderzoek van onlangs gepromoveerd Neerlandica Jentine Land aan de Universiteit Utrecht heeft aangetoond dat dit juist niet zo hoeft te zijn. 5 Zij onderzocht of vmbo-‐leerlingen versimpelde zinnen in de lesstof beter begrepen dan de gebruikelijke teksten. Het tegendeel bleek waar. Het lijkt dus aan de orde dat wie zijn lezend publiek een heldere tekst wilt voorleggen, beroep moet doen op eigen inlevend vermogen en goed moet begrijpen voor wie een tekst wordt geschreven om zodoende de schrijfstijl hier op aanpassen.
Het is begrijpelijke dat moeilijke woorden en langdradige zinnen de leesbaarheid kunnen bemoeilijken, het gaat om de schrijfstijl. Maar wat hier totaal gemist wordt is het belang van typografisch ontwerp en het bijdragende effect hiervan op de informatieoverdracht.
Usability van webtekst
We leven in een tijdperk waarbij de hoeveelheid informatie op de wereld elke 2 á 3 jaar verdubbelt. Het internet verdubbelt zelfs iedere 8 maanden in omvang. We worden overspoelt met data. De webdesigner neemt op internet als het ware de taak van de print-‐ typograaf over. Hij heeft de taak om informatie zo te verdelen en te organiseren dat de lezer een goede kans heeft om te vinden wat voor hem van belang is. Dat klinkt als een functieomschrijving van een informatie-‐ontwerper.
“Copywriting is interface design. Great interfaces are written.” 6 Typografie is in de praktijk niet de keuze van lettertype of ervan, het gaat over het
vormgeven van tekst voor een optimale gebruikerservaring. Daarom behandeld een goede ontwerper tekst als interface. Aangezien het leeuwendeel wat we op internet
voorgeschoteld krijgen bestaat uit tekst, is het wenselijke dat tekstuele informatie dezelfde aandacht krijgt als elke ander aspect van een website. Tekst draagt sterk bij aan de user experience op internet en verdient daarom als interface de aandacht vanuit een
usability oogpunt. 7
Daarbij is een goed geschreven, vragen voorkomende tekst belangrijk voor de
begrijpelijkheid van de op het scherm vertoonde informatie. Dat is een stukje copywriting. Hetzelfde is van belang bij het labelen van buttons. Wat er op een button staat moet
namelijk duidelijk maken aan de gebruiker wat hij gaat doen. En wanneer een gebruiker zich moet afvragen of hij/zij het wel goed doet, dan scheelt er dus iets aan de interface.
Bij het opmaken van een schermtekst moet je jezelf afvragen hoeveel zinnen je nodig hebt, hoe ver je de zinnen laat doorlopen, welke kleuren je gebruikt, regelafstand enzovoorts. Dergelijke keuzes in typografie kunnen ervoor zorgen dat het lezen vlot en duidelijk verloopt en daarmee de webexperience versoepelt. Je gebruikt tekst dan niet alleen als opvulling van je website maar als een functioneel onderdeel van de interface. In de
volgende voorbeelden laat Cameron Moll, een webdesigner en bekend spreker, het verschil zien tussen tekst als simpele inhoud tegenover tekst als user interface.
Tekst als inhoud: tekst van links naar rechts, geen uitlijning.
Tekst als user interface: verschillen in contrast en uitlijning verduidelijken de
verschillende lagen in informatie. De tekst in grijzen zijn zachter voor de ogen. Een link heeft een blauwe kleur gekregen en duidt daarmee een vorm van navigatie aan.
Belang van usability vriendelijke typografie
Usability van tekst is extra belangrijk op websites waarvan het overbrengen van
informatie de belangrijkste taak is, zoals blogs en nieuwssites. Hier krijgen mensen steeds nieuwe informatie toegereikt en wil je dat mensen terug blijven komen, dan moet zorgen voor een prettige gebruikerservaring in de vorm van een goede informatiestructuur, stijl en typografie. Slechte designkeuzes kunnen het jammerlijke gevolg hebben dat mensen een website als onprettig ervaren, hierbij afhaken en ergens anders op zoek gaan naar informatie.
Leesbaarheid van tekst is minder belangrijk op sites waar de kracht niet bij de informatie ligt maar ergens anders, bijvoorbeeld op social networks als hyves en twitter. Hier is de sociale ervaring belangrijker dan het vergaren dan informatie. Mensen zijn hier vaker met een persoonlijke reden en zullen daarom minder waarde hechten aan leesbaarheid. Ook op websites die gebaseerd zijn op foto-‐ of video-‐content is tekst minder van belang. Het is hier vooral belangrijk voor het navigeren op de website en mag zich meer aanpassen aan de door de ontwerper gekozen stijl.
Lezen van het beeldscherm
Van te lang kijken naar het scherp krijg je vierkante ogen? Dat is misschien wat overdreven maar het is zeker niet goed voor je. Lezen van lange stukken tekst op een scherm wordt vaak als vermoeiend ervaren. Wanneer we te lang naar het scherm staren raken onze oogspieren vermoeid omdat ze constant moeite moeten leveren om de ogen te focussen. Ook knipper je veel minder waardoor je ogen droog en geïrriteerd raken. Vaak krijg je dan een waas voor je ogen en moet je moeite doen om scherp te blijven zien. Je kunt dan last krijgen van hoofdpijn en je raakt sneller vermoeid.
Usability guru Jakob Nielsen concludeerde uit zijn vele usability-‐testen dat lezen van het scherm vijfentwintig procent langzamer gaat dan van papier. Zo tegen 1995, zou je dat nog kunnen toewijzen aan flikkerende beeldscherm en lage schermresoluties. Maar met de techniek van tegenwoordig wordt dat steeds meer verleden tijd en kun je hardware steeds minder de schuld geven van leesproblemen van het scherm. Hoge resolutie LCD-‐schermen hebben de lage beeldkwaliteit van CRT schermen vervangen.
Ook met render-‐technieken als Microsoft’s ClearType kunnen fonts scherper en met rondere randen gerenderd worden. Dergelijke technieken zijn gebaseerd op het principe van anti-aliasing of anti-‐kartelvorming. Met ClearType is de tekst op het scherm
gedetailleerder, waardoor het lezen van deze tekst gedurende langere perioden
gemakkelijker gaat en minder snel leidt tot vermoeide ogen en mentale moeheid. Deze nieuwe technologie werkt vooral goed op LCD-‐apparaten, zoals platte beeldschermen,
laptops en kleinere draagbare toestellen. Dit maakt lezen van het scherm vloeiender en tot 5 procent sneller.8
Zonder deze techniek zouden letter gekarteld overkomen of niet ineenvloeien tot gemakkelijk te herkennen patronen. Hierdoor zou de lezer zich meer op afzonderlijke letters richten en wordt daarmee afgeleid bij de poging te begrijpen wat de algehele betekenis is van de tekst.
Maar de voornaamste reden waarom het lezen van een schermtekst zo vermoeiend is, blijft nog steeds te wijten aan de resolutie. Meeste boeken worden geprint met een resolutie van 1200 dots per inch (dpi), terwijl webbrowsers standaard niet verder gaan dan 85 dpi.9
2. Het onderscheid tussen lezen van print en
scherm bij informatieconsumptie
Papier vs pixel
Je zou kunnen bedenken dat de dagen van papier geteld zijn met de komst van nieuwe media. Overal om ons heen zijn beeldschermen die dingen doen die papier niet kan: films en videoclips laten zien, muziek spelen, zichzelf updaten, communiceren met andere media.10 Het kan ons nieuws brengen zoals de krant dat kan, met dezelfde informatie. De informatie blijft hetzelfde en er gaat niet verloren, alleen de drager is anders.
Toch is de beleving van papier eentje die we graag ervaren ten opzichte van het scherm. Onder de title, “Ill Miss Having a Newspaper in My Hands,” beschrijft Providence Journal columnist Mark Patinkin een interessante waarneming: “In een tijd van continue afleiding houdt een krant je gefocust. Wanneer je online gaat begin je wellicht met een
nieuwsbericht, maar dan ga je chaotisch van e-‐mail naar je bestanden, naar de beurskoersen, naar Google, naar winkelen, en dan weer terug naar het nieuws. Maar wanneer je met een krantje zit ben je niet langer aan het afdwalen. Je bent gericht op de gebeurtenissen van de dag. Geen geluiden van binnenkomende e-‐mail. Het is een zeldzaam rustig moment van de dag.”11 Wat hij daarmee duidelijk maakt is dat de krant vrij is van de dynamiek die je treft op het computerscherm. Papier maakt het gemakkelijker om je te concentreren op enkel het lezen zelf en het verwerken van de informatie die het bevat. Papier heeft de kracht om de lezer in een gemoedstoestand van rust, betrokkenheid en concentratie te brengen, op een manier die gemakkelijk te hanteren en te manipuleren is. Om die reden zal de krant, in de vorm zoals wij hem kennen, waarschijnlijk nog lang niet vervangen worden door een versie of alternatief met schermtechnologie.
Informatieconsumptie op het internet
Het digitale medium brengt informatie op een hele andere manier dan papier, en we maken er gebruik van met een andere instelling in experience; “search-‐and-‐destroy” versus “tot rust komen”. Internet is een gebruiker-‐gedreven medium waar men de
behoefte voelt om te zoeken, te werken en te klikken. Mensen willen zich productief zijn of vermaakt worden. Ze willen zich actief voelen.
Mensen zijn ongeduldig en maken snelle beslissingen. Het web is een extreem dynamische omgeving, er is van alles te vinden en te krijgen. Je kunt je van het ene op het andere moment compleet ergens anders ‘bevinden‘, compleet verdwalen en overspoelt worden met informatie waar je niet op zit te wachten. Dat voelt vaak aan als verloren tijd. En
mensen hebben geen tijd. Het moderne leven is al hectische genoeg en we hebben simpel weg geen tijd of zin om veel moeite te moeten doen. Gelukkig zijn we heel goed geworden in het beoordelen van websites. We hebben vaak al binnen een twintigste van een seconde gezien of een website aantrekkelijk is of niet, en of we er willen blijven. Er zijn honderden miljoenen pagina’s die allemaal gelezen willen worden. Een voor de gebruiker vreemde website moet moeite doen om nieuwe bezoekers al binnen enkele seconden weten te boeien.
Zoekmachines zijn daarbij niet echt een helpende factor om eens rustig een website te onderzoeken. Ze geven de gebruiker duizenden alternatieven voor hetzelfde onderwerp en vaak zullen mensen daarom meerdere links bekijken, zoekend naar een website die het beste aansluit bij hun doel. Onderzoekers van de Palo Alto Research Center (voorheen Xeroc PARC) deden onderzoek naar hoe mensen werkelijk zoeken naar informatie op internet. Daarbij maakte ze een vergelijking met wilde dieren die op jacht zijn naar voedsel. Ze beschrijven dat mensen bij het zoeken naar informatie de “geur” van
informatie kunnen ruiken. Ze kunnen aanvoelen of de website de informatie bevat die ze nodig hebben, aan de hand van eerdere ervaringen en kennis van websites.
“How users read the web. They don’t” 12
Een bekende uitspraak van Jakob Nielsen die weinig uitleg behoeft als je nagaat hoe je zelf omgaat met informatie op internet. We zijn
geneigd om pagina’s niet te lezen maar te scannen. Onderzoek van Nielsen naar hoe mensen werkelijk websites lezen gaf als resultaat dat 79 procent van de
testgebruikers altijd eerst een nieuwe pagina scant. Enkel 16 procent las woord voor woord. Met gebruik van eye-‐tracking appatuur lieten ze 232 mensen duizenden pagina’s zien. Hierbij konden ze tijdens het onderzoek een terugkerend F-‐patroon, het patroon waarmee onze ogen over het scherm razen. Gebruikers lezen
horizontaal, meestal beginnend aan de bovenkant van de de tekst. Daarna gaan ze een stukje naar beneden en begint de tweede horizontale focus. Uiteindelijk blijkt dat de rest van de pagina in een verticale richting werd gescand.
Nielsen maakt hier een drietal conclusies uit op. Ten eerste dat gebruikers je tekst niet grondig zullen lezen op een woord-‐voor-‐woord manier. Mensen die alles lezen zijn zeldzaam.
Ten tweede dat de eerste twee alinea’s de belangrijkste informatie moet bevatten. Je kunt hopen dat ze alles lezen maar waarschijnlijk lezen ze alleen de bovenkant van het verhaal. Je zult dus vrijwel direct ter zake moeten komen.
Al laatste kunnen we uit dit onderzoek afleiden dat mensen lange stukken tekst proberen te vermijden, grote blokken tekst schrikt hen af. Je zult ze eerst moeten vertellen waar de tekst over zal gaan voordat ze erin duiken. Nielsen stelt dat kopjes, alinea’s en
opsommingen moet beginnen met informatie-‐dragende woorden, omdat mensen geneigd zijn om bij het scannen het derde woord op de regel veel minder vaak te lezen dan de eerste twee woorden. Tevens zal de koptitel van de tekst in de meeste gevallen bepalen of we geïnteresseerd zijn in wat eronder staat, of we het dus lezen of niet.
Het is interessant om te zien hoe mensen werkelijk hun aandacht verdelen op het scherm. Maar dit onderzoek kan onwaarschijnlijk het gebruik van alle websites omvatten. Bij dit onderzoek moeten we vooral uitgaan van websites die statische informatie bevat,
bijvoorbeeld over een bedrijf, instantie of persoonlijke websites. Wanneer we bijvoorbeeld kijken naar nieuwsites wordt het een anders verhaal. Gebruikers lezen hier meer woorden dan dat ze doen op andere sites, volgens Nielsen. Journalistieke waarde, objectiviteit en integriteit maken het dat mensen meer bereidt zijn om een grote percentage van een tekst te lezen.13 Dit onderstreept nog eens dat mensen op niet-‐nieuwssites minder bereid zijn om lange teksten te lezen.
3. Het scanbaar maken van informatie
Uit het vorige hoofdstuk konden we opmaken dat het lezen van een beeldscherm gepaard gaat met veel scannen. De gebruiker is actief, meedogenloos en ongeduldig. Een scanbare webpagina zal de gebruiker dan ook kunnen waarderen. Het maakt de
informatieoverdracht sneller en het gebruikersgemak wordt vergroot. In dit hoofdstuk gaan we kijken hoe het groeperen en indelen van pagina-‐elementen kan helpen bij het verwerken van informatie.
Hiërarchie aanbrengen op het scherm
Het uiterlijk vertoon van de informatie-‐indeling kan ons dus sturen in het vinden van informatie of nieuwe interesse wekken. Wanneer we op internet langs een onbekende webpagina komen, beginnen onze hersenen met het herkennen van overeenkomsten en verschillen tussen het getoonde materiaal. De relatieve posities van de elementen, kleur-‐, schaal en stijlverschillen van tekst zorgen voor de voornaamste aanwijzingen die ons duidelijk maken hoe een pagina in elkaar steekt. Deze manier van observeren maakt het voor onze hersenen mogelijk om de informatie in te delen in begrijpbare categorieën van relevantie.14
Luke Wroblewski, momenteel chief design architect bij Yahoo! en auteur van twee
populaire boeken over webdesign, definieert in zijn boek “Site-Seeing: A Visual Approach to
Web Usability” vier manieren waarop mensen visueel informatie indelen. Hiermee kunnen
we inzien hoe informatie kan worden geordend om gebruikers te helpen bij het begrijpen en verwerken van hetgeen ze waarnemen. Het draait hier om hiërarchie en verdeling. Mensen groeperen informatie door middel van de volgende visuele factoren: afstand, gelijkenis, continuïteit en sluiting.15
Afstand verteld ons dat we te maken hebben me een aparte groep in de
informatie wanneer de elementen verder uit elkaar zijn geplaatst. Wanneer elementen dichter bij elkaar worden beschouwd lijken ze te zijn verbonden of op zijn minst nauwer verbonden dan elementen die verder uit elkaar staan.
Wanneer we gelijkenis waarnemen krijgen we het idee dat ze eigenschappen delen. Gelijkenissen in tekstgrootte, lettertype, vorm, kleur of uitlijning brengen de elementen visueel bij elkaar.
Continuïteit leidt tot groeperen van informatie als we een patroon
opmerken in de verschillen tussen elementen. Bijvoorbeeld als een reeks vormen waarbij deze los van elkaar steeds kleiner of groter worden.
Sluiting treedt op wanneer we het idee hebben twee elementen bij
elkaar passen om een geheel te vormen. De gebruiker krijgt dan het idee dat ze bij elkaar horen.
Door het bewust omgaan met de positionering van de tekst-‐elementen kunnen je relaties suggereren, nadruk creëren en belang impliceren. Vaker zul je dit gebruiken om te zorgen dat de onderdelen juist niet bij elkaar horen, op het onderscheid te benadruken. Zo kan een gebruiker de navigatie onderscheiden aan de hand van de plaatsing en verschillen in lettergrootte en kleurverschillen. Artikelen of apart informatie wordt vooraf gegaan door een grotere, vettere titel. Apart gekleurde woorden zijn waarschijnlijk om op te klikken. Constateringen als deze zijn vrijwel direct gemaakt bij het zien van de pagina. Door hier consistent en simpel mee om te gaan, laat je de gebruiker aanvoelen hoe ze de site kunnen gebruiken en zal het de informatieoverdracht bevoordelen.
Indeling van informatie door middel van een grid
Designer maken keuze in typografie zoals letterkeuze, gewicht of verdeling in alinea’s. Het doel van dergelijke keuzen zijn manieren om informatie te organiseren en de
voorspelbaarheid van de lay-‐out op het scherm te vergroten. Een goed hulpmiddel om informatie in te delen is een techniek afkomstig van het ontwerpen voor print, namelijk het grid. Een grid is een systeem van horizontale en verticale lijnen die de ruimte bieden om informatie in te delen in kolommen. Het grid is een systematische basis voor het consistent plaatsen van objecten. Het zorgt voor een visueel ritme wat het voor de ogen gemakkelijker en prettiger maakt om objecten op een pagina te scannen. Bovendien kan een uitgebalanceerd en consistent uitgevoerd grid het vertrouwen bij de lezer vergroten. De basis van de kolommen die het grid opmaken, bestaan altijd uit gelijke verdelingen tussen de kolommen met vaak nog een tussenruimte ( de gutter). Het meest effectieve principe gebruikt bij het ontwerpen van een grid wordt ‘regel van derden of vierden’ genoemd. Het staat ook wel bekend als de gouden-‐raster regel. De toepassing van deze regel zorgt ervoor dat de kolommen onderling altijd weer in gelijke proporties verdeeld kunnen worden in veelvouden van drie of vier, waardoor de visuele balans beter behouden blijft.
Een grid is een hulpmiddel, niet het doel op zich. Daarom is het goed dat je als ontwerper sommige elementen juist niet precies volgens het grid plaats, als je daar een bepaald effect mee denk te creëren. Het grid is er in essentie voor om ritme in de informatie te brengen en een zorgen voor een gevoel van logica en begeleiding bij het opnemen van de
informatie.
Uitgebreide lay-‐out structuren bieden meer flexibiliteit en verbeteren de visuele ervaring van de bezoekers. In feit kunnen gebruikers gemakkelijker de informatie bolwerken, terwijl het voor de ontwerpers en ontwikkelaars gemakkelijker is om op een goed doordachte manier de lay-‐out te kunnen handhaven. Het is echter moeilijke om je weg te vinden door al de theorie achter deze raster systemen, het is niet gemakkelijk. 16 Gelukkig zijn webdesigners zich er steeds meer bewust geworden dat een grid als ruggengraat kan dienen voor een consistente weergave van informatie. Er zijn dan ook meerdere bronnen op internet beschikbaar waar je als webdesigner kant en klare grids kan downloaden, in de vorm van een CSS framework. Je kan dan vaak ook nog zelf kiezen hoe je jouw grid in elkaar wilt laten zetten.
Hiërarchie binnen tekst
Elementen die tekst opmaken zoals de titel, inleiding, tussenkoppen en alinea’s geven structuur geven aan de tekst en bepalen de waardeniveau’s in de informatie. Dit maakt de tekst meer geschikt voor scannen. Ook kan het aanbrengen van variatie in letterstijlen de lezer begeleiden bij het lezen van de informatie. Variërende lettergrootte is één van de meest duidelijke manier verschillen lagen in de inhoud aan te geven. Kleuren en kaders kunnen daar ook bij helpen maar verschillende formaten letters geven een sterker signaal aan de mate van relevantie. Wanneer consistent gebruikt kan de gebruiker sneller
relevante informatie eruit pikken. Dergelijke visuele hiërarchie zien we ook terug in boeken, op briefpapier en, in vaak in een meer bescheiden vorm, op televisie. Zo ook de krant gebruikt verschillende lettergrootte of het groeperen van tekst in kolommen om het lezen te begeleiden of aan te sporen. Hiermee krijgen we al nuttige informatie binnen voor dat we nog een woord hebben gelezen. Als we haastig lezen kunnen we snel oppikken waar de juiste informatie te vinden is.
HIËRARCHIE
HEEL BELANGRIJK
Iets minder belangrijk
Nog minder belangrijk
Dit hoor je eigelijk niet te lezen.
Dergelijk effect kan worden bereikt door het gebruik van verschillende stijlen zoals hoofdletters, cursief geplaatste letters voor ondertitels. Het door elkaar gebruiken van serif-‐ (schreef) en sans serif (schreefloos) letterlettertypen wordt in modern webdesign steeds vaker toegepast. Maar pas op dat je hier niet te ver in gaat. Overmatig gebruik van typografische variatie kan er juist voor zorgen dat de leesbaarheid sterk afneemt.
HIËRARCHIE HIËRARCHIE
Ik ben een Titel
Ik ben een ondertitel
en ik ben de body-text
IK BEN EEN TITEL
Ik ben een ondertitel
Scanbare tekst
Naast de variatie in letterstijl zijn er ook aanpassingen die inhoudelijk gedaan kunnen of zelfs moeten gebeuren om te zorgen voor scanbare tekst. De manier waaróp je informatie aanbiedt is van kan ook helpen. Geef je een lap tekst vol lange zinnen en laat je de gebruiker zelf zijn conclusies trekken of geef je de belangrijkste informatie in cijne hapklare brokken? Scanbare tekst heeft het doel ervoor te zorgen dat de gebruiker de voor hem relevantie informatie snel kan vinden. En als je niet kan vinden wat je zoekt, dan probeer je het ergens anders.
Het snel vinden van informatie kan in de hand gewerkt worden middels de volgende theorie van Nielsen. Gebaseerd op zijn onderzoeken stelt hij een aantal regels die inhoudelijk zorgen voor een scanbare tekst 17:
‣ Geef kenmerkende woorden, steekwoorden extra aandacht door middel van een afwijkende stijl. Zo word duidelijk wat belangrijk is om te lezen.
‣ Geef ondertitels een waardevolle betekenis ‣ Gebruik opsommingslijsten zoals deze
‣ Één onderwerp of idee per paragraaf (met betekenisvolle woorden vooraan). Dat zijn dus korte stukjes tekst met witruimte ertussen
‣ Schrijven met de conclusie bovenaan, gezien het feit dat mensen met scannen bovenaan de tekst blijven zweven en onderaan vluchtiger scannen
‣ Met de helft van het aantal woorden schrijven dan gewoonlijk.
Dat laatste is discutabel omdat het per pagina kan verschillen. Wanneer je de gebruiker wilt vertellen wat hij van de site of aanbieder kan verwachten, dan is kort en bondig taalgebruik zeer geschikt. Lange welkomstteksten zijn niet meer van deze tijd. Waneer iemand de intentie heeft om zich te verdiepen in de informatie, bijvoorbeeld het volgen van links in de tekst, dan lijkt volledige informatie wenselijk. Nu zullen mensen die alles willen weten over een onderwerp, bijvoorbeeld over een nieuwe school voor hun kroost, wel alles lezen. Vaak zul je je dus als designer goed moeten afvragen wat mensen op de website komen doen en wat ze werkelijk willen weten.
4. Typografische keuzes ter bevordering van
leesbaarheid
Dicht bij de kern van het hele verhaal rond schermtypogracie ligt de fysieke ervaring van het lezen van het scherm. In dit hoofdstuk gaan we kijken hoe we de ervaring van schermlezen prettiger kunnen maken door aanpassingen aan de eigenschappen van de letters zelf. Het lezen van lange teksten van het scherm kan namelijk buiten de intenties van de lezer,
leesvaardigheden of leesomstandigheden, ook beïnvloed worden door de fysieke kenmerken van de tekst. Ideeën hierovver en toepassingen zouden afgeleid kunnen worden aan de manier waarop we tekst weergeven en lezen op print. In dit hoofdstuk proberen we de leesbeleving op het scherm op macro-‐niveau bevorderen door aanpassingen te doen op micro-‐niveau. Zo kunnen we trachten op de leesbeleving op het scherm dichtbij die van papier te brengen.
Hierbij moeten we vooral denken aan hoe de volgende variabelen samen invloed uitoefenen op leesbaarheid en informatieverwerking:
‣ Witruimte en marges ‣ Lettergrootte en lijnhoogte
‣ Lijnlengte
‣ Letterkeuze;
‣ kleur en kleurcontrast
Om hier de passende antwoorden op te vinden wordt er gekeken voor naar specicieke, vaak empirische onderzoeken, die aan de hand van testen hebben ondervonden hoe verschillende kenmerken van typogracie effect kunnen uitdragen op schermlezen.
Witruimte en marges
De eerste is wellicht het belangrijkste en meest invloedrijke wapen in de strijd voor scherm-‐ usability. Witruimte is alle negatieve of lege ruimte tussen de objecten. Het is de ruimte tussen teksten, lijnhoogte, acbeeldingen, paragrafen, kopjes, links, etcetera. Witruimte is bedoeld om meer rust te creëren voor de lezer. Het schept een balans tussen de objecten op een website en tussen de regels van een tekst. Wanneer je deze voorziet van extra ruimte laat de website of tekst als het ware ‘ademen’. Dit zorgt ervoor dat het scannen van de pagina stukken gemakkelijker wordt. Het kan voor de gebruiker ook aanvoelen als een frisse adem in de schreeuwende drukte van het internet. Witruimte in de vorm van marges of alinea’s kan toegepast worden bij losse stukken tekst, maar ook waneer acbeeldingen tussen de tekst gezet worden.
Witruimte is zeker van invloed op de leesbaarheid van korte maar vooral lange schermteksten.
Een onderzoek hiernaar is in 2004 verricht door The Software Usability Research Laboratory van de Wichita State University in de Verenigde Staten. Gericht op het online lezen van tekst op internet, onderzochten zij wat het effect is van witruimte op de
leesprestaties van de schermlezer. Hierbij manipuleerde de onderzoekers een webtekst door het wel of niet toevoegen van marge en verschillen in de lijnhoogte. Bij deze studie werd uitgegaan van een webtekst van een marge van tien milimeter en wel of geen witruimte van vijf milimeter tussen de regels. Hiermee werden verschillende combinaties gevormd.
Het onderzoek probeert erachter te komen of het gebruik van witruimte een duidelijk effect Acbeelding 4.1
heeft op leessnelheid en leesbegrip van de schermtekst. De resultaten laten zien dan waneer de lijnhoogte minimaal is, de leessnelheid op zijn hoogst is maar het leesbegrip heeft hierbij een lage uitkomst. Door de minimale lijnhoogte kan het zijn dat de gebruikers haastiger gaan lezen vaker een woord overslaan. Wanneer er wel witruimte werd gebruik daalde de
leessnelheid maar steeg het leesbegrip. Het gebruik van marge geeft kleine verschillen aan op het gebied van leesbegrip maar het gaf de gebruikers meer waardering voor de tekst. De testpersonen gaven namelijk aan dat zij bij het lezen van de tekst zónder marges last kregen van hun ogen en een hierdoor langer deden over het lezen van de tekst.
Concluderend kan uit dit onderzoek worden ontleent dat het gebruik van witruimte in marge en een optimale lijnhoogte het beste werkt voor schermlezers. Interessant is ook dat bij het lezen van een tekst zonder marge en maar met een optimale lijnhoogte, letters groter overkwamen, waardoor de tekst makkelijker te lezen werd bevonden.
Lettergrootte en lijnhoogte
Het effect van lijnhoogte (engels: leading) in combinatie met lettergroote heeft groot effect op de leesbaarheid van de tekst. Het wordt ook wel interlinie genoemd. Toch heeft het nog weinig echt recent onderzoek genoten. Het is een waardevolle eigenschap van een tekst die zowel bij schermtekst als op print-‐tekst de leesbaarheid beïnvloed. De ruimte tussen de lijnen (witruimte) maakt veel verschil voor de leesbaarheid en scanbaarheid van een webpagina. Als lijnen te dicht op elkaar staan, wordt het lastig om een pagina te scannen. Je moet dan tijdens het lezen meer aandacht besteden aan het onderscheiden van een nieuwe regel. Als de lijnhoogte te groot wordt zal het aandoen alsof regels los van elkaar zweven en lijken regels los van elkaar te staan.
Verder beschikbaar onderzoek naar het effect van lijnhoogte gebruikt bij schermtekst werd verricht door typogracie-‐studenten van de University of Buenos Aires, Argentinië in
samenwerking met Wichita State University in de Verenigde Staten en de Duitse academisch hoogleraar Prof. Martin Krampen. Zij lieten hun 124 studenten verschillende
krantenartikelen van het internet lezen met lengtes tussen de 500 en 600 woorden. De Acbeelding 4.2
leessnelheid werd gemeten en ook werden de mate van comfort en begrijpelijkheid geregistreerd. De lijnhoogten werden hier vastgezet in pixels (px).
LIJNHOOGTE
size 10 / leading 10
De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en
letter-size 10 / leading 15
De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en
letter-size 12 / leading 18
De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en lettergrootte van deze regels zijn gelijk aan het onderzoek. De lijnhoogte en lettergrootte van deze regels zijn gelijk
Wat hier het interessantste waarnaar in deze graciek gekeken moet worden zijn de
resultaten waarbij de mate van informatieoverdracht het meest succesvol en de waardering het hoogst is. Uit dit onderzoek kwamen de volgende resultaten naar voren:
Hier kunnen we zien dat regels bij een lettergrootte van 12px en een lijnhoogte van 18px het hoogst scoort. Ook de waardering bleek in mate van comfort en leesbaarheid bij deze
getallen het hoogst.18
Deze zijn uitkomst, waarbij de hogere variabelen scoren, zal webdesigners van deze tijd aanstaan. De huidige trends in webdesign maken veelvuldig gebruik van duidelijke
regelafstanden. Het leest niet alleen lekker maar ziet er ook nog eens sprekend uit, volgens veel (vaak jonge) webdesigners. Dit onderzoek laat zien dat ook de lezers er een hogere mate van leescomfort bij ervaren.
Lijnlengte
De lijnlengte (engels: line length) wordt gemeten aan de hand van de fysieke lengte van de lijn of op basis van het aantal karakters waaruit één regel staat bestaat. Dit kan van invloed zijn op de leessnelheid en het leesbegrip. Recentelijk is hier speciciek onderzoek naar verricht door de Software Usability Research Laboratory van de Wichita State University in de Verenigde Staten. Ze vergeleken hier vier lijnlengtes; 35, 55, 75, en 95 karakters per lijn (kpl).
LIJNLENGTE
Op deze regel staan nu 35 karakters Op deze regel staan nu 35 karakters Op deze regel staan nu 35 karakters
Deze hele zin heeft een lengte 75 karakters. Deze hele zin heeft een lengte 95 karakters. Deze hele zin heeft een lengte 75 karakters. Deze hele zin heeft een lengte 95 karakters. Deze hele zin heeft een lengte 75 karakters. Deze hele zin heeft een lengte 95 karakters. Deze hele zin
In de studie wordt de tekst op de regels niet uitgelijnd dus de lijnlengte met de verschillende getallen zijn gemiddeld genomen. Bij een kleiner lettertype resulteert het behouden van de fysieke lengte van de lijn in meer karakters op de regel.
Uit dit onderzoek onder universiteitsstudenten bleek dat artikelen met 95 karakters per lijn het snelst gelezen konden worden.19 De waarden in woorden per minuut vertoonden kleine verschillen. Er werd in dit onderzoek ook onderzocht of lijnlengte invloed had op efciciëntie en begrip van de teksten, maar hier werden geen opvallende verschillen in ontdekt.
Leessnelheden werden het snelst bevonden bij 95 kpl. Sommige deelnemers verklaarden het gevoel te hebben dat ze sneller lazen bij een lijnlengte van 35 cpl, maar deze gaf nu juist de laagste waardes aan. Dit is waarschijnlijk te wijten aan het feit dat je sneller een zin afmaakt dan dat je gewend bent. Wat we uit dit onderzoek kunnen gebruiken in webdesign is dat je er vooral voor moet zorgen dat webteksten een maximale lengte krijgen. Of het nu gaat om 50, 80 of 100 kpl maakt weinig uit. Zolang de teksten niet oneindig over het scherm lopen. Dit kun je voorkomen door de teksten in al dan niet zichtbare of onzichtbare kolommen (div’s) te plaatsen.
Letterkeuze
In het voorgaande onderzoek naar lettergrootte en lijnhoogte werd ook onderzoek gedaan naar het effect van verschillende lettertypen. Hierbij is onderzocht welke van de meest gebruikte lettertypen op internet, het geschikt werden bevonden voor een hogere
leessnelheid, begrip van de informatie en leescomfort van de gebruiker. Het gaat hier om een aantal browser-‐veilige lettertypen, wat wil zeggen dat elke computer en elke browser deze letters ondersteund en dus met zekerheid kan tonen. Er zijn technieken die ervoor kunnen zorgen dat er ook aparte lettertypen veilig getoond kunnen worden maar deze worden vaak enkel gebruikt voor kopjes. Dit met de reden dat het langer duurt om te laden en wanneer er grote stukken tekst geladen moeten worden is het gebruikelijker om je hier wijselijk aan de webstandaarden te houden.
LETTERTYPEN LETTERTYPEN De geteste lettertypen:
Verdana
Helvetica / Arial
Georgia
Times / Times New Roman
Trebuchet MS
Courier / Courier New
Comic Sans MS
Bij deze test werden lettergrootte 12 pixels gebruikt in combinatie met een lijnhoogte van 15 pixels. Elke deelnemer aan het onderzoek mocht na het lezen zijn of haar mening geven over de leesbaarheid, persoonlijkheid en elegantie van de letters die ze zojuist hadden gelezen. 20
De uitkomsten waren als volgt:
Acbeelding 4.5
