De plaatsing van een navigatie-element kan op diverse manieren worden ingevuld. Meest voorkomend, vooral bij standaard (xhtml) websites, zijn horizontale en verticale navigatie-menus. Deze twee vormen van navigatie kunnen prima gecombineerd worden, vooral als de website is voorzien van een complexe pagina of inhoud-structuur.

 

Voordelen en Nadelen

Een horizontale navigatie hoeft in de hoogte niet veel ruimte in te nemen. Daardoor is het mogelijk om het menu prominent en bovenin het ontwerp te plaatsen. Hierdoor wordt deze navigatie, mits deze wordt gecombineerd met een verticale navigatie, feitelijk de hoofd-navigatie. Bovendien kan doormiddel van een pulldownmenu een navigatie-item worden voorzien van subitems.

Nadeel van horizontale navigatie is dat er vaak een beperkt aantal hoofd-items kan worden geplaatst. Websites hebben een vaste breedte waardoor er niet oneindig veel links naast elkaar kunnen worden geplaatst.

 

1. Standaard menu

De website van Ikea heeft een standaard menu. De pagina’s die bovenaan de website-structuur staan worden naast elkaar weergegeven. Als er op een link wordt geklikt opendt zich de onderliggende pagina. Om dieper in de website te duiken kan vervolgens via het linker navigatie-panel een subitem worden gekozen

 

2. Tabs

Met het gebruik van tabs kan een interessant visueel effect worden gecreëerd. Er kan een lagenstructuur worden gesimuleerd zoals tabs-bladen ook daadwerkelijk worden gebruikt in een multomap. Op deze manier kan de pagina die actief is, grafisch worden “gekoppeld” aan de inhoud van de pagina. Zo worden de inactieve pagina’s verdrongen naar de achtergrond.

 

Boekenwinkel bol.com maakt gebruik van deze vormgeving. In onderstaand voorbeeld is de categorie “Boeken (Nederlands)” actief. De overige pagina’s zijn minder prominent aanwezig maar nogsteeds aanroepbaar.

 

Wehkamp heeft, omdat er veel hoofdcategorieën beschikbaar moeten zijn, twee lagen met tabs opgenomen. Verder hebben ze op een slimme manier verschillende categorieëen gebundeld. Zo zijn DVD, Boeken en games functioneel verschillende categorieën maar zijn ze visueel gegroepeerd onder één tab.

 

3. Pulldown menu

Via een pulldown menu is het mogelijk om meerdere diepteniveaus op te nemen in één navigatie. Doordat de gebruiker met de cursor over het item scrollt worden de onderliggende pagina’s weergegeven. Nadeel hiervan is wel dat er een actie moet worden ondernomen om de diepte in de structuur zichtbaar te krijgen. Verder kan het de gebruiksvriendelijkheid van de website beïnvloeden, omdat bijvoorbeeld iemand met een minder vaste hand moeite kan hebben om de weg te vinden binnen het menu.

 

Voorbeeld van een pulldown navigatie waar één level onder te vinden is, is de website Monsterboard.nl. Jammer is dat de navigatie niet structureel wordt doorgevoerd op alle pagina’s binnen de website.

 

De NS heeft binnen het kader wat te voorschijn komt een hierarchie aangebracht. Hierdoor wordt er extra structuur gecreëerd. Dit zorgt ervoor dat er drie in plaats van twee “levels” op te nemen zijn binnen de navigatie. In onderstaand voorbeeld is het hoofditem “alles over uw reis”. Vervolgens zijn daar de subitems “kies uw kaart” en “voor, tijdens en na uw reis” in opgenomen. Deze categorieën bevatten ook onderliggende pagina’s.

 

4. Horizontaal mouse-over menu

Een minder vaak voorkomende vorm van de opbouw van het menu zien we terug bij tweakers. Dit menu is eigenlijk een combinatie van de tabs (visueel) en een pulldown (functioneel). Op het moment dat een gebruiker over een item navigeert wordt het tweede level horizontaal weergegeven onder het hoofditem. Hierdoor heb je in tegenstelling tot een traditioneel pulldown-menu een vaste hoogte voor je items wat ervoor zorgt dat de inhoud van de website altijd zichtbaar is en er dus geen menu’s over de tekst zullen worden getoond.

 

5. Statisch tab menu

Siemens heeft een soortgelijke navigatie als de NS. Ze hebben echter een vaste hoogte ingeruimd voor de navigatie. Hierdoor wordt net als bij Tweakers de content van de website niet overlapt. Ander voordeel van deze manier is dat Siemens niet werkt met mouse-overs maar dat door middel van een klik het secundaire level wordt aangeroepen. Dit is een stuk gebruiksvriendelijker.

 

6. Overzichtpagina

Indien er dusdanig veel informatie moet worden verwerkt in een menu is het een prima alternatief om een pagina volledig in te richten als navigatie-pagina. De navigatie is dan vergelijkbaar met een sitemap maar de paginastructuur wordt dan enkel gedeeltelijk weergegeven. Een sitemap geeft de structuur van de complete website weer, een overzichtspagina geeft de structuur van een gedeelte van de website weer. Essent heeft gekozen voor deze oplossing.

 

7. Footer navigatie

Een veel voorkomende manier om de gebruiker te voorzien van een extra mogelijkheid om door de website te surfen is een footer-navigatie. Een menu als deze neemt vrij veel ruimte in beslag en is daarom vaak onderaan de website te vinden. Dit is niet hinderlijk en veroorzaakt geen extra scroll-hoogte. Als de bezoeker van de website zich onderaan de pagina bevindt hoeft deze bovendien niet naar boven te scrollen om naar een andere pagina te gaan. Footer navigatie kan ook worden gebruikt om minder belangrijke pagina’s weer te geven. Dit heeft dagblad De Pers gedaan.

 

Conclusie

Op welke manier het menu van een pagina wordt opgebouwd is sterk afhankelijk van de omvang van de website. Horizontale menu’s worden voornamelijk als hoofd-navigatie gebruikt. Ze zijn daarvoor prima geschikt omdat ze bovenin het ontwerp kunnen worden gepositioneerd. Bovenstaande voorbeelden geven een indicatie hoe de menu’s kunnen worden opgebouwd. Welke manieren zijn nog meer gangbaar?