Verticale navigatie

De plaatsing van de verticale navigatie wordt bij complexe websites qua inhoud vaak gebruikt als secundaire navigatie. Een verticale navigatie kan ook prima als hoofdnavigatie dienen.

 

Voordelen en nadelen

Het grote voordeel van een verticale navigatie is dat het aantal hoofditems eenvoudig uit te breiden is. De hoogte van het menu hoeft niet vast te staan, in tegenstelling tot de breedte bij horizontale navigatie, zodat het menu dus ideaal kan worden uitgebouwd. Verder kan een verticale navigatie prima worden gebruikt om te zorgen dat de indeling van de pagina gelijkmatig wordt verdeeld en de daadwerkelijke content van de website een niet al te breed kader in hoeft te nemen. Dit om te voorkomen dat de regels van de inhoud te lang worden (zie typografie).

 

Nadeel kan zijn dat er te veel menu-items worden opgenomen, wat ervoor zorgt dat de volledige navigatie niet meer in één oogopslag kan worden weergegeven en de gebruiker moet scrollen om de overige items te bekijken.

 

1. Enkel level

Navigatie audiDe basis van de verticale navigatie is de navigatie met één level. Hierin worden alle pagina’s opgenomen die bovenin de ‘boomstructuur’ zijn te vinden. Vooral in de jaren 90, toen websites vaak niet meer waren dan digitale folders, werd er veel gebruik gemaakt van deze vorm.

 

De website van Audi maakt gebruik van deze vorm van navigeren. Nadeel van deze manier is dat het menu “vlak” is. Als er een level dieper moet worden gegaan in de website zal er een extra menu moeten worden opgenomen elders in de website. Dit zorgt ervoor dat als de bezoeker zich dieper in de pagina bevindt, hij niet meer kan herleiden via welke weg hij op de pagina is beland omdat er van meerdere menu’s gebruik wordt gemaakt.

 

Het is dus raadzaam om een enkel-level navigatie wel te gebruiken als de website een ‘platte’ structuur heeft zodat de gebruiker duidelijk inzichtelijk heeft waar hij zich bevindt. Het is af te raden deze manier van navigeren te gebruiken bij websites met meerdere paginaniveaus zoals bij Audi.

 

2. Multilevel statisch

navigatie varaOm twee pagina-levels in één oogopslag zichtbaar te hebben biedt een navigatie waarin een hiërarchie wordt weergegeven een prima uitkomst. De Vara heeft de navigatie opgebouwd op een manier waarop de bezoeker meteen twee levels inzichtelijk heeft. De bruine items zijn de hoofd-items, en de rode items zijn de onderliggende pagina’s. Voordeel van deze navigatie-opbouw is dat de bezoeker niet hoeft te klikken of de cursor hoeft te bewegen om de onderliggende items te bekijken. Nadeel is wel dat de navigatie veel ruimte nodig heeft in de hoogte, en in het geval van de Vara dusdanig veel dat er dient te worden gescrold om de complete navigatie te bekijken.

 

3. Multilevel met subpagina

Navigatie Allianz Om te voorkomen dat de navigatie dusdanig lang wordt dat er moet worden gescrold kan er ook voor worden gekozen om de subitems te verbergen. Op het moment dat een pagina wordt aangeklikt zal deze worden geopend en zal het onderliggende niveau van het desbetreffende item inzichtelijk worden.

 

De website van Allianz beschikt over deze navigatie-invulling. Voordeel is dus dat de navigatie relatief weinig ruimte nodig heeft, nadeel is wel dat er een actie moet worden ondernomen om de onderliggende pagina’s van andere items te bekijken.

 

4. Multilevel zonder subpagina

Indien een website zo is ingericht dat een hoofd-item geen informatie hoeft te bevatten omdat de inhoud is onderverdeeld in de sub-pagina’s, kan het nuttig zijn om een “harmonica-menu” te gebruiken. Als het hoofd-item wordt aangeklikt zullen de onderliggende pagina’s worden getoond. Er wordt geen nieuwe pagina geladen.

<<nog ff voorbeeldje fixen>>

 

5. Pullout

Vergelijkbaar met pulldown menu’s die worden gebruikt bij horizontale navigatie is de pullout functie. Hiermee kan de gebruiker zonder eerst onderliggende pagina’s te bezoeken, door de website bladeren en kijken welke pagina’s zich bevinden onder bovenliggende pagina’s.

 

JVC laat de gebruiker op deze manier door de website bladeren. Door op een item te gaan staan worden de subpagina’s zichtbaar. Indien noodzakelijk kan er vervolgens nog een sub-sub-navigatie worden weergegeven.

 

Voordeel is dat er meer dan twee levels binnen de navigatie kunnen worden opgenomen. Nadelen zijn voornamelijk op gebruiksvriendelijkheid, net als het pulldown menu. Als de gebruiker een minder vaste hand heeft, kan deze moeite hebben om te komen tot de beoogde pagina.

Navigatie JVC

 

6. Extra info kader

Wat geen invloed heeft op de navigatiestructuur maar wat wel een mooie toegevoegde waarde zou kunnen zijn, is een functionaliteit die we terug zien bij de website van de ING bank. Zodra de gebruiker over een navigatie-item scrolt met de muis (geldt niet voor alle navigatie-elementen binnen de website) wordt een informatiekader weergegeven met een uitleg over de inhoud van de pagina. Als de titel van een navigatie-item dus niet geheelomvattend is, of er onduidelijkheid ontstaat over de inhoud van de website, kan er doormiddel van deze manier dus aan de gebruiker extra informatie worden verschaft.

Navigatie ING bank

 

Conclusie

Verticale navigatie wordt vaak gebruikt als tweede menu maar kan ook prima dienen als hoofdnavigatie. Nadeel kan zijn dat het menu te veel ruimte in beslag neemt maar om dat te voorkomen zijn er diverse manieren. Welke manier is het meest gebruiksvriendelijk?


Reacties

plaats hier je commentaar of inhoudelijke aanvulling

Extra

Promotioneel geleuter

Abonneer
Volg nu de vormgeving vandaal via RSS...
Tweets
Volg nu de vormgeving vandaal via Twitter...

Inhoud

Artikelen op deze website