Er is weinig zo frustrerend als iets níét kunnen vinden op een website. Een goede navigatie helpt gebruikers om te vinden wat ze zoeken. Het bevat bijna altijd een subnavigatie of submenu. Maar welke is het meest gebruiksvriendelijk voor op een mobiel? Op een mobiel is namelijk minder ruimte op het scherm én je kan er niet hoveren. Hoe zorg je dan voor het beste submenu? Wij kregen er de laatste tijd steeds vaker vragen over, daarom zetten we het in dit artikel voor je op een rij.
Wat je moet weten over submenu’s
We beginnen bij het begin. Een submenu is de navigatie die gebruikers helpt om ‘lower-level’ categorieën te vinden. Dus, niet de items die in het hoofdmenu staan, maar alles wat daar onder hangt. Dus niet het hoofditem: ‘diensten’, maar dat wat daaronder zit: ‘klantreizen’, ‘interaction (UX) design’, ‘websites’, etc.
Er is simpelweg niet genoeg ruimte om al die items in het hoofdmenu te zetten. Dat maakt de informatie niet minder relevant of belangrijk. Daarom wil je voorkomen dat gebruikers afhaken voordat ze de informatie via je submenu hebben gevonden. Hiervoor zijn een aantal dingen waar je rekening mee moet houden:
- Zorg dat je het submenu niet kunt missen
Maak het submenu zo zichtbaar dat je het niet kunt missen. En zorg er vooral voor dat het niet te verwarren is met het hoofdmenu. Dat klinkt misschien als een open deur. Maar let er maar eens op, en het zal je verrassen hoe vaak dit nog misgaat.
- Maak het de gebruiker zo makkelijk mogelijk
Het moet je gebruikers zo min mogelijk moeite kosten om via het submenu iets te vinden. Dit betekent: weinig klikken, zo min mogelijk scrollen en het liefst geen nieuwe pagina’s die geladen moeten worden.
- Ondersteun het gedrag van je gebruiker
Het hangt af van het soort website hoe een submenu wordt gebruikt. Als gebruikers vaak van de ene sectie naar het andere springen, dan levert dit een heel ander submenu op dan wanneer gebruikers in dezelfde hoek blijven hangen. Denk aan een nieuwswebsite waar sommige lezers alleen het sportnieuws of juist alleen het zakelijke nieuws willen lezen.
Verschillende submenu’s voor op je mobiel
Zoals je hebt gelezen verschijnt het submenu bij een mobiel of tablet ‘on click’. Hoe dat submenu er dan precies uitziet, dat kan verschillen. Hieronder zie je drie vormen van een submenu aan de hand van onze eigen website.
Onze website heeft 5 hoofditems. Het hoofditem ‘diensten’ bevat 5 subitems:
- Methode
- Diensten
- Klantreizen
- Interaction (UX) design
- Digitaal design
- Website
- Hosting & support
- Over ons
- Werk
- Blog
Accordeon-menu
Bij een accordeon-menu bestaat elk hoofditem uit een accordeon. Deze accordeon klapt uit in de subitems. De rest van de hoofditems blijven (onuitgeklapt) zichtbaar. Eigenlijk een beetje zoals de opsomming hierboven. En zoals onze eigen website, als je hem op je mobiel bekijkt.
Submenu per hoofditem
Als je kiest voor deze optie gebeurt er het volgende. Zodra je klikt op ‘diensten’ kom je op een pagina met daarop een volledig nieuw menu. In dat submenu zie je ‘klantreizen’, ‘interaction (UX) design’, ‘digitaal design’, etc. Als het goed is, is het qua design meteen duidelijk dat dit het submenu is en niet het hoofdmenu. Deze vorm zie je vaak terug op nieuwswebsites. Het is namelijk een fijne manier van navigeren als je als gebruiker in een sectie blijft, bijvoorbeeld sport of zakelijk nieuws.
Landingspagina per hoofditem
Als je kiest voor deze optie gebeurt er het volgende. Zodra je klikt op ‘diensten’ kom je op een nieuwe landingspagina terecht. In plaats van een submenu is er een volledige pagina vol links met informatie naar de subitems. Deze optie zie je terug op websites met een grote database aan informatie. Bijvoorbeeld een universiteit die op één pagina alle links voor aankomende studenten heeft verzameld.
Ons advies
Je begrijpt dat elk van de bovenstaande vormen zijn voor- en nadelen heeft. Het hangt dan ook af van de situatie, welk submenu voor jouw website het beste is. Het beste submenu is namelijk degene die het jouw gebruikers zo gemakkelijk mogelijk maakt en hun gedrag zo goed mogelijk ondersteunt.
Maar, dat blijft natuurlijk een beetje vaag en algemeen. Daarom nog een aanvullende vuistregel die je helpt bij het kiezen van het beste submenu voor jou:
- Heb je minder dan 6 subitems per hoofditem? Dan past een accordeon-menu meestal goed.
- Heb je tussen de 6 en 15 subitems voor een aantal van je hoofditems? Dan is een submenu per hoofditem geschikt. Denk hierbij wel goed na of je gebruikers graag over de gehele website navigeren, of dat ze meestal in 1 sectie blijven hangen.
- Heb je meer dan 15 subitems per hoofditem? Dan is een landingspagina per hoofditem een goede oplossing om alle informatie duidelijk aan te bieden.
Hoe ziet dat eruit?
Het beste submenu voor een mobiel werkt op een andere manier dan het beste submenu voor een laptop. Dat is een bewuste keuze. Dit komt omdat je op een mobiel niet kunt ‘hoveren’. Daardoor moet je het submenu wel ‘on click’ laten verschijnen.
Wat je vervolgens wil voorkomen is dat één knop twee functies krijgt: namelijk het navigeren naar de pagina én het uitklappen van het submenu. Dat is verwarrend voor gebruikers. Daarom maken wij het hoofditem niet aanklikbaar, maar geven we het weer als eerste item in het submenu.
Dit betekent dat als je op een mobiel of tablet klikt op ‘diensten’, je het submenu opent en niet de pagina. De pagina over diensten open je wanneer je in het submenu op ‘diensten’ klikt.
Hieronder zie je dat in een animatie weergegeven.
Meer weten?
Ben je benieuwd wat er het beste bij jouw website en jouw doelgroep past? Laat van je horen, we denken graag met je mee.
