Ergonomie van het web: richtlijnen voor het maken van goede webpagina's

Margot Lagendijk

Samenvatting

Iedereen kan webpagina's maken. Het maken van goede pagina's vereist echter kennis van de manier waarop mensen met informatie op een computerscherm omgaan. Zo zullen teksten op een andere manier geschreven moeten worden dan teksten op papier waar meer tekst in een oogopslag te zien is. In dit artikel zal worden ingegaan op een aantal ergonomische aspecten van webpagina's en dan met name op het gebied van navigatie, grafische elementen en tekst.

Inleiding

Een website maken is met de bestaande hulpmiddelen vrij eenvoudig. Een goede site is echter heel wat moeilijker om te bouwen. Naast kennis van HTML (HyperText Markup Language, de opmaaktaal waarin webpagina's gemaakt worden) en grafische vormgeving, is er ook kennis van informatie ergonomie noodzakelijk. Het is belangrijk te realiseren dat het vinden van en het omgaan met informatie op een beeldscherm speciale eisen stelt aan een ebsite. De hoeveelheid informatie die je in een oogopslag ziet is veel kleiner dan op papier waardoor het behouden van overzicht een stuk lastiger wordt. Onderzoek (Spool, 1997) wijst uit dat inhoud (daadwerkelijke informatie) en vorm (zowel navigatie en manier waarop die gepresenteerd wordt) niet van elkaar te scheiden zijn. Een basis navigatie ontwerpen zonder aandacht te geven aan de informatie die toegevoegd wordt, zal een slechtere site opleveren. Bezoekers zullen veel moeilijker in staat zijn, door het gebruik van generieke links, te bepalen waar ze zijn en waar ze terecht zullen komen.

Door vooraf goed op een rij te hebben welke informatie op de site geplaatst zal worden, kan een beeld taal ontwikkeld worden die de navigatie zal ondersteunen in plaats van verwarren.

Bij het maken van een goede site zal ook duidelijk moeten zijn waarom de site nodig is, wat en wie men denkt te bereiken en hoe dat bereikt zou moeten worden. Een site is een visitekaartje van een bedrijf. Indien de enige reden om een site te maken "dat anderen dat ook doen" is, zal de site geen succes worden en kan hij maar beter achterwege worden gelaten.

Aanbevelingen (Lagendijk, 1996):

• Geef voordat iets gebouwd wordt antwoord op de vragen: waarom, wat, wie, hoe, waar, wanneer, etc.
• Bepaal vooraf het stramien van de site, verzamel daarvoor zoveel mogelijk inhoud.
• Zodra mensen kunnen reageren of bestellen via het web, zal dat ook gevolgen hebben voor de interne organisatie. Er moeten medewerkers zijn die zorgen dat reacties en bestellingen snel en vakkundig worden afgehandeld.
• Bedenk al tijdens het opzetten van een site hoe deze beheerd en bijgehouden zal worden.
• Doe altijd een gebruikstest van de site (Nielsen, 1993).

De startpagina

De startpagina of homepage van een site is een speciale pagina. Meestal komen de bezoekers de eerste keer op deze pagina terecht. Het is de toegangspoort naar alle overige pagina's en zal daarom duidelijk moeten aangeven wat er allemaal te vinden is op de site. Daarnaast biedt het bezoekers ook houvast binnen de site. Zorg daarom dat het vanaf elke andere pagina mogelijk is om direct naar de startpagina (terug) te gaan. De startpagina moet duidelijk en interessant zijn, anders zal de bezoeker snel verder gaan. De kans dat hij nog eens langs zal komen is erg klein. Zorg in ieder geval dat de homepage overzichtelijk is en direct vertelt waar de site over gaat, zonder grote stukken tekst te gebruiken.

Aanbevelingen:

• Zorg dat direct duidelijk is waar de site over gaat.
• Zet het belangrijkste bovenaan.
• Verander zeer regelmatig iets op de startpagina, zorg dat deze dynamisch is zonder te irriteren.
• Geef vanaf de startpagina altijd de mogelijkheid om te reageren via e-mail.
• Geef vanaf de startpagina de mogelijkheid om de laatste veranderingen op de site te zien.
• Maak de site geschikt voor 15" schermen en zorg dat de pagina's meeschalen naar grotere en kleinere schermen.
• Zorg dat de informatie up-to-date is. Oude info is funest voor de geloofwaardigheid van de site.

Navigatie en de vindbaarheid van informatie

Om de informatie goed toegankelijk te maken is het belangrijk een goede informatiestructuur op te zetten, een basis stramien zodat informatie op een voor de bezoeker logische manier gestructureerd is. Hierbij is het belangrijk om vooraf een lijst te maken van informatie die op de site zal komen te staan en benoem die op een logische en duidelijk onderscheidbare manier. Kijk daarbij ook naar de toekomstige informatie zodat daar rekening mee gehouden kan worden. Zelfs als deze structuur alleen op papier beschikbaar is, is het al mogelijk om te testen of hier grote onduidelijkheden in zitten door potentiële bezoekers te vragen wat ze achter de gebruikte termen verwachten en daarna van eik van de categorieën een vraag te formuleren als "U wilt informatie over de aanschaf van .... waar zou u dat gaan zoeken".

De vindbaarheid van informatie wordt verder vergroot door te zorgen dat duidelijk is wat aanklikbaar is en daar duidelijke terminologie voor te gebruiken. Daarnaast moeten verwijzingen naar andere pagina's voldoen aan de verwachting van de bezoeker. Bij Primafoon van KPN Telecom staat onderaan de startpagina het woord "Bestellen", maar slechts diep in de site (na 5 pagina's) betekent "bestellen" daadwerkelijk dat je gaat bestellen door middel van een bestelformulier. Dit is te verwarrend voor bezoekers.

Aanbevelingen:

• Geef niet meer dan 7 duidelijk verschillende hoofdingangen op de startpagina.
• Maak gebruik van een duidelijke structuur en terminologie.
• Geef bezoekers op elke pagina houvast waar ze zich binnen de site bevinden.
• Test de structuur voor er verder wordt gegaan. Zorg dat de links duidelijk zijn en ook doen wat de bezoeker verwacht dat ze zullen doen.
• Geef altijd de datum van laatste verandering per pagina, nieuwsbericht, etc.

Grafische elementen en iconen

Doordat het op het web mogelijk wordt om met zowel tekst, plaatjes, geluid en animaties te werken, gaan mensen die ook toepassen. De site van de Telegraaf staat bol van de plaatjes en bewegende beelden waar-door het moeilijk is naar artikelen te zoeken. Voor de Telegraaf is dit niet zo erg aangezien ze een bepaald imago hebben. De Volkskrant zou met zoveel toeters en bellen de plank volkomen misslaan. Vooral met bewegende grafische elementen dient men voorzichtig te zijn. Het menselijk oog trekt van nature naar bewegingen toe (Spool, 1997). Het zal dan ook uitermate lastig worden voor mensen om tekst te lezen of te weten waar ze in een opsomming zijn als er te veel bewegende dingen hun aandacht vragen op een pagina.

Iconen zijn een aparte categorie grafische elementen. Iconen worden gebruikt om functionaliteit aan te geven en moeten de bezoeker naar de juiste plekken leiden. Inmiddels hebben bepaalde iconen een specifieke betekenis gekregen op het web. Zo wordt een huisje gebruikt om terug te gaan naar de homepage van een site. In de digitale stad Delft wordt het huisje echter gebruikt om naar de pagina's van bewoners van de stad te gaan. Ondanks de tekst onder het icoon, zal menig bezoeker die terug wil, toch uit gewoonte op het huisje klikken in de verwachting terug te gaan naar de homepage van de digitale stad.

Aanbevelingen:

• Maak de totale pagina niet groter dan 30-40 K (inclusief alle grafische elementen). Grotere pagina's vergen te veel laad tijd waardoor mensen lang moeten wachten.
• Zorg ervoor dat teksten al te lezen zijn voordat alle grafische elementen geladen zijn.
• Kijk uit met toeters en bellen en zeker met veel bewegende grafische elementen. Gebruik alleen relevante plaatjes of foto's en gebruik niet te veel bewegende plaatjesanimaties aangezien die afleiden van de eigenlijke informatie. Een menselijk oog trekt van nature naar bewegende beelden toe.
• Zorg dat de site ook zonder dat de plaatjes worden opgehaald, te zien is (een goed voorbeeld is de digitale stad in Amsterdam). Om de laadsnelheid van pagina's te verhogen zetten mensen het inladen van plaatjes uit in hun browser, het programma waarmee pagina's bekeken worden.
• Zorg dat iconen eenvoudig te begrijpen zijn en test ze.
• Zet altijd tekst bij iconen.
• Houdt rekening met (internationale) standaarden van iconen.

Tekst

Het web is op een tweetal essentiële punten anders dan een boek of een artikel.Als eerste gaan lezers niet sequentieel door de tekst. Iemand kan op elke willekeurige plek in de site, en dus in de tekst, binnenkomen en zal de tekst die verspreid is over meerdere pagina's, ondanks dat, nog steeds moeten kunnen begrijpen.Als tweede is lezen vanaf een scherm anders dan vanaf papier. Niet alleen leest men 30% langzamer (Nielsen, 1995), iemand heeft ook geen gevoel waar die zich bevindt binnen de tekst. Een boek geeft door de dikte van hetgeen gelezen is en hetgeen nog komt een indicatie van waar men zich bevindt. Een krantenpagina laat in een oogopslag alle artikelen op die pagina zien. Een scherm laat echter door de beperkte ruimte alleen een klein deel van de tekst zien. De scrollbalk geeft daarbij slechts informatie over de positie binnen een tekst, niet over het daadwerkelijk aantal schermen tekst dat volgt.

Verder is uit onderzoek gebleken (Spool, 1997) dat mensen teksten op webpagina's niet woord voor woord lezen als ze informatie aan het zoeken zijn, maar alleen scannen of er voor hun zoektocht interessante informatie/woorden op staan. Om dit scannen te ondersteunen moeten teksten zodanig geschreven worden, bijvoorbeeld door opsommingen puntsgewijs te geven in plaats van in een doorlopende tekst, dat mensen op een eenvoudige manier de voor hun relevante woorden uit de tekst kunnen halen

Aanbevelingen:

• Zorg dat pagina's los te lezen zijn van de andere pagina's.
• Gebruik geen jargon of afkortingen.
• Geef opsommingen puntsgewijs en niet achter elkaar in de tekst, dit maakt de tekst makkelijk te scannen.
• Wees kort en bondig, laat niet-relevante tekst weg.
• Zet de belangrijkste informatie bovenaan.
• Te veel witregels hinderen mensen in het vinden van informatie.
• Geef links in duidelijke termen en gebruik geen woorden als "klik hier" die qua informatie niets zeggen, maar wel door het verschil in kleur van links de aandacht trekken.
• Let extra goed op spelling, foute spelling geeft een onprofessioneel beeld.

Alleen te zien met internet explorer 4.0

Het komt steeds vaker voor dat aangeraden wordt om sites te bekijken met een specifieke versie van een browser (bijvoorbeeld lnternet Explorer 4.0) en met een bepaalde beeldgrootte (800 x 600). Het getuigt van enige arrogantie en naïviteit ten opzichte van de bezoeker om te verwachten dat de site zo goed is en zodanige interessante informatie bevat dat mensen bereid zijn hun eigen instellingen, waar ze vaak tevreden over zijn en die ze met veel moeite hebben ingesteld, zomaar voor een site te veranderen. Eenmaal gewend aan een browser, laten mensen die vaak gemakshalve staan, ook al is het versie 2.0. Het is goed mogelijk om te zorgen dat met verschillende (versies van) browsers de site toch goed wordt weergegeven. Een goed voorbeeld hiervan is de nieuwe homepage van KPN Telecom.

Aanbevelingen:

• Wees voorzichtig met frames. Ze zijn niet altijd nodig, geven print problemen en zorgen ervoor dat pagina's binnen een site niet als bookmark aan te geven zijn.
• Eis niet van mensen dat ze de instellingen veranderen of plugins (extra software voor bijvoorbeeld het afspelen van video) moeten installeren alleen voor jouw site: dat zullen ze niet doen.

Overzicht van genoemde en/of interessante sites

De Digitale Stad Amsterdam: www.dds.nl
De Digitale Stad Delft: www.dsdelft.nl
Primafoon: www.primafoon.nl
KPN Telecom: www.kpn-telecom.nl
Column jacob Nielson over usability: www.useit.com
User lnterface Engineering: www.uie.com
Voorbeelden van slecht ontwerp: www.webpagesthatsuck.com
Evolutie van een homepage: www.sun.com/sun-on-net/uidesign/pagedesign.html
Richtlijnen voor webontwerp: info.med.yale.edu/caim/manual/index.html

Summary

Anyone can design webpages. Designing pages that are ergonomically sound requires knowledge of how people process information on a computer screen. Text will have to be written different for a screen compared to paper where a person can see the entire text at once. In this article I will go into a number of ergonomical aspects of webdesign, like navigation, graphical elements and text.

Literatuur

Lagendijk, M. e.a.
1996 Wetboek van het web: tips voor het maken van succesvolle webpagina's, KPN Research.

Nielsen, J.
1993 Usability Engineering,Academic Press, San Diego.

Nielsen, J.
1995 Muitimedia and Hypertext: The lnternet and beyond, Academic Press, London.

Spool, J.M. e.a,
1997 Web site usability: a designer's guide. User lnterface Engineering, Massachuserts, USA.

Auteur: ir. M. Lagendijk

Overgenomen uit: tijdschrift voor ergonomie, juni 1998, pagina 66-68