Dropdown menu’s en usability: goud of fout?

Dropdown menu’s, fly-out menu’s, of uitklapmenu’s. Hoe je het ook wilt noemen, menu’s waarbij een volgend menu uitklapt, om zo met zo weinig mogelijk clicks je doel te bereiken kent iedereen wel. Het is een algemeen goed geworden. En ja, als je ruimte wilt besparen, of gebruikers zo snel mogelijk toegang tot je content wilt geven, dan lijken dropdown menu’s de ultieme oplossing. Maar is dat ook zo? Wat zijn de voor- en nadelen van dit soort navigatie mogelijkheden? In dit artikel bespreek ik een aantal zaken, op zowel usability als op SEO gebied, die je hopelijk kunnen helpen hier een goede keuze in te maken.

Dropdown menu’s en usability

In de inleiding noemde ik al een aantal voordelen van dropdown menu’s, te weten:

  1. Ruimtebesparing
  2. De snelheid waarmee je de gewenste pagina kunt bereiken

Ruimtebesparing

Ja, ruimtebesparing klinkt als een goed en onweerlegbaar argument. Misschien is dat ook zo, maar je kunt jezelf ook afvragen of je überhaupt veel ruimte nodig hebt. Met andere woorden: heb je de navigatie wel dusdanig goed ingedeeld waardoor je zoveel menu items nodig hebt? Ga dit goed na voordat je sowieso begint aan een subnavigatie.

Snelheid

Over dit punt valt wat meer te zeggen. Zoals Steve Krug in zijn boek Don’t Make Me Think al aangeeft is het met zo min mogelijk clicks te doel bereiken niet de belangrijkste usability regel, maar juist het zo min mogelijk laten denken. Mensen scannen een pagina snel en klikken dan zonder veel na te denken. En wat gebeurt er als je dropdown menu’s gebruikt? Mensen gaan (zonder na te denken) met hun muis ernaartoe en zien ineens een nieuw menu. Ho! Dat hadden we niet verwacht. Wat staat hier nu weer? En je bezoekers slaan weer aan het nadenken. Ik zeg niet dat dit altijd zo het geval is, maar bedenk wel dat submenu’s niet zo 1-2-3 in het beeld van scannen en klikken vallen.

Gebruikersgemak

Stel nu dat je bovenstaande argumenten goed hebt overwogen en tot de conclusie bent gekomen dat je site echt niet zonder submenu’s kan, zorg er dan voor dat je menu in ieder geval probleemloos werkt. Denk hierbij aan de volgende punten:

  • Zorg voor een time-out (ongeveer 250ms) bij het verlaten van een submenu, zodat het submenu niet meteen weg springt als je net even een pixel buiten de grenzen komt.
  • Alle pagina’s uit het menu moeten goed bereikbaar zijn voor de gebruikers die geen javascript ondersteuning hebben. Hiervoor kun je gebruik maken van het suckerfish menu of de meer gebruiksvriendelijke (en daar gaat het om) Dickerfish versie.
  • Pas op met dropdown menu’s in een verticale navigatiestructuur. De ruimte om een submenu uit te laten klappen is namelijk vele malen kleiner (en vaak ook te klein) dan bij een horizontaal menu.
  • Ga nooit verder dan één level diep. Gebruikers weten zo helemaal niet meer wat ze moeten kiezen en de kans dat per ongeluk uitschieten met de muis en daardoor hun menu ‘kwijt zijn’ wordt als maar groter. Waarschijnlijk is dat ook de reden dat Windows Vista in hun Start menu geen flyouts meer gebruikt. Zie ook Fitss’s law.

Alternatieven

Misschien ben je overtuigd door bovenstaande argumenten om geen dropdown menu’s te gaan gebruiken, maar zit je nog wel met het probleem dat je een behoorlijk uitgebreide navigatie hebt. De meest logische oplossing hiervoor zijn contextuele menu’s. Een hele mooie term, maar in feite is het niets anders dan een submenu, losgetrokken uit de hoofdnavigatie, die op de relevante pagina’s staat. Een goed voorbeeld hiervan vind je op de Wehkamp site, die een behoorlijk uitgebreide navigatie heeft.

Dropdown menu’s en SEO

Nu ik bovenstaande gezegd heb over contextuele menu’s kan ik ook wat zeggen over de SEO kant van het hele verhaal. In eerste instantie valt er wat te zeggen over het negatieve effect (in SEO opzicht) bij het gebruik van submenu’s en wel in het geval van siloing.

Als er bij een grote navigatiestructuur (zoals die van de Wehkamp) gebruikt gemaakt zou worden van dropdown menu’s, dan hebben die links weinig waarde en wel om twee redenen: relevantie en aantal. Relevantie, omdat een link naar schoenen nu eenmaal niet zoveel zegt vanaf een pagina waar lingerie wordt verkocht. En ‘aantal’ omdat de link naar de schoenensectie ‘verborgen’ zit in een megamenu, die waarschijnlijk door block level analysis nog eens weinig waarde heeft ook (aangenomen dat block level analysis überhaupt wordt meegenomen in de algoritmes).

Nu moet ik echter wel eerlijk bekennen dat bovenstaand negatieve effect redelijk makkelijk ongedaan gemaakt kan worden door slim te nofollowen, maar er is nog een andere kant die het gebruik van submenu’s afraadt. Namelijk die van het eerder genoemde alternatief, contextuele menu’s.

Contextuele menu’s kunnen in SEO opzicht erg handig zijn omdat het een klein aantal relevante linkjes is op een relevante pagina. En omdat deze linkjes niet in het grote menu zitten heb je grote kans dat ze meer waarde krijgen, omdat ze juist buiten de block level analysis vallen en daarbij erg relevant zijn gezien de rest van de content op de pagina. Dus juist om door een ander soort menu te kiezen heb je een goede reden om geen dropdown menu’s te gebruiken.

Conclusie

Wie mijn verhaal goed gelezen heeft zal er waarschijnlijk wel achter zijn gekomen dat ik niet heel gecharmeerd ben van dropdown menu’s. En hoewel daar (zie verhaal) genoeg redenen voor te zijn bedenken, kan ik me voorstellen dat er in sommige situaties toch wel voor een dropdown menu kan worden gekozen. Het enige wat ik dan nog kan doen is het volgende setje tips meegeven.

  • Maak duidelijk dat er submenu’s aanwezig zijn, door middel van een pijltje of ander icoontje in het ‘moeder-item’
  • Zorg ervoor dat het dropdown menu vlekkeloos werkt (zie het suckerfish en Dickerfish menu)
  • Maak een dropdown menu nooit in een verticaal menu.
  • Gebruik nooit meer dan 1 level diep

Bronnen