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.

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

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.

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.

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

Hyped.nl

WordPress.org

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.