Snel naar de juiste plek met de dropdown navigatie

Het doel van een goede website navigatie is om de gebruiker zo min mogelijk te laten nadenken bij het vinden van adequate informatie. Dit is nog belangrijker dan dat men zo min mogelijk klikt. De gebruiker moet alle keuzes voorgeschoteld krijgen zonder dat het geheel onoverzichtelijk en druk is. Om deze funnel soepel te begeleiden is het dropdown menu bedacht.

De standaard dropdown werkt echter matig aangezien veel dropdowns voor verschillende doelen zijn ontworpen. De dropdowns kunnen een invulformulier, een navigatie menu, een selectie menu of een actie zijn. Hierdoor ontstaan er gebruiksproblemen en verwarring. (Drop-Down Menus: Use Sparingly Jakob Nielsen)

In de onderstaande afbeelding is de ontwikkeling van de dropdown te zien: vanuit een standaard dropdown naar een steeds uitgebreidere versie.

De oplossing: het mega dropdown menu

Een nieuwe variant op het dropdown menu is de mega dropdown. Onder is een voorbeeld van de Bijenkorf te zien.

Wat is het?

• Groot uitklapmenu verdeeld in groepen van navigatie opties.
• Navigatie gestructureerd door layout, typografie en/of icons.
• Alle keuzes in één overzicht .
• Eventueel afbeeldingen.
• Eventueel extra componenten.

Voordelen

• Functioneert goed en snel volgens gebruiksonderzoek (Mega Drop-Down Navigation Menus Work Well, Jakob Nielsen).
• Inspiratie bieden: bezoekers kunnen op meerdere ingangen zoeken zoals merk, kleur, etc.
• Prikkelende visuele ondersteuning.
• Ondersteunende componenten.

Voor wie?

• E-commerce websites: inspiratief zoeken
• Corporate websites, publishers, uitgevers en andere grote websites.

Gevaren

• Te grote dropdown
• Te veel ruis en afleiding in de dropdown
• Aanpassing bij toepassen mobiel

Onder zijn voorbeelden te zien die deze punten ondersteunen.

Hiërarchische mega dropdown

Een groot voordeel van de mega dropdown is de mogelijke hiërarchie. Een voorbeeld is de website van de Bijenkorf.

Gebruikers hoeven minder na te denken om tot hun doel te komen als de items geclusterd zijn op een logische manier. Deze clustering wordt het beste gemaakt in samenwerking met de gebruikers met behulp van card sorting. Deze clusters hoeven niet puur productgroepen te zijn maar kunnen ook overkoepelende groepen zoals ‘nieuw’ en ‘voordelen’. Zo kan het inspiratief zoeken ondersteunen. Een gevaar is wel teveel tekst: gebruik de stelregel van zeven kolommen en zeven rijen.

De visuele Mega dropdown

Naast de hiërarchie versnellen visuele middelen de navigatie. Een mooi voorbeeld van een mega dropdown met visuele elementen is de website van de Hema; alle onderwerpen zijn zichtbaar en de aanbiedingen staan er als prikkelend plaatje bij.

Mega dropdown plus

CVNO maakt naast hiërarchie en plaatjes ook gebruik van een service element. Naast de navigatie staat er rechts een visuele prikkel met een call-for-action button; een slimme manier om de aandacht te trekken en ondersteuning te bieden op het juiste vlak. Hiermee verschuift de dropdown navigatie steeds meer naar een kleine overliggende website.

Philips is hier nog verder mee gegaan; de plaatjes categoriseren de producten met eronder een banner en extra links. Het verschil tussen een normale pagina en de lay-over wordt steeds kleiner. Er ontstaan veel keuzes waardoor de vraag oprijst of de dropdown het doel van de intuïtieve navigatie wel goed blijft dienen en er geen verwarring zal ontstaan.

Conclusie

De mega dropdown is een ideale manier voor e-commerce websites en grote websites om de bezoeker snel en intuïtief te begeleiden binnen de website. Mits op de juiste manier toegepast. Denk daarom bij het ontwerpen aan de volgende punten:

1. Gebruik card sorting voor het clusteren van de teksten.
2. Gebruik niet meer dan de 7 kolommen en 7 rijen met tekst.
3. Maak gebruik van visualisaties, zowel als navigatie als prikkel.
4. Maak de dropdown niet te groot om te voorkomen dat de bezoeker verdwaalt.
5. Houd de navigatie als duidelijk hoofddoel en prop het niet te vol.
6. Zorg eventueel voor één call-for-action button om de conversie te vergroten.
7. Houd rekening met de mobiele website.