Uitleg over breadcrumbs | 5 voordelen en 10 tips

Werken met Breadcrumbs

De uitleg over breadcrumbs? Zijn we niet allemaal in een pretpark geweest en zijn we verdwaald toen we probeerden de uitgang te vinden? We accepteren het niet, maar er is een jong boompje van frustratie op het punt om zijn kop op te steken.We kijken wanhopig rond, vragen een voorbijganger en ze wijzen ons naar een kaart, die ons vertelt waar we ons in het park bevinden.Plots weet je waar je bent en waar de ingang en de uitgang liggen met verwijzing naar je positie. Paniek gaat poef! En daar gaan we inslapen!In sitenavigatie doen breadcrumbs iets soortgelijks.

Breadcrumbs geven je oriëntatie en laten je precies zien waar je bent op een website.

Wat is Breadcrumb navigatie?

Breadcrumbs zijn een secundair hulpmiddel bij het navigeren waarmee gebruikers de relatie tussen hun locatie op een pagina (zoals een productpagina) en pagina's van een hoger niveau (bijvoorbeeld een categoriepagina) gemakkelijk kunnen begrijpen. De term is ontleend aan het verhaal van Hans en Grietje, waar de kinderen een spoor van breadcrumbs laten vallen om hun weg terug te vinden.

Met breadcrumbs, als je een pagina hebt bereikt waar je niet op wilt staan, kun je gemakkelijk de weg terug vinden of een stap terug doen en opnieuw beginnen. Breadcrumbs zijn geen exclusief website-element. Microsoft introduceerde Breadcrumbs in Windows Vista en sindsdien is het in elke Windows-editie een functie.

‍

Onze behoefte aan breadcrumbs heeft een evolutionaire reden

Peter Pirolli vond interessante parallellen tussen de manier waarop dieren voedsel zoeken en in de manier waarop mensen nuttige informatie zoeken. Inherent leven we allemaal volgens de heuristische regel - geef niet meer energie uit aan het nastreven van voedsel dan wat het eten te bieden heeft. Overweeg de manier waarop we informatie op het internet zoeken: we zoeken naar iets, de zoekmachine presenteert veel resultaten. We scannen de links en tenzij we aanwijzingen (de SEO-titel, meta omschrijving, etc.) voelen dat een link ons de informatie zal geven waarnaar we op zoek zijn, klikken we niet door. Het is niet anders dan een dier dat jaagt op prooien op de Savanne; het beest laadt alleen op als het geurspoor sterk genoeg is om de energie te rechtvaardigen die in de achtervolging moet worden doorgebracht. Op een website, in het bijzijn van meerdere navigatiesporen, is het het beste als gebruikers een pad duidelijk kunnen identificeren dat leidt naar wat ze willen. Zonder dat kunnen ze opgeven en stuiteren.

Op een basisniveau verdienen mensen hun brood, maar snakken naar breadcrumbs.

Soorten breadcrumbs bij het ontwerpen van websites

Op locatie of hiërarchie gebaseerde breadcrumbs

Op locatie gebaseerde breadcrumbs helpen een gebruiker om naar een bredere categorie (hogere pagina) te gaan vanaf de pagina waarop ze staan. Overweeg iemand die op Google op zoek is naar een paar woestijnschoenen, ze vinden een zoekresultaat en komen terecht op een van uw productpagina's. Ze vinden het niet leuk wat ze zien en willen andere opties verkennen. Hoe komt de persoon terug op de pagina met de hoofdcategorie (Herenschoenen) of een pagina met een subcategorie (Herenschoenen - Woestijnschoenen)?

Met hiërarchie op basis van breadcrumbs kan de gebruiker gemakkelijk zien waar langs de architectuur van uw site ze zijn en gemakkelijk naar de hoger niveau pagina gaan. Zie hoe Coolblue het doet.

Pad of op geschiedenis gebaseerde breadcrumbs

Ze hebben hetzelfde doel als de knop Vorige van de browser, zodat een gebruiker terug kan gaan naar een van de vorige pagina's die ze hebben bezocht. Dit kan handig zijn wanneer de gebruiker de productpagina heeft bereikt nadat meerdere filters op de categoriepagina zijn toegepast. Met op geschiedenis gebaseerd breadcrumbs kan de gebruiker snel naar een van de vorige pagina's op zijn reis gaan, met alle selecties intact.De meest voorkomende toepassing van op geschiedenis gebaseerde breadcrumbs is echter het gebruik van de link 'Terug naar resultaten'.

Op kenmerk gebaseerde breadcrumbs

Op kenmerk gebaseerde breadcrumbs laten u eenvoudig de kenmerken zien die een gebruiker op een pagina heeft geselecteerd. Dergelijke breadcrumbs vinden toepassing op eCommerce categoriepagina's waar gebruikers attributen kunnen selecteren om zoekresultaten te filteren.

5 Voordelen van het gebruik van breadcrumbs

Aanvankelijk geconceptualiseerd als een eenvoudig hulpmiddel bij het navigeren, hebben Breadcrumbs tegenwoordig invloed op vele aspecten van gebruikerservaring online.

Moedigt browsen aan en vermindert stuiteren

Als een gebruiker een productpagina heeft waar hij niet in geïnteresseerd is, stuiteren ze of gaan ze terug naar de categoriepagina om opnieuw te beginnen. Breadcrumbs moedigen de gebruiker aan om opnieuw te beginnen en niet te stuiteren. In een studie uitgevoerd door Hull, S.S. (2004), werd vastgesteld dat gebruikers die instructies kregen om breadcrumbs te gebruiken veel sneller taken voltooiden dan gebruikers die geen breadcrumbs gebruikten. Voor gebruikers die dagelijks internet gebruiken (zelfs intranetten zoals die van een organisatie) met breadcrumbs, kunnen ze de productiviteit en tijdwinst aanzienlijk verhogen.

Verbetert de vindbaarheid van je website

Peter Morville, een van de grondleggers van Informatie-architectuur voor het World Wide Web, ontwikkelde de honingraat voor gebruikerservaringen die de zeven hoofdfacetten van een geweldige gebruikerservaring illustreert. Gebruikers kunnen gemakkelijk navigeren en vinden waarnaar ze op zoek zijn. Breadcrumbs helpen de vindbaarheid van een website te verbeteren.

Breadcrumbs bieden SEO-voordelen

Google heeft aangekondigd dat ze de URL in de zoekresultaten vervangen door de sitenaam en het breadcrumb-navigatiepad. Dit gebeurt nu voor mobiele apparaten en kan de komende dagen ook voor de desktop worden uitgerold. Google gaat ervan uit dat het gebruik van de echte naam van de website zal helpen de bruikbaarheid te verbeteren en de breadcrumbs links zullen gebruikers precies laten zien waar ze naartoe worden gebracht wanneer ze op het zoekresultaat klikken.

Webmasters kunnen de schema-opmaak voor breadcrumbs gebruiken om effectiever met de zoekmachine te communiceren. Breadcrumbs worden een extra manier om zoekmachines beter uit te leggen waar uw pagina's over gaan en dat beetje extra SEO-voordeel te krijgen. Ze fungeren ook als extra links in de zoekresultaten om u meer kansen te geven op een klik.Omdat er geen goede reden is om ze niet te gebruikenJakob Nielsen zegt dat hij sinds 1995 breadcrumbs aanbeveelt. De redenen zijn simpel.breadcrumbs veroorzaakt nooit problemen bij gebruikerstests.

       
• Gebruikers besteden slechts 30% van de tijd aandacht aan breadcrumbs; als ze dat doen, helpt het en zelfs als ze dat niet doen, veroorzaakt het geen schade.
       
• Ze nemen heel weinig ruimte in beslag op de pagina, dus onroerend goed kan niet de reden zijn waarom u besluit om geen breadcrumbs te gebruiken.
       
• Breadcrumbs is in de loop van vele jaren redelijk consistent gebleven. Dergelijke vertrouwdheid op lange termijn maakt het onmiddellijk herkenbaar en daarom nuttig.

Breadcrumbs helpen gebruikers angst te verminderenBreadcrumbs kunnen de angst van gebruikers over wat ze kunnen verwachten verminderen door ze het hele spoor van een proces te laten zien. Bijvoorbeeld, het opzetten van een account op VWO heeft een paar stappen. Door breadcrumbs te gebruiken, kunnen we de gebruiker precies vertellen hoeveel stappen er in het proces zijn gestopt en op welk moment dan ook teruggaan naar een van de voorgaande stappen. Dit geeft de gebruiker een idee van de toewijding (tijd en moeite) die van hem wordt gevraagd om het proces in te stellen. Als iemand eenmaal een poging heeft geïnitieerd, kunnen dergelijke visuele aanwijzingen een sterke motivator zijn om het proces af te ronden.

Er is veel discussie over het noemen van deze functionaliteit als een 'voortgangsbalk' of 'breadcrumb'-navigatie. Maar populaire wijsheid suggereert dat als het pad gebruikers laat navigeren naar een vorige stap, het net zo goed is als een broodkruimel.

10 Aanbevolen werkwijzen voor het gebruik van breadcrumbs

Gewoonlijk verschijnen breadcrumbs in een horizontale lijn die het pad van de pagina op het hoogste niveau (thuis) naar de huidige pagina waarop de gebruiker zich bevindt, toont. Hieronder vindt u een lijst met 10 best practices waarvan sommige worden aanbevolen door Steve Krug, de auteur van 'Do not Make Me Think' en een webdesign God in zijn eigen recht.

1: Toon altijd het hele pad

Geef gebruikers context. Een goed breadcrumbs pad werkt als oogkleppen en houdt de gebruiker scherp op de taak die voor hem ligt.

2: Begin met de startpagina

Paden werken het beste wanneer ze de reis van het ene einde naar het andere laten zien. Het opnemen van de startpagina in het parcours werkt als een sterk anker dat een sterk oriëntatie gezicht op de gebruikers geeft.

3: Gebruik '>' als scheidingsteken tussen niveaus

Het werkt omdat het altijd heeft gewerkt. De '>' toont snel de relatie tussen pagina's van een hoger niveau en pagina's op een lager niveau. Jakob Nielsen had in eerste instantie aanbevolen om dubbele punt (:) in de navigatiebalk van het breadcrumb te gebruiken. Na het testen van de gebruiker wijzigde hij zijn aanbeveling in het gebruik van '>' omdat het eenvoudig de relatie tussen pagina's op een hoger niveau en pagina's op een lager niveau weergeeft.

4: Zet de kruimels bovenaan

Navigatiebalken worden meestal helemaal bovenaan een website geplaatst. Omdat breadcrumbs als een secundair hulpmiddel voor navigatie werkt, moet het boven de inhoud worden geplaatst. De Nielsen Norman-groep heeft gebruikerstests uitgevoerd en heeft vastgesteld dat gebruikers breadcrumbs verwachten bovenaan de pagina. Een goede plaatsing voor breadcrumbs bevindt zich onder de hoofdnavigatie balk en boven de paginatitel.

5: Toon wat contrast

Contrast helpt de breadcrumbs opvallen als een belangrijke functionaliteit. Omdat ze minder ruimte in beslag nemen en meestal alleen op tekst zijn gebaseerd, wordt contrast een cruciale factor voor hun succes.

6: Gebruik klein type

Het gebruik van een klein type helpt de gebruiker te communiceren over het relatieve belang van de breadcrumbs in relatie tot de hoofdnavigatie balk. Het mag nooit worden verward met de belangrijkste navigatiehulp.

7: Vetgedrukte tekst het laatste item

Vetgedrukte tekst van het laatste item (huidige pagina) geeft het een prominente plaats en vertelt de gebruiker 'dit is waar je op dit moment bent'.

8: Hyperlink niet naar het laatste item

Omdat, waarom zou u een tekst hyperlink maken die naar dezelfde pagina leidt? Het is verwarrend voor de gebruiker.

9: Gebruik geen breadcrumbs op de startpagina

Op de startpagina begint de gebruikersreis, het heeft geen zin om breadcrumbs op uw startpagina te laten weergeven.

10: Volledige paginatitels gebruiken in breadcrumbs

Het is logisch om volledige paginatitels in de breadcrumbs op te nemen, zodat gebruikers precies weten waar elk van de hyperlinks toe leidt. Maar vanwege de pagina met lange paginatitels of andere redenen, geven sommigen de voorkeur aan het verwijderen van paginatitels met behulp van ellipsen (zie onderstaande afbeelding). In dergelijke gevallen is het beter om uitdrukkingen als 'U bent hier' weg te laten om ruimte te maken voor de meer belangrijke elementen die de paginatitels zelf zijn.

EXTRA: Pagina-URL moet breadcrumb-trail spiegelen

De pagina-URL geeft een idee van de sitearchitectuur. Het is belangrijk om te zorgen voor consistentie tussen de URL en de breadcrumbs, omdat gebruikers anders inconsistente berichten van beide elementen kunnen ontvangen.

Wanneer moet u geen breadcrumbs gebruiken?

Dit is moeilijk, omdat breadcrumbs meestal onschadelijk is. Maar er is een waarschuwing. Als uw site slechts enkele pagina's bevat, zonder veel hiërarchieniveaus, is breadcrumbs wellicht niet handig. Het opnemen van breadcrumbs in deze gevallen is onnodig en mogelijk verwarrend voor de lezer.Als je echt onder de bosbodem kijkt, zijn breadcrumbs niet allemaal perfect.

Het probleem met breadcrumbs Navigatie

Zelfs nadat ze al meer dan een decennium bestaan, worden breadcrumbs bij producten nog steeds niet als een best practice beschouwd. Daar zijn veel redenen voor:

       
1. Mensen weten nog steeds niet zeker of het de moeite waard is: het is geen make-of-break-functionaliteit. Geen ruzie daar.
       
2. Er is een overtuiging dat breadcrumbs alleen 'noodzakelijk' zijn als uw informatiearchitectuur in de war is. Als gebruikers eenvoudig door uw website kunnen navigeren, weten ze waar ze zich bevinden, zonder dat u ze laat zien. In wezen gelooft deze school dat breadcrumbs een terugvaloptie zijn wanneer je architectuur in de war is. Dus vragen ze: als je tijd en moeite gaat besteden, waarom niet beter je informatie hiërarchie dan investeren in breadcrumbs?

Problemen met op geschiedenis gebaseerde breadcrumbs

Voor het dynamisch genereren van op geschiedenis gebaseerd broodkruimel, moet u toegang krijgen tot browser cookies. Dat vereist extra codering en inspanning. De extra inspanning is logisch als de voordelen opwegen tegen de inspanning. Maar is het zo?

Op geschiedenis gebaseerde breadcrumbs dupliceren eenvoudigweg de functionaliteit van de terug knop.

Geen SEO-voordeel

Aangezien breadcrumbs gebaseerd moeten zijn op gebruiksgeschiedenis, zullen bots van zoekmachines nooit het zien en heeft het geen SEO-voordelen

Niet nuttig voor iedereen

Veel gebruikers bereiken pagina's diep binnen de site via zoekmachines; voor dergelijke mensen biedt een op geschiedenis gebaseerd spoor geen voordeel.

Compounds Error

Voor mensen die met vallen en opstaan een pagina bereiken, is het zinloos om een suboptimale navigatiegeschiedenis in de vorm van breadcrumbs te hebben.Het is echter vermeldenswaard dat het laatste punt voortkomt uit een gebrekkige informatiearchitectuur van de site als geheel. Als gebruikers het makkelijkste pad naar een pagina niet eenvoudig kunnen identificeren, is het misschien een betere optie om te investeren in het optimaliseren van de architectuur van de site dan te panikeren met breadcrumbs.

Problemen met op navigatie gebaseerde breadcrumbs

Voor poly hiërarchische sites zoals de meeste nieuwe eCommerce websites, is de hiërarchie platter en kan elke productselectie tot meerdere categorieën behoren. Voor iemand die bijvoorbeeld een zitzak wil kopen, kan het broodkruimelpad eruit zienHome > Meubels > Woonkamer > Stoelen > Modern > Industrieel > Super industriële stoel zwart

of

‍Home > Meubels > Woonkamer > Stoelen > Modern > Super industriële stoel zwart

‍Wat kies je om te laten zien?

Laten we eerst de productpagina bekijken.

Voor de productpagina is een redelijke manier om te bellen op welk type breadcrumb het meest geschikt is om weer te geven. Het gemakkelijkste of meest gebruikte navigatiepad is een goede kanshebber. Als uw categoriepagina gebruikers in staat stelt productkenmerken te selecteren, is het handig om de meest geschikte navigatie broodkruimel en een link 'terug naar resultaten' (historisch pad) op uw productpagina te hebben. Keuze maken is moeilijk. Gebruikers die dit hebben meegemaakt, de productpagina hebben bereikt, niet helemaal tevreden zijn met hun selectie en een ander product willen bekijken dat met het kenmerk overeenkomst, kan de knop Terug op de browser angst veroorzaken. Dit komt omdat gebruikers niet zeker weten of de browser hun attribuut keuzes onthoudt. De optie 'Terug naar resultaten' kan geruststellend zijn en de bezoeker in de conversietrechter houden.Terug naar het overzicht | Home > Meubels > Woonkamer > Stoelen > Modern > Super industriële stoel zwart‍

Laten we het nu hebben over de categoriepagina.

Voor de categoriepagina, als u gebruikers een keuze van productattributen zoals 'merk' of 'grootte' biedt, is een andere manier om breadcrumbs te gebruiken zowel om een standaard navigatiepad als de attributen samen weer te geven, maar naar behoren gedifferentieerd.

Breadcrumbs: Secondary In Status, primaire waarde

Breadcrumbs bestaan ​​al meer dan een decennium. Maar ze hebben nog nooit veel aandacht gekregen vanwege hun permanente status van 'een secundaire navigatiebalk'. Ondanks de status ervan kunnen breadcrumbs een krachtig element zijn om de gebruikerservaring te verbeteren en betrokkenheid te creëren. Vanuit zakelijk oogpunt helpt het bij zowel acquisitie (denk aan SEO) als conversie (vergemakkelijkt on-site navigatie).

Om het punt naar huis te rijden, laat me wat cijfers citeren uit een twee jaar oude studie van Baymard. Na een benchmarking studie met 40 eCommerce-sites, bleek dat 68% een suboptimaal gebruik van Breadcrumb-navigation had. 23% had helemaal geen breadcrumbs element. Sommigen beschouwen Breadcrumbs als een archaïsch ontwerpelement zonder noodzaak of prioriteit in de wereld van vandaag, terwijl het voor anderen een juweel is dat weinig onroerend goed inneemt en weinig moeite kost, maar een enorme bijdrage levert aan de algehele gebruikerservaring.

Moet u dus breadcrumbs op uw eCommerce-site hebben? Kijk naar uw gebruikers voor het antwoord, zullen ze profiteren? Ik denk dat dat de enige vraag is die het waard is om te vragen, echt waar.