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

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. Bezoekers vinden snel via de topnavigatie in je webshop wat ze zoeken door een drietal basiselementen:

• Categorie-indeling
• Benaming van de categorie
• Design

Deze drie elementen vormen de leidraad van deze blogpost.

1. Categorie-indeling

De zogenoemde spiders van Google “crawlen” (beoordelen) je webshop. Zo beoordelen ze de waarde van elke link (linkwaarde)in je webshop. De spiders kunnen de linkwaarde niet oneindig verdelen, want er is een beperkte hoeveelheid beschikbaar

De spiders beginnen op de homepagina. Dit is de belangrijkste pagina. Vanaf deze pagina verdelen ze de linkwaarde over de verschillende pagina’s in je webshop. Dit doet de spider (ook wel crawler) door linkjes te volgen en zo verder de webshop in te gaan. Hoe dieper de crawler je webshop ingaat, des te minder waarde hij kan verdelen op de dieper gelegen pagina’s.

De pagina’s die in de topnavigatie van je webshop 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 debelangrijke elementen voor een webshop en de bezoeker ook bovenaan de pagina. Daarom waardeert Google deze elementen ook meer.

Afbeelding 1: de wijze waarop spiders linkwaarde verdelen

Met deze informatie in het achterhoofd beslis je:

• Hoe je de categorieën weergeeft
• Hoe je de menu-items (subcategorieën) weergeeft
• Hoe geef je productcategorieën weer?

Begin met het vormen van de hoofdstructuur van je navigatie. Bedenk of het belangrijk is dat je bezoekers eerst kiezen voor welk geslacht ze producten willen zien voordat ze verder navigeren. Of laat je bezoekers direct klikken op algemene categorieën (hoofdingangen) zoals koffers of kleding? Welke hoofdingangen je gebruikt in de topnavigatie van je webshop hangt af van je productaanbod en van het zoekgedrag van je doelgroep. Je achterhaalt het zoekgedrag met data-analyses op gebruikerservaring (UX) in je webshop en met een zoekwoordonderzoek.

Net een usablity-onderzoek achterhaal je de juiste hoofdingangen voor de topnavigatie in je webshop en helpt je bij verder bij alle keuzes die je moet maken voor het inrichten van je navigatie.

Tip: hoor in deze webinaropname hoe je een usability-onderzoek aanpakt

Tip: hoor in deze webinaropname over het ontwikkelen van een goede online marketingroadmap hoe je de behoefte van je doelgroep achterhaalt

Voor een zoekwoordonderzoek zijn een drietal elementen essentieel:

• Zoekgedrag
• Volume
• De grootte van je assortiment

De analyse van deze drie elementen geven je inzichten die je helpen bij het invullen van de categorie-indeling en -benaming van je topnavigatie in je webshop. Zo ontdek je via een zoekwoordonderzoek hoe je doelgroep in de markt via Google zoekt. Zoekt je doelgroep 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.

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

In afbeelding twee die je de topnavigatie van de webshop van Duifhuizen. Het 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).

Het voordeel:
Duifhuizen zorgt voor veel linkwaarde aan algemene pagina’s over reistassen, handtassen en reistassen. Dit is vanuit SEO-perspectief sterk. Duifhuizen heeft een groot assortiment waardoor het waardevol is om veel waarde mee te geven aan deze algemene pagina’s. Zo zorgen ze voor goede posities op de algemene zoektermen.

Het nadeel:
Een man die zich oriënteert op tassen heeft door deze topnavigatie in de webshop meer moeite met het vinden van de juiste tas. Duifhuizen toont namelijk eerst een groot aantal menu-items voor vrouwen. Het kost mannen extra moeite om het juiste menu-item te vinden. Je voorkomt dit door eerst te vragen naar geslacht.

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

Het concept van Thelittegreenbag.nl: bezoekers moeten eerst de keuze tussen geslacht maken voordat ze verder kunnen navigeren tussen de productsoorten.

Het voordeel:
Qua assortiment is thelittlegreenbag.nl iets kleiner dan Duifhuizen. Daarnaast is de concurrentie erg groot in de tassenmarkt. Daarom is het voor The Little Green Bag lastig om hoog in Google te ranken op algemene zoekwoorden als tassen of handtassen. Door de hoofdingangen in de topnavigatie van de webshop te beginnen met geslacht, sturen ze spiders in het geven van meer linkwaarde naar specifiekere zoekwoorden als damestassen en dames handtassen. Hierdoor kan de tassenwebshop voor deze specifieke zoekwoorden erg goed ranken.

Nadeel:
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  in de topnavigatie van je webshop weer?

Nadat je hebt besloten hoe de eerste indeling gaat zijn, kom je bij de volgende vraag: hoe bepaal je welke menu-items de topnavigatie bevat? En onder welke hoofdingangen vallen ze? Houd rekening met een aantal punten:

• Zorg dat de menu-items in een hoofdingang elkaar uitsluiten. Zo voorkom je verwarring bij je bezoekers
• 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

Het bovenstaande is lastiger dan je denkt. Zie jij bijvoorbeeld in afbeelding 4 hoe je koopt bij Oldenhof?

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

Wat leer je het voorbeeld van Kookwinkel?

• Denk goed na over het aantal linkjes en categorieën. Het aantal linkjes heeft invloed op de ervaring van je bezoeker en op je SEO-prestaties. Dit leg ik later in deze blog uit.
• Maak onderscheid tussen categorieën die vallen onder de hoofdcategorieën en filteropties. Bekijk maar eens de voorbeeldcase hieronder

Voorbeeldcase
Enige tijd geleden deed ik een zoekwoordonderzoek voor een webshop in ondermode. Tijdens het onderzoek viel mij op dat in deze branche veel mensen zoekwoorden gebruiken als ‘grote maten’ en ‘corrigerende’. Van de klant ontving ik echter een schets voor de topnavigatie in de webshop zoals je ziet in afbeelding 5a.

 

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

Het viel mij op dat termen uit het zoekwoordonderzoek niet terugkwamen in de schets. En dat terwijl de webshop wel een groot productassortiment heeft in grote maten van ondermode. Bij het concept van de topnavigatie voor in de webshop wordt dit assortiment pas vindbaar in de filter voor maten op de productoverzichtspagina’s. Een gemiste kans, want bezoekers moesten veelvuldig klikken voordat ze de grote maten vonden. En met elke klik raak je bezoekers kwijt. Bovendien krijgen deze pagina’s bijna geen linkwaarde van Google, omdat deze pagina's diep verstopt zijn in de webshop.

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 in de webshop zoals je ziet in afbeelding 5b. Daardoor is alles wat hieronder valt beter vindbaar. De klant voerde het door en zag inderdaad betere SEO-prestaties.

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 topnavigatie na advies

Hoeveel linkjes verwerk je in de topnavigatie?

Met alleen de juiste benaming van items in je topnavigatie van je webshop kom je er niet, want het volgende struikelblok staat al klaar: het verwerken van teveel linkjes. Hoe meer linkjes je in je topnavigatie opneemt, hoe minder waarde een spider per link kan verdelen. Bovendien leidt een groot aantal linkjes vaak tot veel fouten. 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). Deze webshops verspillen dus linkwaarde 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

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.

Tip: lees in deze blog drie theorieën waarmee je jouw webshopbezoekers beïnvloedt

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. Bol.com doet dat in afbeelding 6 goed.

Afbeelding 6: webshop Bol.com verwijst in de topnavigatie naar een overzichtspagina met alle categorieën (rood omrand). Ook gebruiken ze tussenkopjes om het overzicht te bewaren

Bedenk ook:

"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," aldus Andy Crestodina, auteur van het boek Website Navigation - 7 best practices

Vaak staan er menu-items in de topnavigatie van webshops die beter als filterpagina kunnen dienen. Dit noemen we over-categorisation. Zo 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.

Heuts is een goed voorbeeld van over-categorisation in de topnavigatie (zie afbeelding 7). De webshop besloot 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. Hij zal zich eerder afvragen wat deze termen überhaupt betekenen.

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

Naast dat het ongebruiksvriendelijk is, is dit een typisch geval van over-categorization omdat:

• Er geen algemene pagina is. Hierdoor krijgt een bezoeker geen overzicht van alle zwembaden
• 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.
• 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

 

Tip: lees in deze blog 5 praktische tips om aan de slag te gaan met linkbuilding

Tip: lees in deze blog hoe je de waarde bepaalt van een linkje bij linkbuilding

Tip: gebruik deze template voor het aanvragen van linkbuildingartikelen

2. Let op de benaming van de categorie in de topnavigatie van je webshop

Hoe zorg je voor de meest gebruiksvriendelijke benaming van je categorie? Gebruik de taal van bezoeker als leidraad. Laat branding niet de boventoon voeren. Veel bedrijven geven productgroepen een bepaalde benamingen, omdat dit beter bij het merk past terwijl het niet per se overeenkomt met de taal die de bezoeker spreekt. Vingino in afbeelding 8 is hier een voorbeeld van.

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”.

Vermijd ook 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 de tekst in een link (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.

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 analyseer de resultaten.

Tip: download deze cheatsheet voor het schrijven van SEO-teksten

Ik geef je weer twee voorbeelden van webshops die die hiermee te maken hebben.

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. 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!

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

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 11 hieronder)

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 of inbouw trampoline (nederlandse variant). 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

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

Je ziet dit ook terug in het zoekvolumes:

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

Voor Bergtoys is het slim om na te denken of de webshop door het gebruik van de term flaground trampolines niet teveel bezoekers en dus omzet mist.

3. Design

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

Tip: lees in deze blog welke 12 onderdelen je op orde hebben voor een top gebruikerservaring in je webshop

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.

Het concept van Adam Brandstore

Adam Brandstore koos voor meerdere hoofdingangen, omdat het assortiment niet enorm breed is (zie afbeelding 14).

Afbeelding 14: Adam Brandstore heeft meerdere hoofdingangen in de topnavigatie

De voordelen van dit concept:

• 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

Het nadeel:

• De topnavigatie wordt 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.

Het concept van Heuts:
In afbeelding 15 zie het menu van Heuts. Als een bezoeker een hoofdingang selecteert in de topnavigatie van 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.

De 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

Het 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.

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

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

Het voordeel:

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

Het 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.

Het concept van Lakeland:
De webshop van Lakeland heeft een topnavigatie met 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.

Afbeelding 17: de topnavigatie van de webshop van Lakeland

De voordelen:

• De subkopjes maken het overzicht ondanks de hoeveelheid aan opties wel duidelijk
• 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

Het nadeel:

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

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

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

De 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, laat staan hoe dit overkomt op de smartphone. 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 zoekfunctievalt meer op dan bij andere webshops. Dit is met name voor webshops met een groot assortiment erg belangrijk. En zoals ISM’er Jurjen Jongejan zegt: “Zoekers zijn boekers!”.

Tip: lees in deze blog waarom zoekers boekers zijn.

Het 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 waarmee je rekening moet houden bij de ontwikkeling van de topnavigatie voor je webshop.

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.

Dropdownmenu’s kun je op meerdere technische manieren ontwikkelen. Zo maak je met de codeertaal 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.

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).

Tip: lees in deze blog hoe je een usability-onderzoek doet waarmee je de gebruiksvriendelijkheid van je webshop toetst

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 in afbeelding 19:

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

3. De volgorde volgens het serial position effect:

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? Er is slechts één oplossing: A/B-testen. 

Tip: hoor in deze webinaropname hoe je A/B-testen aanpakt.

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.

Tip: lees in deze whitepaper 9 tips voor een hogere conversie in je mobiele webshop

Vraag om feedback en analyseer webstatistieken 

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 voor je webshop

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.