WJ Favicon 2
Perfecte klantenbeoordeling 5/5 ⭐⭐⭐⭐⭐ Lees reviews
Beoordeling 5/5 ⭐⭐⭐⭐⭐ Lees reviews
Home » Begrippenlijst » Breadcrumbs

Wat is Breadcrumbs?

Breadcrumbs, ook wel broodkruimelnavigatie genoemd, zijn een navigatiehulpmiddel dat wordt gebruikt op websites om gebruikers te helpen hun locatie binnen de sitehiërarchie te begrijpen en gemakkelijk terug te navigeren naar eerdere pagina’s. Ze worden meestal weergegeven als een horizontale rij links bovenaan een webpagina en tonen het pad dat de gebruiker heeft gevolgd om de huidige pagina te bereiken.

Kenmerken van breadcrumbs

Hiërarchische structuur

Breadcrumbs geven de hiërarchische structuur van een website weer. Ze tonen de verschillende niveaus van pagina’s, van de startpagina tot de huidige pagina, en laten gebruikers zien waar ze zich bevinden binnen deze structuur.

Klikbare links

Elk element in de breadcrumbs is meestal een klikbare link die de gebruiker terugbrengt naar de betreffende pagina. Dit maakt het eenvoudig om snel terug te keren naar een hoger niveau binnen de site.

Lineaire weergave

Breadcrumbs worden lineair weergegeven, meestal gescheiden door symbolen zoals “>”. Dit zorgt voor een duidelijke en eenvoudige weergave van de navigatiepad.

Flexibel gebruik

Breadcrumbs kunnen worden gebruikt op verschillende soorten websites, waaronder e-commerce, blogs, en bedrijfswebsites. Ze zijn vooral nuttig op sites met complexe structuren en veel inhoud.

Voordelen van breadcrumbs

Verbeterde gebruikerservaring

Breadcrumbs verbeteren de gebruikerservaring door duidelijkheid en structuur te bieden. Gebruikers kunnen gemakkelijk zien waar ze zich bevinden en eenvoudig terug navigeren, wat frustratie vermindert en de gebruiksvriendelijkheid verhoogt.

Verminderd bouncepercentage

Door gebruikers een gemakkelijke manier te bieden om terug te navigeren naar eerdere pagina’s, kunnen breadcrumbs helpen het bouncepercentage te verlagen. Gebruikers blijven langer op de site en verkennen meer inhoud, wat kan leiden tot hogere betrokkenheid en conversies.

SEO-voordelen

Breadcrumbs kunnen bijdragen aan betere zoekmachineoptimalisatie (SEO). Ze helpen zoekmachines de structuur en hiërarchie van de site beter te begrijpen, wat kan resulteren in een betere indexering en hogere zoekresultaten. Bovendien worden breadcrumbs soms weergegeven in zoekresultaten, wat de zichtbaarheid en klikfrequentie kan verhogen.

Eenvoudige navigatie

Voor gebruikers die diep in de site navigeren, bieden breadcrumbs een eenvoudige manier om terug te keren naar de hoofdcategorieën of secties van de site zonder meerdere keren op de terugknop van de browser te hoeven klikken.

Typen breadcrumbs

Hiërarchische breadcrumbs

Dit type breadcrumbs toont de volledige hiërarchie van de pagina’s vanaf de startpagina tot de huidige pagina. Het is het meest voorkomende type en wordt vaak gebruikt op websites met een diepe structuur.

Voorbeeld: Home > Categorie > Subcategorie > Productpagina

Attributieve breadcrumbs

Attributieve breadcrumbs worden meestal gebruikt op e-commerce websites en tonen de kenmerken of filters die de gebruiker heeft geselecteerd om bij de huidige pagina te komen.

Voorbeeld: Home > Kleding > Dames > Jurken > Rood > Maat M

Geschiedenisgebaseerde breadcrumbs

Dit type breadcrumbs toont het pad dat de gebruiker daadwerkelijk heeft gevolgd om op de huidige pagina te komen, ongeacht de hiërarchische structuur van de site. Het is minder gebruikelijk en wordt soms gezien als minder intuïtief.

Voorbeeld: Home > Zoeken > Zoekresultaten > Productpagina

Implementatie van breadcrumbs

Gebruik duidelijke scheidingstekens

Gebruik scheidingstekens zoals “>”, “/”, of “»” om de verschillende niveaus in de breadcrumbs te scheiden. Dit zorgt voor een duidelijke en leesbare weergave.

Houd het eenvoudig en beknopt

Zorg ervoor dat de breadcrumbs eenvoudig en beknopt zijn. Gebruik korte en duidelijke namen voor elke pagina en vermijd overbodige details.

Plaatsing op de pagina

Plaats breadcrumbs bovenaan de pagina, meestal onder de hoofdnavigatie of header. Dit is een conventionele locatie waar gebruikers ze verwachten te vinden.

Mobielvriendelijk ontwerp

Zorg ervoor dat breadcrumbs goed werken op mobiele apparaten. Gebruik een responsief ontwerp dat de breadcrumbs op een overzichtelijke manier weergeeft, zelfs op kleinere schermen.

Voorbeelden van effectieve breadcrumbs

Amazon

Amazon gebruikt hiërarchische breadcrumbs om gebruikers te helpen hun weg te vinden binnen de uitgebreide categorieën en subcategorieën van de site. Dit maakt het gemakkelijk voor gebruikers om terug te navigeren naar hogere categorieën.

Wikipedia

Wikipedia gebruikt breadcrumbs om gebruikers te helpen navigeren tussen gerelateerde artikelen en categorieën, wat bijdraagt aan een betere gebruikerservaring en het verkennen van de encyclopedie stimuleert.

Zalando

Zalando, een e-commerce website, maakt gebruik van attributieve breadcrumbs om gebruikers te laten zien welke filters en categorieën ze hebben geselecteerd, waardoor het eenvoudig is om deze filters aan te passen of te verwijderen.

Door breadcrumbs effectief te implementeren, kunnen websites de navigatie en gebruikerservaring aanzienlijk verbeteren, wat leidt tot hogere tevredenheid en betrokkenheid van de gebruikers.