Website-usability checklist

Hoe gebruiksvriendelijk is jouw website?

De website-usability checklist hieronder is inmiddels door meer dan 17.800 mensen doorlopen. Velen van hun hebben hem gebruikt om een website te beoordelen en te verbeteren. Een ander deel heeft hem gebruikt om inzicht te krijgen in website-usability in het algemeen. En weer een ander deel van hun bestaat uit studenten die de hem gebruiken als informatiebron bij hun lessen en examens.

Toelichtingen

Het auteursrecht van deze checklist ligt volledig bij mij, de auteur: Paul Christian Greidanus. Het ontwikkelen van deze checklist was een onderdeel van mijn scriptie en het origineel ervan is als afstudeerdossier geregistreerd op mijn opleiding.

Daarnaast is op deze checklist de volgende Creative Commons-licentie van toepassing: CC BY-NC-ND ↗
Dit houdt in dat deze checklist onder het vermelden van mijn naam en website-adres verspreid en doorgegeven mag worden. Daarentegen mag de checklist als zodanig niet worden bewerkt of voor commerciële doeleinden gebruikt worden. Tenzij ik daarvoor schriftelijke toestemming heb gegeven.

In november 2012 publiceerde ik de eerste versie van deze checklist. Ik had hem ontwikkeld naar aanleiding van mijn scriptie waarin ik onderzoek deed naar de websites van psychologen. Een usability-checklist waarmee ik websites zou kunnen beoordelen was erg belangrijk binnen die scriptie, maar een Nederlandstalige checklist was toentertijd zowel online als offline niet te vinden. Daarom besloot ik om mijn eigen Nederlandstalige usability-checklist te ontwikkelen. Na mijn afstuderen publiceerde ik die checklist samen met mijn scriptie in zijn geheel online zodat de rest van Nederland er zijn voordeel mee kon doen.

Het is inmiddels meer dan een decennium geleden sinds ik de eerste versie van deze checklist publiceerde en het internet is sindsdien enorm veranderd. Dit vooral als gevolg van de smartphone. Daarom besloot ik in 2019 om de hele checklist te herschrijven en te updaten. En vervolgens heb ik hem tot en met september 2023 verder verfijnd en aangescherpt.

Deze checklist gaat er voor het gemak vanuit dat je je eigen website beoordeelt en daarom spreek ik over “je/jouw website”. Maar dit is puur tekstueel, want je kunt de checklist gebruiken voor iedere website die je maar wilt.

“Paul’s website-usability checklist is een handig hulpmiddel bij mijn lessen over usability en het ontwerpen van websites. De checklist geeft duidelijk aan waar je op moet letten tijdens het ontwerpen en beoordelen van een website. En omdat er weinig lesmateriaal op dit gebied beschikbaar is, is dit voor ons een waardevolle informatiebron. De checklist wordt gebruikt op meerdere ROC’s en inmiddels hebben er zo’n 1000 studenten gebruik van gemaakt. Daarnaast is het MBO-onderwijs er zo tevreden over dat hij ook is opgenomen in examens door een examenleverancier waar 42 ROC’s bij zijn aangesloten.”

– Manon Kuipers, docent marketing & communicatie, Firda ↗

Wil je de checklist gebruiken binnen je organisatie of instelling? Dan vind ik dat doorgaans prima, mits je het me even voorlegt. Ik wil namelijk graag weten in welke omvang en in welke hoedanigheid je hem wilt inzetten. Dat vind ik interessant en het geeft mij een beeld van de impact die de checklist heeft. Daarnaast motiveert het mij om hem up-to-date te houden en hem te blijven verfijnen. Contact opnemen kan via: studio@paulchristian.nl

Zo werkt het

Open een website en doorloop de checklist. Des te meer je met ‘Ja’ kunt antwoorden, des te gebruiksvriendelijker je website is

Niet iedere vraag behoeft een volmondig ‘Ja’, en deze selectie van vragen is niet in steen geschreven. Er zijn uitzonderingen mogelijk. Afhankelijk van je website, je doelgroep en je hardware (smartphone, tablet of pc) is een ‘Nee’ soms op zijn plaats. Gebruik deze checklist dus vooral om een globale indruk te krijgen van het gebruiksgemak van je website. Hij bestaat uit 60 vragen en behandelt de volgende website-onderdelen:

Ik heb de checklist zo ontworpen dat je er in 3 minuten doorheen kunt gaan door alleen de vragen te lezen in het grote lettertype. Maar ben je net als ik iemand die graag wil weten waarom iets zo is, dan kun je de uitleg erbij lezen. In dat geval krijg je een mini-opleiding in website-usability die (als je alles wilt lezen) zo’n 40 minuten duurt. Laten we beginnen bij:


De homepage

De homepage is de startpagina/voorpagina van je website. Veel van je bezoekers beginnen op je homepage en het is daarmee de ‘binnenkomer’.


1: Heeft je website een duidelijke, goed te onthouden en niet een al te lange domeinnaam?

Maak het jezelf en je bezoekers gemakkelijk en gebruik een zo kort mogelijke domeinnaam die je bezoeker goed kan spellen en onthouden.
Daarnaast zijn domein-extensies zoals .nl en .com algemeen bekend, maar extensies zoals .xyz niet. Let daar ook op. Want iets dat bekend aanvoelt is iets wat mensen sneller vertrouwen.

2: Heeft je homepage een schoon en logisch website-adres?

www.website.nl is een duidelijk en overzichtelijk website-adres voor een homepage. Iets ervoor of erachter – zoals: www.site.website.nl/index.php – kan leiden tot verwarring bij bezoekers en het maakt een website-adres langer dan nodig is. Daarnaast is het www-gedeelte niet meer noodzakelijk. En los daarvan verbergen moderne browsers de bekende aanduidingen in de adresbalk (zoals: http(s) en www) steeds vaker.

3: Vertelt je homepage een bezoeker direct en duidelijk wat voor website dit is en wat hij ermee kan?

“Wat is dit en wat kan ik hier?” Dit zijn de eerste vragen die je bezoeker heeft. Beantwoord ze zo snel, zo bondig en zo helder mogelijk als je kunt, bovenaan je homepage. Dit noemen we een ‘headline’.
Bezoekers zijn ongeduldig en ze zijn gewend dat 9 van de 10 websites waarop ze terechtkomen niet relevant voor ze zijn. Om die reden hebben ze een nogal hechte relatie met de terug-knop van hun webbrowser. Maak dus zo snel als je kunt duidelijk dat jij relevant voor ze bent.

4: Bevat je homepage een slogan die duidelijk zegt wat je bedrijf of je website doet?

Je slogan is je kans om in één oogopslag duidelijk te maken wat je voor je bezoeker of klant kunt betekenen. Meestal staat deze slogan in de buurt van het logo en deze dient zowel kort als tastbaar te zijn. “Verreweg de beste!” is geen heldere slogan… Als je een hele heldere headline hebt dan is een slogan misschien wat dubbel op. Maar op andere pagina’s dan de homepage is een slogan wellicht waardevol omdat daar de headline niet te lezen is.

5: Staat je logo op een opvallende plek en is het groot genoeg om goed leesbaar te zijn?

Je logo is een herkenningspunt, je primaire merkelement, en een teken van professionaliteit. Zorg ervoor dat het consistent aanwezig is, duidelijk leesbaar/herkenbaar is (ook op de kleine smartphone-beeldschermen) en professioneel oogt.

6: Staat je logo links bovenaan de pagina?

Statistisch gezien is dit de meest voorkomende plek voor logo’s, en dus zal het merendeel van je bezoekers hier jouw logo verwachten. Omdat we in Nederland van links naar rechts en van boven naar beneden lezen, kom je daarmee het logo ook als eerste tegen.

7: Is je logo ‘klikbaar’ en verwijst het naar de homepage?

Veel bezoekers verwachten dat ze op je logo kunnen klikken en dat ze daarmee naar de homepage van je website gaan. En zo dient het logo steeds vaker als een soort tweede Home-knop. Het voordeel hierbij is dat op smartphones over het algemeen het logo wel zichtbaar is, maar het hoofdmenu onder een zogenaamde hamburger-knop ↗ staat. De hamburger-knop ziet er zo ☰ uit. En een bezoeker moet deze hamburger-knop eerst aanklikken voor hij het daadwerkelijke menu kan zien met daarin de Home-knop. Een klikbaar logo waarmee je direct naar de homepage kunt gaan kan dus een extra klik schelen op smartphones en eventueel op tablets. Mits je bezoeker van deze functionaliteit afweet natuurlijk.

8: Zijn de belangrijkste pagina’s of onderdelen van je website direct te bereiken vanaf de homepage?

Of anders gevraagd: kan je bezoeker met één muisklik bij de belangrijkste onderdelen van je website komen?
Op het internet is snelheid — en vooral snelheid van navigatie — van groot belang. En het ontbreken daarvan leidt tot ergernis bij bezoekers. In het meest ideale geval kan je bezoeker met slechts één muisklik op iedere pagina van je website komen. Op smartphones en tablets is dit vaak pittig in verband met het gebrek aan horizontale ruimte voor een hoofdmenu. Hierdoor ontkom je doorgaans niet aan de eerdergenoemde hamburger-knop. Maar de vuistregel blijft overeind: des te minder je bezoeker hoeft te klikken om ergens te komen, des te beter. Let hier ook op met submenu’s. Alle items in een submenu zijn in feite één extra klik van je bezoeker verwijderd.

9: Voorkom je het gebruik van irrelevante ‘widgets’ op je homepage?

Laten zien hoeveel bezoekers deze week gehad hebt, of een ‘tweet’ waarin je je avondeten beschrijft, zijn zaken die je bezoeker waarschijnlijk niet heel veel interesseren. En al helemaal niet bij binnenkomst op de homepage. Dergelijke onderdelen kun je beter weglaten. Zeker uit het bovenste gedeelte van je homepage.
En ook over sociale media-widgets heb ik een uitgesproken mening, maar die wordt niet door iedereen gedeeld of gewaardeerd… Ik vind ze ruis. Afleiding. Visueel onaantrekkelijk en tegelijkertijd te aanwezig. In het beste geval laat zo’n widget zien dat je populair bent, wat vertrouwen kan wekken bij je bezoeker. Maar in veel gevallen is het niets meer dan een open deur naar de bekende social media-platformen. Om over de privacy-implicaties van deze widgets nog maar te zwijgen.

10: Wijkt je homepage visueel af van je andere pagina’s?

Het helpt wanneer je homepage visueel afwijkt van de andere pagina’s. Zo kan het als het als hoofd-navigatiepunt dienen voor je bezoeker. Iets dat afwijkt (denk aan de cover van een boek ten opzichte van de andere pagina’s) werkt als een visueel hulpmiddel waarmee je je bezoeker in feite vertelt: “Hier kwam je binnen.” Idealiter kan je bezoeker zien dat hij op de homepage is zonder het te hoeven lezen of beredeneren.

11: Vertelt je homepage direct en duidelijk welke producten of diensten er op je website te vinden zijn?

Je homepage kan goed dienen als korte teaser of preview voor de meest waardevolle producten of diensten die je je bezoeker te bieden hebt. Dit kan leiden tot een grotere kans op interesse van je bezoeker. En het wekt helderheid op als het gaat om de vraag: “Wat doet deze persoon, onderneming of website, en hoe kan mij dat helpen?”. Meestal gebruik je de headline van je website om dit in een paar zinnen te omschrijven. Maar het kan geen kwaad om daarnaast alvast een meer tastbaar voorbeeld te geven van je dienst of product.

12: Zijn de belangrijkste taken voor je bezoeker benadrukt op je homepage?

Is het bijvoorbeeld belangrijk dat je bezoeker zich inschrijft voor je nieuwsbrief? Zorg er dan voor dat je dit duidelijk maakt en geef je bezoeker de instructies om dit doel te bereiken. Gooi je bezoekers niet in het diepe. Je bezoeker zal wel ongeveer weten waar hij heen wil/moet, maar het is jouw taak en verantwoordelijkheid om zijn reis zo kort en logisch mogelijk te maken.

13: Zijn de belangrijkste onderdelen van je homepage in één oogopslag te zien zonder te scrollen?

Dit gebied noemt men: above the fold ↗. En de belangrijke onderdelen die in dit gebied dienen te staan zijn bijvoorbeeld: het hoofdmenu, de navigatie, het logo en de headline.
En houd ook rekening met kleine smartphone-beeldschermen. Hierop is de ruimte nog beperkter en dus is het zaak om kort en bondig te zijn. Het doel is dat deze onderdelen zichtbaar zijn zonder dat je bezoeker hoeft te ‘swipen’.

14: Is er een contactmogelijkheid en eventueel een bezoekadres op je homepage te vinden?

Een fysiek adres van je vestiging en eventueel je telefoonnummer, mailadres of WhatsApp-optie wekken vertrouwen bij je bezoeker. Dus plaats deze gegevens als het gepast is.
Wil je nog meer vertrouwen wekken bij je bezoeker? Zet dan je persoonlijke foto of een foto van je team op de homepage. Onthoud dat het internet niet daadwerkelijk fysiek bestaat, en daarmee is het nog altijd erg ontastbaar en vrij abstract. Het plaatsen van elementen waaruit blijkt dat er een echte persoon of een echt bedrijf achter de site zit wekt vertrouwen bij sceptische bezoekers.

15: Voorkom je het gebruik van een zelf-startende animatie of muziek?

Het gebeurt niet vaak meer, maar het komt soms nog voor: een overdonderende intro-animatie of een muziekstuk dat automatisch begin te spelen bij binnenkomst. Vaak is dit eerder een ergernis dan een toevoeging. En het wow-effect dat de website-eigenaar beoogt vindt meestal uitsluitend plaats in zijn eigen hoofd. Een subtielere entree is vaak verstandiger. Dan stoot je niemand tegen het zere been.
Los daarvan moeten animaties en audiobestanden eerst laden (downloaden) voordat ze iets kunnen doen en dit kan ten koste gaan van de laadsnelheid van je homepage. Ik zeg: niet doen, tenzij je heel goed weet wat je doet.


Het hoofdmenu

Het hoofdmenu is een cruciaal onderdeel binnen websites. Niets bepaalt de interactie die je bezoeker heeft met je website zo sterk als het hoofdmenu.


16: Staat het hoofdmenu van je website op een duidelijke en opvallende plek?

Idealiter staat het hoofdmenu bovenaan de pagina, boven de inhoud, en in de buurt van/of in lijn met het logo. Zorg er ook voor dat het hoofdmenu en de paginaverwijzingen die erin staan groot genoeg (en dus optimaal leesbaar) zijn.
Voor smartphones (en vaak voor tablets) geldt dat de hamburger-knop behoorlijk ingeburgerd is als navigatiepunt. Onder deze knop verwacht men het hoofdmenu te vinden op beeldschermen waar de horizontale breedte te klein is om het volledige hoofdmenu te tonen. Deze hamburger-knop is zelden nodig op grote beeldschermen zoals die van laptops, grote tablets en pc-monitoren omdat daarop genoeg ruimte is om het volledige menu te tonen. Ook op die beeldschermen wordt echter soms een hamburger-knop ingezet omdat het rustiger en minimalistischer oogt. Mocht je dit overwegen: bedenk dan wel dat daarmee iedere pagina van je website één extra klik verder verwijderd is van je bezoeker. Kortom: voor het oog is het prettig en rustig, maar voor het gebruiksgemak is het vaak minder ideaal. Zet de hamburger-knop op grotere beeldschermen alleen in als je heel goed weet wat je doet. En als je grondig hebt afgewogen wat de voors en tegens ervan zijn in jouw specifieke situatie. (Bij wijze van experiment is dit een onderdeel waar ik zelf nog regelmatig aan sleutel.)
Daarnaast waren hoofdmenu’s aan de linker en rechterkant vroeger erg gebruikelijk. Maar tegenwoordig wordt meestal een horizontale structuur ingezet. Dit omdat er vaak nogal wat ruimte verloren ging onder die linker of rechter menu’s. Maar ook omdat bij smartphones en minder brede beeldschermen een menu aan de linker of rechterkant ongeveer de meest onhandige indeling van ruimte is die je kunt bedenken. Je bent namelijk je hele scherm (of een groot deel daarvan) kwijt aan je hoofdmenu. Een horizontaal menu bovenaan de pagina is in veel gevallen de meest optimale oplossing.

17: Staat het hoofdmenu op iedere pagina op dezelfde plek?

Consistentie is belangrijk en wekt vertrouwen bij je bezoeker. Dit heeft te maken met voorspelbaarheid. Weten waar je iets kunt vinden omdat je het daar eerder gezien hebt. Wijk hier alleen van af als je echt weet wat je doet. Hoe zou jij het vinden als het dashboard van je auto ineens een totaal andere indeling kreeg zodra je buiten je woonplaats komt? Vergelijk het hoofdmenu van je website met het dashboard van je auto. En tel het stuur en het gaspedaal daar gerust bij op. Zo belangrijk is dit onderdeel. Wees dus consistent en voorspelbaar.

18: Vermijd je ‘dropdowns’ en ‘rollovers’ in je hoofdmenu?

Dropdown of rollover-menu’s zijn menu’s die tevoorschijn komen na een muisklik of wanneer je met de cursor over een link of button gaat. Gebruik ze alleen als het echt noodzakelijk is. Je bezoeker heeft namelijk veel minder overzicht wanneer een deel van je links verborgen is. Je bezoeker moet meer ‘graven’ naar de structuur en zal in bepaalde gevallen eerder gaan raden waar hij moet zijn dan dat hij het idee heeft dat hij echt de controle heeft.

19: Staan er minder dan 8 items in je hoofdmenu?

Mensen zijn snel het overzicht kwijt binnen websites. Streef daarom naar minder dan 8 items in je hoofdmenu voor optimaal overzicht. Er zijn studies die uitwijzen dat mensen meer klikken, wanneer er minder links zijn. En dat ze minder klikken, naarmate er meer links aanwezig zijn. Dit heeft te maken met keuzestress. In veel gevallen is de vuistregel: meer opties leiden tot minder overzicht — en minder opties leiden tot meer overzicht.

20: Worden er duidelijke en logische namen gebruikt voor de hoofdmenu-items?

‘Over ons’ zegt je bezoeker meer dan ‘Info’. Gebruik logische en eenvoudige termen die iedereen begrijpt en op waarde kan schatten. Een goede vraag om jezelf te stellen is: Kan een bezoeker inschatten wat hij zal vinden onder een pagina met deze naam, voordat hij klikt?.
Daarnaast zijn korte namen vaak het meest ideaal. Dit oogt minder druk, neemt minder ruimte in op kleine beeldschermen, en het leest makkelijker. Dus ‘Contact’ is doorgaans handiger dan ‘Contact opnemen’. En ik heb zelf dikwijls ‘Over ons’ aangepast naar ‘Over’ omdat het een woord scheelt en dit het hoofdmenu rustiger maakt.

21: Staat ‘Home’ in je hoofdmenu?

Een Home-knop is eigenlijk nog steeds noodzakelijk. Hoewel ik al aangaf dat het logo van een website steeds vaker ook het doel dient van de Home-knop is dit helaas nog lang niet ingeburgerd. Het zou in alle hoofdmenu’s van websites een knop schelen als dat wel zo was. Maar van de mensen die ik het vraag weet minder dan 20% van deze functie af. Dus zorg dat je hoofdmenu een Home-knop bevat. Verkies duidelijkheid boven eenvoud. En noem hem alsjeblieft ‘Home’ en niet ‘Voorpagina’ of iets anders. Jouw bezoeker verwacht een Home-knop.

22: Kan je bezoeker aan het hoofdmenu zien waar hij zich bevindt?

Gebeurt er iets met een link/knop in het hoofdmenu wanneer een bezoeker deze heeft indrukt? Dit is belangrijk omdat het je bezoeker visueel duidelijk maakt welke link of knop actief is en dus op welke pagina hij nu zit. Uiteraard is dit vaak ook te zien aan de pagina-naam. Maar idealiter is het hoofdmenu zo sprekend dat puur alleen daaraan al te zien is waar een bezoeker zich bevindt. Dit kan een kleurverschil zijn ten opzichte van de andere items in het menu, een onderstreping, of iets anders. Zolang het actieve item maar afwijkt ten opzichte van de andere niet-actieve items.
Nog beter is het om de actieve link/knop in het hoofdmenu inactief te maken wanneer deze is ingedrukt. Kortom: is een bezoeker op de homepage, dan hoeft ‘Home’ in het hoofdmenu niet meer klikbaar te zijn. Ook dat verduidelijkt nogmaals dat de bezoeker zich al op die pagina bevindt wanneer hij erop klikt en er niets gebeurt.

23: Staat er een zoekveld in de buurt van je hoofdmenu?

Sinds de komst van Google is zoeken ingeburgerd. Je bezoeker voelt zich er bekend mee en als het gepast is dan kan het een meerwaarde hebben om een zoekveld aan je hoofdmenu toe te voegen. Een zoekveld geeft je bezoeker een extra gevoel van controle binnen de navigatie en het geeft hem een tweede manier om ergens te komen.
Uiteraard verschilt het wel per website hoe noodzakelijk zo’n zoekveld is. Voor de website van Coolblue is het van groter belang dan voor de website van een tandarts, puur door wat een gemiddelde bezoeker op deze websites wil. En ook speelt de omvang van een website hierin een grote rol. Voor een website van vijf pagina’s kan het misschien niet uit om zoekfunctie toe te voegen want een bezoeker kan in vijf klikken door de hele website gaan. Maar heeft een website 100 pagina’s dan wordt het een ander verhaal.

24: Staat er een duidelijke knop met “Zoek” of “Zoeken” achter het zoekveld?

Het is voor veel mensen een gewoonte geworden om na het invullen van hun zoekterm op de Entertoets te drukken. Voor veel mensen is het namelijk helder dat dit ‘gaan’ of ‘zoeken’ betekent. Toch is het verstandig om een knop met “Zoek” of “Zoeken” achter je zoekveld te zetten. Zeker als je zoekveld vaak gebruikt wordt. Extra duidelijkheid kost niks en voor die ene persoon die niet bekend is met deze functie van de Entertoets is het wel zo helder.

25: Staat er een ‘Over ons’-pagina in het hoofdmenu?

Bezoekers verwachten een soort van ‘Over ons’-pagina met informatie over het bedrijf of de persoon achter de website. Deze pagina zie ik zelf altijd als een kans om een website menselijker te maken. En vooral een goede foto van de website-eigenaar of van het team achter de website is iets waar ik in geloof. Mensen doen nog altijd liever zaken met mensen dan met websites.

26: Staat er een duidelijke ‘Contact’-optie in het hoofdmenu die leidt naar alle contactinformatie die voor de bezoeker relevant is?

De ‘Contact’-knop ken je. Iedereen kent hem. Maak gebruik van deze bekendheid. Zet een contactpagina op je website en noem de link die er naartoe leidt in je hoofdmenu ‘Contact’. Duidelijker kan het niet. En het is tevens op waarde te schatten door iedereen die Engels spreekt, wat mooi meegenomen is.
Zet daarnaast alle contactinformatie en eventuele bedrijfsgegevens die gepast zijn op deze pagina. Een contactformulier heeft voor- en nadelen. Maar sowieso is een (klikbaar) e-mailadres een goede minimale vereiste. Dit bijvoorbeeld voor mensen die op een later moment willen mailen of een bijlage willen toevoegen. Daarnaast ben ik een voorstander van het plaatsen van een 06-nummer voor telefonisch- of WhatsApp-contact. Vaak heeft alleen het vermelden van een telefoonnummer namelijk al een vertrouwenwekkend effect. Zelfs als mensen niet zomaar zouden gaan bellen, dan weten ze in ieder geval dat het kan.

27: Gebruik je een broodkruimelspoor op je website?

Een broodkruimelspoor ↗ laat (zoals de naam al doet vermoeden) het spoor zien dat je bezoeker heeft afgelegd om te komen waar hij nu is. Ik zie het vaak als een ondersteunend element ten opzichte van het hoofdmenu. En in veel gevallen is het het meest optimaal om dit onderdeel in te zetten in de buurt van het hoofdmenu, of in ieder geval bovenin de webpagina.
Een broodkruimelspoor is vooral handig binnen websites wiens navigatie uitgebreid en diep is. Bij een hoofdmenu dat bijvoorbeeld twee of meer niveaus diep gaat heeft een broodkruimelspoor al snel een meerwaarde. Denk aan het voorbeeld van een webwinkel die apparaten verkoopt. Een voorbeeld van een broodkruimelspoor kan dan zijn: “Je bent nu hier: Home › Laptops › Apple › MacBook Pro”. In dit broodkruimelspoor dient ‘Home’ als het eerste niveau. ‘Laptops’ als 2e niveau. ‘Apple’ als 3e niveau. En ‘MacBook Pro’ als 4e niveau. Met vertakkingen die zo diep gaan is een broodkruimelspoor ideaal. De bezoeker ziet in één oogopslag waar hij is en hoe hij daar gekomen is. En als hij één niveau terug wil, maar niet helemaal terug wil naar niveau 1, dan klikt hij simpelweg op het een-na-laatste woord.
Maar let wel op: een broodkruimelspoor kan lastig in te zetten zijn op smalle schermen zoals die van smartphones. De ruimte om al deze woorden naast elkaar te zetten is immers zeer beperkt.


De on-page navigatie en hyperlinks

Los van het hoofdmenu zijn er andere navigatie-items zoals links en andere interactieve onderdelen op webpagina’s te vinden. Daarover gaat deze sectie.


28: Bestaat de website-navigatie uit selecteerbare tekst of vectors?

Inmiddels is dit op veel websites inmiddels prima in orde, maar voor de gedateerde websites is het belangrijk om het nog te noemen. Google kan pixel-afbeeldingen niet of slecht lezen en beoordelen, dus tekstlinks hebben een meerwaarde. Daarnaast is dit ook veel beter voor de screenreaders van mensen met een visuele beperking. En het laatste voordeel is dat tekst is opgebouwd uit vectors ↗, in tegenstelling tot pixel-afbeeldingen die opgebouwd zijn uit pixels. Vector-bestanden blijven in principe altijd scherp, hoe geweldig de beeldschermen in de toekomst ook worden. Vector schaalt mee en wordt niet vaag. Pixel-afbeeldingen worden wel vaag (of kleiner) wanneer het beeldscherm waarop je ze bekijkt een veel betere (PPI) resolutie heeft dan die van de afbeelding. Toen in 2010 bijvoorbeeld de eerste iPhone uitkwam met een haarscherp Retina display ↗ oogden daarop de meeste afbeeldingen op websites aanvankelijk enigszins vaag. De tekst toonde zich daarentegen scherper dan ooit te zien was geweest op een telefoonscherm. Dit laat goed het verschil zien tussen pixels en vectors en welke invloed ze hebben op de toekomstbestendigheid van websites.

29: Gebruik je logische namen voor de links op je website?

Gebruik geen ‘Klik hier’, maar maak bijvoorbeeld de woorden ‘Over ons’ of ‘Contact’ klikbaar. Ook hier is het van belang dat mensen een link op waarde kunnen schatten (“Waar leidt dit heen?”) voordat ze erop klikken.

30: Zijn de links op je website zo kort en specifiek mogelijk?

Ga ervan uit dat je bezoeker haast heeft. Een gemiddelde bezoeker geeft een website in eerste instantie niet meer dan een paar seconden de tijd om hem te overtuigen. Dus gebruik korte, bondige, duidelijke links en beperk de leestijd waar het kan.

31: Zijn alle links onderstreept of duidelijk ‘klikbaar’ en vallen ze op binnen je teksten?

Zorg ervoor dat je links opvallen in de tekst. Wanneer de tekst zwart is en de links zijn donkergrijs dan is er bijvoorbeeld weinig contrast. Gebruik liever blauw of rood (of een andere heldere kleur) voor links zodat ze meer uit de tekst springen. Of gebruik nog liever onderstrepingen om aan te geven dat een woord duidelijk een afwijkende functie en stijl heeft ten opzichte van de rest van de woorden. Een simpele onderstreping is voor veel mensen nog steeds een duidelijk signaal van iets interactiefs (“Hier kan ik iets mee doen…”). Daarnaast zijn er veel mensen die kleuren of kleurcontrast minder goed kunnen zien en met onderstrepingen kom je ook hun tegemoet.

32: Hebben de aangeklikte links een andere kleur dan niet aangeklikte links?

Aangeklikte links die een andere kleur of uitstraling hebben dan niet aangeklikte links creëren duidelijkheid. Een andere kleur voor de al bezochte links vertelt je bezoeker namelijk waar hij al geweest is en waar nog niet. Aan de andere kant blijft het probleem van mensen die kleuren slecht kunnen zien hierbij overeind. En daarnaast hangt ook dit samen met de grootte van de website (net als de zoekfunctie). Met vijf pagina’s is deze functie vele malen minder relevant dan met een website die 100 pagina’s heeft.

33: Hebben alle links dezelfde opmaak?

Consistentie is belangrijk binnen websites. Dit creëert voorspelbaarheid en dat geeft bezoekers een gevoel van controle. Zorg ervoor dat het uiterlijk van alle links consistent is. Gebruik geen rode links op de ene pagina en blauwe of de volgende pagina. Dit is verwarrend voor de bezoeker en vanuit een design standpunt vaak onaantrekkelijk. Een uitzondering voor het hoofdmenu kan op zijn plaats zijn, mede omdat dit element vaak visueel apart staat van de rest van de website.

34: Voorkom je dat links in een nieuw venster openen?

Gebruik de optie ‘openen in een nieuw venster’ alleen als het echt nodig is. De meest gebruikte knop van de browser is de terug-knop, en deze werkt niet wanneer er een pagina in een nieuw venster of tabblad wordt geopend. Er is immers geen pagina om naar terug te gaan…
Daarnaast zijn links die openen in een nieuw venster regelmatig een doorn in het oog van smartphone-gebruikers. Ze moeten dan namelijk schakelen tussen de openstaande tabs en in bepaalde gevallen hebben ze niet eens door dat er een nieuw venster geopend is.
Een argument vóór het openen van links in een nieuw venster dat ik vaak hoor is dat mensen dan het idee hebben dat bezoekers op hun website blijven ook al verwijst hun site naar een andere website. ‘www.website.nl’ blijft immers open staan wanneer je via een nieuw venster verwijst naar ‘google.nl’. Maar dit is denken in schaarste. Als je iets te bieden hebt komen mensen wel terug. En als je ze op deze manier op je website moet vasthouden dan moet je misschien werken aan wat je je bezoekers te bieden hebt.
Vrijwel de enige uitzondering die ik zelf maak voor het openen van links in een nieuw venster is het scenario waarbij ik een lange tekst heb (zoals deze checklist) waarbinnen ik verwijs naar een externe bron. Ik laat in dat geval de externe bron openen in een nieuw venster omdat ik mijn lezer anders uit de tekst haal. Dit zou zijn ‘lees flow’ onderbreken. En bovendien moet hij misschien gaan zoeken naar waar hij gebleven was als hij bijvoorbeeld van deze checklist klikt naar Wikipedia, en daarna weer teruggaat naar de checklist.

35: Bevat je contactformulier (indien aanwezig) minder dan 4 invul-veldjes?

Meer dan de (voor)naam, het e-mailadres en het bericht heb je waarschijnlijk niet nodig van je bezoeker. En des te meer informatie je van hem vraagt, des te achterdochtiger en aarzelender hij wordt. Voorkom dat je bezoeker denkt: “Waarom moet jij dit van me weten? Ik wou gewoon even een korte vraag stellen…”
Bovendien zijn mensen op internet ongeduldig en iedere vraag waarop een antwoord moet worden gegeven is een extra drempel. Er zijn meerdere grote onderzoeken geweest naar contactformulieren waaruit bleek dat (net als bij de hoeveelheid opties in het hoofdmenu) het aantal inzendingen daalde met iedere extra vraag die er in het formulier werd gesteld. Kortom: minder invul-veldjes leidde tot meer inzendingen. En meer invul-veldjes leidde tot minder inzendingen.

36: Kan je bezoeker vanaf iedere pagina eenvoudig contact opnemen?

Als het opnemen van contact een belangrijk onderdeel is binnen je website, dan is een contactmogelijkheid die op iedere pagina terugkomt ideaal. Dit zorgt voor consistentie, voorspelbaarheid en het wekt vertrouwen en gerustheid op bij je bezoeker. “Ik kan altijd bellen, mailen, etc. als ik er niet uit kom.” zal hij denken.
Zelf richt ik vaak op website-onderdelen die op alle pagina’s terugkomen om een contactmogelijkheid in te verwerken. Zoals bijvoorbeeld het hoofdmenu of de footer (de onderkant van de website).

37: Bevat je website een sitemap?

Een sitemap is een soort lijst van alle pagina’s die er op je website te vinden zijn. Dit is ideaal voor snelle navigatie en voor een totaaloverzicht van je website.
Als je het extra netjes aan wilt pakken (en vooral bij grotere websites is dit handig) dan neem je de niveaus van de pagina’s mee in de sitemap-opzet. In dat geval werk je bijvoorbeeld met bullet-points, sub-bullet points en misschien zelfs met sub-sub bullet-points. Daarmee kan de bezoeker zien op welk niveau een pagina zich bevindt ten opzichte van de andere pagina’s.
Een groot voordeel van een sitemap is daarnaast dat Google en andere zoekmachines er erg fan van zijn. Een sitemap biedt hun immers een effectieve manier om een goed totaaloverzicht te hebben van een website. En als zij simpelweg de sitemap in de gaten houden dan hebben ze als het goed is altijd een volledig en up-to-date beeld van je totale website. Je kunt zelfs specifiek aangeven bij Google waar je sitemap staat zodat zij deze regelmatig kunnen checken.


De website inhoud (teksten, afbeeldingen, video’s en meer)

“Content is king” wordt vaak gezegd. En ‘content’ is de Engelse term die onder andere gebruikt wordt om inhoud van een website omschrijven. Content kan eigenlijk alles omvatten: van tekst tot foto’s en van video tot audio. Doorgaans is het datgene waarvoor je bezoeker komt.


38: Bevat je website duidelijke en begrijpelijke titels, subtitels en teksten?

Spreek je de taal van je bezoeker of gebruik je veel vaktaal en lastige termen? Spreek je beginners of gevorderden aan op je site? Wie is je bezoeker? Past jouw tekst en taal bij het kennis en communicatie-niveau van je bezoeker? Denk hier goed over na.

39: Bevat je website koppen en sub-koppen om de teksten te structureren?

Koppen (ook wel ‘H-tags’ genoemd) zijn als het ware titels en subtitels voor je teksten. Ze maken informatie overzichtelijker en toegankelijker omdat ze een duidelijke hiërarchie creëren binnen een tekst. Net als in een boek heb je doorgaans één titel (de H1 of Kop 1), met als verschil dat een boek daadwerkelijk één titel heeft en dat een website per pagina één titel heeft. Op een pagina vind je verder vaak ‘hoofdstukken’ (de H2’s of Kop 2’s) en soms heb je ‘subhoofdstukken’ of alinea-titels (de H3’s of Kop 3’s). Bij sommige grote websites gaat het niveau van de koppen nog veel dieper, maar dit is meestal afhankelijk van de lengte van een tekst. Belangrijk is vooral dat deze koppen duidelijk visueel van elkaar verschillen, zodat je aan hun uiterlijk al kunt zien of je op een hoog of laag niveau in de tekst zit. De Kop 1 is zodoende vrijwel altijd het grootst. De Kop 2 is wat kleiner. En de Kop 3 is nog weer wat kleiner.
Ook Google en andere zoekmachines hebben daarnaast een sterke voorkeur voor deze koppen-structuur omdat het hun helpt met het inschatten van de leesbaarheid van de tekst. En het is een indicatie voor ze als het gaat om wat de belangrijke onderwerpen en sleutelwoorden in de tekst zijn.

40: Zijn je uitleg en de toon helder en vriendelijk bij de dingen die je van de bezoeker vraagt?

‘Naam:’ is wat anders dan ‘Wat is je naam?’. Wees hierin hulpvaardig en menselijk. Daarnaast is het goed om de interactieve onderdelen op je website wat in te leiden. En ook daarbij komt het anders over wanneer een bezoeker ineens een contactformulier op zijn scherm krijgt, versus wanneer er een korte tekst boven dat formulier staat die inleidt waarom dat formulier van belang is. Dit stond er bijvoorbeeld boven mijn eigen offerte-formulier: “Ik stel hieronder wat vragen over je project. Des te vollediger je antwoorden zijn, des te beter ik je kan informeren. Het invullen vraagt ongeveer 10 minuten van je tijd. Kom je er niet uit of is iets niet duidelijk? Laat het dan even weten.”

41: Is je tekst gericht op het helpen en informeren van je bezoeker?

Iedere website-eigenaar wil zijn bezoeker iets vertellen. Maar wat jij wilt vertellen en wat je bezoeker wil weten zijn soms twee verschillende dingen. Richt je teksten dus zoveel mogelijk op de informatie die interessant is voor je bezoeker.
Let op: dit is een extreem lastig onderdeel. In feite moet je je eigen kennis even helemaal uitzetten en moet je je tekst lezen alsof je iemand anders bent. Van alle zaken waarmee ik te maken heb gehad in mijn projecten is dit voor mijn klanten het lastigste onderdeel.

42: Zijn de afbeeldingen op je website relevant?

Afbeeldingen van je product of dienst kunnen van waarde zijn voor je bezoeker. Maar afbeeldingen puur als decoratie zijn vaak eerder een bron van afleiding. Afbeeldingen zijn enorm geschikt om tekst te onderbreken en deze wat speelser te maken. Daarom worden ze maar al te graag ingezet. Maar je moet wel voorkomen dat je bezoeker denkt: “Wat heeft deze foto met deze tekst te maken?”. Ga dus voor relevantie en niet voor decoratie.

43: Bevatten de afbeeldingen op je website een goede en beschrijvende naam en alt-tag?

Een goede, beschrijvende naam voor je afbeeldingen helpt zoekmachines om je afbeelding op waarde te schatten. Voor jouzelf is het daarnaast vooral prettig met het oog op het overzicht op je server, waar al je foto’s bij elkaar staan. En voor bezoekers die een afbeelding opslaan is het wel zo prettig als de bestandsnaam iets zegt over het bestand. Immers: ‘profielfoto-paul-christian-greidanus.jpg’ is veelzeggender dan ‘IMG_3162.jpeg’.
Los daarvan worden deze namen en de bijbehorende alt-tags ↗ (omschrijvingen) opgepikt door screenreaders. En mensen met een visuele beperking kunnen op die manier een idee krijgen van wat er op de afbeelding te zien is.

44: Zijn de teksten van je website gecontroleerd op fouten?

Zowel je bezoeker als de zoekmachines zien correct taalgebruik als een teken van professionaliteit en betrouwbaarheid. Een foutje kan iedereen overkomen, maar probeer het te voorkomen. Zeker als je lang bezig bent met een tekst komt het nog wel eens voor dat je er op een gegeven moment zo middenin zit dat je de meest opvallende fouten over het hoofd begint te zien. Leg je teksten daarom af en toe even een paar dagen aan de kant zodat je ze daarna weer kritisch kunt lezen, of laat ze keuren door iemand anders.

45: Bevat je website bullet-points, opsommingslijsten, witruimtes en/of gepaste afbeeldingen om de tekst te onderbreken?

Lange lappen tekst worden sneller als saai en eentonig ervaren. Dus maak je teksten wat speels en afwisselend door ze te onderbreken met dit soort elementen. Ook zoiets als de eerdergenoemde koppen-structuur helpt bij het onderbreken van tekst. Het zorgt voor ademruimte en een afwisselend visueel ritme op de pagina.

46: Voorkom je onnodige content?

Des te meer informatie je presenteert, des te groter de kans dat je je bezoeker overrompelt of verwart. Wees selectief met wat je allemaal op je website zet en ga vooral na wat je bezoeker belangrijk vindt. Dezelfde regel als bij het hoofdmenu en het contactformulier geldt waarschijnlijk ook hier: naarmate de aandacht op internet terugloopt kun je beter iets minder laten zien dan iets meer. Want als drie pagina’s beter gelezen worden dan vijf, dan geldt naar alle waarschijnlijkheid ook dat dat een tekst van 500 woorden sneller in zijn geheel gelezen zal worden dan een tekst van 1.500 woorden.

47: Voorkom je het gebruik van uitroepingstekens?

Uitroepingstekens!!! ervaart bezoeker vaak als schreeuwend. En hetzelfde geldt voor HOOFDLETTERS. Laat staan een COMBINATIE VAN BEIDE!!!

48: Voorkom je het gebruik van woorden die volledig bestaan uit hoofdletters?

Mensen kunnen hoofdletters (ook wel kapitalen ↗ genoemd) minder goed lezen dan kleine letters (ook wel onderkast ↗ genoemd). En daarnaast worden hoofdletters (zoals gezegd) vaak ervaren alsof ze schreeuwen.

49: Voorkom je het gebruik van puntjes of spaties tussen letters?

De zoekfunctie kan zijn werk niet doen wanneer je woorden als w.o.o.r.d.e.n of w o o r d e n schrijft en daarnaast ze zijn minder goed leesbaar. Sommige mensen vinden dit speels of willen op deze manier de aandacht vestigen op een bepaald woord. Maar doe het alsjeblieft niet.


Design, typografie, lay-out en opmaak

Een checklist die opgesteld is door een ontwerper met een eigen designstudio en dan is design het laatste item op de lijst? Inderdaad. En dat is wat de beste designers doen als het gaat om interactieve producten zoals websites: de functie krijgt voorrang op de vorm.


50: Ziet je website er professioneel en verzorgd uit?

Een verzorgd uiterlijk is belangrijk voor een positieve (eerste) indruk. Dit geldt in de echte wereld, maar zeker ook op internet. Mensen zijn namelijk enorm visueel ingesteld. Dus, ziet jouw website er goed uit? Oogt hij professioneel genoeg voor jouw product of dienst? Komt het uiterlijk van jouw website overeen met de prijs die je vraagt voor je product of dienst? En hoe scoort jouw website ten opzichte van je directe concurrentie als het gaat om design? Laat je website eens bekijken door een paar willekeurige mensen en vraag wat ze ervan vinden. Vraag het alleen niet aan je familieleden of vrienden, want die houden zich wellicht in. Vraag het mensen die je niet (goed) kent. En stel de vraag als een open vraag. “Vind je dit mooi?” is niet handig. “Wat komt er in je op als je deze website bekijkt?” is beter.

51: Heeft alle tekst op je website genoeg contrast?

Een duidelijk contrast tussen je teksten en de achtergrond is noodzakelijk voor optimale leesbaarheid. Zwarte letters op een witte achtergrond is qua contrast vrijwel altijd goed. Maar lichtgrijze tekst valt bijvoorbeeld weg tegen een witte achtergrond en dat is niet handig. Bij tekst op websites geldt heel duidelijk de regel: de vorm volgt de functie. En de functie (het lezen van de tekst) is prioriteit nummer één.
Onthoud ook dat verschillende lettertypes verschillende contrasten hebben, omdat het ene lettertype dikker is dan het andere. Dus ook de keus voor een bepaald lettertype dien je te maken met leesbaarheid als hoofddoel. Als je het hebt over zwarte letters op een witte achtergrond dan is een ‘dik lettertype A’ vaak beter leesbaar dan ‘minder dik lettertype B’. Simpelweg omdat dikkere letters meer zwart bevatten. Tenzij je ‘minder dik lettertype B’ natuurlijk gaat vergroten. Ook dan neemt het contrast immers toe. Een lettertype van het formaat van 16 punten heeft meer contrast dan hetzelfde lettertype van 10 punten in dezelfde kleurstelling.

52: Hebben alle teksten op je website de juiste lettergrootte?

Lettergrootte stipte ik al even aan bij letter-contrast, maar los van het contrast is het belangrijk dat je letters sowieso groot genoeg zijn. Hierbij kun je waarschijnlijk het beste richten op de vuistregel: liever iets te groot dan iets te klein. Bij kleine letters moet een bezoeker sneller met zijn neus op het beeldscherm gaan zitten. Vooral als diegene minder goed zicht heeft. Maar bij te grote letters is het enige primaire nadeel dat er wat minder woorden op één zin passen.
Jarenlang heb ik een lettergrootte van 16 pixels aangeraden als optimaal minimum omdat dit vrijwel voor iedereen goed leesbaar was. Maar nu zijn we jaren verder en smartphones en tablets zijn enorm populair. Het voordeel van de schermen van deze apparaten is dat ze vrijwel allemaal een HD-display hebben. Dit betekent dat de letters ontzettend scherp zijn (zoals al even aangehaald in het item: selecteerbare tekst) en deze scherpte van de letters heeft een zeer positieve invloed op de leesbaarheid. Vroeger werden kleine letters namelijk vaag en korrelig, maar met HD-display’s blijven de letters haarscherp hoe klein ze ook worden. Je zou kunnen zeggen (hoewel het niet helemaal zo wart-wit is) dat een lettertype van 10 pixels op een smartphone van nu even goed leesbaar is als een lettertype van 15 pixels op een computerbeeldscherm van 10 jaar geleden. Kortom: je kunt tegenwoordig letters kleiner maken en ze tegelijkertijd leesbaar houden. Aan de andere kant is er nog steeds een grote groep mensen die minder goed zicht heeft, dus wat mij betreft blijft het verstandiger om te richten op: liever iets te groot dan iets te klein.
Wel is een optimale lettergrootte is nu lastiger te geven omdat we inmiddels apparaten met beeldschermen hebben die gaan van een paar inch tot aan widescreen computermonitors van meer dan 25 inch. En daar komt ook nog bij dat je bij al die apparaten op een verschillende afstand van het beeldscherm zit, wat eveneens invloed heeft op de leesbaarheid. Een nieuwe techniek die ‘responsive typography’ heet probeert dit probleem op te lossen, maar deze techniek is nog verre van standaard.
Om het tot slot nog een slag lastiger te maken heeft ook het soort lettertype invloed op de leesbaarheid. Des te drukker het lettertype, des te groter de letters moeten worden om de tekst goed leesbaar te maken. En des te minimaler of strakker het lettertype, des te leesbaarder het zal zijn op kleinere formaten.
Alles samen bekeken is het lettertype-vraagstuk een heel groot en belangrijk gebied waar ik eenvoudig een heel essay aan zou kunnen wijden. Maar voor nu zou ik zeggen: neem 16 pixels als minimumgrootte voor je lettertypes en eventueel 14-15 pixels op smartphones als uitzondering. Twijfel je? Maak het dan ietsje groter.

53: Hebben de teksten op je website de juiste tekenafstand en regelafstand?

De laatste twee onderdelen die veel invloed hebben op de leesbaarheid van je teksten zijn de tekenafstand ↗ (de afstand tussen de letters) en de regelafstand ↗ (de verticale afstand tussen de zinnen). Het lastige hiermee is dat er niet echt een vuistregel voor is qua optimale instelling. Dit hangt erg samen met het lettertype, net als bij het contrast en de lettergrootte. Echter, als letters te erg in elkaar gedrukt worden (minder tekenafstand) of te ver uit elkaar staan (meer tekenafstand) dan gaat het ritme uit de tekst en dan gaat het lezen van de tekst lastiger. Dit is iets wat je vrij snel zal merken.
Met regelafstand is dit een slagje lastiger. Hier moet je iets meer gevoel voor ontwikkelen. Wanneer regels te dicht op elkaar staan dan zie je dat snel, maar wanneer ze verder uit elkaar gaan staan dan heb je daar niet direct last van. Sterker nog: des te verder de regels uit elkaar staan, des te makkelijker je ogen kunnen volgen op welke regel je bent. Dus de regelafstand heeft veel invloed op hoe goed wij mensen van de ene naar de andere regel kunnen gaan met onze ogen. Teveel regelafstand en er komt veel loze ruimte tussen de zinnen en de structuur en het ritme gaat uit de tekst. Te weinig regelafstand en het menselijk oog kan niet goed overzien op welke regel het precies is. Hier zou ik zeggen: liever iets te veel regelafstand dan te weinig. Maar speel ermee. En als het gaat om de tekenafstand: kom daar alleen aan als je echt weet wat je doet en als je het een en ander weet van typografie. Doorgaans is de standaardinstelling bepaald door de lettertype-ontwerper en dat is in 99% van de gevallen heel goed uitgedacht.

54: Zijn de belangrijkste onderdelen op je website benadrukt, groter,, of opvallend?

Als de sectie ‘Inschrijven’ of ‘Contact’ belangrijk is, maak deze dan opvallender en meer prominent ten opzichte van de andere onderdelen op de pagina. Stuur de aandacht van je bezoeker naar de onderdelen die belangrijk zijn. En dim eventueel de andere items op de pagina een beetje zodat er niet meerdere onderdelen zijn die met elkaar concurreren om de aandacht.

55: Wordt ruis voorkomen op je website?

Foto’s, citaten, veel verschillende soorten typografie, video’s en icoontjes zijn allemaal opvallende beeldelementen. Des te meer elementen er op je pagina’s te zien zijn, des te sneller jouw bezoeker het overzicht verliest en des te groter de kans dat je je bezoeker afleidt van datgene waar hij voor kwam. Less is vaak more. Al helemaal op kleine schermen zoals die van smartphones. Kies je visuele elementen dus zeer kritisch. Des te meer er op de pagina gebeurt, des te sneller er sprake is van ruis.

56: Voorkom je dat je bezoeker ergens horizontaal moet scrollen?

Horizontaal scrollen wordt vaak als frustrerend ervaren. Doe je bezoeker een lol en voorkom horizontaal scrollen. Verticaal scrollen (of swipen) is volledig ingeburgerd. Men verwacht dit. Het is zelfs een automatisme voor veel mensen. Maar horizontaal scrollen is nooit op dezelfde manier doorgebroken en het is daarom verre vanzelfsprekend. Zelfs wanneer je bezoeker het niet vervelend zou vinden om te doen dan is het alsnog onwennig en onverwacht.
Overigens doel ik hierbij voornamelijk op de primaire content van je website. Want kleine secties met content kun je als uitzondering zien. Binnen bepaalde websites is het namelijk een zeer verstandig gebruik van ruimte om een soort kleine carousel te hebben waar je even snel horizontaal doorheen kunt bladeren voordat je verticaal verder leest in de primaire content.

57: Zijn de pagina’s van je website opgedeeld in vlakken?

Vlakverdeling is belangrijk voor een professionele uitstraling en voor het overzicht binnen je pagina’s. Denk daarom in termen van vlakken. Zoals: een vlak voor je menu, een vlak voor je logo, een vlak voor je content, een vlak voor je footer, etc. Het is verstandig om deze vlakken op een visuele manier van elkaar te scheiden. Zo vormen ze afgebakende secties op iedere pagina en worden ze een visuele leidraad die je bezoeker makkelijk kan volgen. Ook leiden deze vlakken weer tot consistentie en voorspelbaarheid, wat je bezoeker meer grip geeft op je website.

58: Voorkom je het gebruik van veel verschillende soorten tekstopmaak?

Het laten opvallen van bepaalde onderdelen binnen een tekst noemen we typografische accentuering ↗. Maar teveel verschillende soorten lettertypes of tekstopmaak (zoals vet, cursief en kleurgebruik) maken een pagina druk en onoverzichtelijk. ‘Less is more’ geldt nergens zo nadrukkelijk als binnen website-typografie. Zelf richt ik vaak op maximaal twee verschillende lettertypes (een lettertype voor de titels en een lettertype voor de body-tekst) en daarbinnen gebruik ik vooral de lettergrootte van de koppen om de tekst afwisselend te maken. Zelden gebruik ik vetgedrukte woorden. En cursieve letters reserveer ik meestal voor citaten. Kleur gebruik ik doorgaans hooguit in links of titels en verder zo weinig mogelijk. En het onderstrepen van tekst reserveerde ik meestal uitsluitend voor links en interactieve onderdelen. Als je jezelf op deze manier dwingt om je teksten rustig te houden dan straalt dat vaak positief af op je hele website. Veel mensen (vooral de serieuze bezoekers van je website) waarderen rust en regelmaat.

59: Voorkom je het gebruik van animaties op de website?

Animaties zijn niet per se slecht: mits ze een doel en een toegevoegde waarde hebben. Een button die van vorm verandert als je er met je cursor boven hangt is leuk, maar het voegt in veel gevallen weinig toe. De cursor die verandert in een handje vertelt al dat dit een klikbaar onderdeel is en los daarvan werkt deze animatie niet bij touchscreens.
Animaties kunnen wel wat toevoegen als er een moment is waarop je bezoeker iets doet waar je website vervolgens op moet reageren. Wanneer je bijvoorbeeld een inzending verstuurt via een contactformulier en het duurt een paar seconden, dan kan het waardevol zijn als er een cirkeltje gaat draaien of een balkje volloopt. Op die manier weet je bezoeker dat er iets gebeurt en dit remt zijn ongeduldigheid. Maar ook in dit geval volgt dus de vorm na de functie.

60: Voorkom je het gebruik van pop-ups op je website?

Pop-ups zijn extreem vervelend. Niemand is er fan van. En zoals al even aangehaald bij het item over ‘openen in een nieuw venster’ werkt de terug-knop van je browser niet bij iets dat in een nieuw venster opent. Voorkom pop-ups te allen tijde.


Je hebt de usability-checklist voltooid!

Hoe sta je er voor?

Zoals gezegd is deze vragenlijst er niet om een 100% rigide structuur voor een succesvolle website te bieden. Ikzelf wijk met mijn eigen site bijvoorbeeld af op een aantal punten. Als sommige vragen niet van toepassing zijn of als je er een aantal met ‘Nee’ moet beantwoorden dan is dat niet direct een probleem. Deze checklist is vooral ontwikkeld om je te laten zien hoe je website globaal scoort op 60 belangrijke usability punten. Daarnaast is het een soort mini-cursus die ervoor dient om meer bewustwording te creëren omtrent de gebruiksvriendelijkheid van websites. En in veel gevallen hoor ik van mensen dat de kennis van dit vakgebied uiteindelijk 10x waardevoller voor ze was dan dan de daadwerkelijke score van hun website. Websites zijn immers vaak in beweging, maar kennis is voor het leven. Als je de hele lijst met vragen doorlopen hebt mag je je in ieder geval tevreden stellen met het idee dat je in de top 1% van Nederland zit als het gaat om usability-kennis. En dat is leuk toch? En daarmee kom ik op het volgende:

Aan deze checklist opgeteld meer dan 175 uur gewerkt. En ik zou het enorm waarderen als je hem deelt met andere geïnteresseerden. Zo wordt de impact van al het werk dat ik erin gestopt heb groter. En het zal onherroepelijk leiden tot meer gebruiksvriendelijke websites en een fijnere internetervaring voor ons allemaal.

Deel de checklist via deze links

paulchristian.nl/wuc/
paulchristian.nl/checklist/
paulchristian.nl/website-usability-checklist/

Wil je verwijzen naar een specifieke sectie in de checklist? Bekijk dan de index voor snelle referentie hieronder.

Heb je een vraag of behoefte aan advies?

Neem dan contact op via: studio@paulchristian.nl
Sinds eind 2021 heb ik me toegespitst op logo ontwerp en identity design, maar al mijn kennis en ideeën omtrent website-usability en user experience design zijn nog beschikbaar binnen advies- en brainstormsessies.

Index voor snelle referentie