De navigatie is het stuur van je website. Het bepaalt of bezoekers moeiteloos bij het juiste antwoord komen of dat ze rondzwerven tot ze het opgeven. Toch krijgt het menu vaak minder aandacht dan de mooie koppen en foto's, terwijl het juist de stille kracht is die alles bij elkaar houdt. In deze gids kijken we naar de patronen die mensen herkennen, naar de keuze tussen platte en diepe structuren en naar de verschillen tussen telefoon en breed scherm, zodat niemand in jouw aanbod verdwaalt.
Waarom navigatie het stuur is
Een bezoeker komt zelden op je homepage binnen met geduld om alles te ontdekken. Hij heeft een vraag en wil snel weten of jij het antwoord hebt. De navigatie is het eerste gereedschap dat hij daarvoor pakt. Werkt dat soepel, dan voelt je site overzichtelijk; haperen de menu's, dan voelt de hele site rommelig, hoe mooi de rest ook is.
Goede navigatie is voorspelbaar. Bezoekers hebben honderden andere sites gezien en verwachten dat het menu bovenaan staat, dat het logo naar de homepage leidt en dat klikken doet wat je verwacht. Wie van die verwachtingen afwijkt om origineel te zijn, maakt het zijn bezoekers vooral moeilijker. Dit hangt nauw samen met een doordachte informatiearchitectuur.
Patronen die mensen herkennen
De meeste sites leunen op een handvol beproefde patronen. Ze zijn gangbaar omdat ze werken, niet omdat ontwerpers lui zijn.
- Horizontaal hoofdmenu. De vertrouwde balk bovenaan met de belangrijkste pagina's. Werkt voor vrijwel elke bedrijfssite met een beperkt aantal hoofdonderdelen.
- Hamburgermenu. Het opvouwbare menu achter een icoon, vooral op telefoons. Handig bij weinig ruimte, maar verbergt je items, dus spaarzaam inzetten op breed scherm.
- Voettekstnavigatie. De footer als tweede menu voor wie helemaal naar beneden scrolt, ideaal voor secundaire links.
Je hoeft niet te kiezen tussen deze patronen; vaak combineer je ze. Het hoofdmenu draagt de hoofdkeuzes en de footer vangt de rest op.
Plat of diep: hoeveel lagen?
Een belangrijke keuze is hoe diep je structuur mag worden. Bij een platte opzet bereikt een bezoeker bijna elke pagina binnen een of twee klikken. Bij een diepe opzet liggen pagina's achter meerdere lagen submenu's. Voor de meeste lokale ondernemers is plat de betere keuze: minder klikken betekent minder afhakers.
Pas wanneer je echt veel inhoud hebt, bijvoorbeeld een uitgebreide kennisbank of een webshop met veel categorieën, wordt enige diepte onvermijdelijk. Zorg dan dat elke laag een logische naam heeft en dat de bezoeker altijd ziet waar hij zit, bijvoorbeeld via broodkruimels. Hoe je dat overzichtelijk schaalt, lees je in de gids over schaalbaar ontwerpen.
Een menu is geen inhoudsopgave van je bedrijf, maar een hulpmiddel voor je bezoeker. Orden het naar wat hij zoekt, niet naar hoe jouw organisatie in elkaar zit.
Navigatie op mobiel
Op een telefoon is ruimte schaars, dus de meeste sites vouwen hun menu op achter een icoon. Dat is prima, mits het opengaan soepel werkt, de items groot genoeg zijn om te raken en de belangrijkste actie, zoals contact opnemen, makkelijk te vinden blijft. Een vraag-offerte-knop verstoppen in een uitklapmenu kost je aanvragen.
Houd er rekening mee dat mobiele bezoekers vaak met een duim bedienen en hun telefoon met een hand vasthouden. Plaats bedienelementen binnen comfortabel bereik en maak ze ruim genoeg. Dit sluit aan op alles uit de responsive vormgeving en de blog over een mobiel menu ontwerpen.
Heldere labels en oriëntatie
Een menu-item moet in één woord of een korte term duidelijk maken wat erachter zit. Vermijd interne termen of creatieve vondsten die alleen jij begrijpt. Schrijf zoals je bezoeker denkt: Diensten, Over, Contact werkt beter dan een slim bedachte variant die uitleg vraagt.
Laat daarnaast altijd zien waar iemand zich bevindt. Een actief gemarkeerd menu-item en zichtbare broodkruimels geven houvast, zeker op grotere sites. Wie weet waar hij is, durft verder te klikken zonder bang te zijn de weg kwijt te raken.
Zelf doen of uitbesteden?
De navigatie van een kleine site kun je prima zelf opzetten, zeker als je het beperkt houdt tot een paar duidelijke items. Het wordt lastiger zodra je aanbod groeit en je keuzes moet maken over groeperen, ordenen en benoemen. Juist daar zie ik veel sites vastlopen: het menu groeit organisch mee tot het niemand meer iets zegt.
Wil je een structuur die meegroeit met je bedrijf en logisch blijft voor je bezoeker? Bekijk dan de webdesign op maat of leg me je situatie voor via de contactpagina. Loopt je huidige menu vast, dan kan een restyle of redesign de structuur weer op orde brengen.
Veelgestelde vragen
Voor de meeste bedrijfssites werken vijf tot zeven hoofditems prettig. Meer dan dat maakt het menu moeilijk te overzien en dwingt mensen tot kiezen voordat ze weten wat de opties zijn. Kun je niet kiezen, dan is dat vaak een teken dat je structuur eronder rommelig is.
Op een telefoon is een opvouwbaar menu logisch omdat de ruimte beperkt is. Op een breed scherm verberg je je navigatie liever niet achter een icoon, want zichtbare items worden vaker gebruikt. Toon op desktop gewoon je hoofditems en bewaar het hamburgericoon voor smalle schermen.
Bij platte navigatie staan de meeste pagina's binnen een of twee klikken. Bij diepe navigatie zit informatie achter meerdere lagen submenu's. Voor kleinere sites is plat bijna altijd beter: hoe minder klikken tussen de bezoeker en zijn doel, hoe minder mensen onderweg afhaken.
Bij een kleine site met een handvol pagina's meestal niet, een helder menu volstaat dan. Heb je veel pagina's of een webshop met veel producten, dan wordt zoeken al snel onmisbaar. Het is geen vervanging voor goede navigatie, maar een aanvulling voor wie precies weet wat hij zoekt.
Verder in de kennisbank: Informatiearchitectuur · Schaalbaar ontwerpen · Formulieren ontwerpen