Zo maak jij een ultiem website menu

De bedoeling van een navigatiebalk is je gebruiker te helpen moeiteloos door je website te bladeren. Een navigatiebalk wordt meestal bovenaan je website geplaatst. Op een mobiele telefoon staat de navigatiebalk meestal links boven en ziet eruit als een hamburger. Deze design optie wordt meestal een ‘hamburger knop’ genoemd. Het navigatiemenu bestaat uit interne links naar alle pagina’s die je je bezoekers wilt laten lezen. 

Voorbeeld van een navigatiebalk

Als we de website van one.com gebruiken, zie je dat de navigatiebalk bovenaan geplaatst is. Je ziet ook dat we al onze producten die we verkopen in de navigatiebalk hebben staan. Bovendien hebben we ook artikelen toegevoegd die de reis van de klant met onze producten kunnen vergemakkelijken. De meest voorkomende categorieën die mensen in een navigatiebalk gebruiken zijn:

• Over ons
• Contact
• Producten
• FAQ

Maar zoals ons voorbeeld van one.com laat zien, kun je zelf kiezen hoe je je navigatiebalk eruit wilt laten zien en wat je in je navigatiebalk wilt opnemen. 

Waarom is een navigatiemenu belangrijk?

Een navigatiemenu is belangrijk om het zoeken van de gebruiker te vergemakkelijken. Hoe zou je dan alles kunnen vinden wat belangrijk is op een website zonder zo’n tool? Zeker, je kunt naar sommige van je pagina’s op de startpagina linken, maar je kunt niet alles vinden wat essentieel is zonder een navigatiemenu. Een ander belangrijk argument voor het inschakelen van een navigatiemenu is dat je ervoor kan zorgen dat je gebruiker langer op je website blijft en door je menu bladert.

Elementen om rekening mee te houden in de navigatiebalk

Er zijn een paar aspecten waarmee je rekening moet houden bij het ontwerpen van je navigatiemenu. Deze kunnen het succes van de bereikbaarheid van je website bepalen. Want, zoals eerder gezegd, kan een website zonder werkend navigatiemenu alleen maar tot een negatieve ervaring leiden.

De inhoud en vormgeving van je navigatiemenu

De inhoud van je website hangt helemaal af van het soort website dat je runt. Het navigatiemenu is te vergelijken met een wegwijzer die je gebruiker in de juiste richting helpt leiden. Als je de inhoud van je website hebt vastgesteld, kun je dus beslissen wat er volgens jou in je navigatiemenu moet komen. We kunnen daarom niet echt spreken van een typische blauwdruk: het komt allemaal aan op wat je voorrang wilt geven en wat je belangrijk vind. 

Toch moet je je creatieve ideeën ten aanzien van het navigatiemenu wel een beetje beperken. Houd de titels van je categorieën eenvoudig, gemakkelijk te begrijpen en kies niet te veel opties. Voor een dienstverlenend bedrijf kan het bijvoorbeeld voldoende zijn om de navigatie van zijn website in het menu op het hoogste niveau te zetten. Dezelfde stijl zou echter een onoverzichtelijke puinhoop zijn voor een E-Commerce website, waar de bovenste productcategorieën de gebruiker zouden helpen om te vinden wat hij zoekt.

Als je veel verschillende producten of diensten hebt, kan het soms complex zijn. Samsung doet goed werk met zijn navigatiemenu. Ondanks de verschillende producten die ze aanbieden, scheert hun navigatiebalk het net af tot hun bovenste vier productcategorieën aan de linkerkant. Andere onderwerpen, bijvoorbeeld de geschiedenis van het bedrijf, staan rechts.

– Hypertext

Zorg ervoor dat de tekst van je inhoud en je hypertekst van elkaar onderscheiden zijn. Je gebruiker moet zich bewust zijn en het verschil zien tussen hypertekst en eigenlijke tekst op een pagina. 

– Kleuren

Zorg ervoor dat je navigatiebalk opvalt tussen de rest van de pagina. Maak onderscheid tussen je hoofdinhoud en je navigatiemenu met kleuren, lettertypes en andere soorten elementen, zoals het gebruik van witruimte. 

Gebruik links – geen knoppen – in je navigatie menu

Tegenwoordig gebruiken verschillende website links in het navigatiemenu en geen knoppen. In het verleden zorgden de knoppen ervoor dat de links op de pagina opvielen. Dit was alleen niet zo zoekmachine vriendelijk. Daar komt nog bij dat ze minder toegankelijk zijn voor slechtzienden. Bewaar de knoppen voor je oproepen tot actie. 

Verberg je zoekveld

Onlangs is er een trend ontstaan waarbij je het zoek-invoerveld kunt verbergen tot waar het nodig is. Dit om de visuele complexiteit te verminderen voor de bezoeker. Het is een mooie trend voor websites die niet afhankelijk zijn van het zoekveld. 

Klevende navigatiebalk

Een klevende navigatiebalk is een functie die voor veel websitebouwers handig kan zijn. Wil je een voorbeeld zien van hoe het werkt? Kijk dan op onze pagina en je zult zien dat als je in dit artikel naar beneden scrolt, de navigatiebalk van one.com met je meegaat. 

Met een klevende navigatiebalk kun je naar verschillende secties hoppen zonder het gedoe van naar boven te moeten scrollen. Je kunt ook een link implementeren met de tekst ‘spring naar het begin van de pagina’ om je te volgen terwijl je leest, als je niet wilt dat de navigatiebalk je scherm bedekt. 

Denk aan de voettekst

De voettekst van een website is ook een soort navigatiebalk. Dit is een plaats waar je extra informatie kunt toevoegen die je niet in je navigatiemenu wilt opnemen of waar je geen ruimte voor hebt. Een voettekst is ook een plaats waar je informatie kunt herhalen. Bijvoorbeeld, als de gebruiker het einde van de pagina bereikt heeft, kan hij gewoon op het volgende in de voettekst vermelde item klikken om het te lezen.