Het menu is de plattegrond van je site
Als iemand op je website landt, is het navigatiemenu vaak het eerste dat hij bewust bekijkt. Het beantwoordt in één oogopslag de vraag: "kan deze site mij helpen, en waar vind ik wat ik zoek?" Als het antwoord onduidelijk is, klikt een bezoeker niet dieper - hij klikt weg.
Toch behandelen veel MKB-sites hun menu als een technisch detail: alle pagina's die er zijn worden er gewoon in gepropt, in de volgorde waarin ze zijn gebouwd. Het resultaat is een rij van acht of negen labels waar de bezoeker doorheen moet lezen om iets te vinden. Dat is precies verkeerd om. Een menu is geen inhoudsopgave van je site - het is een hulpmiddel om mensen naar het juiste antwoord te brengen.
Hieronder drie regels die van een rommelig menu een helder wegwijzer maken. Ze zijn eenvoudig, maar ze vragen dat je keuzes durft te maken over wat er niet in het menu hoort.
Regel 1: Beperk het aantal hoofdkeuzes
De bekendste vuistregel in interface-ontwerp komt uit een psychologiepaper uit 1956: "The Magical Number Seven, Plus or Minus Two" van George Miller. De kern: het menselijk werkgeheugen kan ongeveer vijf tot negen losse elementen tegelijk vasthouden. Meer dan dat, en het overzicht verdwijnt.
Voor je navigatie betekent dit: houd het aantal hoofditems liefst tussen de vier en zeven. Niet omdat er een harde grens is, maar omdat elk extra item de bezoeker dwingt om meer te scannen voordat hij kiest. Hoe korter de lijst, hoe sneller de beslissing.
Praktisch betekent dit keuzes maken:
- Zet niet elke pagina in het hoofdmenu. Ondersteunende pagina's (algemene voorwaarden, privacyverklaring, vacatures) horen in de footer, niet bovenaan.
- Bundel verwante pagina's onder één label. Vijf losse dienstenpagina's kunnen samenkomen onder "Diensten" met een submenu.
- Vraag jezelf bij elk item: is dit een van de belangrijkste dingen die een bezoeker hier wil doen? Zo nee, dan hoort het niet in de hoofdnavigatie.
Een strak menu is geen teken dat je site weinig te bieden heeft. Het is een teken dat je hebt nagedacht over wat je bezoeker echt nodig heeft.
Regel 2: Gebruik woorden die je bezoeker zelf gebruikt
Navigatielabels zijn geen plek om creatief te zijn. Ze moeten in één woord duidelijk maken wat erachter zit - en dat woord is bijna altijd het meest voor de hand liggende.
De klassieke fout is intern jargon of merk-taal in het menu zetten. "Onze filosofie", "Belevingen", "Oplossingen op maat" - dit soort labels klinken misschien uniek, maar de bezoeker moet erop klikken om te ontdekken wat het is. Elke klik die nodig is om een label te begrijpen, is er één te veel.
Nielsen Norman Group, een van de meest geciteerde autoriteiten op het gebied van web-usability, noemt dit "mystery meat navigation": labels waarvan je pas weet wat ze betekenen als je ze aanklikt. Het advies is consistent: gebruik de taal van de gebruiker, niet die van de organisatie.
Concreet:
- Kies beschrijvend boven origineel. "Diensten" en "Prijzen" werken beter dan "Wat wij doen" en "Investering".
- Test je labels op iemand buiten je bedrijf. Als die persoon moet raden waar een label heen leidt, is het te vaag.
- Wees consistent met wat mensen elders op het web gewend zijn. "Contact", "Over ons" en "Blog" zijn conventies - daar hoef je niet vanaf te wijken om je te onderscheiden.
Een menu dat de woorden van de bezoeker spreekt, voelt vertrouwd. En vertrouwen is precies wat je wil in de eerste seconden op een onbekende site.
Regel 3: Maak de huidige positie zichtbaar
Een goed menu vertelt niet alleen waar je heen kan, maar ook waar je nu bent. Zonder die aanwijzing raken bezoekers de weg kwijt, vooral op grotere sites met meerdere niveaus.
Dit heet in vakjargon een "you are here"-indicator, en het is een van de tien klassieke usability-heuristieken van Jakob Nielsen: zorg dat het systeem altijd zichtbaar maakt in welke staat het zich bevindt. In de praktijk is dit simpel op te lossen:
- Markeer het actieve menu-item visueel - bijvoorbeeld met een andere kleur, een onderstreping of een accentlijn.
- Gebruik een consistente titel bovenaan de pagina die overeenkomt met het menu-label waarop is geklikt.
- Bij submenu's: laat zien onder welke hoofdcategorie de huidige pagina valt.
Deze indicator kost weinig moeite om te bouwen, maar hij voorkomt het verwarrende gevoel van verdwalen. De bezoeker weet altijd waar hij is en hoe hij terug of verder kan.
Mobiel: het hamburgermenu vraagt om extra zorg
Op de smartphone worden de meeste menu's ingeklapt tot een hamburgericoon: die drie horizontale streepjes rechtsboven. Handig voor de ruimte, maar er zit een addertje onder het gras. Omdat de menu-items verborgen zijn tot je op het icoon tikt, worden ze minder vaak gevonden dan een altijd-zichtbaar menu.
Dat betekent niet dat je het hamburgermenu moet mijden - op kleine schermen is er vaak geen alternatief. Maar het maakt de drie regels hierboven nog belangrijker: hoe korter en helderder de lijst, hoe sneller iemand vindt wat hij zoekt zodra hij het menu opent. Overweeg daarnaast om je belangrijkste actie - bijvoorbeeld "Contact" of "Offerte aanvragen" - ook als losse, altijd zichtbare knop in de mobiele balk te zetten, buiten het hamburgermenu om.
Test je mobiele navigatie altijd op een echt toestel. Het hamburgericoon moet groot genoeg zijn om met een duim te raken, en het uitklappende menu moet soepel openen zonder dat de rest van de pagina eronder wegschuift.
De 3-clickregel is een mythe
Misschien heb je ooit gehoord dat elke pagina binnen drie klikken bereikbaar moet zijn. Deze "3-clickregel" wordt vaak als heilige waarheid gepresenteerd, maar er is geen onderzoek dat hem onderbouwt. Uit gebruikersstudies blijkt dat mensen niet afhaken na een bepaald aantal klikken - ze haken af als ze het gevoel krijgen dat ze de verkeerde kant op gaan.
De les: focus niet op het aantal klikken, maar op de duidelijkheid van elke klik. Vier logische, voorspelbare stappen naar een pagina zijn beter dan twee stappen waarbij de bezoeker moet gokken. Elke klik moet vertrouwen geven dat hij dichterbij komt, niet verder weg.
Zo controleren wij navigatie
Bij Web Design by Kick loopt elke nieuwe site door een navigatiecheck voordat hij live gaat. We tellen het aantal hoofditems, controleren of elk label zelfverklarend is, testen de actieve-staat-markering en openen het menu op een echte telefoon. Vaak is de grootste winst niet iets toevoegen, maar drie labels schrappen die er niet in thuishoren - zodat de items die er wél toe doen meteen opvallen.
Conclusie
Een goed navigatiemenu is onzichtbaar in de beste zin van het woord: bezoekers vinden meteen wat ze zoeken zonder erover na te denken. Beperk het aantal hoofdkeuzes, gebruik de woorden van je bezoeker en maak altijd zichtbaar waar iemand zich bevindt. Die drie regels lossen het overgrote deel van de navigatieproblemen op die MKB-sites hebben.