De gebruiks(on)vriendelijkheid van een fly-out menu
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.
What about user experience! Al meer dan 10 jaar ben ik werkzaam in de online scene. Ik analyseer door zowel kwalitatieve als kwantitatieve technieken in te zetten, wat gebruikers nodig hebben, hoe zij zich gedragen op internet en welke drijfveren zij hebben. Met deze verkregen inzichten help ik bedrijven en organisaties hun klanten en relaties te begrijpen en te kijken welke kansen zij hebben om de user experience te verbeteren en te innoveren. Specialiteiten ● UX Research : (remote) usability testen, eyetracking, groepsdiscussies, face-to-face interviews, enquêtes, AB en Multivariate testen, card sorting, tree testen, taakanalyse, Google Analytics ● UX Design : customer journey mapping, user flows, user scenario’s, persona’s, navigatie -en contentstructuur , informatie architectuur, wireframing Alles voor zowel desktop, mobiel, tablet en apps. U kunt mij altijd benaderen voor interim dienstverbanden of freelance opdrachten.
@Walter: hoe bedoel je dat de tips elkaar tegenspreken?
Volgens mij kan je een vertraging voor verbergen alleen met Javascript regelen, of niet?
@Walter: dat klopt. Dus als je dan toch een fly-outmenu wil gebruiken, zorg dan voor een vertraging.
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).
@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.
@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…
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.
Ook even stilstaan bij de spiderbaarheid van de menu’s, ivm SEO.
Grappig,
Hij werkt niet eens in FF3. Dan ben je toch zeker wel een (redelijk) ervaren internet gebruiker als je FF3 gebruikt. 🙂
@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.
Gerelateerde artikelen
Marketingfacts. Elke dag vers. Mis niks!
Marketingfacts. Elke dag vers. Mis niks!