Navigatiestructuur website, menustructuur

Menustructuur te vol? Hak je navigatie in tweeën.

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.

Je las een blog van moi - Chris Rommers

Reageren mag altijd en delen ook.

Wat ook mag, is doorklikken naar de Afdeling Commercie van mijn website:

Mijn diensten:

En verder:

Meer aanmeldingen via je weggever

15 reacties

  1. Haha! Voetnoten! Vooruit dan maar.

    Zeg, ik vind 5. 5 knoppen is max. Die van mij gaan dus ook weer onder de schop, want die zijn onbedoeld uitgegroeid in mijn sabbataical. Zomaar van eiges.

    Ik vind dat jij er ook nog te veel hebt. En het voorbeeld dat je laat zien als illustratie – die van zachter werken maar nog meer reclame heeft ze niet nodig – dat vind ik ook te vol. Dus. In mijn opinie dan, enzo.

  2. “Potdomme, die Rommers heeft gelijk…”
    Ik heb mijn website menustructuur aangepast. Dank voor de tips!
    Beetje jammer dat mijn webdesigner daar nooit mee is gekomen, want ik heb heel veel moeite gehad met het indelen van mijn navigatiestructuur vanwege die “max. 7”.
    Vind het zo een heel stuk beter!

  3. Ik zit nog ff te denken. 2 x 5 navigatieknoppen moet toch meer dan genoeg zijn? Niet meer dan 5 in die twee menu’s. 10 knoppen. Voor iemand met veel diensten.

    Zelf wil ik maar 1 menu, maar 2 kan prima werken.

  4. Het ligt eraan. Belangrijkste is dat je met een splitsing hoofdzaken scheidt van belangrijke bijzaken.

    Hoofdzaken –> dat waarvoor (uiteindelijk) mensen naar je site komen –> meestal: je producten/diensten.

    Dan kun je redeneren dat mensen in eerste instantie misschien voor andere dingen komen (bijvoorbeeld je blogs, zeker vaak waar in jouw geval) maar daar landen ze vanzelf op via SEO of social.

    Stel dat jij bijvoorbeeld wel je navigatiestructuur zou splitsen, dan zou het kunnen zijn:

    Primair:
    Blogpro cursus | Blogbasics cursus | Schrijftraining Karakter & Dialoog

    Secundair:
    Home | Blog | Gratis tips | Cursisten vertellen | Over | Contact

    Uit het losse polsje hoor.

  5. Ja, ik snap hem. Je wil waar je aan verdient scheiden van de rest.

  6. ai aiaaaaai ajiaaaj
    Bij mijn navigatiestructuur zijn het er ook te veel geworden. Ok van eiges.
    Terwijl 80 % op mobiel langskomt. Toch weer wat aan doen.
    Nondepie

  7. Zal wel aan mij liggen maar 5 is voor mij te weinig (alles wat nu in de rechterbalk van mijn navigatiestructuur zit moet nog wel naar benee), maar dan nog red ik dat niet!

  8. Trek je niks aan van Kitty, Maarten – ze heeft zelf 6 menu’s en dat is met smokkelen, want ze laat geen Home-knop in haar menu zien. 😉

  9. Dank je wel, ook met een totaal-niet-commercieel hobbyblog(je) kan ik hier iets mee !!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *