In de wereld van webdesign is er een voortdurende strijd gaande – een strijd tussen gebruikerservaring en SEO.
Deze twee cruciale elementen van websiteontwikkeling lijken soms op gespannen voet te staan. Aan de ene kant hebben we de gebruikerservaring, die pleit voor eenvoud, intuïtiviteit en gemak. Het streeft ernaar om gebruikers een naadloze en plezierige ervaring te bieden, waarbij ze snel en gemakkelijk kunnen vinden wat ze zoeken.
Aan de andere kant hebben we SEO, die hongerig is naar trefwoorden, links en complexe structuren. Het is gericht op het optimaliseren van de website voor de koude, berekenende algoritmen van zoekmachines, zodat de site beter wordt begrepen en geïndexeerd.
Dit is het dilemma waar elke webdesigner voor staat: moeten we onze websites ontwerpen voor levende, ademende mensen, of moeten we ze optimaliseren voor machines? Het vinden van een evenwicht tussen deze twee doelen is de delicate kunst van webdesign.
Het belang van een effectieve navigatiestructuur voor gebruikerservaring en SEO
Heb jij het gevoel dat jouw website een hoge bounce rate heeft? Dan is het misschien wel eens de moeite om met een kritisch oog te gaan kijken naar jouw navigatie. De bounce rate geeft immers aan hoeveel procent van de bezoekers maar één pagina bezoekt op je website en dan je website verlaat.
Stel jezelf namelijk de vraag: “vinden bezoekers op mijn website wat ze zoeken? “. Want een website met een slechte navigatie zorgt voor een lagere ranking in Google en voor een lagere conversie. Maar het zorgt er ook voor dat mensen gefrustreerd raken en jouw website verlaten.
Een navigatiemenu is een georganiseerde lijst van links naar een andere webpagina. Meestal gaat het hier om interne links naar andere pagina’s op je eigen site. De gekendste vorm van een navigatiemenu is het standaard menu dat bovenaan, in de header, terugkomt bij een website.
De navigatiestructuur van een website beschrijft hoe de verschillende pagina’s op je site zijn georganiseerd en met elkaar verbonden zijn. Hierdoor creëer je normaliter een goed opgebouwd overzicht voor de gebruikers.
Bovenstaand voorbeeld toont de header van onze eigen website. Hierop kun je al direct zien dat wij gebruik maken van twee navigatiemenu’s! Daarnaast werken wij onder diensten ook met een submenu. Hierdoor organiseren wij al onze diensten onder het menu item ‘diensten’ en creëren wij een duidelijke navigatiestructuur.
Een website zonder goede navigatie is dan ook een slechte website. Bezoekers moeten namelijk direct kunnen vinden wat ze zoeken op jouw website. De gouden regel hier is dan ook de 3-click rule. Als een bezoeker niet kan vinden wat hij zoekt in drie klikken dan raakt hij of zij gefrustreerd en verlaat hij je website.
Een goede navigatie draagt aan de andere kant ook bij een verhoogde bezoekduur van consumenten en een verlaagde bounce rate. Ook op een webshop heeft een goede navigatie zijn voordelen. Hier verhoogt een goede navigatie namelijk het aantal aankopen.
Navigatie elementen komen meestal voor in de header of footer van een website. Maar navigatie beperkt zich niet alleen tot deze twee. Onder navigatie verstaat men ook breadcrumbs, volgende/vorige post, zoekbalken, filters en zoveel meer. Navigatie is dus een veel omvattende term.
Wij spitsen ons in dit artikel alleen toe op het hoofdmenu. Want daar hebben we al genoeg over te zeggen 😉.
Wanneer we een kritisch oog gaan werpen op de hoofdnavigatie van een website zijn er tweede elementen waar we naar gaan kijken. Als eerste de navigatiestructuur en als tweede de vormgeving.
Dus wil jij graag de menustructuur voor je website verbeteren? Of weten waar je rekening mee moet houden met een nieuwe website? Lees dan zeker verder.
Navigatiestructuur
Laten we beginnen met de navigatiestructuur. Hierbij gaat het vooral over de opbouw van je menu. Wat zetten we er in en waar zetten we het?
Hoe beter de navigatiestructuur, hoe beter het gebruiksgemak van de bezoeker en hoe sneller ze iets kunnen terug vinden op jouw website. Door je navigatiemenu ga je namelijk ook de structuur van je website weergeven aan je bezoekers. Hierdoor creëer je ook een hiërarchische structuur op je website. En geef je weer welke pagina’s belangrijker zijn.
Wanneer bezoekers niet vinden wat ze zoeken verlaten ze jouw website. Wat, zoals hierboven vermeld, leidt tot een slechte bounce rate. Maar dat weerkaatst zich natuurlijk ook in jouw Google-ranking! Hoe hoger de bounce rate hoe lager je ranking in Google.
Voordat we zomaar items in het menu gaan plaatsen moeten we eerst data gaan verzamelen. Want zonder data ben je niets! Het is ook dus perfect mogelijk dat je binnen 6 maanden je menu moet gaan aanpassen, als je data verandert.
Voor het verzamelen van data ga je jezelf twee vragen stellen.
Wie is mijn doelgroep?
Als eerste ga je jezelf de vraag stellen wie is je doelgroep. Wie bezoekt mijn website en waarom bezoekt deze persoon mijn website? Wat wil deze persoon dus bereiken met het bezoeken van mijn website?
Zoekintentie
We gaan ons hier dus de zoekintentie van de bezoeker in vraag stellen. Bezoekers hebben vaak één zoekintentie, maar deze kan natuurlijk veranderen en evolueren. Zo kunnen we vier zoekintenties onderscheiden bij personen. We leggen de vier zoekintenties uit aan de hand van een consument die op zoek is naar een robotstofzuiger.
- Informatief: deze persoon wil graag meer informatie.
“Robotstofzuiger”, “Waarom een robotstofzuiger”, “Wat is een robotstofzuiger” - Transactioneel: deze persoon wil graag iets kopen of bestellen.
“Robotstofzuiger kopen” - Commercieel: deze persoon zit tussen de informatieve en transactionele zoekintentie. Hij of zij wil graag meer informatie over een bepaald product voordat er een beslissing gemaakt wordt.
“Robotstofzuiger bepaald type” - Navigerend: deze persoon weet exact wat hij wil zoeken. En navigeert dan ook direct naar de juiste site en de juiste pagina.
“Robotstofzuiger bepaald type coolblue”.
Uit bovenstaand voorbeeld kun je ook perfect afleiden welke stadia er allemaal doorlopen gaan worden. De persoon zal vaak beginnen met het zoeken van informatie over een robotstofzuiger, daarna zal deze specifiek gaan zoeken naar een bepaald merk en daarna zal hij of zij waarschijnlijk overgaan tot aankoop.
(Bron: Seobility)
Meten is weten
Vervolgens gaan we ook even de statistieken van je website er bij nemen. Denk hierbij bijvoorbeeld maar aan Google Analytics. Bekijk welke pagina’s het meest bezocht worden. Maar bekijk natuurlijk ook of mensen hier lang op blijven.
Zijn bezoekers direct weg? Dan was de pagina vermoedelijk niet wat ze zochten.
Wat was de flow van je bezoekers? Welke pagina’s doorlopen ze allemaal. Hoelang bleven ze op een pagina. Je kunt zelfs een stapje verder gaan door het gebruik van heatmaps.
Maar bekijk ook zeker de demografische gegevens. Wie zijn je bezoekers, hoe oud zijn ze, vanwaar zijn ze.
Heb je een webshop dan ga je natuurlijk hieruit ook je buyer persona kunnen afleiden.
Wat is het doel van mijn website of pagina.
Als tweede ga je jezelf natuurlijk de vraag stellen wat je wilt bereiken met je website. Wil je diensten verkopen of producten? Of wil je eerder informatie aanleveren.
Je hebt natuurlijk de globale doelstelling van je website. Maar je kunt jouw pagina’s ook een doelstelling geven. Zo kan jouw website als doelstelling hebben om een dienst te verkopen.
Maar bezoekers gaan natuurlijk vragen hebben over jouw diensten. Hiervoor kun je dus informatie pagina’s aanmaken.
Hoe zoeken jouw gebruikers?
Bij de derde stap denk je best even na over hoe jouw bezoekers gaan zoeken op jouw website. Hiervoor neem je er ook best even de website van enkele concurrenten erbij.
Bezoekers kunnen op drie verschillende manieren gaan zoeken:
1. Onderwerp georiënteerd zoeken
Hierbij gaan we zelfstandige naamwoorden gebruiken om onze menu vorm te geven.
Een bekend voorbeeld hiervoor is Zalando. Zalando hun secundair menu gaat specifiek items in hun menu weergeven zoals schoenen, kleding, etc.
(Bron: Zalando)
Een ander voorbeeld hiervoor is ook wel Boozyshop. Zij laten bezoekers in hun menu direct kiezen uit make-up, skincare, kwasten, haarproducten en nog zoveel meer. Zo komen bezoekers direct in de rubriek die zij wensen.
(Bron: Boozyshop)
2. Actie georiënteerd zoeken
Hierbij gaan we menu-items benoemen op basis van een bepaalde actie of activiteit.
A.S. Adventure past deze techniek deels toe. Achteraan in hun menu kun je dus gaan zoeken op kampeermateriaal of wintersport materiaal of specifiek fietsmateriaal.
(Bron: A.S. Adventure)
3. Doelgroep georiënteerd zoeken
De derde manier van zoeken is de georiënteerde manier. En deze is de welbekende manier van vele webshops. Hier gaan we bijvoorbeeld direct zoeken op dames of heren.
Ook hier kunnen we Zalando weer aanhalen. In hun bovenste menu kan je dus eerst jouw doelgroep selecteren. Daarna toont hun secundair onder georiënteerd menu dan ook rechtstreeks alleen maar de schoenen of kleren voor vrouwen.
(Bron: Zalando)
Ook Nike implementeert deze strategie. Hier kan je namelijk zoeken op basis van je doelgroep, maar je kunt ook ineens direct kiezen voor sale of collecties.
(Bron: Nike)
Zoals je in bovenstaande voorbeelden kan zien is het ook mogelijk om meerdere manieren te combineren met elkaar. Maar hier telt ook weer meten is weten!
Navigatiestructuur opbouwen
We hebben reeds heel veel informatie verzameld over het doel van je bedrijf en over jouw bezoekers. Nu is het natuurlijk de bedoeling dat bezoekers een bepaald traject gaan doorlopen om aan jouw doelstelling te voldoen.
Hiervoor is het natuurlijk belangrijk dat jouw menu begrijpbaar is voor je bezoekers. Veel bedrijven maken immers de fout dat ze een website en menu bouwen vanuit een bedrijfstructuur.
Deze bedrijfstructuur kan totaal onbegrijpelijk zijn voor een bezoeker. Maar hij kan dus ook een ander proces doorlopen dan je bezoeker. Denk dus altijd vanuit je bezoekers!
Maak gebruik van een boomstructuur
Wanneer je een navigatiemenu gaat aanmaken maak je best gebruik van een boomstructuur. Dat betekent dat je enkele hoofdpagina’s hebt. En daaraan hang je enkele subpagina’s. Hierdoor creëer je ook weer een bepaalde rangorde en structuur in je website.
Je pillar pages of je hoofdpagina’s laat je eigenlijk verder uitbreiden door je subpagina’s of landingspagina’s. Zorg er dus ook voor dat deze gecategoriseerd staan. Je gaat toch ook niet een pagina ‘over ons’ plaatsen onder je diensten?
Serial Position Effect
Wanneer je jouw menu-items een plaats gaat geven hou je best rekening met het ‘Serial Position Effect’. Volgens wetenschappelijk onderzoek is de plaatsing van je items relevant voor het registeren en opslaan van gegevens.
Om in Psychologische termen te spreken kunnen we ook gaan spreken van Primacy-effect (begin van een lijst) en Regency-effect (einde van een lijst). Plaats je belangrijkste items vooraan of achteraan in je menu. Zo gaan ze beter opvallen bij je bezoekers wanneer ze jouw website scannen.
Daarnaast moet de volgorde ook weer correct zijn. Hierbij hou je ook best rekening.
(Bron: Productiveclub)
Maximaal 7 menu items, ideaal voor het korte termijn geheugen.
Enige tijd geleden, in 1965, publiceerde George A. Millen van Harvard University al een paper over het kortetermijngeheugen. Hierin concludeerde hij dat het kortetermijngeheugen ongeveer zeven items kan onthouden.
Dit wil natuurlijk niet zeggen dat je zomaar 7 lange menu-items kunt toevoegen. Je moet deze natuurlijk ook nog beknopt en visueel aantrekkelijk maken. Groepeer dus je zeven categorieën en maak gebruik van beschrijvende labels.
Labels zoals diensten geven zeer duidelijk weer wat personen hier gaan vinden. Terwijl een titel zoals “video’s” niet duidelijk weergeeft wat personen gaan vinden.
Je verbetert deze dus best naar bv. howto video’s. Dit is bovendien ook ineens beter voor je SEO.
Consumenten zijn gevoelig voor Call-To-Actions
Maak gebruik van een Call-to-action in je menu. Vraag mensen om iets te doen. De bekendste zijn natuurlijk: ‘contacteer ons’, ‘vraag je offerte aan’, ‘volg ons’. Je wilt personen dus iets laten doen.
(Bron: Media Jel)
Geef je navigatie vorm
We hebben hierboven al veel navigatiestructuur tips gegeven. Maar ook het uiterlijk is belangrijk voor je menu. En ook hier zijn er weer enkele zaken die je in je achterhoofd moet houden.
Consistentie en vindbaarheid
Wanneer een persoon op je website komt moeten ze direct het menu kunnen terugvinden. Dit mag dus zeker opvallen! Bezoekers moeten namelijk direct kunnen navigeren naar het gewenste element.
Daarnaast zijn we ook gewoontedieren. We hebben graag consistentie, zeker op een website. Zorg er dus voor dat op elke pagina je menu hetzelfde is.
Laat er dezelfde items in terugkomen en laat alles dezelfde plaats behouden. Dit is namelijk het duidelijkste voor de consument. Want we zeiden het al eerder Keep it Simple and Stupid.
Je zult ook zien dat op bijna elke website het menu bovenaan horizontaal en links staat. Mensen zijn dit namelijk zo gewoon. Staat jouw menu ergens anders? Dan moeten ze gaan zoeken en bestaat er de kans dat je ze kwijt bent.
Hieronder geven we enkele voorbeelden van bekende websites. Daaruit zul je kunnen afleiden dat het menu zo goed als altijd horizontaal boven staat.
(Bron: H&M)
(Bron: Coolblue)
Creëer een terugweg
Zorg ervoor dat bezoekers makkelijk kunnen navigeren op je website. Zorg er dus voor dat ze makkelijk terug naar je homepagina kunnen gaan.
Tip: Link je website logo aan je homepagina. Dit is ondertussen een ‘bekend’ iets bij bezoekers.
Maar een terugweg naar de homepagina is niet voldoende. Wanneer bezoekers bijvoorbeeld een bepaalde dienst aan het bekijken zijn, moet je ze ook een terugweg geven naar de algemene diensten pagina. Laat je hoofdpagina dus ook altijd terugkomen in het menu. Dit sluit natuurlijk aan bij de consistente die we eerder aanhaalden.
Vermijd dropdown menu’s
Er zijn verschillende redenen waarom je een dropdown het beste vermijd op desktop.
Als eerste is een dropdown niet zo vriendelijk voor zoekmachines om te indexeren. Hierdoor kunnen zoekmachines dus noodzakelijke elementen missen. Of zoekmachines jouw dropdown kunnen lezen hangt af van de vorm van programmering.
Zo zijn dropdowns gemaakt met CSS en JavaScript wel indexeerbaar. Wanneer er Flash is gebruikt dan weer niet.
Kan Google jouw code lezen? Dan zal hij jouw dropdown indexeren. Maar kan hij de code niet lezen? Dan zal hij jouw menu ook niet indexeren.
Daarnaast zijn bezoekers hun ogen vaak sneller dan hun muis. Hierdoor zien ze snel het dropdown menu, maar duurt het toch nog even voor ze kunnen registreren wat er allemaal inzit.
De derde reden om een dropdown te vermijden is omdat je een extra click toevoegt. Bezoekers moeten immers eerst al éénmaal klikken voor ze het menu kunnen openen. Hierdoor wordt de 3-click rule wel zeer moeilijk.
Wees mobiel vriendelijk!
Deze spreekt tegenwoordig voor zich, maar zorg er voor dat je menu ook gebruiksvriendelijk is voor tablet en mobiel. Net zoals je hele website dient ook je menu responsive te zijn.
Zorg dat alles duidelijk leesbaar en klikbaar is. Maar ook dat het menu niet teveel verschuift. En dat de dropdown menu knop gelijk staat met de sluitknop.
(Bron: Zalando)
(Bron: Coolblue)
Hoe zit het met onze website?
Laten we zelf even naar de header van onze eigen website kijken. Zoals je kan zien gebruiken wij twee navigatie-elementen in onze header. Meer specifiek maken wij tweemaal gebruik van een menu.
Echter is hier natuurlijk één primair menu. Dat staat zoals in de meeste gevallen rechts. Dit is ook ons hoofdmenu.
Het andere menu is eerder ons secundair menu met extra informatie. Een informatieve menu zoals ze dat ookwel noemen.
Voor ons menu zijn we vertrokken vanuit de informatieve zoekintentie. Bezoekers gaan immers op onze website komen om informatie op te zoeken voor een bepaalde dienst of voor het bedrijf te leren kennen. Maar toch maken wij hier ookal gebruik van de commerciële intentie door het plaatsen van de contactknop.
Natuurlijk kunnen wij ook dingen beter doen. Volgens het Serial Position Effect zouden bezoekers op onze website het snelste de homepagina, aangegeven door een huisje, en de contactknop registeren. Zijn dit nu juist de pagina’s waar wij de aandacht op willen vestigen? Daar zijn we niet 100 procent zeker van.
Daarnaast gebruiken wij ook maar 5 menu-items. Er is dus nog ruimte voor twee extra menu items. Is het voor ons dan geen beter idee om de volgende menu structuur te hanteren?: Websites, E-mailmarketing, SEO, SEA, Over ons, Projecten, Contact.
Zo zouden wij 7 menu-items hebben, direct onze diensten een hogere prioriteit geven. En zouden personen de websites en contact elementen het snelste registeren.
Wij nemen deze theorieën alvast mee naar ons toekomstig design.
In ons menu maken wij ook gebruik van de welbekende CTA, namelijk met de contactknop. Omwille van zijn knop vorm en rode kleur valt deze direct op. Zo triggeren wij gebruikers om contact op te nemen met ons.
Conclusie
Wanneer je dus een navigatiemenu gaat aanmaken dien je met een behoorlijk aantal zaken rekening te houden. Het belangrijkste wat je zeker moet onthouden is denken vanuit de klant.
“Hoe gaat mijn klant navigeren?” en “Hoe maak ik het mijn bezoeker zo gemakkelijk mogelijk?”. Daarna kun je extra psychologische trucjes gaan toepassen.
FAQ
Waar staat het menu van een website
In principe mag je volledig zelf bepalen waar je graag jouw menu laat terugkomen. Echter zijn mensen gewoontedieren. De meeste website plaatsen hun menu altijd bovenaan en vaak nog eens rechts. Hierdoor vinden bezoekers sneller jouw menu terug. Hoe duidelijker de termen, hoe begrijpbaarder ook je menu is.
Wat is een goede menu structuur
Door je menu structuur ga je een leidraad creëren voor je bezoekers. Een goede menu structuur moet ervoor zorgen dat bezoekers snel kunnen vinden waar ze naar zoeken.
Waarom is de navigatiestructuur van een website zo belangrijk?
Wanneer je een webshop hebt wil je dat bezoekers zo snel mogelijk het gewenste product kunnen terugvinden. Zijn bezoekers op zoek naar een broek? Dan wil je ze natuurlijk niet eerst naar allemaal schoenen laten kijken. Is een kind op zoek naar schoenen dan wil je natuurlijk geen schoenen voor mannen laten zien. Je werkt hier dus best met een doelgroep georiënteerd menu. Jouw submenu echter is vermoedelijk dan wel onderwerp georiënteerd.
Wat is belangrijk bij het maken van een website
Een website staat of valt bij enkele belangrijke items zoals je teksten, afbeeldingen maar ook bij je menu! Hecht dan ook zeker belang aan het opstellen van je navigatie en navigatiestructuur.
Hoe noem je de balk bovenin een website?
Elke website zal bovenaan gebruik maken van een header. Deze header wordt weergegeven bovenaan op elke pagina van je website. De header bevat meestal de twee volgende elementen. Namelijk het logo en het menu. Dit kan natuurlijk aangevuld worden met elementen zoals een zoekbalk.
