Als het over navigatie gaat, gaat het bijna altijd over het menu. Hoeveel items erin passen, of er een uitklap in moet, welke volgorde het beste werkt. Dat is een belangrijk gesprek. Alleen komt het merendeel van je bezoekers helemaal niet binnen via je menu.
Ze landen via Google op een dieptepagina. Wat daar staat, bepaalt hoe ze verder gaan.
Dat maakt navigatie veel breder dan een balk bovenaan. Elke link die je plaatst is een wegwijzer.
Bij een controle kijk ik daarom niet alleen naar het menu. Ik kijk vooral of iemand vanaf een willekeurige pagina zijn weg kan vinden naar wat hij zoekt.
Navigatie is niet alleen je menu. Het is elke wegwijzer die je plaatst.
Wat is navigatie?
Navigatie is het geheel aan wegwijzers waarmee bezoekers zich door je site bewegen. Er zijn er vijf soorten en ze doen elk iets anders.
Je hoofdmenu bovenin toont de hoofdroutes. Je footer vangt de rest op. Voorwaarden, privacy en pagina’s die er wel moeten zijn maar niet bovenaan horen.
De drie die vaak vergeten worden
Een kruimelpad laat zien waar iemand zit binnen je structuur, zie breadcrumb.
Een zoekfunctie helpt bij veel pagina’s, maar alleen dan. Op een site met tien pagina’s gebruikt niemand hem.
En links in je tekst zijn misschien wel de belangrijkste. Die zetten je bezoeker precies daar door waar hij aan het lezen is.
Het verschil met informatiearchitectuur
Die twee worden door elkaar gehaald. Informatiearchitectuur is de plattegrond: welke pagina’s er zijn en hoe ze zijn gegroepeerd.
Navigatie is de bewegwijzering in dat gebouw. Je kunt prima borden ophangen in een gebouw met een onlogische indeling, maar dan blijft het zoeken.
Begin dus bij de structuur en pas daarna bij het menu.
Hoeveel menu-items?
Vijf tot zeven. Meer wordt een lijst die je leest in plaats van scant.
Wat ik daarnaast aanhoud
Elke belangrijke pagina binnen drie klikken bereikbaar.
Namen die je klant gebruikt, niet je interne termen.
Geen uitklapmenu’s dieper dan een niveau.
De actieknop visueel anders dan de rest.
Die tweede is de meest verwaarloosde. Diensten heten intern vaak anders dan waar je klant naar zoekt.
Op mobiel
Daar wordt je menu een knop met drie streepjes. Dat werkt, mits die knop groot genoeg is om met een duim te raken.
Zorg dat het geopende menu te sluiten is met een duidelijk kruisje. En zet je belangrijkste actie zichtbaar naast die knop, niet erin verstopt. Meer daarover lees je bij header.
Toegankelijkheid
Je hele navigatie moet met het toetsenbord te bedienen zijn. Een uitklapmenu dat alleen opent bij hover, valt daarbuiten.
Zorg ook voor een zichtbare focus, zodat iemand ziet waar hij is tijdens het tabben. En geef je menu een herkenbare rol in de code, zodat hulpsoftware het als navigatie aankondigt.
Dat kost bij het bouwen niets extra, mits je eraan denkt. Achteraf repareren is een stuk duurder. Meer daarover lees je bij accessibility.
Links in je tekst wegen zwaar
Iemand die een artikel leest, is op dat moment ontvankelijk. Een link naar de bijbehorende dienst werkt daar beter dan een menu-item bovenin.
Dat geldt ook voor zoekmachines. Links in je lopende tekst zeggen meer over de samenhang van je site. Meer dan links die overal staan.
Een zoekfunctie is geen redmiddel
De grens ligt ruwweg bij vijftig pagina’s. Daaronder gebruikt bijna niemand hem en neemt hij alleen ruimte in.
Heb je er wel een, kijk dan in je statistieken wat mensen intypen. Dat is een van de eerlijkste bronnen over wat je bezoekers zoeken en niet vinden.
Test het op iemand anders
Vraag iemand die je site niet kent om een specifieke dienst te vinden. Lukt dat niet binnen twee klikken, dan zit het probleem dieper dan je menu.
Jij kent je eigen site te goed om nog te merken waar iemand vastloopt. Dat is precies waarom deze test werkt.
Meer vragen over Navigatie
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is navigatie op een website?
Hoeveel items horen er in een hoofdmenu?
Wat is het verschil tussen navigatie en informatiearchitectuur?
Heb je een zoekfunctie nodig op je website?
Hoe werkt navigatie op mobiel?
Waarom zijn links in je tekst belangrijk?
Wat is navigatie op een website?
Vijf tot zeven. Meer wordt een lijst die je leest in plaats van scant, en dat kost je bezoeker tijd.
Daarnaast houd ik vier regels aan. Elke belangrijke pagina moet binnen drie klikken bereikbaar zijn vanaf je homepage.
Gebruik namen die je klant gebruikt en niet je interne termen. Dat is de meest verwaarloosde regel, want diensten heten intern vaak anders dan waar mensen naar zoeken.
Gebruik geen uitklapmenu’s dieper dan een niveau. Twee niveaus diep werkt op een telefoon vrijwel niet.
En geef je actieknop een andere vormgeving dan de rest van je menu. Dan ziet iemand in een oogopslag wat de bedoeling is. Meer daarover lees je bij header.
Kijk in je statistieken welke menu-items echt worden aangeklikt. Items die maandenlang op nul staan, horen niet in je hoofdmenu thuis.
Die ruimte gebruik je beter voor je belangrijkste dienst of je contactknop. Schrap net zolang tot je elk item kunt verantwoorden.
Hoeveel items horen er in een hoofdmenu?
Navigatie is het geheel aan wegwijzers waarmee bezoekers zich door je site bewegen. Er zijn vijf soorten en ze doen elk iets anders.
Je hoofdmenu bovenin toont de hoofdroutes. Je voettekst vangt de rest op: voorwaarden, privacy en pagina’s die er wel moeten zijn maar niet bovenaan horen.
Een kruimelpad laat zien waar iemand zit binnen je structuur. Een zoekfunctie helpt bij veel pagina’s, maar alleen dan.
En links in je lopende tekst zijn misschien wel de belangrijkste. Die zetten je bezoeker precies daar door waar hij aan het lezen is.
Dat laatste wordt vaak vergeten. Als het over navigatie gaat, gaat het bijna altijd over het menu. Terwijl het merendeel van je bezoekers via Google op een dieptepagina binnenkomt en je menu nooit gebruikt.
Bedenk dat het merendeel van je bezoekers via Google op een dieptepagina binnenkomt. Die gebruiken je menu misschien nooit.
Kijk dus niet alleen naar je menu maar ook naar wat er op je pagina’s zelf staat aan wegwijzers.
Wat is het verschil met informatiearchitectuur?
Informatiearchitectuur is de plattegrond: welke pagina’s er zijn en hoe ze gegroepeerd zijn. Navigatie is de bewegwijzering in dat gebouw.
Je kunt prima borden ophangen in een gebouw met een onlogische indeling. Alleen blijft het dan zoeken, hoe duidelijk je borden ook zijn.
Daarom begin ik altijd bij de structuur en pas daarna bij het menu. Andersom werkt niet, want dan probeer je een probleem op te lossen dat er niet zit.
Herken je dit? Je hebt je menu al drie keer herschikt en mensen vinden het nog steeds niet. Dan is je indeling het probleem en niet je menu.
Meer daarover lees je bij informatiearchitectuur.
Herken je dit? Je hebt je menu al drie keer herschikt en mensen vinden het nog steeds niet. Dan is je indeling het probleem en niet je bewegwijzering.
Begin in dat geval opnieuw bij je structuur. Een nieuw menu op een oude indeling lost niets op.
Heb je een zoekfunctie nodig op je website?
Alleen bij veel pagina’s. Op een site met tien pagina’s gebruikt vrijwel niemand hem.
De grens ligt ruwweg bij vijftig pagina’s, of eerder als je een webshop hebt met veel producten. Dan wordt zoeken sneller dan bladeren.
Heb je hem, kijk dan wel in je statistieken wat mensen intypen. Dat is een van de eerlijkste bronnen die je hebt over wat je bezoekers zoeken.
Staan daar termen bij die je niet aanbiedt? Dan weet je waar een kans ligt. Staan er termen bij die je wel aanbiedt maar die niet gevonden worden? Dan klopt je navigatie niet.
Zet de zoekfunctie niet prominent in je menu als je hem niet nodig hebt. Hij neemt ruimte in die je beter kunt gebruiken.
Kijk wat mensen intypen in je zoekfunctie als je er een hebt. Staan daar termen bij die je wel aanbiedt maar die niet gevonden worden, dan klopt je navigatie niet.
Dat is gratis onderzoek dat over jouw bezoekers gaat.
Hoe werkt navigatie op mobiel?
Daar wordt je menu een knop met drie streepjes. Dat werkt prima, mits die knop groot genoeg is om met een duim te raken.
Zorg dat het geopende menu te sluiten is met een duidelijk kruisje. Alleen ernaast tikken is niet genoeg, want dat weet niet iedereen.
Zet je belangrijkste actie zichtbaar naast die knop en niet erin verstopt. Een telefoonnummer of een offerteknop hoort direct bereikbaar te zijn.
Let er ook op dat alles met het toetsenbord te bedienen is. Een uitklapmenu dat alleen opent bij hover, werkt niet op een aanraakscherm en niet voor iemand die tabt.
Test het op een echt toestel en niet in je browser. Daar voel je pas of het prettig werkt. Meer daarover lees je bij accessibility.
Test je menu op een echt toestel en niet in je browser. Daar voel je pas of de knop met een duim te raken is.
Doe die test ook staand en liggend, want dat scheelt meer dan je zou denken.
Vinden bezoekers op jouw site niet wat ze zoeken? Stuur me de link via het formulier hieronder. Ik loop je menu, je kruimelpad en je interne links na en kijk of iemand vanaf een dieptepagina zijn weg kan vinden. Vermeld je plaats, dan weet ik meteen waar je zit.
