Breadcrumb Navigatie Best Practices & Examples

Broodkruimernavigatie wordt vaak over het hoofd gezien in het ontwerp- en ontwikkelingsproces. Sommige mensen zullen het als onnodig beschouwen, terwijl anderen het misschien te groot vinden om de moeite waard te vinden. Feit is dat broodkruimernavigatie de bruikbaarheid van een website aanzienlijk zal vergroten.

Broodkruimels geven gebruikers een alternatieve navigatiemethode, laten ze zien waar ze in de hiërarchie van een website staan ​​en verminderen het aantal stappen dat nodig is om naar een hoger niveau binnen een website te navigeren.

Hier worden de verschillende typen breadcrumb-navigatie beschreven die tegenwoordig worden gebruikt, waarom ze belangrijk zijn en hoe ze het best online kunnen worden geïmplementeerd. Ook hier opgenomen voor uw referentie zijn meer dan 30 voorbeelden van hoe broodkruimels vandaag online worden gebruikt.

Vergeet niet dat hoewel het waarschijnlijk is dat broodkruimernavigatie geen website maakt of verbreekt, dit een extra voordeel voor uw gebruikers oplevert door de algehele bruikbaarheid en functionaliteit van uw website te vergroten..

Breadcrumb Types

Pad

Op pad gebaseerde broodkruimels geven de stappen of het pad aan dat door een gebruiker is gemaakt om naar de huidige pagina van een website te komen. Bovendien zien gebruikers links naar pagina's die ze eerder hebben bezocht om de huidige pagina te bereiken. Van de drie typen breadcrumb-navigatie is Path-gebaseerde breadcrumb-navigatie het minst populair online. Reden op, padgebaseerde broodkruimelnavigatie biedt dezelfde functionaliteit als de “Vooruit” en “Terug” knoppen in een browser. Voor de meeste websites biedt Location-based en op attributen gebaseerde breadcrumb-navigatie betere functionaliteit.

Plaats

Op locatie gebaseerde broodkruimels geven de gebruiker aan waar de huidige pagina in de hiërarchie van de website staat. Dit type breadcrumb-navigatie wordt het vaakst gezien op websites met meer dan twee niveaus van diepte of inhoud. Bij het verdergaan naar een website worden gebruikers voorzien van links naar pagina's, of categorieën, die fungeren als een “ouder” of een niveau hoger dan de pagina die ze momenteel bekijken. Een gebruiker bevindt zich bijvoorbeeld op de “Spreken” pagina, echter, de “Wat we doen” pagina is een ouder van de “Spreken” pagina terwijl de “Huis” pagina is een ouder van de “Wat we doen” pagina.

Clearleft Ltd

Attribuut

Op kenmerk gebaseerde broodkruimels geven de gebruiker de kenmerken of categorieën aan die zijn toegeschreven aan de huidige pagina binnen een website. Vaak gezien op e-commerce websites, kunnen producten niet alleen in een categorie vallen, maar ook onder bepaalde attributen. Een voertuig kan bijvoorbeeld worden gecategoriseerd als een SUV en vervolgens de kenmerken hebben van de kleur zwart zijn en worden vrijgegeven in het jaar 2010.

Cars.com

Waarom paneermeel gebruiken?

• Geweldige bruikbaarheid

  Broodkruimels bieden een extra manier om gebruikers gemakkelijk door een website te laten navigeren. Als een gebruiker via een andere bron op een interne pagina van uw website terechtkomt, kan de gebruiker met behulp van broodkruimels precies zien waar hij of zij zich in de hiërarchie van de site bevindt. Gebruikers krijgen ook de mogelijkheid om op elk gewenst moment probleemloos naar een hoger niveau van de website te gaan.

• Eenvoudig te volgen

  Primaire navigatie is niet ontworpen om achterwaarts te worden gevolgd, maar paneermeel. Omdat backtracking enorm populair is online, biedt een beetje extra hulp een lange weg.

• Elimineer extra klikken

  Met broodkruimels kunnen gebruikers van het ene niveau van een website naar het andere springen zonder het “vooruit” of “achterwaarts” knoppen in de browser. Bovendien zorgen broodkruimels ervoor dat gebruikers niet voortdurend hun toevlucht hoeven te nemen tot de hoofdnavigatie.

• Toont gebruikershiërarchie

  De primaire navigatie van een website weerspiegelt niet de hiërarchie van elke pagina binnen de site. Door gebruikers paneermeel te geven, kunnen ze de hiërarchie van een pagina binnen een website bekijken.

• Visueel aantrekkelijk

  Broodkruimels bieden gebruikers niet alleen extra bruikbaarheid, ze doen dit ook zonder veel ruimte of ruimte op de pagina in beslag te nemen. Breadcrumbs zijn eenvoudig te implementeren in het visuele ontwerp van uw website en bieden een groot voordeel voor gebruikers.

• Biedt extra hulp

  Het is heel goed mogelijk dat sommige gebruikers niet begrijpen hoe de primaire navigatie van een website werkt en in sommige gevallen weten gebruikers niet eens waar ze naar op zoek zijn. Door gebruikers paneermeel te geven, kunnen ze de algehele voortgang en structuur van een website zien, waardoor ze beter door de website kunnen navigeren.

• Lagere bouncepercentages

  Meestal bieden broodkruimels een gedetailleerdere navigatie dan de primaire navigatie. Daarbij krijgen gebruikers meer opties voor het navigeren op een website. Door hen de mogelijkheid te geven om eenvoudig een paar niveaus binnen de website te volgen, verlaagt u het bouncepercentage.

• Bouwt interesse op

  Wanneer een gebruiker op een interne pagina van een website terechtkomt, zijn de kansen al op een interessante pagina. Broodkruimels kunnen links bevatten naar extra pagina's en informatie waarvan de gebruiker ook geïnteresseerd is, zonder ze vanaf het eerste begin te starten.

Beste praktijken voor breadcrumb

• Gebruik broodkruimels boven aan een pagina

  De meest gebruikelijke en instinctieve plaatsing voor broodkruimels staat bovenaan een pagina. Dit stelt gebruikers in staat om de broodkruimels op een ongecompliceerde manier te vinden en ze dienovereenkomstig te gebruiken.

• Gebruik paneermeel consequent

  Als u besluit paneermeel te gebruiken, zorg er dan voor dat u deze op uw hele website gebruikt. Gebruikers paneermeel geven op sommige pagina's en niet op andere zullen hen alleen maar verwarren en frustreren. (Een goed voorbeeld hiervan is Amazon, omdat ze paneermeel van de afzonderlijke productpagina's verwijderen.)

• Broodkruimels Moeten Degraderen Degelijk

  Paneermeel moet altijd beginnen met de startpagina en degraderen naar de huidige pagina. Daarbij moeten uw paneermeel stap voor stap van het hoogste naar het laagste niveau gaan.

• Broodkruimels op de juiste manier styliseren

  U wilt dat uw broodkruimels worden gezien, maar dat u niet wilt dat ze het brandpunt zijn. U wilt ook duidelijk maken dat uw broodkruimels geen deel uitmaken van de hoofdinhoud van een pagina, alleen aanvullende ondersteuning. Zoek een gelukkig medium waarbij uw broodkruimels merkbaar zijn, maar niet aanmatigend.

• Pagina's duidelijk categoriseren

  Als u pagina's heeft die in twee of meer categorieën vallen, wilt u misschien geen paneermeel op uw website gebruiken. Als u probeert een pagina onder twee of meer categorieën te plaatsen, zal dit waarschijnlijk alleen onduidelijk broodkruim veroorzaken en de gebruiker in verwarring brengen. Zorg ervoor dat uw website een georganiseerde hiërarchie heeft en dienovereenkomstig wordt weergegeven via uw broodkruimels.

• Elk niveau duidelijk scheiden

  Zorg ervoor dat gebruikers het verschil tussen elk breadcrumb-niveau kunnen onderscheiden. Het meest voorkomende scheidingsteken tussen niveaus is het 'groter dan'-teken (>). Andere goede scheidingstekens zijn dubbele aanhalingstekens op een rechte hoek (»), schuine strepen (/) en pijlen (→). Als u een gewoon tekstteken gebruikt, gebruik er dan alleen een. (»Is aantrekkelijker en effectiever dan >>)

• Single uit de huidige pagina

  Gebruik een andere stijl op het laatste item van een broodkruimellijst om vast te stellen dat dit de huidige pagina is die wordt bekeken. Je kunt dit bereiken door het item te maken stoutmoedig, de kleur veranderen, of nadruk te leggen op het.

• Maak van de huidige pagina geen link

  Het is niet nodig om het laatste item van een broodkruimellijst een link te maken, omdat dit de huidige pagina is die wordt bekeken. Door hier een link te maken, raken gebruikers alleen maar in verwarring, vooral wanneer ze erop klikken en niet naar een nieuwe pagina worden geleid.

• Gebruik Breadcrumbs niet als een paginarangschikking

  Het laatste item van een broodkruimellijst gebruiken als de kop van een huidige pagina is niet effectief. Als u ervoor kiest paneermeel te gebruiken, doet u dit ook met een paginakoptekst.

• Breadcrumbs Vervangt primaire navigatie niet

  Breadcrumbs kunnen alleen worden gebruikt als ondersteuning voor de primaire navigatie, nooit om de primaire navigatie helemaal te vervangen. U moet gebruikers altijd een primaire navigatie geven van waaruit ze een website kunnen navigeren voordat ze paneernavigatie kunnen gebruiken.

Geweldige voorbeelden van paneermeel

Vitra Direct

Trek fietsen

Illy

SiteInspire

Mia en Maggie

Intridea

Ontwerp door mensen

Roxy

Blik

SitePoint

Doelwit

Walmart

1-800-Flowers

Beste koop

Amazon.com

Schuren en nobel

Het einde van het land

appel

Google

Jacht

AbsolutePunk.net

Littman Bros. Verlichting

Guardian.co.uk

RUIMTE 17

Wufoo

Girl Scouts of Middle Tennessee

The Glasgow Collective

Eerstgeborene

Bell Canada

Grooveshark

Devlounge

Over de auteur - Shay Howe is een professionele web- en gebruikersinterfaceontwerper die momenteel in Chicago, IL woont. Hij schrijft over webdesign in zijn eigen blog op letscounthedays en zou het leuk vinden om van je te horen op Twitter. Aarzel niet hem hallo te zeggen!