Breadcrumbs Web Design Examples and Best Practices

Inspiratie – Websites VoorbeeldenAndrian Valeanu – June 14, 2013 – 6 minutes READ

Breadcrumbs zijn een zeer belangrijk element in websites design. Om dit te doen, kunt u de breadcrumbs in uw web ontwerpen implementeren. Het verhoogt de standaard van uw website en dus trekt de kijkers naar de site. In principe zijn dit op tekst gebaseerde links. Normaal gesproken is het lettertype van broodkruimels een paar punten kleiner dan de oorspronkelijke tekstgrootte van de inhoud van de website.

Wanneer u een website bouwt, wat moet dan uw belangrijkste focus zijn? Natuurlijk, het is de bruikbaarheid van de site. Of het nu een educatieve site, een e-commerce site of een informatieve site, kunt u niet voorbijgaan aan het belang van de bruikbaarheid van de website.

Bezoekers moeten gebruik maken van de informatie van de site in een probleemloze manier. Als het een eCommerce site dan de kijkers moeten niet worden geconfronteerd met moeilijkheden om uit te vinden hun favoriete producten. Als ze vinden het tijdrovend om relevante informatie te krijgen van uw site zullen ze niet aarzelen om de site te verlaten en naar de zoekpagina weer naar een andere concurrerende website die nuttiger is voor hen te vinden. Daarom is het belangrijk om de site nuttig en effectief te maken voor de bezoekers.

Breadcrumbs, zoals de naam al doet vermoeden, laat een spoor achter voor websitebezoekers om op een eenvoudigere manier terug te keren naar hun bestemming. De naam is ontleend aan het sprookje “Hans en Grietje”. Breadcrumbs staan bekend als de tekstlinks die doorgaans op websites worden aangetroffen bovenaan de hoofdtekst van de pagina; onder de header en/of eventuele bannerafbeeldingen van de pagina, maar boven de inhoud. Broodkruimels worden gepland op basis van de paginastructuur van uw website.

Bijv. als u een eCommerce winkel heeft en een kijker bevindt zich op een pagina voor koelkasten, dan zal de broodkruimelpadstructuur de hoofdcategorieën tonen die leiden naar de pagina en terug naar de startpagina volgens hun juiste volgorde van pagina verschijnen. De kijkers zullen het broodkruimelspoor dus aantreffen in de trant van “Home>Elektronische apparaten>Huistoestellen>Koelkasten”. Dit spoor is typisch gebaseerd op de specifieke mappenstructuur in het backend systeem van de website. De gebruiker kan naar elk van de pagina’s van het spoor gaan door op de tekst te klikken. Wie bijvoorbeeld naar de homepage wil, kan daar direct naartoe door op de “home”-link in het broodkruimelspoor te klikken.

Breadcrumbs worden vooral gebruikt als navigatiemenu’s. Er zijn verschillende manieren waarop een gebruiker door de verschillende pagina’s van een website kan navigeren. De navigatiemenu’s moeten gebruiksvriendelijk en eenvoudig zijn. Vandaar dat breadcrumb een briljant idee is als navigatiemenu.

Niet alleen als navigatie menu’s maar ook voor de zoekmachine optimalisatie is dit gunstig. Vooral in eCommerce, waar de concurrentie hoog kan zijn, is het belangrijk om hoog te scoren in zoekmachines. Omdat broodkruimels gebaseerd zijn op de mappenstructuur van de website, worden trefwoorden op meer plaatsen op de hele website geplaatst. Vandaar, als “wollen poncho” is een populaire zoekterm in uw branche Breadcrumb zal nog een interne link naar het relevante trefwoord binnen uw website.

However, terwijl het omgaan met de Breadcrumb menu’s, een ding dat je nodig hebt om in gedachten te houden, moet dit type van navigatie worden beschouwd als een extra functie om de aantrekkingskracht van de site te verbeteren en mag niet in de plaats nuttig primaire navigatie menu’s.

Tijdens het zoeken naar de verschillende soorten broodkruimelmenu’s op internet kun je locatiegebaseerde, attribuutgebaseerde en padgebaseerde broodkruimelnavigatiemenu’s vinden.

De component is gemaakt in zwarte kleur om op natuurlijke wijze op te vallen tegen de lichte achtergrond en in het oog te springen. Het gestructureerde canvas werkt mooi samen met het algemene artistieke ontwerp. De links worden snel waargenomen dankzij de scherpe en formele typografie en de kleine openingen tussen elk item dragen bij aan de leesbaarheid.

Order

Terwijl alle items van de UI worden gekenmerkt door subtiele gradiënten, houdt de breadcrumbs daarentegen vast aan een meer zuivere, platte en monochrome achtergrond. Toch past het goed bij de anderen en vult het de esthetiek aan dankzij vergelijkbare kleuren. De home-knop voegt een klassieke aantrekkingskracht toe. Heldere tinten worden gebruikt om titels effectiever af te bakenen.

Breadcrumbs van Rob Dozier magnetiseert met een uiterst elegante, schone en frisse uitstraling. Hoewel de navigatie in een licht kleurenschema is uitgevoerd, springt het toch in het oog. De subtiele schaduw geeft de pijlvormige vakjes extra visueel gewicht, waardoor ze beter afsteken tegen de rumoerige achtergrond. Om de huidige positie duidelijk aan te geven, wordt het laatste item gepresenteerd als een eenvoudig opschrift.

Breadcrumbs/Error van Jason Mayo is een gestroomlijnde navigatiebalk zonder hiaten of indrukwekkende kenmerken. Hij gaat harmonieus op in de compositie en wordt een essentieel detail van de UI. Een reliëfeffect redt echter de dag. Het zorgt ervoor dat elk blok en elke titel er duidelijker en scherper uitziet. Violet, dat deel uitmaakt van het primaire kleurenpalet, wordt toegepast om de pagina zelf te benadrukken.

Design Fundamentals

Allison House laat alle klassieke pijlvormige details achterwege en gaat voor meer simplistische en elegante kenmerken. De component ziet er daardoor natuurlijk en intuïtief uit en heeft een sterke educatieve stijl die nodig is voor het project. Elk blok bevat een titel die wordt ondersteund door een bijbehorend pictogram.

Zoals in het vorige voorbeeld heeft Michal Vasko alle links in een rij gezet, waarbij hij grafische details heeft laten vallen ten gunste van typografie. Items worden gescheiden door kleine minimalistische pijlen die door de blauwe kleur onopvallend de richting aangeven. Maar omdat het element naadloos in het ontwerp is geïntegreerd en de grijze kleur niet in schril contrast staat met de achtergrond, kan het gemakkelijk uit het oog worden verloren.

JomSocial Template

JomSocial Template is een heel andere zaak. De breadcrumbs-navigatie heeft een groot visueel gewicht door zijn relatief enorme omvang en heldere kleurstelling. Het springt in het oog zonder de gebruikers te overweldigen. Mohd Izuddin Helmi manipuleert met een opvallend lettertype, een schaduw aan de binnenkant, een stevige homeknop en enkele zachte kleurverlopen om een indrukwekkend resultaat te bereiken.

Dit is een vrij eenvoudig voorbeeld, maar het heeft bestaansrecht. Het is de eenvoudigste manier om gebruikers hun bewegingen over het project te laten zien. Hoewel het er niet mooi uitziet en nog wat opgefrist moet worden, doet het zijn werk toch goed. Het bevat alle gebruikelijke functies: titels, pijlen voor de richting en zelfs markerende kleuren, waardoor bezoekers een levensvatbare navigatie-assistent krijgen.

Image Gallery Management

De broodkruimel navigatie straalt strakheid en duidelijkheid uit. Het heeft een schone en gedetailleerde uitstraling die wordt verkregen door ambachtelijk werk met typografie, witruimte en achtergrond. Het laatste item heeft gedurfdere lettervormen in tegenstelling tot andere om de aandacht naar de relevante pagina te leiden. Hoewel de navigatie een simplistisch gevoel behoudt, heeft het toch charme en past het hier als een handschoen.

Gamerscouch.com redesign

Aaron Moody heeft met veel toewijding de front-end van de website gecreëerd waar de broodkruimels de juiste plaats innemen en een nette, geraffineerde en trendy uitstraling hebben. De navigatie is een aanvulling op het algehele ontwerp en vangt de sfeer van het project. Donkere kleuren met een vleugje warme oranje tinten omlijnen het onderdeel en roepen positieve emoties op.

Conclusie

Als optioneel navigatiehulpmiddel dat niet alleen het hoofdmenu ondersteunt, maar ook de hiërarchie onthult en het pad naar de huidige sectie toont, zijn broodkruimels een krachtig instrument om de gebruikerservaring te verbeteren.

Maar helaas wordt het vaak over het hoofd gezien in termen van ontwerp, hoewel het zou moeten worden behandeld als elk gemeenschappelijk element van UI. De bovenstaande voorbeelden stimuleren gebruikers om mooie en intuïtieve broodkruimels te maken die hun missie vervullen en geen ‘zwart schaap’ zijn in het ontwerp.