Over deze checklist

Eind 2012 publiceerde ik een uitgebreide website usability checklist op mijn website die ik had ontwikkeld als onderdeel van mijn scriptie. In die scriptie deed ik onderzoek naar de kwaliteit van de websites van Nederlandse psychologen en om die kwaliteit te meten (vooral het gebruiksgemak van de websites) was een checklist nodig. Echter, alle usability checklists waren in die tijd nog Engelstalig omdat Amerika ver voorop liep op dat gebied. Daarom heb ik mij toen gebogen over 5 hoog-aangeschreven boeken (en tig artikelen) over dit onderwerp en vervolgens zelf een Nederlandstalige checklist ontwikkeld. Na mijn afstuderen en het publiceren van mijn scriptie zette ik deze checklist online zodat iedereen er zijn voordeel mee kon doen.

Update 2019

In 2019 was deze checklist inmiddels door meer dan 8.000 mensen gelezen en was het tijd voor een update. Smartphones en tablets hebben het internet en het gebruik ervan flink veranderd ten opzichte van 2012 en bij deze publiceer ik de heruitgave van mijn usability checklist. Een ‘revised edition’ zogezegd.
Ik heb de checklist uitgebreid, up-to-date gemaakt, opgefrist, sommige onderdelen geschrapt, andere onderdelen toegevoegd en het geheel prettiger- en beter leesbaar gemaakt. Deze herziende checklist kun je gebruiken om inzicht te krijgen in usability in het algemeen of om je website (of web-app) tegen het licht te houden en te beoordelen.

Inleiding

Naast het geven van inzicht over usability en het belang ervan is het specifieke doel van deze checklist dat je zoveel mogelijk vragen met een ‘Ja’ kunt antwoorden. Niet iedere vraag behoeft een volmondig ‘Ja’ en deze selectie van vragen is niet in steen geschreven. Er zijn uitzonderingen mogelijk en afhankelijk van de website, de doelgroep en de markt is een ‘Nee’ soms op zijn plaats. Gebruik deze checklist dus vooral om een globale indruk te krijgen van het gebruiksgemak van je website. De checklist bestaat uit 60 vragen en behandelt de volgende website-onderdelen:

Onthoud dat usability zich niet alleen beperkt to het makkelijker en toegankelijker maken van websites. Uiteraard is het van groot belang dat mensen hun weg kunnen vinden binnen jouw website, want dat bepaalt direct of ze klant (kunnen/willen) worden of niet. Maar goede usability wekt daarnaast vertrouwen bij je bezoeker en dit vertrouwen vertaalt je bezoeker onbewust door naar jou, je hele website en je onderneming. Usability werkt dus veel dieper door dan je zou verwachten en het kan een serieuze factor zijn in het succes van je bedrijf.
Laten we met de checklist beginnen bij:

De homepage

De Homepage is de ‘Home’-pagina van je website. De startpagina/beginpagina/voorpagina waarop veel van je bezoekers beginnen of binnenkomen.

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

Maak het jezelf en je bezoekers gemakkelijk en gebruik een domeinnaam die je bezoeker goed kan spellen en onthouden. En daarnaast: extensies zoals .nl en .com zijn algemeen bekend, maar extensies zoals .xyz niet. Let daar ook op. Iets dat vertrouwd aanvoelt is iets waar mensen sneller op af gaan.

2: Gebruik je een ‘schoon’ en logisch website-adres voor je homepage?

www.jouwwebsite.nl is een duidelijk en overzichtelijk website-adres voor je homepage. Iets ervoor of erachter (zoals: www.site.jouwwebsite.nl/index.php) leidt vaak tot verwarring bij je bezoeker en het maakt je domeinnaam langer dan nodig is. Daarnaast is het ‘www’-gedeelte niet meer noodzakelijk en steeds vaker schrappen moderne browsers de aanduidingen die voor je domeinnaam staan uit de adresbalk (zoals: www, http en https).

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

“Wat is dit, wat kan ik hier en hoe kun jij mij helpen?” 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 waar ze op terechtkomen niet relevant voor ze zijn. Daarom hebben ze een nogal hechte relatie met de ‘terug’-knop van hun webbrowser. Maak dus zo snel als je kunt duidelijk dat jij relevant bent.

4: Bevat je homepage een slogan of bedrijfsmotto die duidelijk zegt wat het bedrijf doet of is?

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 bij of onder het logo en deze dient zowel beknopt als tastbaar te zijn. “Verreweg de beste!” is geen heldere slogan… Als je een hele heldere headline hebt, dan is een slogan in principe overbodig. Maar op andere pagina’s dan de homepage is een slogan wellicht waardevol omdat daar de headline niet te lezen is.

5: Staat het logo (van het bedrijf of de website zelf) op een opvallende plek en is hij groot genoeg om goed leesbaar te zijn?

Je logo is een herkenningspunt, een merkelement en teken van professionaliteit. Zorg ervoor dat deze consistent aanwezig is, duidelijk leesbaar is (ook op de kleine smartphone-beeldschermen) en professioneel overkomt.

6: Staat het logo links bovenaan de pagina?

Statistisch gezien is dit de meest voorkomende plek voor logo’s en het merendeel van je bezoekers zal hier jouw logo verwachten. Omdat wij van links naar rechts en van boven naar beneden lezen zien mensen op deze manier het logo als eerste.

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

Veel bezoekers verwachten dat ze op het logo kunnen klikken om naar de ‘homepage’ van de website (terug) te gaan. En steeds vaker dient het logo dus als een soort tweede ‘Home’-knop. Het voordeel op smartphones is hierbij dat over het algemeen het logo zichtbaar is, maar het hoofdmenu onder een zogenaamd hamburger menu staat (drie horizontale streepjes). Dit hamburgermenu moet de gebruiker eerst openklikken voor hij het hoofdmenu kan zien met daarin de ‘Home’-knop. Een ‘klikbaar’ logo waarmee je naar de homepage kunt gaan kan dus een extra klik schelen op smartphones en wellicht op tablets.

8: Zijn de belangrijkste onderdelen/pagina’s van de website direct te bereiken via de homepage?

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 gebruik aan horizontale ruimte voor een hoofdmenu. Hierdoor ontkom je soms niet aan een eerdergenoemd hamburgermenu. Maar de vuistregel blijft overeind: des te minder je 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 of actie van je bezoeker verwijderd.

9: Voorkom je het gebruik van ‘widgets’ die niet relevant zijn voor je bezoeker?

Laten zien hoeveel bezoekers je hebt gehad deze week 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 website. En ook over de populaire sociale media-widgets heb ik een uitgesproken mening, maar die wordt niet door iedereen gedeeld of gewaardeerd… Ik vind het ruis. Afleiding. Visueel onaantrekkelijk en tegelijkertijd zeer bepalend. In het beste geval laat het zien hoe populair je bent (wat vertrouwen kan wekken bij je bezoeker), maar in veel gevallen is het niets meer dan een open deur naar de bekende sociale media-websites. Om over de privacy-implicaties nog maar te zwijgen.

10: Is de homepage anders en afwijkend ten opzichte van de 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 kaft 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 te beredeneren.

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

De homepage kan goed dienen als korte ‘teaser’ of ‘preview’ voor de meest waardevolle diensten of producten 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/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 de bezoeker benadrukt op de homepage?

Wanneer het bijvoorbeeld je belangrijkste doel is dat je bezoeker zich inschrijft voor je nieuwsbrief, zorg er dan voor dat je dit duidelijk maakt en geef je bezoeker de aanwijzingen 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 hoeven scrollen?

Kan je bezoeker zonder te scrollen de belangrijkste onderdelen van de homepage zien? Dit gebied noemt men ‘above the fold’. Denk aan het hoofdmenu, de navigatie, het logo, de slogan en/of welkomsttekst etc. Houd ook rekening met kleine smartphone-beeldschermen. Hierop is de ruimte nog beperkter en dus is het zaak om kort en bondig te zijn zodat deze onderdelen zichtbaar zijn zonder te hoeven ‘swipen’.

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

Een ‘fysiek’ adres en eventueel je telefoonnummer, mailadres of WhatsApp-nummer 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 voorpagina. Onthoud dat het internet niet daadwerkelijk bestaat als ‘fysieke wereld’… Het zijn ééntjes en nulletjes, tekst en plaatjes. Allemaal erg ontastbaar en vrij abstract… Het plaatsen van fysieke elementen waaruit blijkt dat er een ‘echt persoon’ of een ‘echt bedrijf’ achter de site zit, wekt vertrouwen bij sceptische bezoekers.

15: Voorkom je het gebruik van een animatie of muziek op je homepage?

Het gebeurt niet vaak meer, maar het komt soms nog voor; een overdonderende ‘intro-animatie’ voor een website of een muziekstuk dat automatisch begin te spelen bij binnenkomst. Doorgaans is het 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 mobiel datagebruik of tot ergernis leiden bij trage(re) internetverbindingen. Ik zeg: niet doen, tenzij je heel goed weet wat je doet.

Het hoofdmenu

Het hoofdmenu is als het ‘dashboard’ van je auto. En zeker even belangrijk. Niets bepaalt de interactie die je bezoeker heeft met je website zo erg als het hoofdmenu.

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

Idealiter boven de inhoud, in de buurt van het logo en bovenaan de pagina. Zorg er ook voor dat het hoofdmenu en de knoppen/paginaverwijzingen die erin staan groot genoeg (en dus optimaal leesbaar) zijn. Voor smartphones (en vaak voor tablets) geldt dat een hamburger-menu meer en meer ingeburgerd raakt als ‘navigatiepunt’. Onder deze knop verwacht men het hoofdmenu op beeldschermen waar de horizontale breedte te klein is om het volledige hoofdmenu te tonen. Dit hamburger-menu is zelden nodig op grote beeldschermen zoals die van laptops, grote tablets en daadwerkelijke pc-monitoren omdat daarbinnen genoeg ruimte is om het volledige menu te tonen. Ook op die beeldschermen wordt echter soms het hamburger-menu ingezet omdat het schoner 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 minder ideaal.
Hoofdmenu’s aan de linker en rechterkant waren daarnaast vroeger erg gewoon. Tegenwoordig wordt meer en meer op een horizontale structuur ingezet. Dit mede omdat er vaak nogal wat ruimte verloren ging onder die zij-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 nette en subtiele oplossing.

17: Staat het hoofdmenu op iedere pagina van je website op dezelfde plaats?

Consistentie is belangrijk en het 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 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 ‘dropdown’ of ‘rollover’-menu’s 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. Het overzicht dat je bezoeker heeft is stukken minder wanneer een deel van je buttons/links verborgen is. Een 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 het hoofdmenu?

Mensen zijn snel het overzicht kwijt binnen websites. Streef 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 = minder overzicht en minder opties = 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. “Kan een bezoeker inschatten wat hij zal vinden onder een pagina met deze naam, voordat hij klikt?” Dit is een goede vraag om jezelf te stellen. 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 bijvoorbeeld dikwijls ‘Over ons’ aangepast naar ‘Profiel’ of ‘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. Daarom verkies ik zelf liever duidelijkheid boven eenvoud. Zorg dus dat je hoofdmenu een ‘Home’-knop bevat. 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 knop/link in het hoofdmenu wanneer een bezoeker deze indrukt, zodat hij weet welke link of knop ‘actief’ is en op welke pagina hij nu zit? Uiteraard is dit vaak te zien aan de pagina-naam, maar idealiter is het hoofdmenu zo helder dat puur alleen daaraan al te zien is waar een bezoeker zich bevindt. Nog één slag helderder kan het zijn om de actieve pagina in het hoofdmenu tevens ‘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. Maar sowieso dient de staat van een actieve link/knop te veranderen. Dit kan een kleurverschil zijn ten opzichte van de andere items in het menu, een onderstreping of iets anders. Zolang het actieve item maar opvalt tussen de rest van de items.

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 daarnaast speelt de omvang van een website hierin een rol. Voor een website van vijf pagina’s kan het wellicht niet uit om zoekfunctie toe te voegen want een bezoeker kan in vijf klikken door de hele website gaan. Maar heeft een website 80 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 moet “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 toch twijfelt of niet gewend is aan de Entertoets voor deze actie is het prettig.

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 zeg ik vaak.

26: Staat er een duidelijke ‘Contact’-optie in het hoofdmenu die leidt naar alle contactinformatie die voor de bezoeker interessant 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 is handig maar een direct e-mailadres als extra optie is ook handig, voor mensen die later willen mailen of een bijlage willen toevoegen. Daarnaast ben ik een voorstander van het plaatsen van een 06-nummer voor telefonisch contact en eventueel voor WhatsApp-contact. Vaak heeft het vermelden van een telefoonnummer al een vertrouwenwekkend effect. Zelfs als mensen niet gaan bellen weten ze dat het kan, mocht dat nodig of handig zijn.

27: Gebruik je een broodkruimelspoor (breadcrumbs) in je website?

Broodkruimels laten het ‘spoor’ zien dat je bezoeker heeft afgelegd om te komen waar hij nu is. Deze functie 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 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 › Apple MacBook Pro’.
In dit broodkruimelspoor dient de ‘Home’ als het eerste niveau. ‘Laptops’ als 2e niveau. ‘Apple’ als 3e niveau. En ‘Apple MacBook Pro’ als 4e niveau. Met vertakkingen die zo diep gaan is een broodkruimelspoor ideaal. De bezoeker ziet waar hij is en hoe hij er gekomen is in één oogopslag. En als hij één niveau terug wil, maar niet helemaal terug wil naar niveau één, dan klikt hij simpelweg op het een-na-laatste woord. Idealiter staan deze broodkruimels bovenin de pagina’s van de website of in de buurt van het hoofdmenu. Maar let wel op dat broodkruimels (zeker met lange paginanamen erin) lastig kunnen doen op smalle schermen zoals die van smartphones. De ruimte om al deze woorden naast elkaar te zetten is namelijk beperkt op deze smallere beeldschermen.

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 je navigatie uit selecteerbare tekst of vectors, in plaats van grafische knoppen?

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 afbeeldingen of Flash-buttons niet/slecht lezen en beoordelen, dus tekstlinks (klikbare/selecteerbare tekst) hebben een meerwaarde. Daarnaast is dit 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 afbeeldingen die pixels bevatten. Vectorbestanden blijven in principe oneindig scherp, hoe geweldig de beeldschermen in de toekomst ook worden. Vector schaalt mee en wordt niet vaag. Pixelafbeeldingen worden wel vaag (of kleiner) wanneer het beeldscherm waarop je ze bekijkt een veel betere resolutie heeft dan die van de afbeelding. Toen bijvoorbeeld de iPhone voor het eerst uitkwam met een haarscherp beeldscherm (het ‘Retina display’ van de iPhone 4) in 2010 bevatte het overgrote deel van de websites die daarop bekeken werden nog relatief vage foto’s, maar daarnaast toonden ze scherpere tekst dan ooit te zien was geweest op een telefoonscherm.

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 de bezoeker haast heeft. Een gemiddelde bezoeker geeft een website in eerste instantie niet meer dan een paar seconden de tijd om hem te overtuigen. Gebruik dus korte, bondige, duidelijke links en beperk de leestijd waar het kan.

31: Zijn alle links onderstreept of duidelijk ‘klikbaar’ en vallen ze op in de 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 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 een signaal van iets ‘interactiefs’ (“Hier kan ik iets mee doen…”). En 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 veel duidelijkheid. Een andere kleur voor de 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 of onderscheiden 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 80 pagina’s heeft.

33: Hebben alle links dezelfde kleur?

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 en aangeklikte 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 verschilt van de rest van de website.

34: Voorkom je dat er links op je website zijn die een nieuw venster openen?

Gebruik de ‘openen in een nieuw venster’-optie 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 wordt geopend. Er is immers geen pagina om naar terug te gaan… Daarnaast zijn links die openen in een nieuw venster soms een doorn in het oog van smartphone-gebruikers. Ze moeten meer schakelen tussen openstaande tabs en in bepaalde gevallen hebben ze niet eens door dat er een nieuw venster geopend is.
Het enige argument vóór het ‘openen in een nieuw venster’ dat ik vaak hoor is dat mensen dan het idee hebben dat bezoekers dan ten minste op de website blijven ook al verwijst die site naar een andere website. ‘www.jouwwebsite.nl’ blijft immers open staan wanneer je verwijst naar ‘google.nl’ en die in een nieuw venster opent… Ik vind dit echter ‘arm denken’. 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 eerder werken aan wat je je bezoekers te bieden hebt.
De enige uitzondering die ik nog wel eens 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 onderbreekt zijn ‘lees flow’ en bovendien moet hij waarschijnlijk weer zoeken naar waar hij gebleven was mocht hij naar een andere website klikken en daarna weer teruggaan naar de checklist.

35: Heb je een contactformulier op je website? Zo ja, bevat deze dan minder dan 4 invul-veldjes?

Meer dan de 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 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 gehaast en iedere vraag waarop een antwoord moet worden gegeven is een extra drempel. Er zijn meerdere grote onderzoeken geweest naar contactformulieren waaruit bleek (net als bij de hoeveelheid opties in het hoofdmenu) dat 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 met jou 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 komt” zal hij denken. Zelf richt ik vaak op website-onderdelen die op alle pagina’s terugkomen (zoals het hoofdmenu en de footer (onderkant website)) en daar zet ik dan een contactmogelijkheid in.

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 een totaaloverzicht van de 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 lijst-opzet. In dat geval werk je met bullet-points en sub-bullet points en misschien zelfs met sub-sub bullet-points. Ideaal is dat wanneer een pagina drie niveaus diep in de website zit, dat dat te zien is aan de structuur en het niveau van de bullet-points.
Een groot voordeel van een sitemap is daarnaast dat Google en andere zoekmachines er erg fan van zijn. Zij hebben namelijk één pagina die hun een goed overzicht biedt van de totale website. Dus als zij simpelweg die ene pagina in de gaten houden dan hebben zij als het goed is altijd een volledig en up-to-date beeld van je website. Je kunt zelfs specifiek aangeven bij Google waar je sitemap staat zodat zij deze regelmatig kunnen checken.

De website inhoud (teksten, afbeeldingen en meer)

“Content is king” wordt vaak gezegd en ‘content’ is de Engelse term die gebruikt wordt om de ‘website inhoud’ te omschrijven. Dit kan eigenlijk alles omvatten: van tekst tot foto’s en van video tot audio. Dit is waar je bezoekers uiteindelijk voor komen…

38: Gebruik je 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: Gebruik je koppen en sub-koppen om je teksten te structureren?

Koppen (op het internet ook wel ‘H-tags’ genoemd) zijn als het ware titels, subtitels en sub-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), meerdere hoofdstukken (de H2’s of Kop 2’s) en soms heb je subhoofdstukken of alinea-titels (de H3’s of Kop 3’s). Soms gaat het niveau zelfs nog veel dieper (vaak gaat het binnen websites tot aan Kop 6) 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 bijvoorbeeld 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 wat de belangrijke onderwerpen en sleutelwoorden in de tekst zijn.

40: Leg je uit hoe en waarom je bezoeker iets moet doen? En let je daarbij op je toon?

‘Naam:’ is wat anders dan ‘Wat is je naam?’. Wees hierin wat hulpvaardig en menselijk. Je praat tegen een persoon, niet tegen een robot. Bovendien doet toon erg veel. “Wat is je naam?” klinkt heel anders dan “Naam?” en het ene wekt meer sympathie op dan het andere.
Daarnaast is het goed om de actie/interactie-stappen op je website wat in te leiden. En ook daarbij komt het anders over wanneer een bezoeker ineens een contactformulier op zijn scherm krijgt, dan wanneer er een korte tekst boven dat formulier staat die inleidt waarom dat formulier van belang is. Dit staat 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. En kom je er even niet uit of is iets niet duidelijk? Bel of (App) gerust.”

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

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

42: Zijn de foto’s/afbeeldingen op je website relevant?

Wanneer je foto’s of afbeeldingen van je product of dienst toont kunnen deze van waarde zijn voor je bezoeker. Maar foto’s of afbeeldingen puur als decoratie zijn vaak eerder een bron van afleiding.
Foto’s en afbeeldingen zijn enorm geschikt om de ‘droogheid’ van een tekst te onderbreken en 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 foto’s/afbeeldingen op jouw website een goede en beschrijvende naam en alt-tag?

Een goede naam voor je afbeeldingen helpt zoekmachines om je afbeelding op waarde te schatten. Voor jouzelf is het daarnaast vooral goed voor de overzichtelijkheid op de server waar al je foto’s bij elkaar staan. En voor bezoekers die een foto of afbeelding opslaan is het wel zo prettig dat de bestandsnaam iets zegt over het bestand. Kortom: ‘paul-christian-greidanus-profielfoto.jpg’ is vele malen veelzeggender dan ‘IMG_3162.jpeg’.
Los daarvan worden deze namen en alt-tags opgepikt door screenreaders en mensen met een visuele beperking kunnen op die manier een idee krijgen van wat er op de foto/afbeelding te zien is.
Het laatste voordeel is dat (mede door al deze redenen) Google en andere zoekmachines het goed op orde hebben van je foto’s/afbeeldingen zien als een groot pluspunt en dit belonen zij in de zoekrsultaten. Kortom: een win-win-win-win-win-situatie.

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 ‘in’ zit dat je de meest opvallende fouten over het hoofd begint te zien. (Is mij ook wel eens overkomen). Leg je teksten daarom af en toe even een paar dagen aan de kant zodat je ze weer kritisch kan lezen of laat ze keuren door iemand anders.

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

Eentonige (lange) lappen tekst worden sneller als saai ervaren. Maak je teksten wat speels, afwisselend en ‘leuk’ door ze te onderbreken met dit soort elementen. Ook zoiets als de eerdergenoemde koppen-structuur helpt bij het onderbreken van tekst. Het zorgt voor visuele ‘ademruimte’ en een ander ritme in de pagina. En hetzelfde geldt voor de genoemde relevante foto’s en afbeeldingen.

46: Voorkom je het gebruik van 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 later zien dan iets meer. 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 in je teksten?

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

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

Wij mensen kunnen hoofdletters minder goed lezen dan kleine letters en daarnaast worden hoofdletters zoals gezegd vaak ervaren alsof ze schreeuwen.

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

De zoekfunctie werkt niet 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 vorm komt pas na de functie.

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 het professioneel genoeg voor jouw specifieke 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 de directe concurrentie als het gaat om design?
Laat je website eens bekijken door een paar willekeurige mensen en vraag ze ervan vinden. Vraag het alleen niet aan je familieleden of vrienden want die houden zich wellicht in… Vraag het aan een paar willekeurige personen. 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?

Contrast is belangrijk. 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: vorm volgt functie. De functie (het lezen van de tekst) is prioriteit nummer één en pas als dat optimaal is kun je gaan spelen met het design van de tekst.
Onthoud ook dat verschillende lettertypes verschillende contrasten hebben omdat het ene lettertype dikker is dan het andere. En ook de keus voor een bepaald lettertype dien je dus 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 in zijn geheel gaat vergroten. Ook dan neemt het contrast namelijk toe. Een lettertype van het formaat van 16 punten heeft altijd 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 met zijn neus op het beeldscherm gaan zitten voor hij het goed kan lezen (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. Nu zijn we echter jaren verder en zijn smartphones en tablets enorm populair. Het voordeel van de schermen van deze apparaten is dat ze vrijwel allemaal standaard 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 lettertypes namelijk vaag en korrelig, maar met HD-schermen zoals Apple’s Retina Display 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 iPhone van nu, even goed leesbaar is als een lettertype van 20 pixels op een computerbeeldscherm van een paar jaar terug. Kortom; je kunt letters kleiner maken en ze tegelijkertijd leesbaar houden.
Aan de andere kant is er nog steeds een grote groep mensen die minder goed zich heeft, dus wat mij betreft blijft het verstandiger om te richten op: liever iets te groot dan iets te klein. Maar 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 op te lossen, maar deze techniek is nog verre van standaard.
Om het op een laatste punt 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 het goed leesbaar te maken. 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 artikel aan zou kunnen wijden. 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 (afstand tussen de letters) en de regelafstand (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 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 kunnen onthouden waar we waren wanneer we van de ene naar de andere zin gaan. Te veel regelafstand en er komt veel loze ruimte tussen de zinnen en de structuur en het ritme gaat wat uit de tekst. Te weinig ruimte, en het menselijk oog kan niet volgen op welke regel je precies bent. Hier zou ik zeggen: liever iets te veel regelafstand dan te weinig. Maar speel ermee.
Maar het gaat om de tekenafstand: kom er alleen aan als je echt wet 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 prima.

54: Zijn de belangrijkste items/onderdelen op je pagina’s benadrukt, groter of opvallend?

Als de ‘Inschrijven’ of ‘Contact Opnemen’-knop link belangrijk is, maak dit dan duidelijk door hem opvallender en meer prominent te maken. Stuur de aandacht van je bezoeker naar die onderdelen die belangrijk zijn. En dim eventueel de andere items op de pagina wat zodat er niet meerdere visuele zaken zijn die onderling met elkaar concurreren om de aandacht.

55: Voorkom je ‘ruis’ 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.

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

Horizontaal scrollen wordt vaak als frustrerend ervaren. Doe jezelf en je bezoeker een lol en voorkom horizontaal scrollen. Verticaal scrollen (of swipen) is vrijwel 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.

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

Vlakverdeling is belangrijk voor het overzicht binnen je pagina’s en voor een professionele uitstraling. Denk daarom in termen van vlakken. Zoals; een vlak voor je menu, een vlak voor je logo, een vlak voor je tekst/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 en hem het vertrouwen geeft dat hij zijn weg er wel in weet te vinden.

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

Teveel verschillende soorten lettertypes of tekstopmaak (zoals vet, cursief en kleurgebruik) maken een website druk en onoverzichtelijk. ‘Less is more’ geldt nergens zo zwaar 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 vooral in links en verder zo weinig mogelijk. En onderlijning van tekst reserveer ik meestal ook uitsluitend voor links. Als je jezelf op deze manier dwingt om je teksten rustig te houden straalt dat vaak positief af op je hele website. Veel mensen (vooral de serieuze bezoekers van je website) waarderen rust en regelmaat meer dan je zou verwachten.

59: Voorkom je het gebruik van animaties?

Animaties zijn niet per se slecht; mits ze een doel en een toegevoegde waarde hebben. Een button die oplicht als je er met je cursor boven hangt is leuk, maar het voegt weinig toe. De cursor die veranderd in een handje vertelt al dat dit een klikbaar onderdeel is en los daarvan werkt deze ‘hover state’ toch niet met 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 waardvol zijn als er een cirkeltje gaat draaien of een balkje vol loopt. Op die manier weet je bezoeker dat er iets gebeurt en dit remt zijn ongeduldigheid.

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 wanneer iets in een nieuw venster opent. Voorkom pop-ups te allen tijde.

Nawoord

En hoe sta je ervoor?

Dit was mijn website usability checklist. Zoals gezegd is deze lijst er niet om een 100% rigide structuur voor een succesvolle website te bieden. Ikzelf wijk met mijn eigen site af op een aantal punten… En als sommige vragen niet van toepassing zijn of als je er een aantal met ‘Nee’ moet beantwoorden dan is dat echt niet direct een ramp. Deze checklist is er vooral om te zien hoe jouw website globaal scoort op 60 belangrijke usability punten en om je inzicht te geven in het belang van website usability.
In veel gevallen hoor ik bovendien achteraf dat de kennis van dit vakgebied uiteindelijk nog 10x waardevoller voor mijn lezers was dan dan uiteindelijke score van hun website op basis van de checklist. Websites zijn vaak immers vaak flexibel en enorm in beweging. Maar kennis is voor het leven.
Ik hoop dus vooral dat je dat eruit gehaald hebt: kennis en inzichten. En misschien heb ik je zelfs wel drastisch aan het denken gezet. Als je de hele lijst met vragen doorlopen hebt zit mag je je in ieder geval tevreden stellen met het idee dat het in de top 1% van Nederland zit als het gaat om usability-kennis.

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

Heb je er vragen over de checklist of specifieke vragen ten aanzien van een project waarin usability een belangrijke rol speelt? Neem dan even contact op.

Bedankt voor het lezen!

Deel de usability checklist via:

Deel de usability checklist via: