De gebruiks(on)vriendelijkheid van een fly-out menu

De gebruiks(on)vriendelijkheid van een fly-out menu

{title}

U kent ze ongetwijfeld. De navigatiemenu’s die uitschuiven op het moment dat u er met de muis overheen gaat. Een voorbeeld hiervan is de website van Continental banden. Aan het toepassen van een fly-out menu kleven een aantal nadelen, die ik hieronder zal bespreken. Verder zijn er ook enkele oplossingen te noemen die het gebruik van een fly-out menu kunnen bevorderen.

Enkele nadelen bij het gebruiken van fly-out menu’s:

  • Oudere internetgebruikers die relatief weinig internetervaring hebben, ervaren problemen bij het kiezen van het juiste menu-item. Daarnaast hebben oudere gebruikers vaak een minder fijne motoriek waardoor het aanwijzen van het juiste menu-item lastiger is.
  • Gebruikers dienen alle menu’s te doorlopen om te zien welke content er wordt aangeboden.
  • Lastig om het juiste menu-item aan te klikken als de muis buiten het menu terecht komt. Het menu verdwijnt dan namelijk weer en men dient de muis opnieuw over het menu-item te bewegen.
  • De content achter de menu-items is niet meer zichtbaar.

Het voordeel van een fly-outmenu is dat er ruimte wordt bespaard. Daarnaast zijn er enkele oplossingen die het gebruik bevorderen:

  • Zorg dat het menu werkt zonder Javascript vanwege redenen met betrekking tot accessibility. Anders kunnen zoekmachines de site niet indexeren en de site lijdt dan onder het feit dat de accessibility niet goed is.
  • Gebruik een vertraging voor het verbergen van het fly-outmenu. Een tijdspanne van 250 milliseconden is voldoende.
  • Gebruik alleen horizontale menu’s met verticale fly-out menu’s. Zoals het menu in de website van Continental banden nu is vormgegeven (verticale menu’s), is de afstand waarbinnen de muis zich naar rechts kan begeven zonder dat het menu verdwijnt, te klein. Hierdoor is de kans groot dat het menu onvrijwillig verdwijnt.
  • Dit menu type is goed bruikbaar bij ervaren internetgebruikers.

Mijn advies is om, als het niet nodig is, geen fly-out menustructuur te gebruiken. In usabilityonderzoeken voor onze klanten zie ik genoemde nadelen bijna altijd optreden en de gebruiker reageert meestal niet positief op een dergelijke navigatiestructuur. Op Welie.com is een lijst te zien met onder andere navigatiestructuren en de voor- en nadelen daarvan.


Geplaatst in

Delen



Er zijn 13 reacties op dit artikel

  • Tip één en twee spreken elkaar tegen denk ik of niet? Ik vind de flyout op de continental site wel echt verschrikkelijk trouwens: in Firefox doet ie het niet eens! De Son of Suckerfish menu's zijn trouwens een aanrader: semantische xhtml, cross browser compatibiliteit en in veel browsers geen javascript nodig: http://htmldog.com/articles/suckerfish/dropdowns/

    geplaatst op
  • @Walter: hoe bedoel je dat de tips elkaar tegenspreken?

    geplaatst op
  • Volgens mij kan je een vertraging voor verbergen alleen met Javascript regelen, of niet?

    geplaatst op
  • @Walter: dat klopt. Dus als je dan toch een fly-outmenu wil gebruiken, zorg dan voor een vertraging.

    geplaatst op
  • Mooie artikel. Heel duidelijk ook. Ik maak ook gebruik van een fly-outmenu. Horizontaal. Naar mijn mening is dit toch overzichtelijk ondanks het feit dat dat niet wordt aangeraden. Ik denk dat het ook te maken heeft met hoe een menu eruit ziet. Bekijk mijn menu maar eens op yeos.nl en mag ik jullie ervaringen en meningen ervan weten?

    geplaatst op
  • @Lex: dit is ook een manier van het toepassen van een horizontaal fly-outmenu. Bij sommige topmenu-items staan de links naast elkaar. Bij het gebruik daarvan merk je dat je preciezer met je muis moet bewegen om de juiste link aan te klikken. De topmenu-items waar je de links onder elkaar hebt staan werken efficienter. Zelf maak ik op mijn website ook gebruik van een horizontaal fly-outmenu. Bij het aanklikken van een topmenu-item of een submenu-item worden de submenu-items aan de linkerkant ook weergegeven zodat je ook gebruik kunt maken van het linkernavigatie-menu.

    geplaatst op
  • Een belangrijk voordeel van een uitklapmenu is dat een groot aantal pagina's rechtstreeks te bereiken is zonder dat dit een enorme oppervlakte aan links oplevert. Als de indeling en naamgeving van de items niet logisch is, of als het om heel veel (sub)items gaat, heeft het geen meerwaarde omdat de bezoeker niet weet welke pagina's er zijn en waar die te vinden zijn.

    Mijn voorkeur gaat absoluut uit naar een navigatiebalk met de menukeuzes op het eerste niveau, gecombineerd met een contextueel menu met relevante items (bijv. bovenliggende pagina, zusterpagina's en onderliggende pagina's).

    geplaatst op
  • @Robert: Dat is inderdaad slim aangepakt zo. Ik heb ongeveer hetzelfde alleen heb ik op elke pagina meteen rechts een menutje staan met daarin de secties en sub categorieën.

    Dan wordt er toch geen verlies geleden in het makkelijk navigeren aangezien ook daarin in meteen duidelijk is over welke items het gaat of wat eronder zit. Dus inprincipe is beide makkelijk lijkt mij.

    geplaatst op
  • @Robert-Jan: Ik zie niet echt verschil in de usability van een horizontaal of juist verticaal uitklapmenu. Jammer dat je op jouw website aan de linkerkant niet op het gehele oplichtende vlak van een link kunt klikken, maar alleen op de tekst...

    geplaatst op
  • Onder Opera werkt dat fly-out menu van Continental niet eens... hoe krijg je het voor elkaar; iets niet werkend krijgen in nét de enige browser die wél alle standaarden goed toepast.

    geplaatst op
  • Ook even stilstaan bij de spiderbaarheid van de menu's, ivm SEO.

    geplaatst op
  • Grappig,

    Hij werkt niet eens in FF3. Dan ben je toch zeker wel een (redelijk) ervaren internet gebruiker als je FF3 gebruikt. :-)

    geplaatst op
  • @Sint: horizontaal navigeren is toch moeilijker als je twee tot drie niveau's diep (naar rechts en dan bijvoorbeeld naar rechtsboven) moet en ervoor moet zorgen dat je dan de juiste hoofd- en submenu-items in beeld houdt zonder ze weg te laten floepen. Een ervaren internetgebruiker gaat dit makkelijker af dan een persoon die weinig op internet komt. Probeer de Continenental site nog maar eens.

    En wat betreft mijn navigatiemenu. Ik geef je geen ongelijk. Het oplichten van de gehele balk is gebruiksvriendelijker. Het werkt sneller en efficienter. Ik ga hier naar kijken.

    geplaatst op

Plaats zelf een reactie

Log in zodat je (in het vervolg) nóg sneller kunt reageren

Vul jouw naam in.
Vul jouw e-mailadres in. Vul een geldig e-mailadres in.
Vul jouw reactie in.

Herhaal de tekens die je ziet in de afbeelding hieronder


Let op: je reactie blijft voor altijd staan. We verwijderen deze dus later niet als je op zoek bent naar een nieuwe werkgever (of schoonmoeder). Reacties die beledigend zijn of zelfpromotioneel daarentegen, verwijderen we maar al te graag. Door te reageren ga je akkoord met onze voorwaarden.