Dropdown navigatie in webdesign: Usability Killer

zaterdag 17 oktober 2009

Het gebruik van dropdown navigatie op websites komt veel voor. Zeker met de komst van Javascript frameworks zoals jQuery en Mootools zijn ontwikkelaars in staat deze menu’s er steeds gelikter uit te laten zien door gebruik te maken van effecten zoals sliding en fading. Op het gebied van uitstraling is dropdown navigatie vaak een lust voor het oog, maar op het gebied van usability een doorn in het oog.

De problemen

Onduidelijk en omslachtig

Het grote probleem bij dropdown menu’s is dat ze voor de gebruiker vaak onduidelijk en omslachtig zijn. Zeker als er gebruik wordt gemaakt van meerdere niveau’s. Ik geef aan de hand van onderstaande afbeelding een voorbeeld.

 

De gebruiker gaat via Stuff -> Another Level -> Last Level naar de pagina ‘Test 2’. Het probleem is dat als hij eenmaal op ‘test 2’ heeft geklikt het menu weer helemaal inklapt. De kans is echter groot dat de gebruiker ook de pagina’s ‘test 3’ en ‘test 4’ wil bekijken. Dit zou in het ergste geval betekenen dat hij eerst weer omhoog moet scrollen naar het menu en vervolgens in het menu de juiste pagina weer op moet zoeken. En dit herhaalt zich voor iedere pagina die hij wil bekijken.

Als belangrijk voordeel van dropdown navigatie wordt vaak genoemd dat je met minder klikken je doel bereikt. Dit is in zekere zin waar. Uit bovenstaand voorbeeld blijkt echter dat het je wel meer tijd en ergernis kost.

Ongebruiksvriendelijk en hoge irritatiefactor

Bij navigatie die naar rechts uitklapt moet je nauwkeurig met je muis over een item bewegen om de volgende subitems te bereiken. Schiet je met je muis iets omhoog of omlaag dan klapt het menu vaak weer in. Dit is uiteraard zeer irritant. Je kunt dit voorkomen door een time-out in te stellen bij het verlaten van een item.

Javascript ondersteuning

De meeste dropdown menu’s maken gebruik van Javacript, en functioneren in sommige gevallen alleen als Javascript is ingeschakeld. Het laatste wat je wil is dat je navigatie niet werkt omdat iemand Javascript heeft uitgeschakeld. Zorg er dus op zijn minst voor dat je navigatie ook toegankelijk is zonder Javascript.

SEO

Het gebruik van dropdown navigatie betekent dat op iedere pagina links staan naar alle pagina’s binnen een website. Een zoekmachine kan relevante pagina’s hierdoor minder goed aan elkaar koppelen. Tevens zullen pagina’s die niets met elkaar te maken hebben ook naar elkaar gaan verwijzen. Dit alles komt on-site optimalisatie natuurlijk niet ten goede.

De oplossing

Contextuele navigatie

Een goed alternatief voor dropdown navigatie is gebruik te maken van contextuele navigatie. Hierbij wordt subnavigatie pas getoond op de desbetreffende ‘parent’ pagina. Het voordeel hiervan is dat de relevante subnavigatie in beeld blijft en het voor de gebruiker veel makkelijker wordt om door een bepaalde gedeelte van de website te navigeren.

Het is belangrijk van tevoren een duidelijke informatiestructuur op te zetten waarop de navigatie wordt gebaseerd. Het moet voor de gebruiker duidelijk zijn waar hij in de hoofdnavigatie op gaat klikken. Door de subnavigatie vervolgens te tonen kunnen gebruikers veel sneller, duidelijker en makkelijker navigeren.

Tevens worden op deze manier relevante subpagina’s alleen gekoppeld aan de bijbehorende ‘parent’ pagina’s, wat on-site optimalisatie met betrekking tot SEO ten goede komt.

Een erg goed voorbeeld van contextuele navigatie is de website van Wehkamp.

Duidelijke hoofdnavigatie

Duidelijk contextuele (sub)navigatie

Breadcrumbs

Breadcrumbs navigatie is een zeer goede aanvulling, zeker in combinatie met dropdown navigatie, omdat dit de gebruiker extra navigatiemogelijkheden biedt zonder opnieuw het dropdown menu te moeten raadplegen.

Conclusie

Probeer het gebruik van dropdown navigatie zoveel mogelijk te voorkomen. Wil je er toch gebruik van maken let dan op de volgende punten:

• navigatie moet ook zonder Javascript functioneren
• gebruik maximaal 1 niveau
• gebruik aanvullend breadcrumbs navigatie
• stel een time-out in zodat het menu niet direct verdwijnt als een gebruiker met zijn muis vane en item afgaat

Bronnen:
http://netters.nl/dropdown-menu-usability
http://www.useit.com/alertbox/20001112.html
http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/