Fly-out’s of drop-downs zijn een populaire methode om vanuit het navigatiemenu grote hoeveelheden informatie te tonen, een hiërarchie tussen achterliggende pagina’s te verduidelijken of een duidelijk pad te geven aan je bezoekers. Maar er is ook een aantal nadelen aan verbonden, want fly-out’s hebben soms een negatieve impact op de gebruikservaring.
De basis van een goede navigatie
Wanneer mensen doorklikken naar je website, wil je die bezoekers graag aan boord houden. En dat kan alleen wanneer ze zo snel mogelijk de juiste weg vinden naar de informatie die ze zoeken.
Om die zoektocht zo efficiënt mogelijk te laten verlopen, zijn een doordachte architectuur en navigatie van je website essentieel.
Hierbij is het de kunst om je eigen website door de bril van je (toekomstige) klanten te bekijken, zodat de gebruikservaring voor hen logisch aanvoelt. Opdelingen maken is nuttig, maar om het menselijke kortetermijngeheugen te plezieren, bied je het beste maximaal zeven keuzemogelijkheden. Goudvissen in een digitale bokaal, dat zijn we ...
Daarnaast wil je de bezoeker een consistente ervaring bieden – zowel op desktop als mobiel een vergelijkbare look & feel – én wil je dat er zo weinig mogelijk clicks nodig zijn om bij de gewenste informatie te komen.
Tot slot wil je dat de navigatie geen nadelige invloed heeft op zaken zoals de laadtijd of de doorzoekbaarheid van je website voor zoekmachines. En als het even kan, moeten de structuur en navigatie van je website ook mee kunnen groeien met eventuele nieuwe noden van het bedrijf – denk aan een veranderend aanbod of een nieuwe marktbenadering.
Navigatie en een complexe(re) website
Voor bedrijven met een beperkt aanbod is dit meestal niet zo’n probleem, maar bij erg ingewikkelde of uitgebreide waaiers diensten en producten – denk bijvoorbeeld aan de grote e-retailers – is dat toch een ander paar mouwen.
Daar wordt vaak gewerkt met categorieën en subcategorieën die vaak nog eens verder worden opgedeeld met filters. Om te vermijden dat een klant verschillende keren moet klikken om bij de gewenste productcategorie te komen, gebruikt men in dit soort omgevingen vaak fly-out’s of complexere drop-downs.
Deze submenu’s – die alleen tevoorschijn komen wanneer een bezoeker een menuknop aanklikt of er overheen hovert met de muis – bieden heel wat interessante mogelijkheden, met name wanneer er veel informatie in een oogopslag toonbaar gemaakt moet worden.
Een opdeling van een gigantisch productaanbod, bijvoorbeeld, of een overzicht van content in verschillende kolommen. Submenu's kunnen ook de hiërarchie van pagina’s over een bepaald thema visueel verduidelijken, eventueel met grafische verduidelijkingen zoals symbolen of grafieken.
Tevens laten flyouts je toe om een verhaal op te bouwen (storytelling) én elementen uit je funnel (een download van een book, een trial, ...) in zo'n flyout in te bouwen.
Enkele voorbeelden van goed toegepaste drop-down menu’s:
#1 HubSpot
HubSpot gebruikt drop-downs om de hiërarchie van onderliggende pagina’s op een visuele manier te verduidelijken, door op thematische basis onderwerpen te bundelen. De menu’s zijn verder eenvoudig en visueel rustig opgebouwd.
#2 Coolblue
Voor Coolblue is het niet makkelijk om de gigantische productcatalogus netjes weer te geven. Een eerste categorie links geeft je een overzicht van de subcategorieën - zodat je snel vindt wat je zoekt.
#3 Bentley
Ook autofabrikant Bentley maakt gebruik van fly-out’s. De website leidt bezoekers haast automatisch naar de modellen of de wereld rond het luxemerk. Klik je op de button 'modellen' en hover je door de lijst die verschijnt, dan vullen attractieve fly-out’s de rechterkant van je scherm met informatie en visuals over de bolide van je keuze. Efficiënt en visueel erg aantrekkelijk.
Flyouts in de navigatie: niet voor iedereen?
Flyouts lijken vooral interessant voor mega menu’s die de beschikbare ruimte optimaal gebruiken om aan te geven wat er allemaal achter een categorie schuilgaat. Toch zijn ze geen oplossing voor alle problemen, want aan fly-out’s zijn ook nadelen verbonden.
Hier zijn enkele belangrijke:
#1 SEO-nadelen
Afhankelijk van de implementatie, kunnen drop-downs bijvoorbeeld een goede werking van crawlers verhinderen. En met je navigatie vertel je Google natuurlijk wat jij belangrijk vindt.
Maar wat doe je met de mobiele navigatie in dit mobile-first tijdperk? Een mobiele versie van een fly-out navigatie moet natuurlijk een pak eenvoudiger. Dat de desktop-navigatie verschilt van je mobile navigatie begrijpt Google wel - het gaat immers om een andere omgeving, en een andere interactie. Zolang je de belangrijkste pagina's en/of categorieën consistent weergeeft op de mobile navigatie help je Google begrijpen waarover je site gaat (en wat belangrijk is).
#2 Ongewenste shortcuts
Op een site waar de top-level pagina’s essentiële informatie bevatten voor je bezoekers, kunnen drop-downs ervoor zorgen dat bezoekers die informatie sneller mislopen. Een groot percentage klikt immers meteen door naar één van de dieper gelegen pagina’s, waardoor de bezoekcijfers van de top-level pagina teruglopen of bezoekers alsnog een extra klik moeten doen.
#3 Minder gebruiksgemak
Fly-out’s (met uitzondering van klikgeactiveerde) dwingen je bezoekers door zogenaamde hover tunnels, de zones waarbinnen de cursor moet blijven om een fly-out zichtbaar te houden. Dat vraagt meer inspanning van de gebruiker.
Heel wat mensen ervaren fly-out’s dan ook allerminst als gebruiksvriendelijk. En laat UX nu net een belangrijk argument zijn om flyouts te gebruiken ...
#4 Pixelperfect?
Bezoekers kunnen je website op heel wat verschillende manieren benaderen. Mobiel of op desktop, en met een haast oneindige waaier verschillende specificaties. Ervoor zorgen dat je website er op al deze platformen goed uitziet en perfect werkt, is dan ook geen sinecure.
Complexe drop-downs maken dat er niet eenvoudiger op. Zo kunnen verkeerd schalende fly-out’s ervoor zorgen dat bepaalde opties onbereikbaar zijn voor sommige bezoekers, of dat doorklikken zelfs volledig onmogelijk wordt.
#5 Mobiel, mobiel, mobiel
Drop-downs en mobiele toestellen zijn meestal geen fijne combinatie. Bij gebrek aan een muis worden ze sowieso klik-geactiveerd op een mobiel toestel, wat onnatuurlijk aanvoelt omdat de tekst vaak te klein wordt weergegeven op een smal telefoonscherm. Dat maakt navigeren lastig en zorgt vaak ook voor minder overzicht.
#6 Vatbaar voor UX-fouten
Fly-out’s bieden ontzettend veel mogelijkheden, maar dat betekent ook veel ruimte om tegen best practices te zondigen. Bijvoorbeeld door je bezoekers veel te veel keuzemogelijkheden te bieden (wat contraproductief werkt). Soms is minder echt meer.
Conclusie
Fly-out’s en dropdowns zijn geen one size fits all-oplossing. Ze zijn erg geschikt om grote, complexe opdelingen op een bevattelijke manier in beeld te brengen, met mogelijkheden die veel creatieve ruimte laten. Toch moeten ze met mate worden gebruikt, want ze kunnen ook contraproductief werken. Om erachter te komen of ze een oplossing kunnen zijn voor jouw website, overleg je dus best eerst met een specialist :-)
