Wat betekent Usability?
Maak je website gebruiksvriendelijker door 10 richtlijnen te volgen.
Usability wordt vaak als term voor gebruiksvriendelijkheid van een product, dienst of website gebruikt. De gebruiksvriendelijkheid van een website is terug te brengen tot 3 kernfactoren, namelijk de termen effectiviteit, efficiëntie en naar tevredenheid (EET).
Een goed opgebouwde website kan namelijk er voor zorgen dat gebruikers een doel kunnen bereiken (effectiviteit), zonder daar onnodige stappen voor te doen (efficiënt) en daarbij ook nog eens goed gevoel hebben bij het gebruik (tevredenheid). Een website kan gebruikers beter ondersteunen als ze een navigatie snel begrijpen, de inhoud van de teksten kunnen volgen en pagina’s snel geladen worden, dit allemaal met het oog op ‘EET’.

Tevredenheid is misschien wel het belangrijkste usability onderdeel van de drie, want een website alleen maar ontwikkelen om bezoekers snel naar hun doel te leiden zal waarschijnlijk tot zeer saaie websites leiden. Een website moet ook mooi zijn en misschien wel leuk om te bekijken. Dat zie je ook wel terug bij websites die graag een bepaald gevoel willen meegeven aan een website. Effectiviteit en efficiëntie staan dus in dienst van de tevredenheid.
De usability criteria die de effectiviteit en efficiëntie bepalen van de website worden in tien richtlijnen in de onderstaande tekst besproken. Die richtlijnen zijn gebaseerd op de richtlijnen van Kassenaar uit zijn Handboek Usability. Voor elke usability richtlijn zijn een aantal regels op een rijtje gezet.
In hoeverre moet je de richtlijnen volgen?
De usability richtlijnen zoals weergeven hebben als doel om de effectiviteit en efficiëntie te vergroten. Ze bieden dus alleen ondersteuning als de tevredenheid onder de doelgroep vergroten. Ga dus niet de richtlijnen toepassen, omdat het moet. Houd met de implementatie van de richtlijnen ingedachte of ze van toepassing zijn op de doelgroep of de bijbehorende designkeuze.
De usability richtlijnen op een rijtje
1 Herkenbaarheid en bedrijfsinformatie: laat zien wie je bent
· Zorg voor items die je organisatie of website beschrijven. Gebruik een logo en een zin die de organisatie beschrijven. Een header waarop beeldmateriaal een voorproefje geeft van de website. De gebruiker dient op basis van het materiaal te weten, waar hij is en wat hij kan doen op de website.
· Wees voorzichtig met bedrijfsinformatie op een homepagina. Plaats dit zoveel mogelijk op de bestemde pagina, bijvoorbeeld op Over ons of Over ‘bedrijfsnaam’. Gebruikers die graag de historie willen lezen gaan vanzelf op zoek naar die pagina.
2 Navigatie: help de bezoeker zijn weg te vinden
· Plaats op elke webpagina dezelfde navigatiestructuur.
· Plaats het hoofdmenu, indien mogelijk, horizontaal boven in de pagina. Dit heeft onder andere te maken met het F-lezen. Gebruikers krijgen dan sneller een indruk van de website.
· Bied de bezoeker overal een weg terug naar de homepage met de tekstlink Home links in het hoofdmenu. Zorg er ook voor dat het logo een link is die leidt naar de homepage.
· Zorg ervoor dat de bezoeker weet op welke pagina hij/zij zit (broodpad, kop1, title, url).
· Beperk het hoofdmenu tot maximaal 7 items. Dit geeft het nodige overzicht voor de gebruiker.
3. Snelheid: toon je webpagina’s binnen 2 a 3 seconden
· Beperk de laadtijd van de homepage tot max. 2 a 3 sec (sneller is natuurlijk beter). Het is belangrijk dat je bezoekers in ieder geval op je website zijn. Andere pagina’s kunnen eventueel trager zijn, maar verlies niet het geduld van je bezoeker uit het oog.
· De snelheid is daarnaast ook belangrijk voor zoekmachines. Websites worden hoger gerangschikt als een snelle laadtijd hebben.
4. Zoeken: ondersteun je bezoekers in hun zoektocht
· Biedt altijd een zoekfunctie aan, de meerderheid van de bezoekers gaat niet alle pagina’s langs, ze zijn opzoek naar bepaalde informatie!
· Plaats een zoekfunctie boven in elke pagina. Maak deze goed zichtbaar en met genoeg invoerruimte (advies 20-25 tekens) en een knop met het opschrift Zoek/ Zoeken of een vergrootglas (tegenwoordig algemeen bekend als zoeksymbool).
· Tegenwoordig maken veel websites gebruik van een zoekkoppeling (een link naar de zoekfunctie). Esthetisch gezien mooier, maar wel weer een extra stap voor de gebruiker om zijn zoekopdracht in te vullen.
· Check ook of de zoekfunctie werkt. Als de zoekopdracht geen resultaat geeft, zorg er dan voor dat er ook buiten de filters wordt gezocht (laat dus niet standaard zoeken in één sectie). Een ander idee is de gebruiker andere suggesties te tonen.
· Naast het zoeken geeft een FAQ ook veel ondersteuning. Gebruikers neigen naast een zoekfunctie, te zoek naar antwoorden binnen een FAQ. Als je het dus gebruikt, is het van belang het bereikbaar te maken vanuit de hoofdnavigatie.
5. Opmaak: maak van je website een logisch geheel
· Zorg voor goede leesbaarheid van de pagina op een beeldscherm. Hanteer goed contrast tussen voor- en achtergrondkleur
· Gebruik kleuren die passen bij het doel van de website. Een veel gebruikte combinatie is blauw-wit, dat wekt het gevoel van vertrouwen op.
· Gebruik een heldere structuur en opmaak. Een goed uitgangspunt is de structuren van branche-genoten te analyseren. Als je de website hierop afstemt kan je er bijna zeker van zijn dat je gebruikers de website begrijpen.
· Houd daarbij rekening met verschillende apparaten en browsers, het kan zijn dat je website op verschillende wijze wordt gepresenteerd.
6. Teksten: zeg veel met zo min mogelijk woorden
· Schrijf kort: Overbodige tekst of aanvullende teksten, onder lees meer plaatsen of verwijderen.
· Schrijf de belangrijkste informatie eerst. Een veel gebruikte theorie is de omgekeerde piramide. Zaak is om eerst de conclusies van de tekst te beschrijven en daarna pas eventuele uitleg te geven.
· Maak de tekst geschikt om te scannen. Gebruik dus titels, witruimtes, bullits, en andere hulpmiddelen om dit te bereiken.
· Een goede houvast is: maximaal 5 zinnen van elk maximaal 15 woorden betekent maximaal 75 woorden per alinea.
7. Hyperlinks: zorg voor diepgang met duidelijk klikbare links
· Maak je links informatie dragend. Gebruik de linktekst om aan te geven waar de bezoeker terecht zal komen (geen ‘klik verder ..’, download brochure).
· Het advies is om een link altijd te laten openen binnen hetzelfde tabblad, mits de link leidt naar een externe pagina (andere website).
· Maak hyperlinks duidelijk herkenbaar ten opzichte van de omliggende tekst. Gebruik een afwijkende kleur voor hyperlinks (liefst de standaardkleur blauw) en laat hyperlinks onderstreept. Zorg ervoor dat bezochte hyperlinks herkenbaar zijn in een afwijkende kleur (liefst de standaardkleur paars).
8. Mobile: ondersteun de gebruikers ook op mobiele toestellen
· Zorg ervoor dat de website te gebruiken is op een mobiele toestel
· Kan de gebruiker zonder problemen zijn doel bereiken met zijn mobiele toestel, contactpagina of bestellen.
· Zorg voor een geoptimaliseerde versie van de site voor mobiele apparaten
· Laat de website altijd opstarten in de versie wat het meest geschikt is voor het gebruikte apparaat, maar geef wel de optie om voor een andere versie te kiezen.
· Gebruik bij voorkeur gebruik van de standaarden die gebruikers gewend zijn op een mobiel apparaat, bijvoorbeeld een hamburger-menu.
9. Accessibility: maak de website toegankelijk voor iedereen
· Voornamelijk van toepassing voor overheidsinstanties, want deze regel heeft als doel om de website voor iedereen toegankelijk te maken. Denk dan aan personen met beperkingen.
· Doe een quickscan op https://wcag.nl/ en bekijk hoe je een website toegankelijker kan maken.
· Een goede start om je website toegankelijk te maken is door alternatieve teksten (alt-teksten) voor afbeeldingen in te stellen, zodat spraakbrowsers ermee overweg kunnen.
· Vermijd buttons zonder tekst en waar gebruikers op basis van kleur een keuze moeten maken (bijvoorbeeld groen en rood).
10. Afbeeldingen en multimedia: ter ondersteuning inzetten
· Gebruik niet afbeeldingen en video in overvloed. Gebruik het alleen ter ondersteuning van het doel van de pagina. Houd hierbij rekening met de structuur en snelheid van de website.
· Geef de gebruiker altijd de controle over de multimedia, hij of zij moet zelf kunnen bepalen om bijvoorbeeld een filmpje te starten of te stoppen.
· Als je pictogrammen gebruikt, laat het dan duidelijk zijn waar ze voor staan. Zelfgemaakte icoontjes of icoontjes die niet algemeen bekend zijn kunnen gebruikt worden als een begeleidende tekst aangeeft waar ze voor staan.
Wil je toch meer dan alleen e-Learnings?
Plan een afspraak in voor een gesprek waarin een verdere samenwerking besproken kan worden.