Ik kom nooit in een supermarkt, maar het WC-papier was op en Marijke1 had geen tijd om boodschappen te doen.

“Popla Megarol moet je hebben. Vier rollen in een pak,” zei ze nog, behulpzaam, met een ondertoon van meewarig.

Ze wist natuurlijk al wat er zou gebeuren.

Want ik sta nou al een kwartier naar dat enorme schap met WC-papier te staren en ik zie geen Popla Megarol. Kijk ik er nou overheen? Zou het ergens anders staan?

En ik ga het echt niet aan een kassameisje vragen – straks roepen ze het nog om.

“Jeffrey, kassa twee, Jeffrey, kassa twee. Ik heb hier een meneer die de Popla niet kan vinden.”

Ik begin al een beetje te zweten.

Dat heb ik ook vaak bij de menustructuur van websites

Op een website wil ik meteen zien waar ik moet wezen. Daarvoor kijk ik naar de navigatiestructuur. Daar wil ik alles zien, liefst in één keer en hyperduidelijk.

Don’t make me think.2

Maar negen van de tien keer is zo’n menustructuur te lang, te vol en onduidelijk.

Ik krijg keuzestress als ik twaalf dingen in een navigatiebalk van een website zie staan.

Ik raak geïrriteerd als ik eerst op een hoofdmenu “Diensten” moet klikken om pas in een dropdownmenu te zien wat iemand verkoopt.

En ik word bloedlink als ik op een hamburger-menu moet klikken om überhaupt alle navigatieknoppen van de website te zien te krijgen.
.

Website-navigatiestructuur met hamburger-menu
Voorbeeld van een hamburger-menu. Bedoeld voor mobiele websites. Iedereen die zo’n menu op een gewone website toepast, verdient wat mij betreft een lijfstraf.

Maakt jouw website ook die navigatie-fouten?

Ik snap het wel.

Je hebt veel te vertellen. Dan heb je al gauw veel pagina’s nodig, en dus veel items in je navigatiestructuur.

Lees verder, dan vertel ik hoe je je menustructuur toch duidelijk en overzichtelijk kunt houden.

Verdeel je menustructuur in een primaire en een secundaire navigatie

Misschien had je er nog nooit van gehoord, maar met onderstaand voorbeeld snap je meteen wat ik bedoel:

Voorbeeld navigatiestructuur website met primaire en secundaire navigatie
Voorbeeld navigatiestructuur met primaire en secundaire navigatie op de website van business coach Ellen de Lange-Ros.

.
Bij Ellen zie je meteen what’s in store.

In de prominente primaire navigatie zie je alle hoofdzaken. In de secundaire navigatie zie je alle belangrijke bijzaken.

Hartstikke helder.

Waarom is een goede website-navigatie zo belangrijk?

Je navigatiestructuur bepaalt in belangrijke mate of bezoekers op je site blijven of meteen weer aftaaien.

En die menustructuur staat op elke pagina van je website. Ergo: als je je menustructuur verbetert, verbeter je je hele website. En de conversie ervan.

Wanneer gebruik je een navigatiestructuur met primaire en secundaire navigatie?

Als je meer dan zeven hoofdmenu’s in je menustructuur hebt, ga er dan serieus over nadenken.

Dat aantal is niet uit de lucht gegrepen: ons brein gaat sputteren als we meer dan zeven stukjes informatie moeten verwerken.

Als je minder dan zeven hoofdmenu’s hebt, maar ook met submenu’s werkt, dan is het ook een goed idee om de splitsing te maken.

Wat zet je in de primaire navigatie en wat in de secundaire navigatie?

Vuistregel:

  • Hoofdzaken in de primaire navigatie
  • Belangrijke bijzaken in de secundaire navigatie

Hoofdzaken zijn bijvoorbeeld:

  • Alles wat je verkoopt
  • Call-to-actions naar een conversie: contact, offerte, weggever, enzovoorts

.
Voorbeeld navigatiestructuur website LeanResults
Voorbeeld navigatiestructuur van LeanResults, klanten helpt op het gebied van Lean management. Alle diensten zijn direct zichtbaar in de primaire navigatie, plus de contact-button.

.
Belangrijke bijzaken (kunnen) zijn:

  • Home
  • Over mij / Over ons
  • Blog
  • Testimonials
  • Functionele items zoals taalkeuze of inlog-linkjes

Maar: it depends.

Komen mensen speciaal voor je blog naar je website? Zet je blog dan in de primaire navigatie.

Ben je een expert en is je eigen persoontje het hoofdonderdeel van je dienstverlening? Dan kan ‘Over mij’ ook in de primaire navigatie staan.

Hoeveel items hebben de primaire en secundaire navigatie?

Allebei maximaal zeven, om de al eerder in dit blog aangehaalde reden.

Een minimum is er niet. Een secundair menu kan één item hebben: denk aan een inlog-linkje.

En een primair menu kan twee items hebben, als dat de twee allerbelangrijkste dingen op die site zijn:
.

Voorbeeld navigatiestructuur website woordkunstenaars.nl
Voorbeeld navigatiestructuur op de website woordkunstenaars.nl, waar opdrachtgevers tekstschrijvers vinden en vice versa. De primaire navigatie richt zich uitsluitend op die twee doelgroepen.

Hoe zit het technisch met zo’n gesplitste menustructuur?

In veel WordPress-themes kun je zelf een secundaire navigatie maken. Bekende themes waarvan ik het weet zijn Avada, Divi, Enfold en BeTheme.

Als jouw theme niet die mogelijkheid biedt, dan kun je het laten inbouwen. Ik heb dat even nagevraagd bij WordPress-specialist Kees Lamper: het ligt een beetje aan je theme hoeveel werk dat is. Heb je een verouderd theme, dan is het misschien makkelijker en goedkoper om van theme te switchen.

En nu?

Nu bekijk je je eigen website. En je leest dit artikel nog een keer. En je kijkt nog eens naar je website.

En als je denkt: “Potdomme, die Rommers heeft gelijk…”

Dan weet je wat je moet doen..

1 Marijke en ik hebben (dankzij Marijke) een moderne, geëmancipeerde relatie. Maar we hebben al lang geleden besloten dat het beter is dat ik geen boodschappen doe.

2 Don’t make me think van Steve Krug is een ontzettend goed boek over de gebruiksvriendelijkheid van websites.

Dit blog delen met je netwerk? Be my guest! 👉

Je las een blog van moi – Chris Rommers

Meer van dit soort blogs lezen? Meld je hier aan voor mijn wekelijkse mails. Mooi meegenomen: als bonus ontvang je dan een gratis e-book over hoe je je mailinglijst sneller kunt laten groeien.

Wil je een betere website en meer conversie? Dit kan ik voor je doen:

Over mij: