Navigatie: Zes manieren om je weg te vinden op een website

Om je weg te kunnen vinden op een website heb je navigatie nodig. Anders dan met een boek kun je niet door een website bladeren. Je kunt moeilijk namen van webpagina’s gaan raden. Met een contactpagina kan dat nog wel eens lukken, maar of je veel verder komt?

In dit artikel een zestal manieren om te navigeren op een website. Het horizontale menu, het verticale menu, de breadcrumbs (het kruimelpad), de tagcloud, de zoekfunctie en de sitemap.

Het horizontale menu

Dit is samen met het verticale menu, het meest voorkomende menu. Vrijwel iedere site maakt er gebruik van. Meestal wordt er een horizontaal menu gebruikt waneer er een lijst is die maximaal 6 of 7 onderdelen bevat. Het gaat hier dan voornamelijk om de hoofdonderdelen van een website. Een horizontaal menu is lastig uit te breiden omdat je niet onbeperkt de breedte kunt gebruiken en meerdere lagen onder elkaar maakt navigeren erg lastig.

In HTML maak je een horizontaal menu op als lijst. Door aan de lijst in CSS display: inline; toe te voegen ontstaat er een horizontale in plaats van verticale lijst. Deze stijl voeg je toe aan het lijstitem (li).

Enkele voorbeelden van een horizontaal menu.
menu van Sitepoint.com

menu van Sourceforge

menu van WordPress.org

Verticaal menu

Meestal verschijnt een verticaal menu aan de linkerkant van een website. Met een verticaal menu heb je als webdesigner meer mogelijkheden om je menu uit te breiden. Er zijn veel voorbeelden bekend dat een website een hoofdmenu horizontaal maakt en een submenu, wat bij het betreffende onderdeel uit het hoofdmenu hoort, verticaal toevoegt.

Wederom wordt er een lijst gebruikt om een dergelijk menu mee te maken. Dit is namelijk de essentie van een menu, een lijst met onderdelen die op een website voorkomt. Meestal is het wel handig om bij een dergelijke lijst de bullet (de stip voor het lijstitem) weg te halen. Dat doe je in CSS door aan de ‘ul’ toe te voegen list-style-type: none;.

Voorbeeld van een verticaal menu

menu van nu.nl

Het kruimelpad

Dankzij het sprookje van Hans en Grietje is het kruimelpad bekent geworden. Door het kruimelpad kan de bezoeker de weg terugvinden zoals hij die heeft afgelegd. Van links naar rechts worden de bezochte pagina’s weergegeven. Dit kan voor een bezoeker voordeel opleveren wanneer hij weer terug wil naar de pagina waar hij begonnen is of wanneer er direct doorgeklikt moet worden naar de indexpagina.

Een kruimelpad heeft dus als voordeel dat je de ‘route’ naar de huidige pagina in beeld hebt. Aan de andere kant is het naar mijn idee een must dat ieder pagina van je website in maximaal twee klikken bereikbaar zou moeten zijn en zodoende zou een kruimelpad niet nodig moeten zijn. Het vervangt in ieder geval de ‘gewone’ navigatie natuurlijk niet.

Voorbeeld:

De site Qonvert.com maakt gebruik van een breadcrumb aan de hand van de categorie waar een artikel in geplaatst wordt. Niet helemaal zoals hierboven beschreven, maar het laat wel duidelijk de bedoeling zien.

kruimelpad van Qonvert.com

De tagcloud

Een tijdje is de tagcloud populair geweest. Ik moet zeggen dat ik ze minder tegenkom. Een tagcloud zet alle belangrijke onderwerpen in een ‘wolk’ bij elkaar. Onderwerpen waar meer over geschreven is worden in een groter lettertype geschreven dan onderwerpen die minder voorkomen. Dit kan ook worden toegepast op het aantal bezoeken per onderwerp, of het aantal zoekopdrachten per onderwerp.

Niettemin laat een tagcloud in een oogopslag zien wat populair is en wat minder. In het voorbeeld hieronder is het onderwerp ‘children’ het meest voorkomende en daardoor heb je ook de neiging om er eerder op te klikken. Het werkt dus in de hand dat populaire onderwerpen nog populairder worden.

voorbeeld van een tagcloud

In ieder geval kan het een leuke aanvulling zijn voor een website. Wanneer je eens wilt zien hoe een tagcloud voor je eigen site werkt, bezoek dan eens de site http://tagcloud.oclc.org.

Zoekfunctie

Naast een goede navigatie is een zoekfunctie essentieel voor je website. Deze kun je op verschillende manieren aan je site toevoegen, maar het belangrijkste is dat je er een hebt. Een zoekfunctie wordt over het algemeen snel gebruikt als bezoekers niet snel kunnen vinden wat ze zoeken. Een goede zoekmachine is essentieel. Waarom zou je dus niet de zoekmachine van Google gebruiken voor je eigen website. Daarmee combineer je de kracht van Google met de resultaten van je eigen site.

Een eigen zoekmachine schrijven is niet simpel, maar het kan wel. Gelukkig is er veel software geschreven in bijvoorbeeld Perl of PHP die het werk van je kan overnemen.

De meeste zoekvelden staan rechts op iedere pagina, of in het navigatie menu.
Hier een paar voorbeelden:

Frankwatching.nl
zoeken op Frankwatching

Hyped.nl
zoeken op Hyped

WordPress.org
zoeken op WordPress

Sitemap

Tenslotte de sitemap. Ik bedoel niet de sitemap die je op een website hebt staan om een zoekmachine de weg te wijzen. Ik bedoel een sitemap zoals je die ziet onderaan deze website. Een overzicht van de meest belangrijke onderdelen. Waarbij sommige sites er zelfs voor kiezen om iedere pagina hierin op te nemen. Deze (verkorte) sitemap staat in dit geval op iedere pagina.

Ook kun je er voor kiezen om vanuit het menu een link te maken naar een algemene sitemap die naar alle andere pagina’s linkt. Beide manieren geven de bezoeker de mogelijkheid om in twee stappen altijd op de gewenste pagina te komen en dat was toch het doel.

Een sitemap op iedere pagina van Hema.nl en de Sitemap op een speciale pagina van TNT.

Hema sitemap TNT post sitemap

 
Vond je dit een interessant artikel?
Wil je op de hoogte gehouden worden als er weer een nieuw artikel verschijnt?
Meld je dan aan »

Deze bijdrage was gepubliceerd in Algemeen.

7 gedachten over “Navigatie: Zes manieren om je weg te vinden op een website

  1. Een typo in de eerste regel van je kruimeltjes.

    “Aan de andere kant is het naar mijn idee een must dat ieder pagina van je website in maximaal twee klikken bereikbaar zou moeten zijn en zodoende zou een kruimelpad niet nodig moeten zijn.”
    Je zou ook op een pagina uit kunnen komen dmv een search. Dan is het wel handig om exact te weten waar je bent.
    Ook als ik een navigatie heb met categorieën, en vervolgens een dropdown met sub-categorieën zou ik op deze kunnen klikken en nog steeds een breadcrumb van meer dan 2 links kunnen hebben.

    Tagclouds zijn over het algemeen goed voor blogs, of zeer uitgebreide sites. (wederom kun je hiermee ook op een dieper onderdeel van je website komen en een breadcrumb van >2 links hebben)

  2. Een ander argument voor breadcrumbs is dat het goed is voor Google. Als je belangrijkste keywords in de breadcrumbs staan dan is dit goed voor je internal linking.

  3. Ik ben het niet helemaal met de bovenstaande stelling eens, dat je niet, zoals door een boek, door een website kunt bladeren. Dat is namelijk wel mogelijk.

  4. @Daan, mijn bericht was een reactie op een stelling. Wie boven mijn bericht op “Me” klikt, komt op de website waar te zien is wat ik bedoel.

  5. @Me,

    Er zijn enkele applicaties waarmee je als het ware door een boek kunt bladeren, maar over het algemeen kun je van een willekeurige website naar een andere willekeurige website klikken en lees je een website niet als een boek, van pagina 1 naar pagina 763.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *