• Homepagina
  • Blog
  • Hoe creëer je de ideale topnavigatie voor je webshop?

Hoe creëer je de ideale topnavigatie voor je webshop?

Navigeren - banner.jpg

Hoe zorg je dat bezoekers je webshop in no time wegklikken? Plaats een menu (topnavigatie) in je webshop die bezoekers niet snappen. De topnavigatie heeft veel invloed op gebruiksvriendelijkheid. Maar ook op SEO. In deze blog leg ik uit hoe je op beide onderdelen maximaal scoort bij de oriënterende bezoeker.

Inhoud

Direct naar: 

  1. Categorie-indeling
  2. Benamingen
  3. Design
  4. Extra tips

Print de blog
Leestijd: 18 minuten

Als je webshop een goede topnavigatie heeft, dan bereikt je bezoeker gemakkelijk en zonder hersenkrakers de juiste categorie en het juiste product. Je geeft ook een goed signaal af aan Google, want Google wil graag dat gebruikers via de zoekmachine snel vinden wat ze zoeken.

Op basis hiervan houd ik rekening met een drietal basiselementen:

  1. Categorie-indeling 
  2. Benaming van de categorie 
  3. Design 

Deze drie elementen vormen de leidraad van deze blogpost.

 

1.Categorie-indeling

De zogenoemde spiders van Google “crawlen” (beoordelen) je webshop. Hierbij moeten ze linkwaarde verdelen over je webshop. Crawlers kunnen de linkwaarde niet oneindig verdelen. Er is namelijk een beperkte hoeveelheid beschikbaar.

De crawlers beginnen op de homepagina, en verdelen ze de linkwaarde over de verschillende pagina’s van je webshop. Dit doet de crawler door linkjes te volgen en zo verder de webshop in te gaan. Hoe dieper de crawler in de webshop gaat, des te minder waarde er te verdelen is op de pagina’s.

De pagina’s die in de topnavigatie zijn verwerkt krijgen de meeste linkwaarde toegekend. De topnavigatie is namelijk op elke pagina bereikbaar (voor zowel de bezoeker als de crawler) en het staat altijd boven de vouw (datgene wat direct in beeld is zonder dat je bezoeker naar beneden hoeft te scrollen) van de pagina. Meestal staan de belangrijke elementen voor een webshop en de bezoeker ook bovenaan de pagina. Daarom waardeert Google deze elementen ook meer.

 Afbeelding 1 -  linkwaarde verdeling.jpg

Afbeelding 1: linkwaarde verdeling

 

Met deze informatie in het achterhoofd moet je beslissen over:

  1. Hoe je de categorieën weergeeft
  2. Hoe je de menu-items (subcategorieën) weergeeft

New Call-to-action

 

Hoe geef je productcategorieën weer?

Begin met het vormen van de hoofdstructuur van je navigatie. Moeten je bezoekers eerst een geslacht kiezen voordat ze verder navigeren of kunnen ze direct klikken op algemene categorieën (hoofdingangen) zoals koffers of kleding?

Welke hoofdingangen je gebruikt hangt af van het productaanbod en van het zoekgedrag van de consument. Je achterhaalt het zoekgedrag met analyses op gebruikerservaring (UX) en SEO.

UX: doe een usablity-onderzoek. Dit geldt niet alleen voor het achterhalen van de juiste hoofdingangen, maar voor alle keuzes die je maakt bij het inrichten van je navigatie. Hier ga ik aan het eind van deze blogpost nog iets dieper op in.


SEO: gebruik een zoekwoordenonderzoek
.

“Met een zoekwoordonderzoek achterhaal je de behoefte van de markt. Het geeft je veel toegevoegde waarde bij de ontwikkeling van je topnavigatie”
Jens Olsthoorn, onze SEO Consultant 

Drie elementen uit het zoekwoordonderzoek zijn erg belangrijk:

  • Zoekgedrag
  • Volume
  • Grootte assortiment

De analyse van deze drie elementen leidt tot inzichten die je helpen bij het invullen van de categorie-indeling en -benaming van je topnavigatie. Zo ontdek je via een zoekwoordonderzoek hoe consumenten in de markt via Google zoeken. Zoeken ze bijvoorbeeld met algemene termen (tassen) of juist meer op geslacht (damestassen, herentassen)? Welke invloed deze inzichten hebben op de inrichting van je topnavigatie licht ik toe aan de hand van onderstaande voorbeelden.

Figuur 2 - Duifhuizen hoofdingangen.png

 Afbeelding 2: in het rood omrand is de topnavigatie van de webshop van Duifhuizen

Concept: Duifhuizen.nl toont alle hoofdcategorieën (tassen, koffers, trolleys etc.) waarna de bezoeker een specifiekere keuze kan maken in de onderliggende menu-items (clutches, handtassen, aktetassen, Ted Baker, etc).

Voordeel:

  • Duifhuizen zorgt voor veel waarde aan algemene pagina’s over reistassen, handtassen en reistassen. Dit is voor SEO erg sterk, omdat Duifhuizen een grote speler is in de markt, een erg groot assortiment heeft en zodoende makkelijk kan ranken op deze algemene pagina’s. Voor Duifhuizen is het dus zeker niet zonde om veel waarde mee te geven aan deze algemene pagina’s.

Nadeel:

  • Een man die zich oriënteert op tassen heeft meer moeite met het vinden van de juiste tas. Er worden namelijk eerst een groot aantal menu-items getoond, waarvan het grootste deel eigenlijk alleen bestemd is voor vrouwen. Het kost mannen extra moeite om het juiste menu-item te vinden. Je voorkomt dit door eerst te vragen naar geslacht.

 Figuur 3 - The Little Green Bag hoofdingangen.png

Afbeelding 3: de hoofdingangen in de webshop van The Little Green Bag (rood omrand)

Concept: bezoekers van de webshop Thelittlegreenbag.nl moeten eerst de keuze tussen geslacht maken voordat ze verder kunnen navigeren tussen de productsoorten.

Voordeel:

  • Qua assortiment is thelittlegreenbag.n iets kleiner dan Duifhuizen. Verder is de concurrentie 
    erg groot in de tassenmarkt. Dit zorgt ervoor dat het voor The
     Little Green Bag lastig is om hoog in Google te ranken op algemene zoekwoorden als tassen of handtassen. Door de hoofdingangen te beginnen met geslacht sturen ze meer linkwaarde naar specifiekere zoekwoorden als damestassen en dames handtassen. Hierdoor kunnen ze voor deze specifieke zoekwoorden erg goed ranken.

Nadeel:

  • Voor SEO is dit nadelig. Er is geen algemene pagina over tassen, maar alleen een pagina over kinder-, dames- of herentassen. Het is voor thelittlegreenbag.nl daarom erg lastig om op de algemene zoektermen tassen of rugtassen te ranken. Het is de vraag of thelittlegreenbag.nl dit wel wil en kan concurreren op zulke algemene zoektermen, want er is veel concurrentie en het aanbod is relatief klein.

Hoe geef je de menu-items weer?

Hoe bepaal je vervolgens welke menu-items de topnavigatie bevat? En onder welke hoofdingangen ze vallen? Houd rekening met een aantal punten:

  • De menu-items moeten in een hoofdcategorie elkaar uitsluiten. Dit voorkomt verwarring bij de bezoeker
  • Plaats een menu-item onder meerdere hoofdingangen als de bezoeker deze onder meerdere hoofdingangen verwacht te vinden
  • Zorg dat de bezoeker een goed beeld krijgt van het aanbod aan de hand van alle menu-items en hoofdingangen in de topnavigatie. Kortom, ze moeten je assortiment goed vertegenwoordigen

 Figuur 4 - Kookwinkel Oldenhof menu-items.png

Afbeelding 4: de menu-items (rood omrand) in de topnavigatie van Kookwinkel Oldenhof

Dit is lastiger dan je denkt. Zo maakt Oldenhof het bezoekers lastig om thee te vinden in de nagivatie. Zie jij in afbeelding 4 hoe je thee kunt kopen bij Oldenhof?  

  • Denk goed na over het aantal linkjes/ categorieën. De invloed van het aantal linkjes in je topnavigatie op SEO en UX bespreek ik hier.
  • Maak onderscheid tussen categorieën die vallen onder de hoofdcategorieën en filteropties. Zie de voorbeeldcase hieronder

Voorbeeldcase
E
nige tijd geleden deed ik een zoekwoordonderzoek voor een webshop in ondermode. Hierdoor viel mij al vrij snel op dat in deze branche veel werd gezocht op zoekwoorden als ‘grote maten’ en ‘corrigerende’.

Van een klant ontving ik een schets voor de topnavigatie (afbeelding 5a). Het viel mij op dat termen uit het zoekwoordonderzoek niet terugkwamen in de schets. Toen ik de webshop van de klant bekeek zag ik dat ze beschikten over een groot assortiment grote maten van ondermode. Het assortiment werd pas vindbaar in de filter voor maten op de productoverzichtspagina’s. Dit is een gemiste kans, want bezoekers moesten veelvuldig klikken voordat ze de grote maten vonden. En met elke klik raak je bezoekers kwijt. Bovendien kregen deze pagina’s bijna geen linkwaarde van Google.

Mijn advies aan de klant: maak een apart menu-item aan voor artikelen in grote maten en voeg dit als een menu-item toe aan de topnavigatie. Daardoor is alles wat hieronder valt beter vindbaar. Ik zag deze verbetering terug in de prestaties van de organische zoekresultaten.  

 

Categorie 1 Categorie 2 Categorie 3
Dames Ondergoed BH's
    Slips
    Tops
    Onderjurken
  Lingerie BH's
    Slips
    Onderjurken
  Badmode Badpakken
    Bikinitops
    Bikinibroekjes
    Tankini
    Strandkleding  

 Afbeelding 5a: het concept van de navigatie voor advies  

 

Categorie 1 Categorie 2 Categorie 3 Subcategorieën
Dames Ondergoed BH's  
    Slips Slip, hipster, short, string
    Tops T-shirt, spaghetti shirt, hemd
    Onderjurken  
    Corrigerend ondergoed  
  Lingerie BH's (url: ondergoed/bh/)  
    Slips (url: ondergoed/slips)  
    Onderjurken (url: ondergoed/onderjurken)  
  Badmode Badpakken Corrigerend, chloorbestendig, prothese
    Bikinisets (bikini's) Soort broekje, soort top, corrigerend
    Bikinitops Bandeau, beugeltops, haltertops
    Bikinibroekjes Hipster, slips, shorts, corrigerend
    Tankini's Corrigerend, met/ zonder broekje
    Strandkleding Strandjurk
    Grote maten Bikini, tankini, badpak, strandjurk

  Afbeelding 5b: het concept van de navigatie na advies  

 

Hoeveel linkjes verwerk je in de topnavigatie?

Verwerk niet te veel linkjes in de topnavigatie, want het betekent dat crawlers minder waarde kunnen verdelen per link en dat de kans op fouten veel groter is. Zo zie ik regelmatig webshops met linkjes in hun topnavigatie die leiden naar pagina’s waar al geruime tijd geen assortiment meer op staat (en ook niet meer op komt te staan). Dit betekent dat er linkwaarde wordt verspild aan pagina’s die er niet meer toe doen. Bovendien zien je bezoekers door te veel linkjes door de bomen het bos niet meer. Mijn collega Patty Bastiaansen (CRO-specialist) zegt hier het volgende over:

“Bezoekers kunnen maximaal zeven keuzemogelijkheden overzien. Een bezoeker die een keuze moet maken uit meer dan zeven opties verliest het overzicht. Het is dan de natuurlijke reactie om helemaal niets te kiezen.”
Patty Bastiaansen, onze CRO Consultant

Deze gedachtegang is gebaseerd op de theorie Miller’s Law en verschillende onderzoeken. Als je dit toepast op de categorielinkjes in de topnavigatie kijk dan of je het aantal linkjes kan beperken tot maximaal zeven per categorie. Of het ook echt toepasbaar is op jouw topnavigatie is sterk afhankelijk van de grootte van het assortiment en je doelgroep.

Heb je een enorm assortiment en is een groot aantal categorieën en linkjes in je topnavigatie niet te vermijden? Dan zijn hier drie tips voor de gebruiksvriendelijkheid en SEO-waarde van je navigatie:   

Tip 1: gebruik subkopjes in het overzicht van je categorielinkjes.

Tip 2: plaats de hoofdingangen in de navigatie en link naar de rest van de menu-items door een
te verwerken tussen de menu-items. Dit houdt de navigatie overzichtelijk en je geeft extra linkwaarde aan deze categorieën.

 "If you cut the number of links in half, you’ll double the amount of authority passed from the home page, and increase the chance that your interior pages will rank" 
Andy Crestodina, auteur van het boek: Website Navigation – 7 Best Practices

 Figuur 6  Bol.com ....png

Afbeelding 6: Bol.com houdt de navigatie overzichtelijk door het aantal linkjes te beperken en te verwijzen naar een overzichtspagina met alle categorieën (rood omrand). Ook gebruiken ze tussenkopjes om het overzicht te bewaren

Vaak staan er menu-items in de topnavigatie die beter als filterpagina kunnen dienen. Dit wordt ook wel “over-categorisation” genoemdZo ontwikkelen webshops nog wel eens menu-items aan de hand van de populaire attributen die hun producten hebben. Dit hoeft niet gebruiksvriendelijk te zijn, want het kan ertoe leiden dat er te veel hoofdingangen en menu-items ontstaan. Bovendien kunnen ze elkaar gaan overlappen en dan weten bezoekers helemaal niet meer wat ze moeten kiezen.

 Figuur 7 - Heuts over-categorization.png

Afbeelding 7: Heuts heeft last van over-categorization in het menu

Heuts is een goed voorbeeld van over-categorisation. De webshop heeft over het algemeen een goede navigatie, maar gaat bij het menu-item over zwembaden (zie afbeelding 7) toch de fout in. Ze besloten de menu-items op te delen aan de hand van twee zwembadmerken: Intex en Interline. Een oriënterende bezoeker moet nu direct een keuze maken tussen de merken terwijl hij daar nog niet aan toe is.

Dit is een typisch geval van “over-categorization” en erg ongebruiksvriendelijk, omdat:

  1. Er geen “algemene” pagina is. Hierdoor krijgt een bezoeker geen overzicht van alle zwembaden
  2. Categorieën overlappen op een groot aantal attributen. Als je bijvoorbeeld zoekt naar een zwembad van een bepaalde breedte, dan zou deze onder meerdere categorieën kunnen vallen.
  3. Door deze opdeling tussen Intex- en Interline zwembaden ontstaat een onnodig grote lijst menu-items. Een algemene zwembadenpagina met een filteroptie voor merken had volstaan


2. Benaming van de categorie

Hoe zorg je voor de meest gebruiksvriendelijke benaming van je categorie? Door de taal van  bezoeker als leidraad te gebruiken. Laat branding niet de boventoon voeren. Veel bedrijven geven productgroepen een bepaalde benamingen omdat dit beter bij het merk past. Terwijl het vaak niet overeenkomt met de taal die de bezoeker spreekt. Vermijd vakjargon. En sommige webshops nemen de benamingen van leveranciers over in hun webshop. Maar ook dit begrijpen consumenten vaak niet!

Daarnaast hecht Google veel waarde aan linkteksten. Daarom is het voor SEO belangrijk dat de linkjes in je topnavigatie de juiste benamingen hebben. Deze benamingen moeten consistent zijn, overeenkomen met de context van de pagina’s waar ze naartoe linken en overeenkomen met het zoekgedrag van de bezoeker.

Afbeelding 8 - benamingen bij Vingino.png

Afbeelding 8: benamingen bij Vingino

Vingino gebruikt in verband met branding veel Engelse benamingen in de webshop. Het is ongebruiksvriendelijk en het zorgt dat een zoekwoord als “Vingino mini kleding” veel waarde krijgt van Google, terwijl de meeste Nederlandse consumenten zoeken op “Vingino babykleding” .

 

Wat is wel de juiste benaming?

Doe een zoekwoordonderzoek. Dan wordt duidelijk of een categorie of product meerdere benamingen heeft. Bovendien achterhaal je dan welke benaming de zoekintentie van de bezoeker het best vertegenwoordigt en dat er op een bepaalde benaming veel meer wordt gezocht dan op een andere.

Tip: zeker weten of jouw benaming ook de verwachting van de consument vertegenwoordigt? Gebruik Google (afbeeldingen) en kijk wat er wordt getoond.

Voorbeeldcase 1

Een online juwelier gebruikte voor zijn assortiment kettingen de benaming colliers, want een ketting zit op een fiets beredeneerde de webshopeigenaar.

Afbeelding 9 - deel van zoekwoordonderzoek voor een juwelier.png
Afbeelding 9: deel van zoekwoordonderzoek voor een juwelier. Collier versus ketting 

Maar uit een zoekwoordonderzoek (zie afbeelding 9 hierboven) bleek dat de meeste bezoekers het woord ketting associëren met het sieraad ketting. Ook zit er meer zoekvolume op de benaming ketting. Bij het woord collier werd alleen aan een type ketting gedacht (zie afbeeldingen 10 hieronder). Deze benaming zorgde dus voor verwarring bij bezoekers. Kortom, de webshop liep veel zoekverkeer mis!

Figuur 10 - Google afbeeldingen.. ketting.png

Afbeelding 10a: zoekresultaat voor de term ketting in Google afbeeldingen

Figuur 10 - Google afbeeldingen.. collier.png

Afbeelding 10b: zoekresultaat voor de term collier in Google afbeeldingen

Voorbeeldcase 2
Bergtoys.com is een webshop in kinderspeelgoed en heeft een nieuwe collectie trampolines die je kunt ingraven in de tuin. Vanwege branding noemt Bergtoys deze categorie in hun webshop “flatground trampolines” (zie afbeelding hieronder).

Figuur 11 - Bergtoys benamingen - zonder de extra, pixelige, tekst.png

Afbeelding 11: de benamingen van productcategorieën in de webshop van Bergtoys

Maar als je in Google Afbeeldingen zoekt op flatground trampoline, dan zie je dat Google moeite heeft met het vinden van geschikte resultaten. Zo vind je bijvoorbeeld een schommel voor in de tuin.

Google legt ook de vergelijking met een ander zoekwoord: de in-ground trampoline. Als je zoekt op deze term, dan vind je resultaten die veel beter overeenkomen met de nieuwe collectie.

Afbeelding 12 - benamingen van Flatground Trampoline in Google.png

Afbeelding 12: benamingen van Flatground Trampoline in Google

Afbeelding 13 - de resultaten van het zoekwoord ground level trampoline.png

Afbeelding 13: de resultaten in Google afbeeldingen voor het zoekwoord ground level trampoline

Je ziet dit ook terug in de zoekvolumes:

  • Flatground trampoline: 0-10 zoekopdrachten per maand
  • Ground level trampoline: 30 zoekopdrachten per maand

 

3.Design

Na het bepalen van het hoofdmenu, de menu-items en de bijbehorende inhoud is het visuele design aan de beurt. Het design maakt het verschil tussen een onoverzichtelijke en gebruiksvriendelijke topnavigatie. Welke mogelijkheden zijn er?

 

Visueel

Topnavigaties zijn er in veel verschillende smaken: één of meerdere hoofdingangen, wel of geen dropdownmenu, een menu dat horizontaal of verticaal uitklapt, tussenkopjes in het dropdownmenu en ga zo maar door. Maar niet elke mogelijkheid past bij elke webshop en diens assortiment. Dit leg ik uit aan de hand van een aantal casestudies.

 

Afbeelding 14 - Adam Brandstore heeft meerdere hoofdingangen in de topnavigatie.gif

Afbeelding 14: Adam Brandstore heeft meerdere hoofdingangen in de topnavigatie

Het concept van Adam Brandstore

Adam Brandstore koos voor meerdere hoofdingangen, omdat het assortiment niet enorm breed is.

Voordelen:

  • Een bezoeker ziet direct in de topnavigatie welke producten Adam.nl verkoopt
  • De bezoeker hoeft niet meerdere keren te klikken voordat hij op een productoverzichtspagina terechtkomt. In slechts één klik komt hij op de juiste pagina en kan hij direct het filter gebruiken om naar eigen smaak het product te vinden

Nadeel:

  • De topnavigatie wordt al snel onoverzichtelijk. Verwerk niet meer dan zeven hoofdingangen in het hoofdmenu. Als Adam.nl het assortiment uitbreidt, moet het bedrijf al snel gaan nadenken over een ander design.

 

Afbeelding 15 - de werking van de topnavigatie van de webshop van Heuts.gif

Afbeelding 15: de werking van de topnavigatie van de webshop van Heuts

Het concept van Heuts:
Als een bezoeker een hoofdingang selecteert in de webshop van Heuts, dan verschijnt er een overzicht van de menu-items in de vorm van tegels met productafbeeldingen. Hierdoor ziet de bezoeker op een overzichtelijke en visueel sterke manier de mogelijkheden. 

Voordelen:

  • Voorkomt verwarring over de context van de categorie door er een beeld bij te tonen
  • Ondanks het enorme assortiment behoudt Heuts het overzicht op de overzichtspagina

Nadeel:

  • Het is voor een bezoeker onhandig dat hij eerst op een hoofdingang moet klikken voordat hij wordt doorgelinkt naar de overzichtspagina. Via een automatisch dropdownmenu met tegels verbeter je dit. Dan heeft de bezoeker direct een overzicht van wat zich onder de desbetreffende hoofdingang bevindt.

Afbeelding 16 - de werking van de topnavigatie van de webshop van Straluma.gif

Afbeelding 16: de werking van de topnavigatie van de webshop van Straluma

Het concept van Straluma:
Een eenvoudige verticale dropdownmenu die alle menu-items toont.

Voordeel:

  • Het dropdown-menu geeft de bezoeker snel overzicht van het assortiment dat onder de desbetreffende hoofdingang in de topnavigatie valt.

Nadeel:

  • Doordat het dropdownmenu uit een enkele verticale kolom bestaat en niet beschikt over tussenkopjes, kan het gebeuren dat deze te lang en onoverzichtelijk wordt. Zo zie je in afbeelding 16 dat het dropdown-menu van de categorie “verlichting” zelfs buiten het beeld uitklapt.

Afbeelding 17 - de topnavigatie van de webshop van Lakeland.gif

Afbeelding 17: de topnavigatie van de webshop van Lakeland

Het concept van Lakeland:
Lakeland heeft een dropdownmenu waarbij de menu-items nogmaals horizontaal uitklappen. De uitklapbare submenu’s zijn opgedeeld aan de hand van subkopjes en voorzien van tegels die aanbiedingen weergeven.

Voordelen:

  • Ondanks het grote duidelijk overzicht te creëren
  • Lakeland.co.uk besluit een groot aantal menu-items te tonen. Dit wordt niet onoverzichtelijk vanwege de subkopjes die de categorieën van elkaar onderscheiden
  • Het design van kleine aspecten is erg gebruiksvriendelijk. De categorie heeft een blauwe achtergrond, maar de menu-items van de hoofdingang waar het uitklapmenu van wordt getoond is wit. Ook de bijbehorende productgroep is wit. Bovendien helpt een pijltje (symbool >) in het menu-item de bezoeker nog beter bij het bepalen in welke subcategorie hij kijkt

Nadeel:

  • De bezoeker verliest snel overzicht door kleine details. Zo worden hier te weinig witregels gebruikt, waardoor de categorieën te dicht op elkaar staan. Ook zijn sommige categoriebenamingen veel te lang.

Afbeelding 18 - de topnavigatie van de webshop van Bol.com.gifAfbeelding 18: de topnavigatie van de webshop van Bol.com

Het concept van Bol.com 
Het hoofdmenu van Bol.com is verticaal. De categorieën schuiven via een dropdownmenu horizontaal uit.

Voordelen:

  • Bol.com heeft een groot aantal hoofdingangen. Als je deze horizontaal naast elkaar plaatst, dan wordt dit erg onoverzichtelijk. Waarschijnlijk past dit niet eens op elk desktopscherm. De verticale plaatsing houdt het menu overzichtelijk.
  • Daarnaast blijkt uit verschillende onderzoeken dat oriënterende bezoekers vaak in een patroon zoeken waarbij de linkerkant de voorkeur krijgt (Patel, 2014) (Bogaert, 2016).
  • De zoekfunctie valt meer op. Dit is met name voor webshops met een groot assortiment erg belangrijk. En zoals ISM’er Jurjen Jongejan zegt: “Zoekers zijn boekers!”.

Lees hier waarom zoekers boekers zijn.

Nadeel:

  • Geroutineerde webshopbezoekers verwachten dat het menu op de oude vertrouwde plek, horizontaal bovenin het scherm.

4. Extra – Praktische tips

Er zijn nog een aantal elementen waar je rekening mee moet houden bij de ontwikkeling van de topnavigatie.

Dropdown-menu’s

Sommige navigatiedesigns bevatten een dropdownmenu. Over het gebruik van deze dropdownmenu’s zetten sommige online marketeers nog wel eens vraagtekens bij. Vanuit zowel gebruiksvriendelijkheid als SEO-oogpunt. 

SEO: dropdownmenu’s kun je op meerdere technische manieren ontwikkelen. Zo maak je met AJAX een dropdownmenu extra dynamisch. Er wordt echter gewaarschuwd om hiermee voorzichtig te zijn. Google heeft namelijk moeite met het crawlen van elementen uit een webshop die met AJAX zijn opgezet.

Maar dropdownmenu’s kun je gewoon bouwen met een techniek als AJAX, zolang je maar zorgt dat de linkjes van het dropdownmenu zijn verwerkt in de broncode van de pagina’s. Zo verzeker je dat de Google crawlers de linkjes van de hoofdingangen en menu-items vinden en crawlen.


Gebruiksvriendelijkheid: een dropdownmenu draagt bij aan de gebruiksvriendelijkheid van een webshop. Met name webshops met een groot assortiment profiteren van een dropdownmenu, want je kunt meer menu-items tonen en je voorkomt dat een bezoeker eerst moet klikken voordat hij een overzicht krijgt van de onderliggende menu-items (zoals in het designvoorbeeld van Heuts).

 

Hoe bepaal je de volgorde van je hoofdingangen en menu-items?

Over de volgorde van je categorieën is nog relatief weinig bekend en het resultaat verschilt per webshop. Maar het is zeker een element voor de topnavigatie die de gebruiksvriendelijkheid kan bevorderen. Vandaar dat ik dit onderwerp niet wil overslaan.

In de basis bestaan er drie opties:

1. De ABC-volgorde, oftewel op alfabetische volgorde categorieën prioriteren zoals in het onderstaande voorbeeld:  

Afbeelding 19 - Lakeland.co.uk deelt de categorieën in op alfabetische volgorde.png

Afbeelding 19: Lakeland.co.uk deelt de categorieën in op alfabetische volgorde          

 2. De volgorde afstemmen op populariteit of een KPI zoals zoekvolume, omzet, conversiepercentage zoals in de onderstaande afbeelding:

Afbeelding 20 - Bol.com deelt de categorieën in op populariteit of een KPI.pngAfbeelding 20: Bol.com deelt de categorieën in op populariteit of een KPI

 

3. De volgorde volgens het serial position effect:

Afbeelding 21 - Coolblue.nl deelt de categorieën in volgens het serial position effect.png

Afbeelding 21: Coolblue.nl deelt de categorieën in volgens het serial position effect

Het serial position effect houdt in dat de meest populaire categorieën aan het begin en eind van de reeks worden geplaatst. Aan het begin en het eind van een lijst is de focus van de bezoeker het hoogst waardoor deze categorieën dus eerder opvallen.

Maar welke van deze opties is beter? Siebren van Bruggen, onze Conversie-Optimalisatie Consultant, zegt hierover:

“Elke webshop heeft een eigen assortiment en doelgroep. Daarom is er niet één beste optie. Ons advies: A/B-test wat voor jouw webshop het beste werkt.” 
Siebren van Bruggen, Conversie-Optimalisatie Consultant

Mobiel vriendelijk

“Mobile first!” is al jaren de slogan van Google. Ze richtten hiervoor zelfs een mobile academy op. Zorg dat de topnavigatie gebruiksvriendelijk is op elk apparaat. De topnavigatie moet altijd goed schalen zodat je bezoekers de topnavigatie eenvoudig kunnen gebruiken. Er zijn verschillende plugins waarmee je dit makkelijk bereikt.

Laat het dropdownmenu niet alleen automatisch uitschuiven wanneer de muis eroverheen gaat, maar zorg ook dat deze uitschuift (en weer inschuift) wanneer een bezoeker op een hoofdingang klikt. Zo neem je het risico weg dat tablet en mobiele gebruikers het dropdownmenu niet kunnen gebruiken.

 
Vraag feedback

De klant centraal stellen is een van de belangrijkere aspecten bij de ontwikkeling van de topnavigatie. Het is daarom ook zinvol als je de consument gebruikt als bron voor het verzamelen van informatie. Geeft bijvoorbeeld de consument een productgroep dezelfde naam geven als jijzelf? En onder welke hoofdingang moet je het een product plaatsen? Vraag het gewoon aan de bezoekers via een enquete of usability-onderzoek. Een handige online tool waarmee je ook je concept of huidige topnavigatie mee kunt testen is treejack. Of raadpleeg in Google Analytics de navigation summary, of het user flow report. Een wat meer arbeidsintensieve stap is het inrichten van events met Google Tag Manager. Analyseer daarna welke drempels de bezoekers tegenkomen. En als je navigatie tekortschiet, dan kun je dit verbeteren.

 

De ideale topnavigatie

Met de bovenstaande informatie kun je van jouw topnavigatie de ideale topnavigatie maken. Twijfel je over bepaalde tips en mogelijke aanpassingen? Dat kan, want elke webshop is uniek en elke doelgroep is anders. Test daarom altijd aanpassingen voordat je je navigatie definitief aanpast of ontwikkelt.

New Call-to-action

Blogger

Thomas Wolters, SEO Consultant
Thomas Wolters, SEO Consultant

Thomas is als SEO Consultant gespecialiseerd in topnavigatie. Hij werkt onder andere voor Shabbies, Kookwinkel Oldenhof, Simon Lévelt, Vingino, Ranzijn en Zinzi.

E-mail: [email protected]

Contact

Direct één van onze e-mailmarketingspecialisten spreken?

Neem contact met ons op

Deel deze pagina