Free Press

In het sprookje Hans en Grietje laten twee kinderen broodkruimels in het bos vallen om de weg naar huis te vinden.

Nu ervaart u waarschijnlijk niet vaak meer dat iemand verdwaald is in het bos, maar ik durf te wedden dat u zich wel eens frustrerend gedesoriënteerd hebt gevoeld op slecht ontworpen websites.

In het ontwerp van websites is de broodkruimelnavigatie een manier om uw gebruikers te laten zien waar ze zich bevinden en hoe ze daar zijn gekomen (vergelijkbaar met de broodkruimels van Hans en Grietje). Het helpt gebruikers ook sneller pagina’s op een hoger niveau te vinden als ze via een zoekopdracht of een deeplink op uw site terecht zijn gekomen.

Jakob Nielsen, mede-oprichter van de Nielsen Norman Group, beveelt broodkruimelnavigatie al sinds 1995 aan, en maakt er een sterk punt van: “Het enige wat broodkruimels doen is het gemakkelijker maken voor gebruikers om zich door de site te bewegen, ervan uitgaande dat de inhoud en de algehele structuur zinvol zijn. Dat is voldoende bijdrage voor iets dat slechts één regel in het ontwerp in beslag neemt.”

Als de website van uw bedrijf uit meerdere lagen bestaat, kunt u overwegen broodkruimelnavigatie te implementeren om uw site gemakkelijker te navigeren te maken. Maar zoals bij elk ontwerpelement is er een goede en een verkeerde manier om dit te doen. Hier bespreken we negen tips en voorbeelden om ervoor te zorgen dat u de meest effectieve broodkruimelnavigatie voor uw gebruikers maakt.

Tips en voorbeelden voor broodkruimelnavigatie

Gebruik alleen broodkruimelnavigatie als dit logisch is voor de structuur van uw site.

Broodkruimelnavigatie heeft een lineaire structuur, dus u wilt deze alleen gebruiken als dit logisch is voor de hiërarchie van uw website. Als u pagina’s op een lager niveau hebt, die toegankelijk zijn vanaf verschillende landingspagina’s, zal het gebruik van broodkruimelnavigatie lezers alleen maar in verwarring brengen als ze steeds dezelfde pagina’s vanaf verschillende startpunten openen. Bovendien, als uw site relatief eenvoudig is, met slechts een paar pagina’s, hebt u waarschijnlijk geen broodkruimelnavigatie nodig.

Maak uw broodkruimelnavigatie niet te groot.

Uw broodkruimelnavigatie is een secundair hulpmiddel naast uw primaire navigatiebalk, dus moet deze niet te groot of prominent op de pagina aanwezig zijn. Op de website van DHL bijvoorbeeld, is hun primaire navigatiebalk groot en herkenbaar, met kolommen als “Express” “Parcel & eCommerce” “Logistics”, enz. Hun broodkruimelnavigatie is het kleinere gedeelte eronder met de tekst “DHL Global | > Logistics | > Freight Transportation”. U wilt niet dat uw gebruikers uw broodkruimelnavigatie verwarren met de primaire navigatiebalk.

Integreer het volledige navigatiepad in uw broodkruimelnavigatie.

Ik heb “Elon University Non-Degree Students” gegoogeld om op deze landingspagina te komen, maar Elon is zo slim om het volledige navigatiepad op te nemen, inclusief “Home” en “Admissions”. Als je bepaalde niveaus weglaat, breng je gebruikers in verwarring en zal het broodkruimelpad niet zo nuttig aanvoelen. Zelfs als gebruikers niet op de startpagina zijn begonnen, wilt u ze een gemakkelijke manier geven om uw site vanaf het begin te verkennen.

Ga van het hoogste niveau naar het laagste.

Het is belangrijk dat uw broodkruimelnavigatie van links naar rechts loopt, waarbij de link links het dichtst bij de startpagina staat en de link rechts het dichtst bij de huidige pagina van de gebruiker. Uit een studie van de Nielsen Norman Group blijkt dat gebruikers 80% van hun tijd doorbrengen met het bekijken van de linkerhelft van een pagina en 20% met het bekijken van de rechterhelft, wat pleit voor een ontwerp van links naar rechts. Bovendien wordt de link die het dichtst bij links staat, weergegeven als het begin van de keten, dus u wilt dat dit uw pagina van het hoogste niveau is.

Houd uw broodkruimeltitels consistent met uw paginatitels.

Om verwarring te voorkomen, wilt u consistent blijven met uw pagina- en broodkruimeltitels, vooral als u zich in die titels richt op bepaalde zoekwoorden. Je moet je broodkruimeltitels ook duidelijk koppelen aan de pagina. Als de breadcrumb-titel geen link heeft, maak die dan duidelijk. Nestlé labelt haar broodkruimeltitels effectief zodat ze overeenkomen met de paginatitels. Zo staat bijvoorbeeld “Areas of impact & commitment” in de broodkruimelnavigatie hetzelfde als op de pagina.

Nestle maakt ook goed onderscheid tussen links en niet-links met verschillende kleuren — de links zijn blauw, terwijl de niet-links grijs blijven.

Get creative with design.

De traditionele broodkruimelnavigatie ziet er als volgt uit: Home > Over ons > Carrière. U hoeft echter niet het traditionele pad te volgen als u denkt dat een ander ontwerp uw publiek meer aanspreekt of uw site beter tot zijn recht doet komen.

Doelgroep Target gebruikt bijvoorbeeld broodkruimelnavigatie op hun productpagina’s (want wie zou er niet verdwalen in de virtuele schoenenafdeling?), maar gebruikt “/”-symbolen en eenvoudige zwarte en grijze tekst. In dit geval past de subtiele variatie in het ontwerp goed bij de esthetiek van de site.

Houd het netjes en overzichtelijk.

Uw broodkruimelnavigatie is slechts een hulpmiddel voor de gebruiker, en zou idealiter niet moeten worden opgemerkt tenzij de gebruiker ernaar op zoek is. Daarom wilt u uw broodkruimelnavigatie niet volstoppen met onnodige tekst.

Eionet, bijvoorbeeld, zou het zonder hun “U bent hier”-tekst kunnen stellen. Hoewel het bedoeld is om te helpen, maakt de tekst de pagina onoverzichtelijk. Met het juiste ontwerp zou een broodkruimelnavigatie ook zonder inleiding moeten opvallen.

Bedenk welk type broodkruimelnavigatie het meest zinvol is voor uw site.

Er zijn een paar verschillende typen broodkruimels die u kunt gebruiken: locatiegebaseerd, attribuutgebaseerd en geschiedenisgebaseerd. Op locatie gebaseerde breadcrumbs laten de gebruiker zien waar hij zich bevindt in de hiërarchie van de site. Op attributen gebaseerde breadcrumbs laten gebruikers zien in welke categorie hun pagina valt. Tenslotte tonen geschiedenisgebaseerde breadcrumbs gebruikers het specifieke pad dat ze namen om op de huidige pagina te komen.

Bed Bath & Beyond gebruikt attribuutgebaseerde breadcrumb navigatie om gebruikers te tonen onder welke categorie hun productpagina valt, zodat gebruikers kunnen terugklikken naar “Keuken” of “Kleine Apparaten” om gelijkaardige items te bekijken. Dit type broodkruimel navigatie is het meest effectief voor Bed Bath & Beyond klanten. Denk bij het maken van een broodkruimelnavigatie aan wat het nuttigst is voor de bezoekers van uw site.

Ken uw publiek.

De beste praktijken op het gebied van broodkruimelnavigatie dringen er bij webontwerpers op aan om de navigatie bovenaan de pagina te plaatsen — maar Apple, een van de meest waardevolle bedrijven aller tijden, tart deze logica door zijn broodkruimelnavigatie onderaan zijn site te plaatsen. Uiteindelijk is het belangrijk dat je je publiek kent. De klanten van Apple zijn over het algemeen technisch onderlegd en zouden de navigatie waarschijnlijk wel vinden als ze die nodig hadden. Houd rekening met de behoeften van je klanten en voer A/B-tests uit als je het niet zeker weet.

Uiteindelijk is broodkruimelnavigatie een effectief hulpmiddel om de navigatie op je site te vergemakkelijken, maar je moet wel de beste ontwerppraktijken volgen om ervoor te zorgen dat je optimaal profiteert van de bruikbaarheid van het hulpmiddel. Voor aanvullend UX-advies, zie “De ultieme gids voor UX-ontwerp”.