Een e-commerce site met 200 productpagina’s en een menu met 9 hoofdingangen: dat zien we regelmatig. Het probleem komt niet van het aantal pagina’s, maar van de manier waarop ze met elkaar zijn verbonden. Wanneer we de structuur van een website herzien, beïnvloeden we tegelijkertijd de navigatie, de organische zoekmachineoptimalisatie en de conversieratio. Alles begint bij de boomstructuur.
Visuele stabiliteit van menu’s en Core Web Vitals
Voordat we het hebben over boomstructuur of categorieën, verdient een technisch punt aandacht. Google meet de visuele stabiliteit van een pagina via de Cumulative Layout Shift (CLS). Wanneer een dropdown-menu of een navigatiefilter een zichtbare verschuiving van de inhoud veroorzaakt op het moment van openen, neemt de CLS toe en ook het aantal navigatieverlaten.
Lees ook : Hoe te profiteren van een belastingaftrek voor uw Verisure alarmsysteem bij particulieren
Concreet, als uw mega-menu de inhoud naar beneden duwt in plaats van dat het zich over de inhoud heen legt, verliest u gebruikers nog voordat ze op een categorie hebben geklikt. De oplossing is vaak eenvoudig: reserveer de ruimte van het menu in CSS of gebruik een laag in absolute positie. Op lijstpagina’s (categorieën, zoekresultaten) vermenigvuldigt het probleem zich wanneer zijfilters de pagina herladen zonder de scrollpositie te behouden.
We kunnen de impact controleren door het Chrome UX Report voor ons eigen domein te raadplegen. Een site waarvan de menu’s een CLS genereren die hoger is dan de “goede” drempel van Google, straft zichzelf op twee fronten: de gebruikerservaring en de positie in de zoekresultaten. Om te observeren hoe de pagina’s zijn georganiseerd op een site die zijn inhoud thematisch structureert, geeft de structuur van de site Ideelogique een concreet overzicht van een platte en leesbare boomstructuur.
Ook interessant : Hoe een plaid te wassen: onderhoudstips en trucs
Website-structuur: maximaal drie niveaus voor de meeste gevallen
De meest nuttige regel met betrekking tot de structuur van een site blijft de klikdiepte. Elke pagina zou binnen drie klikken vanaf de startpagina toegankelijk moeten zijn. Daarboven verkennen zoekmachines minder efficiënt en haken gebruikers af.
Voor een vitrinesite van 15 tot 30 pagina’s zijn twee niveaus voldoende: startpagina, gevolgd door service- of inhoudspagina’s. Voor een e-commerce site of een redactionele site met honderden pagina’s, gaan we naar drie niveaus: startpagina, categorieën, gevolgd door subcategorieën of fiches.
De veelvoorkomende valkuil: subcategorieën creëren voor elke variatie in plaats van te groeperen. Een meubelwebsite die “zwarte bureaustoelen”, “grijze bureaustoelen” en “witte bureaustoelen” in drie aparte categorieën scheidt, verzwakt zijn interne linkstructuur. Het is beter om één categorie “bureaustoelen” te hebben met kleurfilters.
Interne linkstructuur en distributie van SEO-waarde
De boomstructuur beperkt zich niet tot het hoofdmenu. De contextuele links in de inhoud (links tussen blogartikelen, tussen aanvullende productfiches) herverdelen de autoriteit van de pagina’s. Een goede interne linkstructuur verbindt pagina’s op basis van thematische relevantie, niet op basis van nabijheid in het menu.
In de praktijk wordt aanbevolen om elke nieuwe pagina met minstens twee bestaande pagina’s die een verwant onderwerp behandelen te linken. Wees voorzichtig met weespagina’s (zonder enige interne inkomende links), deze zijn bijna onzichtbaar voor indexeringsrobots.
Mobiele navigatie: minder ingangen, meer voorspellende zoekopdrachten
De reacties variëren op dit punt afhankelijk van de sector, maar een trend bevestigt zich al enkele jaren: op mobiel geven gebruikers de voorkeur aan een zeer beperkte navigatie in combinatie met een voorspellende zoekbalk, in plaats van een mega-menu dat is overgenomen van de desktopversie.
Het Baymard Institute heeft dit gedrag op e-commerce sites gedocumenteerd. De combinatie “hoofdmenu met vier of vijf ingangen + zoekfunctie met automatische suggesties” overtreft complexe structuren op kleine schermen. Het mega-menu blijft relevant op desktop voor sites met brede catalogi, maar de directe aanpassing ervan aan mobiel verslechtert de navigatie in plaats van deze te verbeteren.
- Beperk het mobiele menu tot maximaal vijf ingangen, met prioriteit voor categorieën met veel verkeer of hoge koopintentie.
- Toon de zoekbalk permanent (niet verborgen achter een vergrootglasicoon), met suggesties die verschijnen zodra de eerste letters zijn getypt.
- Verwijder sub-menu’s met meer dan twee niveaus op mobiel: ze veroorzaken klikfouten en systematische teruggangen.
Taakgerichte navigatie voor B2B- en institutionele sites
Op B2B-sites of institutionele portals werkt navigatie via klassieke rubrieken (Producten, Diensten, Over ons, Contact) slecht wanneer de catalogus dicht is. Het Nielsen Norman Group heeft een alternatieve benadering gedocumenteerd: taakgerichte navigatiehubs.
Het principe is om, naast het klassieke menu, blokken of pagina’s aan te bieden die voortkomen uit de intentie van de bezoeker. In plaats van “Onze softwareoplossingen” bieden we “Ik wil mijn facturering automatiseren” of “Ik zoek een tool voor mijn buitendienstteam”. A/B-tests op B2B-sites tonen aan dat deze benadering de vindbaarheid van inhoud aanzienlijk verbetert.
We vervangen de hoofdnavige niet, we vullen deze aan. Deze dubbele toegang (per rubriek en per taak) werkt bijzonder goed op de startpagina’s en de landingspagina’s van advertentiecampagnes, waar de bezoeker aankomt met een specifieke intentie maar de nomenclatuur van de site niet kent.
Toegankelijkheid en navigatie met het toetsenbord
De WCAG 2.2-richtlijnen gepubliceerd door het W3C voegen vereisten toe voor de minimale grootte van klikbare doelen en voor navigatie met het toetsenbord. Een menu waarvan de items minder dan 24 pixels aan de zijkant zijn, vormt een probleem voor gebruikers met een motorische handicap.
Voorbij de wettelijke naleving, is een toegankelijke site een site waarvan de navigatie werkt voor alle gebruikscontexten: touchscreen, navigatie met het toetsenbord, schermlezer. Controleren of elk element van het menu bereikbaar is via de Tab-toets en dat de actieve status visueel onderscheidend is, blijft een eenvoudige test om uit te voeren voordat iets in productie gaat.
De structuur van een website wordt opgebouwd vanuit de werkelijke parcours van de gebruikers, niet vanuit een interne organigram. Of de site nu twintig pagina’s of tweeduizend pagina’s telt, dezelfde principes zijn van toepassing: beperkte diepte, coherente interne linkstructuur, menu’s aangepast aan het medium. De rest is testen en itereren op uw eigen analytics-gegevens.