De navigatie is de levensader van een website. Met behulp van een gebruiksvriendelijke navigatie stromen gebruikers moeiteloos door naar iedere pagina. Naast het ontwerp van de site en de inhoud is het dus belangrijk om ook veel aandacht te schenken aan de navigatiestructuur.
Een toegankelijke, duidelijke en overzichtelijke navigatie helpt gebruikers om sneller te vinden wat ze zoeken. Ook voor gebruikers met een beperking hoort de navigatie goed te werken. We leggen je alles uit over het ontwikkelen van een toegankelijke navigatie die voldoet aan richtlijnen zoals die van de Web Content Accessibility Guidelines (WCAG).
Inhoudsopgave
Waarom een goede website navigatie zo belangrijk is
De navigatie gaat verder dan het rijtje menu-items bovenaan de pagina. Het is het belangrijkste hulpmiddel voor bezoekers om hun weg te vinden tussen pagina’s en secties van pagina’s. In het ideale geval hoeven bezoekers niet of nauwelijks na te denken om hun weg te vinden.
Bij een intuïtieve navigatie is dat het geval. Bij een minder goed ingerichte navigatie kan het leiden tot frustraties, het afhaken van bezoekers en het missen van conversies. Een slechte navigatie kan een site ook onbruikbaar maken voor mensen met een visuele of cognitieve beperking.
De kwaliteit van de navigatie heeft ook invloed op de vindbaarheid van je pagina’s in Google. Zoekmachines gebruiken de navigatiestructuur om te bepalen welke pagina’s belangrijk zijn, hoe ze met elkaar verbonden zijn en hoe ze geïndexeerd moeten worden.
De basis van een goede navigatiestructuur
Een goede navigatie heeft een overzichtelijke boomstructuur. Je kunt de homepagina zien als de stam. Vanuit daar zijn er takken die vervolgens weer kleinere takken hebben. Dit zijn de pagina’s en de subpagina’s van een hiërarchische en duidelijke structuur van een effectieve website.
In het hoofdmenu, bovenaan de website, is het verstandig om niet te veel menu-items te plaatsen. Dat is onoverzichtelijk. Richt je op de belangrijkste pagina’s. Het is aan te raden om het aantal menu-items te beperken tot maximaal zeven. Zo overspoel je de gebruiker niet meteen met keuzes.
Menu-items: hoe bouw je een goede structuur?
Het is belangrijk dat je hoofdmenu overzichtelijk en ook begrijpelijk is. Gebruik daarom geen vage termen als ‘Meer informatie’, maar kies voor duidelijke labels als ‘Diensten’, ‘Trainingen’ en ‘Over ons’. Hoe concreter, hoe beter. Duidelijke termen dragen bij aan een duidelijke navigatie.
Heb je bijvoorbeeld meerdere ‘Trainingen’? Dan kun je die laten uitklappen in een dropdown-menu. Houd hierbij wel rekening met gebruikers die werken met toetsenbordnavigatie of screenreaders. Ook voor mensen met beperkingen moeten dropdowns goed werken.
Wat ook helpt, is het toevoegen van kruimelnavigatie, oftewel ‘breadcrumbs’. Hiermee toon je bezoekers waar ze zich momenteel op de site bevinden en wat de bovenliggende pagina’s zijn in de boomstructuur. Bijvoorbeeld: Home > Trainingen > Training A.
Neem een call-to-action op in je navigatie
Naast de menu-items in het hoofdmenu staat vaak ook een call-to-action (CTA). Dit is de belangrijkste aanjager van conversie. Het is vaak een knop met een tekst als ‘Neem contact op’, ‘Vraag offerte aan’ of ‘Start nu’. Zo geef je bezoekers direct een beeld van de belangrijkste acties.
In het kader van toegankelijkheid is het belangrijk dat alles zichtbaar, leesbaar en klikbaar is. Zorg daarom voor voldoende contrast als het gaat om kleuren, duidelijke lettertypes en elementen die groot genoeg zijn om gemakkelijk op te kunnen klikken. Dit geldt voor elke pagina.
Visuele hiërarchie van de belangrijkste elementen
Ook de plek van elementen als het logo, menu-items en een CTA zijn belangrijk. Elementen die belangrijk zijn, moeten visueel ook het meeste opvallen. Dit maakt het voor gebruikers mogelijk om intuïtief de juiste weg te vinden in je website. Dat zorgt voor een positieve gebruikerservaring.
Heb je een zoekfunctie? Dan kun je die subtiel als een klikbaar icoontje van een vergrootglas naast je menu-items zetten, maar je kunt er ook voor kiezen om onder het menu een grote zoekbalk te tonen. Zo stimuleer je bezoekers meer om de zoekfunctie te gebruiken ter navigatie.
Onderaan iedere pagina kun je meer interne links tonen in de footer. Hier vindt men normaal gesproken ook links naar zaken als een privacyverklaring of algemene voorwaarden. Door vaste patronen aan te houden, help je bezoekers om zonder moeite je website navigatie te gebruiken.
Rekening houden met verschillende schermformaten
Houd bij het ontwikkelen van je menu’s niet alleen rekening met desktops en laptops, maar ook met tablets en vooral met smartphones. Steeds meer mensen bezoeken websites op mobiele apparaten. Het menu zit dan vaak achter een icoontje met drie streepjes. Als je erop klikt, zie je dat het menu uitklapt.
Een responsief ontwerp houdt rekening met alle schermformaten. Zorg er bij het uitklapbare menu op een mobiel ook voor dat alles goed werkt voor mensen met een cognitieve, motorische of audiovisuele beperking. Zorg ook voor voldoende ruimte tussen links op verschillende pagina’s.
Veelgemaakte fouten bij de navigatie van een website
Veel websites laten steken vallen als het gaat om de navigatie. We zetten een aantal veelgemaakte fouten op een rij met betrekking tot het hoofdmenu:
- Hoofdmenu op een ongebruikelijke plek. Dit zorgt voor verwarring bij bezoekers.
- Hoofdmenu met meer dan zeven items. Dit geeft bezoekers keuzestress.
- Hoofdmenu met menu-items te dicht op elkaar. Dit maakt het lastiger om te klikken.
- Hoofdmenu met onduidelijke labels. Dit zorgt ook voor verwarring.
- Hoofdmenu dat niet gebruiksvriendelijk is voor toetsenbordnavigatie.
- Hoofdmenu dat niet gebruiksvriendelijk is voor screenreaders.
Ook het ontbreken van zaken als een duidelijke boomstructuur, broodkruimelnavigatie en een gebruiksvriendelijke zoekbalk maken het moeilijk voor gebruikers om te navigeren. Daarnaast is het onvoldoende rekening houden met verschillende schermformaten een valkuil.
Hoe zorg je voor een goede en gebruiksvriendelijke navigatie?
Met bovenstaande tips kom je al een heel eind. Daarnaast is het altijd belangrijk om je navigatie te testen op verschillende apparaten en in verschillende browsers. Test je website bijvoorbeeld op een iPhone 14 met Safari, een Chromebook met Firefox en nog veel meer combinaties.
Ook een aanrader is om je navigatie te testen met verschillende gebruikers. Zo zie je hoe gebruikers je navigatie in de praktijk ervaren. Door hun proces te volgen, merk je precies waar ze tegenaan lopen. Dit is waardevolle informatie. Het helpt om onderbouwde verbeteringen op alle pagina’s door te voeren.
Schakel ons in voor een toegankelijkheidsonderzoek
Wil je zeker weten dat alles klopt op jouw site? Wij helpen je graag met een toegankelijkheidsonderzoek op basis van de Web Content Accessibility Guidelines (WCAG). We geven je hierbij een compleet beeld van de huidige status op het gebied van de toegankelijkheid.
Onze ervaren onderzoekers constateren problemen en geven aanbevelingen om verbeteringen door te voeren. Zo weet je snel of jouw website inclusief is, voldoet aan de geldende richtlijnen en past binnen de wet over digitale toegankelijkheid. Ook is het mogelijk om een Quickscan uit te laten voeren.
Wil je meer van dit soort inzichten ontvangen?
Schrijf je in voor de nieuwsbrief van Digitaal Toegankelijk.
