Ga naar de inhoud

De navigatiestructuur van je website: de 5 grootste fouten

Ron Geertsma - Upside
Ron Geertsma Laatste update: 18 april 2024
User Experience

Voordat ik aan de opleiding Communication and Multimedia Design begon was de navigatiestructuur van websites die ik maakte een perfecte weerspiegeling van de website. Niet meer dan logisch zou je zeggen. Echter leerde ik al snel tijdens de lessen User Experience Design dat ik nog een hoop te leren had. Dit zijn de meest gemaakte fouten die ik zelf heb gemaakt, en ook regelmatig voorbij zie komen. Aan welke maak jij je schuldig?

1. De vergeten footernavigatie

Om te beginnen de footer. Bij navigatie denk je al snel aan de balk aan de bovenkant van de website, maar de balk onderaan de website is minstens zo belangrijk. Toch zien we steeds vaker dat er zuinig gebruik wordt gemaakt van de footer. En dat terwijl het zeeën aan ruimte biedt. En dus kansen.

Stel je voor: een bezoeker komt via een post op LinkedIn terecht op een blog artikel. Hij leest de blog tot het einde, is getriggered en zoekt naar meer. Laat je hem dan naar boven scrollen, of reik je haar alvast de volgende stappen aan? Ik zou voor het laatste kiezen.

Een navigatie hoofdmenu
Een voorbeeld van het hoofdmenu
Website footer menu waarbij pagina's ontbreken van het hoofdmenu
Maar de belangrijkste pagina's ontbreken in het footermenu

2. De hamburgermenu op desktop

Deze trend zien we de laatste jaren steeds vaker: het hamburgermenu op desktop computers. Voor iemand die gebruiksvriendelijkheid hoog in het vaandel heeft, is het een doorn in het oog.

Waarom?

Ten eerste: in plaats van 1 klik om te navigeren zijn er nu 2 klikken nodig. Dan vraag je je misschien af of dat zo erg is. Ik vind van wel. Want het vergt meer van je cognitieve bandbreedte. Terwijl je juist daarop wilt besparen zodat de aandacht naar je content gaat.

En we hebben het niet over 1 klik. Stel dat iemand gemiddeld 7 pagina’s bekijkt. Dan zitten we alweer op 14 klikken. Je bent in mijn ogen iemand bewust aan het hinderen. Daardoor ben je diegene aan het ontmoedigen je content te consumeren. Gemiste kans.

Ten tweede: doordat je de navigatie verbergt krijgen je bezoekers geen indruk van de omvang en structuur van je website. Vergelijk dat eens met een boek waarvan je niet weet hoe dik hij is. Je hebt geen idee of je hem kunt uitlezen tijdens je 2 weken vakantie. Als de omvang onduidelijk is dan demotiveert het de gebruiker. En dat willen we niet.

Waar komt deze trend vandaan?

Het is natuurlijk ooit begonnen met de komst van smartphones. Door gebrek aan ruimte werd er naar een functionele oplossing gezocht. Nu wordt het bij grotere schermen ook vaak misbruikt vanuit een design oogpunt.

Er is een groep designers die websites nog steeds als affiches beschouwt. Het moet er goed uitzien. Hoewel dat van belang is, vergeten zij dat een website ook gebruikt moet worden.

Wij bij Upside zijn in ieder geval voorstander van functie over vorm. Dus hamburgermenu’s op desktop? Niet doen.

Een hamburgermenu als navigatie
Een hamburgermenu als navigatie

3. De onvervulbare zoekbalk

Een zoekbalk is een ideale manier om te navigeren tussen grote hoeveelheden content en pagina’s. Stel je eens voor hoe het zou zijn om bij Bol.com het boek De 100-jarige man die uit het raam klom en verdween te vinden zonder zoekbalk. Een hele opgave, toch?

Daarentegen zorgt een zoekbalk op een website met te weinig pagina’s ook voor de nodige frustraties. Als een bezoeker na drie keer zijn zoekvraag ingetypt te hebben weer ‘geen resultaten’ te zien krijgt, dan kan ik je garanderen dat hij overweegt zijn laptop uit het raam te gooien. En dat is slecht voor zaken. Tenzij je een computerwinkel runt natuurlijk.

Wij houden als vuistregel aan dat een website met minder dan 100 pagina’s geen zoekbalk nodig heeft.

Hier nog twee bonustips als het gaat om zoekbalken:

  1. Gebruik autosuggesties tijdens het typen in de zoekbalk. Een gebruiker weet niet altijd exact wat hij in moet typen. Zo maak je het makkelijk.
  2. Prioriteer je content. Ik raad SearchWP voor WordPress sites aan, waarbij je gewicht kunt geven aan bepaalde type content, zodat zij eerder verschijnen dan andere type content. Niets is zo vervelend als dat het eerste zoekresultaat je privacy voorwaarden is.
Zoekfunctie op een website waarbij niets wordt gevonden
Niet gevonden. Misschien toch maar een boek gaan schrijven?

4. ‘Contact’ als primaire actie

Ik moet bekennen dat wij ons hier vaak aan schuldig hebben gemaak: ‘contact’ als primaire call-to-action. Hoewel dit niet altijd een probleem hoeft te zijn, kan het steken van iets meer denkwerk in de call-to-action tot meer conversies leiden.

Ik schreef meer over conversies in mijn vorige blog: Conversieratio berekenen en verbeteren

‘Contact’ als actie laat veel aan de invulling van de gebruiker over. Want, de kans is groot dat achter die knop een contactformulier schuilt met de vragen: naam, e-mail en bericht. Als gebruiker niet fijn. Je weet niet goed wat er van je wordt verwacht.

In plaats daarvan zijn beschrijvende call-to-actions veel sterker. Denk bijvoorbeeld aan ‘Vraag een consult aan’, ‘Boek een call’ en ‘Vraag de demo aan’. Softwarebedrijven zijn in de regel sterk in beschrijvende call-to-actions. Hieronder bijvoorbeeld Slack:

De Slack website met 2 call to actions in de navigatie
Slack heeft zelfs 2 call-to-actions in het hoofdmenu

5. De overvolle navigatie

Soms kom je van die websites tegen die alles kwijt willen in de navigatie. Ik probeer dan altijd een voorstelling te maken van hoe het ontwerpproces is geweest. De ontwerper – met de opdrachtgever hijgend in haar nek – zoveel mogelijk items in de navigatie proppend. Dat doet me denken aan die overvolle Japanse treinen (die overigens wel weer stipt op tijd vertrekken).

 

Een overvolle trein in Japan

 

Het probleem met een overvolle navigatiestructuur is dat het overzicht verdwijnt en de bezoeker niet alles kan opnemen. Bij het laatste menu-item is de bezoeker de eerste twee alweer vergeten. Dat zorgt voor keuzestress. En dat gaat weer ten koste van de cognitieve bandbreedte.

Waarschijnlijk herken je het wel: de meeste Chinese restaurants in Nederland hebben een menukaart met honderden gerechten. Na het zien van 20 gerechten hebben de meeste mensen het wel gehad. Wat wordt er dan in 90 procent van de gevallen uiteindelijk gekozen? De vertrouwde Babi Pangang en Foe Yong Hai. Ik durf te wedden dat als deze restaurants 80 procent van hun kaart schrappen, de overige gerechten significant vaker worden besteld dan nu het geval is.

Overdaad dus. De gouden regel is dat je niet meer dan 7 menu-items per navigatielaag moet bieden. Daarboven maak je het je bezoekers te ingewikkeld. Dus maximaal 7 items in je hoofdmenu, 7 in je submenu, weer 7 in je subsubmenu. Enzovoort.

De Asana website heeft teveel opties in de navigatie staan
Help? Iemand?

Tot slot: steek tijd in de navigatiestructuur

Neem de tijd om de menustructuur van je website goed uit te werken. Maak elke keuze vanuit het perspectief van je bezoeker. Test je navigatie eventueel via een platform als UsabilityHub. Hier kun je voor een klein bedrag de opdracht uitzetten om echte mensen je navigatie te laten testen.

Een goede navigatiestructuur brengt je veel voordelen:

  1. Het zorgt voor een betere ervaring, dus een blije bezoeker.
  2. Een blije bezoeker wordt sneller klant, dus jij ook blij.
  3. Google houdt van duidelijke navigatie. Dus sneller gevonden.

 

Het juiste webdesignbureau kiezen? In het artikel How to choose a web design company van Designrush leggen ze in 10 stappen uit hoe je dat doet.