Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)

Het instellen van de navigatie van een site is iets wat veel site-eigenaren uitstellen tot het laatste moment. Het voelt dan ook vaak meer als een administratieve handeling dan het instellen van een belangrijke feature op je site. Uit recent onderzoek blijkt echter dat slechts 50% van de internetgebruikers op basis van de standaardstructuur voor sitenavigatie kan voorspellen waar ze relevante inhoud kunnen vinden.

Dat is wel even slikken. Als maar de helft van je bezoekers de pagina kan vinden waarnaar ze op zoek zijn, is dat een gigantisch UX-probleem.

Het niet kunnen vinden van de juiste inhoudt, leidt namelijk tot hogere bouncepercentage, minder bestede tijd op je site en lagere conversiepercentages.

Als je een e-commerce winkel beheert, kan slechte navigatie ook nog eens een grote negatieve impact hebben op je omzet.

In dit artikel bespreek ik daarom alles over sitenavigatie. Je zult dus alles te weten komen over de best practices, verschillende soorten navigatie en wat jij moet doen om de perfecte navigatie voor jouw site te maken.

Laten we beginnen!

Wat is sitenavigatie?

Sitenavigatie is het proces van het navigeren tussen pagina’s, apps en sites op het internet. De technologie erachter die daarbij helpt heet hypertext of hypermedia.

Hypertext of -media zijn op tekst gebaseerde pagina’s die hyperlinks gebruiken om ze aan andere pagina’s op het internet te verbinden. Een hyperlink is een link die jou naar een URL brengt vanuit je webbrowser.

De URL geeft aan welke bestand de browser moet vinden op de server, zodat het gedownload en gedenderd kan worden, zodat jij het kunt zien.

Interne links leiden naar een andere pagina binnen hetzelfde domein. Externe links leiden naar pagina’s op een ander domein. Een compleet andere site en server dus.

Onderdeel van sitenavigatie zijn menu’s met interne links waarmee bezoekers eenvoudig de pagina kunnen vinden die ze zoeken. Goede navigatie is essentieel voor een gebruiksvriendelijke site.

Wat is een navigatiemenu op een site?

Een site navigatiemenu is een set links, meestal naar interne pagina’s, die zijn verzameld binnen een menu. De meeste sites, inclusief onze eigen, bevatten een menu helemaal bovenaan de site.

Dit deel heet binnen webdesign de “header” van een site. De pagina’s die je meestal ziet in dit soort menu’s zijn:

• Over ons.
• Blog.
• Contact.
• Features.
• Pakketten/prijzen

Natuurlijk kan een menu ook prima links naar andere pagina’s bevatten.

Wat is de navigatiestructuur van een site?

De navigatiestructuur van een site beschrijft hoe verschillende pagina’s binnen een site zijn georganiseerd en onderling zijn verbonden.

Zo kunnen sommige pagina’s en stukken inhoud bijvoorbeeld alleen gevonden worden door naar een specifieke pagina te gaan. Designers en webdevelopers maken meestal een plan voor de navigatiestructuur bij het ontwikkelen van een nieuwe site.

In dit voorbeeld zijn de pagina’s About, Plans, Contact, en Blogte bereiken vanaf het startmenu. Om de Mission en Team pagina’s te bereiken moet je eerst naar de About pagina gaan.

Waarom is navigatie zo belangrijk voor een site?

In de intro van dit artikel vertelden we dat 50% van de gebruikers niet weet hoe ze een standaardmenu moeten gebruiken. Stel je eens voor hoe weinig mensen de juiste inhoud zouden kunnen vinden als er helemaal geen navigatie te vinden was op een site.

Als je het goed aanpakt, kun je het percentage van mensen die niet goed weten hoe ze door jouw site moeten navigeren, ver onder de 50% krijgen. Hiermee verlaag je het bouncepercentage, verhoog je de tijd die mensen doorbrengen op je site, waardoor je meer verkeer, leads en uiteindelijk klanten krijgt.

Soorten sitenavigatie

Er zijn drie hoofdsoorten sitenavigatie. Te weten:

Wanneer je deze drie goed combineert, maak je het je bezoekers makkelijk om hun weg te vinden op je site. Laten we daarom elke soort beter bekijken.

1. Globale sitenavigatie

Met globale sitenavigatie zijn het menu en de links precies hetzelfde op alle pagina’s binnen de site. Veel moderne menu’s volgen dit principe, inclusief ons eigen menu van Kinsta: als je naar beneden scrolt, “volgt” het menu.

In de screenshot zie je dat ons headermenu eenvoudig en begrijpelijk is. Het is op alle pagina’s hetzelfde en leidt direct naar onze belangrijkste pagina’s en inhoud.

We weten welke cruciale informatie een gemiddelde potentiële klant nodig heeft om een beslissing te kunnen maken over een hostingbedrijf. Daarom hebben we het voor potentiële klanten zo makkelijk mogelijk gemaakt om onze features, pakketten en contactopties te vinden. En voor bestaande gebruikers hebben we de inloglink toegevoegd, zodat ze meteen naar hun MyKinsta dashboard kunnen gaan.

Ook ons footermenu is globaal en brengt, naast uitgelichte inhoud, enkele essentiële onderdelen van onze site naar voren.

Globale menu’s zijn tegenwoordig voor de meeste CMS-oplossingen de standaard.

Elk WordPress-thema biedt je mogelijkheden om verschillende types of gebieden uit te lichten in je navigatiemenu. Als je nog meer opties nodig hebt, kun je altijd een menuplugin gebruiken.

2. Hiërarchische sitenavigatie

Hiërarchische navigatie betekent dat de menu’s veranderen op basis van de context van een pagina.

Veel kranten en contentgerichte sites maken hier gebruik van. Als je bijvoorbeeld naar de homepage van een krant gaat, zie je bovenaan meestal links naar de belangrijkste nieuwscategorieën.

Als het menu globaal was, zou het gelijk blijven nadat je naar een bepaalde categorie gaat. Maar omdat het hiërarchisch is, krijg je nieuwe links te zien. Deze links zijn subcategorieën van de hoofdcategorie van de pagina waar we op klikten.

Op de Science pagina van de New York Times zie je bijvoorbeeld het hoofdmenu helemaal niet meer. In plaats daarvan zie je alleen links naar andere subcategorieën en artikelen die te maken hebben met wetenschap.

Dat het menu verandert op basis van de pagina. is het grote verschil tussen dit type en een globaal menu.

3. Lokale sitenavigatie

In tegenstelling tot zowel hiërarchische als globale navigatie, refereert een lokale sitenavigatie naar interne links die in de inhoud zelf verwerkt zitten. Meestal krijgt de gebruiker opties te zien die zich bevinden op hetzelfde niveau in de hiërarchie óf een niveau lager. In sommige gevallen worden links voorgesteld die naar andere, relevante pagina’s leiden.

Een goed voorbeeld zijn magazinesites, die meestal links gebruiken om hun lezers te verleiden om meer te lezen over de context van een onderwerp dat in een artikel wordt besproken. Als ze bijvoorbeeld iets aanhalen waar ze in het verleden over geschreven hebben, dan zullen ze daarnaar linken, in plaats van het helemaal opnieuw uit te leggen.

Dit wordt echter niet alleen gebruikt door magazines en nieuwssites. Webshops gebruiken ook erg vaak dit soort navigatiemenu’s om producten in dezelfde categorie te laten zien.

Interne links zijn ook wat betreft SEO een cruciaal onderdeel. Dit geldt met name voor WordPress SEO. Met andere woorden, interne links zijn dus voor iedereen met een site van groot belang.

Praktijkvoorbeelden van sitenavigatie

Laten we niet te lang doorhameren op theorie, maar ook eens goed kijken naar wat voorbeelden uit de praktijk. Ik zal het hebben over een nieuwssite en het Twenty Twenty WordPress-thema.

Nieuwssite: New York Times

Op het eerste gezicht lijkt het alsof de New York Times uitsluitend een globaal headermenu gebruikt met daarin de categorieën.

Maar schijn bedriegt. De NYT gebruikt allerlei verschillende soorten navigatie op hun honderden pagina’s met categorieën en miljoenen artikelen.

De soorten die ze gebruiken:

• Hiërarchisch.
• Globaal.
• Lokaal.

Laten we naar de verschillende soorten headernavigaties kijken.

Homepage

In de header van de site zitten meteen twee menu’s verstopt, namelijk een uitvouwbaar globaal menu boven het logo en een hiërarchisch menu onder de header. Het is dus eigenlijk een menu met een header en een sub-header.

Als je het drop-downmenu in de header uitvouwt, vormt zich aan de linkerkant een sidebar, waar je normaal in de meeste gevallen een lege ruimte ziet.

Op die manier komt het menu dus niet over inhoud van de site heen te staan.

Homepage (mobiel)

Laten we dezelfde header eens op een mobiel apparaat bekijken. De meerderheid van internetgebruikers kijkt via hun smartphone naar nieuwssites, dus de mobiele beleving is eigenlijk belangrijker dan die op een computer.

Het subheadermenu met nieuwscategorieën is niet te zien op de mobiele homepage. In plaats daarvan heb je alleen de uitvouwbare optie.

Wanneer je die uitvouwt neemt het menu je hele scherm in beslag en bedekt daarmee dus alle inhoud op de homepage.

Het menu bevat alles wat het hoofdmenu van de normale homepage ook bevat en alle links zijn netjes georganiseerd per categorie.

Categoriepagina

Op de categoriepagina onder het headermenu, zie je een link naar een verdere subset van de categorieën.

Dit maakt het makkelijker voor mensen die alleen geïnteresseerd zijn in een specifiek gebied om artikelen te vinden die bij hun interesses passen.

Categoriepagina (mobiel)

Op een mobiel apparaat bevatten deze categoriepagina’s hetzelfde headermenu en dezelfde structuur als de desktopversie. Het secundaire headermenu is echter duidelijk zichtbaar om zo de navigatie naar andere inhoud makkelijker te maken.

Een andere reden voor deze designkeuze is dat de meeste mobiele gebruikers via social media of een zoekopdracht op een artikel aanbelanden, en dus niet via de homepage.

Individueel artikel

Voor individuele artikelen laat de zwevende header zien in welk onderwerp je momenteel zit, maar je ziet alleen het uitvouwbare globale menu (samen met de zoekbalk).

Individueel artikel (mobiel)

Op een mobiel apparaat is de strakke navigatie behouden doordat alleen het headermenu te zien is.

Footer

Het NYT footermenu is hetzelfde op alle homepage’s, categoriepagina’s en individuele artikelen.

Footer (mobiel)

Op mobiele apparaten laat het footermenu slechts vijf menu-items zien, die allemaal uitvouwen naar subsecties als je erop klikt.

Als je bijvoorbeeld op de sectie Kunst klikt, zie je al deze subsecties:

Aangezien de site JavaScript gebruikt om dynamisch meer content te laden naarmate je naar beneden scrolt, lijkt het alsof de footer helemaal niet bestaat.

Het dynamisch meer content laden is een leuk trucje waarmee je als sitebeheerder de tijd die bezoekers op je site besteden, kan verhogen. Daarnaast moedig je lezers aan om meer artikelen te lezen. Het nadeel is dat de navigatie iets aan duidelijkheid inboet.

Content lay-out

Sommige mensen zijn van mening dat het menu niet de belangrijkste navigatie-tool is voor kranten en blogs. In plaats daarvan is deze groep van mening dat de lay-out zelf de navigatiestructuur aanbrengt voor sites zoals de NYT.

Alle hierboven uitgelichte elementen zijn klikbaar en leiden naar andere interne pagina’s binnen de site van de New York Times.

Dit heet content lay-out en is een belangrijk element voor de navigatie van hun site. De NYT heeft dit vooral geïmplementeerd op hun homepage en categoriepagina’s.

Het Twenty Twenty WordPress-thema

Een nieuw jaar, dus een nieuw standaardthema voor WordPress. Deze keer is het Twenty Twenty en we zullen dus naar de details kijken om te zien wat er veranderd is qua navigatie.

Ik zal bespreken wat er is veranderd aan hoe de ontwikkelaars met menu’s en interne links omgaan met deze nieuwste versie van WordPress.

Headermenu

Net als bij alle andere standaard WordPress-thema’s, heeft het nieuwe officiële thema een eenvoudig menu in de header. Je kunt verschillende locaties voor het menu aangeven. Zo bijvoorbeeld de optie Desktop Horizontal Menu eruit:

Aan de andere kant biedt de optie Desktop Expanded Menu de mogelijkheid om de menulinks uit te vouwen in een uitgelijnde balk bovenaan rechts.

Het hoofdgebied voor de content heeft een donkergrijze tint, waardoor de focus van de bezoeker naar het menu gaat.

Footer

In de footer zitten geen links voor interne navigatie, behalve een simpele “Tot he top” link die je terugbrengt helemaal bovenaan de pagina.

Kenmerken van goede sitenavigatie

Goede sitenavigatie is altijd ontworpen met een focus op de gebruiker. Het gebruikt duidelijke, eenvoudige taal en links naar de belangrijkste pagina’s.

Er is genoeg witruimte, kleurgebruik en andere ontwerptechnieken om de navigatie duidelijk te onderscheiden van de content. Daarnaast is het op alle apparaten (zowel mobiel als desktop) makkelijk te lezen en te gebruiken.

Gebruikersgerichte navigatie betekent ook dat het contextueel is. Het neemt de ervaring en verwachting van de gebruiker mee in het ontwerp. Dat is wellicht een reden waarom online kranten nog altijd blijven hangen in hun overvolle design.

Immers, dit is ook de stijl van hun papieren tegenhangers. Wat betreft een krant is dat wat gebruikers en potentiële klanten verwachten. Daar horen dus ook uitgebreide menu’s met heel veel (sub)categorieën bij.

In het volgende gedeelte zal ik de basics van het maken van een goede navigatie uitleggen.

8 principes voor een betere sitenavigatie

Zelfs als je je nog nooit eerder met sitenavigatie hebt beziggehouden, kan je met onderstaande tips de perfecte navigatie voor je site maken.

1. Plan de structuur en navigatie

Voordat je begint met het schrijven van inhoud voor je site, moet je een plan maken hoe de structuur van je pagina’s en je navigatie eruit zal gaan zien.

Planning is een essentieel onderdeel van het proces om je gebruikers een prettige ervaring te geven. Je kunt een sitemap-creator gebruik om snel testversies te maken van hoe je wilt dat je site-ervaring eruitziet.

Een voorbeeld van een goede tool hiervoor is GlooMaps.

Hierbij kun je zoveel documenten maken als je nodig hebt, helemaal gratis. Elk document heeft een unieke URL die je kunt delen om feedback te krijgen en anderen eraan te laten werken. Als het eenmaal gemaakt is, zal je URL 14 dagen beschikbaar zijn na het laatste bezoek. Elk nieuw bezoek verlengt de link met weer 14 dagen.

GlooMaps is zeker niet de enige tool, zo heb je verder bijvoorbeeld Octopus, VisualSitemaps, Creately.

2. Volg bewezen standaarden

Probeer niet zelf het wiel opnieuw uit te vinden. Sitenavigatie draait meer om bruikbaarheid dan creativiteit.

Zeker voor belangrijke elementen zoals waar je je menu moet plaatsen en hoe je duidelijk maakt dat het menu uitvouwbaar is, kun je dus het beste de bekende standaarden volgen.

Drie horizontale strepen, bekend als de “hamburger” ☰ is één van de meeste herkenbare iconen voor een uitvouwbaar menu. Een andere is drie punten op een verticale lijn.

Er is een goede kans dat je bezoekers je menu niet goed snappen als je zelf een alternatief gaat proberen te ontwerpen.

3. Gebruik dezelfde taal als je gebruikers

In plaats van alleen naar alle standaardpagina’s te linken, jargon van ontwikkelaars te gebruiken, of extreem creatief te worden, moet je dezelfde taal gebruiken als je gebruikers.

Dit is zowel goed voor je SEO als gebruiksvriendelijkheid. Maak pagina’s die laten zien waar je gebruikers op zoeken.

Je kunt die pagina’s vervolgens linken door dezelfde woorden en termen te gebruiken waarmee je bezoekers je site vinden op Google.

4. Gebruik responsive menu’s

Aangezien al meer dan 52% van het online verkeer van mobiele apparaten komt, is een responsive/mobile-first ontwerp tegenwoordig de standaard.

In plaats van menu’s die zich tot buiten het frame van een mobiele browser uitstrekken of veel te vol zijn, moet je zorgen dat je uitvouwbare mobiele menu’s maakt.

Er is een goede reden dat het tegenwoordig de standaard is. Horizontale menu’s met kleine tekst zijn moeilijk te lezen en het is vaak nog moeilijker om erop te klikken en dus te gebruiken op mobiele apparaten.

Het goede nieuws is dat alle betere WordPress-thema’s standaard een responsive ontwerp en menu hebben. Tenzij je dus je eigen WordPress-site helemaal zelf maakt, helpt WordPress je op dit punt dus uit de brand.

5. Gebruik je footermenu op een handige manier

Gebruikers die blijven lezen en scrollen naar de onderkant van je menu zijn meer betrokken dan de gemiddelde gebruiker. Doe daar je voordeel mee door de ruimte onderaan elke pagina’s te vullen met je beste content.

Aangezien de footer geen ruimte “above the fold” gebruikt, kun je hier gerust erg specifiek zijn en verschillende categorieën opsommen en zelfs belangrijke pagina’s of artikelen specifiek noemen.

Kijk als voorbeeld eens naar hoe we onze footer op deze pagina hebben vormgegeven. We benoemen essentiële feature-pagina’s, ons bedrijf, verschillende bronnen en nog meer.

De footer biedt je de mogelijkheid om content te benadrukken die net niet in je header past.

6. Gebruik kleur en witruimte om navigatie te scheiden van andere elementen

Gebruik kleur, lettertypen en witruimte om je menu’s zichtbaar te scheiden van je content en zijbalken. Maak het zo duidelijk mogelijk waar je navigatie begint en eindigt.

Het maakt niet uit wat hoe duidelijk je menu’s zijn of naar welke prachtige pagina’s ze linken als je bezoekers je menu’s überhaupt niet kunnen vinden.

7. Gebruik geen dropdown-menu’s

Voor de meeste sites zijn dropdown-menu’s niet nodig of nuttig. Wanneer gebruikers een link in een menu zien, is de aanname dat je daarop kan klikken. Dit leidt dus tot verwarring bij de gebruiker, tenzij het ontwerp de dropdown duidelijk scheidt van klikbare links.

Te veel links in je hoofdmenu is ook slecht voor de gebruiksvriendelijkheid van je site.

Het implementeren van hiërarchische en lokale navigatie in plaats van dropdown-menu’s versoepelt het gebruik. Hierdoor kunnen gebruikers meerdere pagina’s vinden en brengen ze meer tijd met de inhoud van je site door, in plaats van door een enorme lijst met links te scrollen.

8. Maak je structuur zo plat mogelijk

Als je wilt dat gebruikers gemakkelijk alle pagina’s op je site kunnen vinden, moet je een platte structuur gebruiken.

In plaats van het linken naar een handjevol pagina’s vanaf je homepage, waarna je steeds verder uitbreidt met sub-pagina’s en categorieën, kun je het beter simpel houden.

Zorg dat je een link hebt naar belangrijke categorieën vanaf je homepage, en link vanaf daar direct naar elke laag binnen de subcategorieën of artikelen.

There is evidence that flattening the structure in this way has a positive effect on SEO and can lead to Google sitelinks. So don’t let your website structure get too messy!

Trends in sitenavigatie

Alhoewel de bredere trends binnen webdesign geavanceerde elementen bevatten zoals 3D-ontwerpen en het gebruiken van op maat gemaakte afbeeldingen in combinatie met bijzondere designs, hebben menu’s een wat rustiger jaar achter de rug.

Maar dat betekent niet dat alles hetzelfde is gebleven. Hier is onze samenvatting van de belangrijkste menutrends in de laatste paar jaar.

Expandable Categories in Full-Screen Mobile Menus

Uber en andere giganten met moderne ontwerpen hebben de gebruiksvriendelijkheid van hun menu’s sterk verbeterd.

Een probleem voor dit soort bedrijven is dat ze zoveel producten en categorieën hebben dat ze nooit in één menu passen.

Dit is opgelost door duidelijke, uitvouwbare mobiele menu’s met heldere categorieën te gebruiken, in plaats van eindeloze lijsten met links.

Zwevende headermenu’s

De meest zichtbare trend voor menu’s is waarschijnlijk het zwevende headermenu.

Een zwevend menu blijft bovenaan het venster van je browser “plakken” terwijl je naar beneden scrolt (zoals te zien bij ons op kinsta.com). Dit is meestal een header met ook een klein logo en een zoekbalk.

Het is een goede oplossing, omdat het voor gebruikers handig is om continue toegang te hebben tot het menu. Dit type menu is onderdeel van de meeste WordPress-thema’s en het lijkt er niet op dat dit, in elk geval op korte termijn, zal veranderen.

Overlappende dropdown-menu’s op desktop

Zoals we eerder zeiden is een belangrijk advies het achterwege laten van dropdown-menu’s. Daar is een goede reden voor.

Maar dat betekent niet dat deze menu’s meteen de prullenbak inkunnen. Het probleem is alleen dat het implementeren van dropdown-menu’s op een logische manier erg lastig is.

Als je de overlapping een duidelijke kleur geeft, kunnen ze er juist voor zorgen dat de volledige aandacht van je gebruiker naar het menu gaat. Je hebt ook meer opties voor uitvouwbare categorieën dan alleen links te laten zien wanneer mensen hun muis erboven hangen.

Hierdoor is dit de afgelopen jaren een groeiende trend geweest. Inmiddels gebruiken veel innovatieve sites en templates een overlappend dropdown-menu binnen de desktopversie.

Samenvatting

Hopelijk heb je door dit artikel een helder beeld van wat sitenavigatie is en wat belangrijke aandachtspunten zijn.

Focus altijd op eenvoud en duidelijkheid, en niet op creatief ontwerp. Zorg dat je voor de navigatie van je site rekening houdt met zowel mobiele als desktop-gebruikers. Vind je het allemaal toch te ingewikkeld? Dan kan het een goed idee zijn om een webdeveloper in te huren.

Probeer in ieder geval altijd de best practices voor het ontwerpen van menu’s te volgen zodat je bezoekers en zoekmachines je inhoud makkelijk kunnen vinden.

Duidelijkheid en bruikbaarheid zullen ook in de toekomst belangrijk blijven. Als je dezelfde taal gebruikt als je gebruikers en een voor hen logische structuur gebruikt, dan gaan je menu’s zeker nog wel een tijdje mee.