11 manieren Breadcrumbs Bolster UX Design
Website broodkruimels verbeteren gebruikerservaring gebruikers aan te moedigen om dieper in de hiërarchie van uw site te graven en bezoekers precies te vertellen waar ze zich op een bepaalde pagina bevinden. Google's breadcrumb-schema is een andere waardevolle reden om broodkruimels in te stellen. Maar de ontwerpfactor is altijd lastig, dus het helpt om voorbeelden te bestuderen en ideeën te verzamelen.
Dit zijn enkele van mijn favoriete breadcrumb-stijlen en ze zouden een goed startpunt moeten zijn voor nieuwe ontwerpprojecten.
1. Wayfair
De website van Wayfair doet veel goed en hun hele UX is fenomenaal van pagina tot pagina. Een ding dat ik erg leuk vind, is hun broodkruimelstijl, omdat het niet te groot is, maar ook niet te klein en niet opdringerig.
U vindt deze kruimels op productpagina's en categoriepagina's dus volgen ze je op de hele site. Hiermee kun je een categorie of twee van een gedetailleerde pagina springen.
En de broodkruimelbalk krijgt een eigen klein gedeelte onder de navigatie met een andere BG-kleur. Niet opdringerig maar ook niet moeilijk te vinden. Een geweldige ontwerpstijl en een van mijn persoonlijke favorieten.
2. Google-ondersteuning
Een andere voor de hand liggende vermelding is Google, omdat ze bekend staan om geweldig UX-werk . U vindt broodkruimels op de meeste Google-producten met getrapte pagina's en een van de beste is de Google-ondersteuning plaats.
Hun ondersteuningspagina's bieden advies over alles, van schema tot analyse en de Search Console-tool. Elke pagina heeft broodkruimels en deze kruimels bezetten een vergelijkbare ruimte als de paginakop zodat ze duidelijk zichtbaar zijn.
Merk opnieuw op hoe deze koppelingen mooi samengaan zonder van de pagina af te springen. Ze voelen heel natuurlijk aan in het ontwerp en dit moet altijd het doel zijn met je broodkruimels.
3. MSDN Documenten
Er is een echte unieke broodkruimelfunctie in de MSDN Docs die ik echt leuk vind. Het heeft alle typische ontwerpfuncties zoals pijlpictogrammen en categorische koppelingen, maar de laatste link in de keten heeft een vervolgkeuzemenu met extra pagina's.
Ik heb dit nog nooit eerder gezien op een ontwerp van broodkruimel, maar het is ongelooflijk waardevol voor de gebruiker. Normaal gesproken zou het een ander navigatiemenu nodig hebben om toegang te krijgen tot deze links, maar met een site als Microsoft zijn er zoveel pagina's om doorheen te gaan.
Om maar te zwijgen van documentatie kan nogal complex zijn, dus het is niet het gemakkelijkste om broodkruimels voor te maken. Deze techniek is geweldig en de moeite waard om te gebruiken als je een complexe hiërarchie op je site hebt.
4. Apple
Op de Apple-website heb ik heel veel broodkruimels gezien op veel pagina's, zoals de pagina's over de online winkel en productpagina's. Maar een klein detail dat me opviel, is het voettekst link gebied met een klein broodkruim boven hun onderste schakels.
Apple is een enorm bedrijf met veel pagina's en bronnen. Dit broodkruimeltje zou ook de moeite waard zijn om toe te voegen aan de bovenkant van de pagina, maar het doet zeker geen kwaad om dicht bij de bodem te zijn.
Ik zou ontwerpers aanmoedigen om dit uit te proberen en te kijken hoe het werkt. Footer broodkruimels zijn zeker niet de norm, maar ze helpen wel met visuele navigatie.
5. TechRadar
De meeste broodkruimels die ik tegenkom, bevinden zich meestal op bedrijfssites of e-commerceshops. Maar blogs hebben vaak ook hun eigen broodkruimels en een goed voorbeeld is het TechRadar-artikelpagina .
Elke broodkruimel is vrij klein met een link naar de hoofdcategorie en een kopie van de titel van het artikel. Voor dit type blog is het moeilijk om broodkruimels te rechtvaardigen, omdat er niet veel van een hiërarchie is.
Maar dit werkt goed als je geen andere plek hebt om de categorie van het artikel aan de pagina toe te voegen.
6. TutsPlus
Voor een veel gedetailleerder broodkruimelontwerp bekijk de TutsPlus-blog . Elk artikel bevat een klein broodkruimeltje helemaal boven aan de pagina, inclusief de primaire en secundaire categorieën.
Ik vind dit ontwerp erg leuk omdat het op natuurlijke wijze in de kop van de pagina past. Dus in plaats van de kop in een breadcrumb en in een heading-tag te kopiëren, combineert dit alles in één element, dus de
kop is onderdeel van het broodkruim.
Merk op dat dit niet het juiste Google-schema gebruikt, zodat het niet wordt weergegeven met broodkruimels tijdens het zoeken. Maar aangezien dit de CTR nauwelijks beïnvloedt, waardeer ik het ontwerp en de bruikbaarheid op de pagina veel meer dan de voordelen van SEO (of het ontbreken daarvan).
7. Coolspotters
Traditionele broodkruimels plakken meestal met een paar tekstsymbolen zoals de schuine streep naar voren of de rechterpijl (>). Deze werken omdat ze al tientallen jaren worden gebruikt en gebruikers ermee vertrouwd zijn.
Maar ik zie altijd graag andere broodkruimelontwerptrends zoals op Coolspotters . Ze gebruiken aangepaste breadcrumb-links waarop pijlen zijn ingebouwd in de link-elementen.
Je kunt er veel van vinden open source breadcrumb-stijlen net zoals deze voor uw eigen site. Het is een geweldige manier om dit zeer traditionele pagina-element te verfraaien.
8. MarketWatch
Terug naar de basis is de online nieuwssite Marktoverzicht . Al hun interne berichten voorzien van breadcrumb navs met rechts wijzende pijlpictogrammen vrij kleine tekst.
In dit geval denk ik dat de kleine tekst goed werkt. Het is niet bepaald moeilijk om de broodkruimels te gebruiken, maar ze voelen wel kleiner en minder belangrijk aan dan de rest van de pagina.
Blogs en nieuwssites werken beter met kleinere broodkruimels, omdat de echte focus ligt op de inhoud. Toch is het leuk om ze ergens in te passen en dit ontwerp is een geweldig voorbeeld.
9. Amazon
Iedereen houdt van Amazon voor hun enorme voorraad en gratis verzending. Maar ze hebben ook een fantastische site en ik kan hun broodkruimelontwerp absoluut niet overslaan.
Veel productpagina's een aantal broodkruimels hebben in de buurt van de allerbeste navigatie. Dit is altijd super lang omdat de categorieën van Amazon diep gaan. Dit is waardevol voor consumenten om te zien welke categorieën het browsen waard kunnen zijn en waardevol voor ontwerpers / webmasters om de enorme productstructuur van Amazon te bestuderen.
Maar als u op elke productpagina naar beneden scrolt, vindt u een gedeelte 'productinformatie' of 'productdetails' met de lijsten met bestsellers.
Deze functie maakt gebruik van broodkruimelkoppelingen om aan te geven waar het product het best is verkocht en moedigt bezoekers aan door te klikken naar die gerelateerde categorieën.
De broodkruimels van Amazon zijn bewonderenswaardig lang, dus ze zijn het waard om te bestuderen als je een site hebt met een zeer diepe hiërarchie.
10. Etsy
De enorme online DIY / crafts e-commerce site Etsy is constant bezig met het ontwikkelen van hun ontwerp. Het werd opgericht in 2005 en kijkend naar de site kun je zien dat ze de afgelopen 10 jaar een aantal grote veranderingen hebben doorgevoerd.
Als je er een bekijkt categoriepagina je vindt kleine broodkruimels in de linkerbovenhoek. Deze zijn niet zo prominent in vergelijking met de zijbalknavigatie die echt de primaire manier van zoeken is.
Maar een leuk toegevoegd effect is de totale itemlijst in de categorie. Etsy geeft een overzicht van het totale aantal items dat te koop is in elke subcat terwijl u dieper de site induikt.
Een ding dat ik zal klagen over het gebrek aan broodkruimels op productpagina's. Dit lijkt een echte vergissing voor de gebruikersinterface en ik hoop dat ze dat in de toekomst nog toevoegen.
11. LinuxInsider
Dit ontwerp van broodkruimels is niet bijzonder mooi, maar het heeft een functie die mijn aandacht trekt.
Je ziet een link "Volgend artikel" bovenaan de bovenkant van elk LinuxInsider-bericht . Dit verschijnt direct naast het breadcrumb, dus het voelt als een onderdeel van de navigatie.
Gebruikers die interactie hebben met broodkruimels, willen meestal graven in die kruimelcategorieën, dus deze extra link is logisch. Iedereen die geïnteresseerd is in Linux-software wil misschien meteen naar het volgende artikel in die categorie springen.
