Tips voor een betere site

  • Al 5.769 abonnees
  • 1 keer per maand
  • Exclusieve tips en promo's

Broodkruimels op je website: 8 tips

In dit artikel

  • Wat is een broodkruimelpad en waarvoor is het goed?
  • 8 tips voor goede broodkruimels op je website
  • Voorbeelden van broodkruimelnavigaties

Wat is een broodkruimelpad?

Een broodkruimel geeft het volledige hiërarchische pad weer, vanaf de homepage tot de pagina die de gebruiker bekijkt.

Voorbeeld van een goede broodkruimel

Waarvoor is een broodkruimel op je website goed?

Broodkruimels zijn een handige aanvulling op je website navigatie. Het helpt de gebruiker om zich te oriënteren op je site: zo weet hij meteen waar hij zit. Bovendien laat de broodkruimelnavigatie toe dat de bezoeker snel naar een hoger niveau kan springen. En ze helpen om beter te scoren in Google.

Als je broodkruimels wil maken voor je website, volg dan deze 8 richtlijnen.

1. Tussen paginatitel en topbalk

Een broodkruimel staat boven de paginatitel, maar onder een eventuele topnavigatie of de grafische balk bovenaan op je site. Zet het broodkruimelpad zeker niet boven je website menu. De kans is groot dat een surfer ze dan niet ziet staan. Of, erger nog, de broodkruimel als de primaire navigatie beschouwt.

2. Begin de broodkruimel met 'Home'

Vroeger begonnen broodkruimels vaak met 'Je bent hier:'. Tijdens gebruikerstesten merken we dat dat niet meer nodig is. Zelfs mensen die nog nooit van een broodkruimel gehoord hebben, begrijpen waarvoor hij dient. Of negeren hem. Elke surfer weet wat 'Home' betekent. Het is, ook in het Nederlands, de beste term om de homepage aan te duiden.

3. Lijn de broodkruimel links uit

Een goede broodkruimel maakt Home in de navigatie optioneel

We lezen nu eenmaal van links naar rechts.

Bijkomend voordeel: zo staat het eerste deel van je breadcrumb ('Home') in het linker bovengedeelte van de website, waar mensen een link 'Home' verwachten. Met andere woorden: als je een goede broodkruimel hebt, is een item 'Home' in je hoofdnavigatie geen absolute noodzaak.

Op onze blog vangt de broodkruimel het gebrek aan een link Home in de hoofdnavigatie op.

4. Groter-dan-teken

Gebruik een groter-dan-teken (>) of iets gelijkaardig om de verschillende elementen van je broodkruimelpad van elkaar te scheiden. Het groter-dan-teken is het meest geschikt om het verschil in hiërarchie tussen de verschillende elementen aan te duiden. Uiteraard mag je dit ook grafisch uitwerken, zoals in onderstaand voorbeeld van Apple. Het belangrijkste is dat het teken of symbool hiërarchie uitstraalt. Een verticale scheiding (|) scheiding mag ook. Een pijltje evenzeer. Een liggend streepje (-) , backslash (\) en andere scheidingstekens zijn niet ideaal.

Stijlvolle uitwerking van het broodkruimelpad door Apple

Of je een teken in html gebruikt dan wel een grafisch element dat je oproept via je style sheet, maakt voor de usability weinig uit. Voor blinden is volgens Anysurfer het groter-dan-teken een uitstekende oplossing en ook Google houdt van het groter-dan-teken.

 

5. Kleinere tekengrootte

Gebruik voor de broodkruimel op je website een iets kleinere tekengrootte dan voor de rest van de tekst. Door die kleinere tekengrootte wordt meteen duidelijk dat het een secundair element is.

6. Aanklikbaarheid

Elk onderdeel van de broodkruimel moet aanklikbaar zijn, behalve de pagina waarop de bezoeker zich bevindt. Uiteraard moet je ook in de broodkruimel de regels van de aanklikbaarheid respecteren (onderlijnd en in kleur).

Inhoudelijk goed, maar de links kunnen beter.
Behoorlijke broodkruimel, al mag de linkkleur wel wat feller en herkenbaarder.

7. Geen broodkruimelpad op de homepage

Zet geen broodkruimelnavigatie op de homepage. Andere elementen (kleuraanduiding in navigatie, content, lay-out, etc.) moeten aangeven dat een pagina de homepage van een website is. Broodkruimels zet je dus op alle pagina's van je website, behalve op de homepage.

8. Broodkruimel optimaliseren voor blinden en screenreaders

Voor blinden wordt een broodkruimel best wel aangekondigd. De klassieke melding 'Je bent hier' is dan het beste. Je mag deze uiteraard verborgen maken voor iedereen behalve screenreaders. Tijdens het maken van dit artikel kreeg ik zeer uiteenlopende signalen over hoe een broodkruimel geschikt maken voor blinden.

  • Als lijst (<ul>), die je dan met wat CSS-gegoochel in de browser kan weergeven zoals je wil (tip van Johan Ronsse)
  • In HTML5 kan je de broodkruimel ook identificeren als een <nav>-element. Daarbinnen kan je dan de links gewoon aanduiden als -euhm- links <a> (tip van Toon Van de Putte)
  • Bij webbureau Marlon kiezen ze voor een ietwat vergelijkbare methode. Op hun blog vind je de html- en css-code voor hun ideale broodkruimel.
Voor blinden is het groter-dan-teken wel degelijk het beste als symbool in een broodkruimel

Deze methoden zijn niet superslecht, maar de mensen van Anysurfer (het Belgische label voor toegankelijkheid) lieten snel weten dat het groter-dan-teken als scheidingselement wel degelijk het beste is.

Ze maakten zelfs een pagina waar je kan horen hoe de uitleessoftware van blinden zo'n broodkruimel voorleest.

Tot slot nog dit: zet in je html geen | omdat dit symbool door een screenreader wordt gelezen als PIPE. 

P.S. Maak van je website een succes dankzij onze online training

Tijdens deze online videotraining van Karl Gilis, de #3 conversie-expert ter wereld, krijg je:

  • Meer dan 100 tips die gegarandeerd je website beter maken
  • Massa’s voorbeelden en cases die glashelder tonen wat werkt en wat niet
  • Methodes en tools om de zwakke plekken van jouw site te identificeren
  • De beste strategieën en tactieken om die probleempunten gericht op te lossen
  • Je volgt de training wanneer jij wil en via het toestel dat jij wil

Ontdek het programma van de online training

Mis het volgende artikel niet!

  1. Volg ons op Twitter voor interessante links en extra tips.
  2. Like onze Facebookpagina
  3. Schrijf je in op onze maandelijkse nieuwsbrief

Leer teksten (her)schrijven voor het web

Op 1 dag leer je van de makers van deze blog hoe je je webteksten kan optimaliseren.

  • Leer teksten optimaliseren voor het web
  • Met korte schrijfoefeningen
  • Al 572 mensen volgden deze cursus
  • Volgende editie: 22 maart 2018, Antwerpen