11 måter Breadcrumbs Bolster UX Design
Nettstedet breadcrumbs forbedre brukeropplevelsen oppfordrer brukerne til å grave dypere inn i nettstedets hierarki, samtidig som de forteller besøkende nøyaktig hvor de er på en gitt side. Googles breadcrumb skjema er en annen verdifull grunn til å sette opp breadcrumbs. Men designfaktoren er alltid vanskelig, så det hjelper å studere eksempler og samle ideer.
Dette er noen av mine favoritt breadcrumb stiler, og de skal gi et godt utgangspunkt for nye designprosjekter.
1. Wayfair
Wayfairs nettsted gjør mye riktig og hele UX er fenomenal side til side. En ting jeg virkelig liker er deres breadcrumb-stil fordi den ikke er for stor, men heller ikke for liten og ikke påtrengende heller.
Du finner disse krummer på produkt sider og kategori sider så de følger deg rundt hele nettstedet. Dette lar deg hoppe en kategori eller to fra en hvilken som helst detaljert side.
Og breadcrumb-baren får sin egen lille del under navigasjonen med en annen BG-farge. Ikke påtrengende, men ikke vanskelig å finne heller. En flott design stil og en av mine personlige favoritter.
2. Google-støtte
En annen åpenbar omtale er Google siden de er kjent for utrolig UX-arbeid . Du finner brødsmuler på de fleste Google-produkter med lagdelt sider, og en av de beste er Google Support nettstedet.
Deres støttesider gir råd om alt fra skjema til analyse og verktøyet Search Console. Hver side har brødsmuler og disse krummene opptar en lignende plass som siden overskriften slik at de er tydelig synlige.
Igjen legg merke til hvordan disse koblingene smelter sammen pent uten å hoppe av siden. De føler seg veldig naturlig i designen, og dette bør alltid være målet med brødsmuler.
3. MSDN Docs
Det er en ekte unik breadcrumb-funksjon i MSDN-dokumenter som jeg virkelig liker. Den har alle typiske designfunksjoner som pileikoner og kategoriske lenker, men den endelige lenken i kjeden har en tilpasset rullegardin med ekstra sider.
Jeg har aldri sett dette før på noen breadcrumb design, men det er utrolig verdifullt for brukeren. Vanligvis ville det kreve en annen navigasjonsmeny for å få tilgang til disse koblingene, men med et nettsted som Microsoft er det så mange sider å gå gjennom.
For ikke å nevne dokumentasjon kan det være ganske komplisert, så det er ikke det enkleste for å lage breadcrumbs for. Denne teknikken er strålende og vel verdt å bruke hvis du har et komplekst hierarki på nettstedet ditt.
4. Apple
På Apples nettside har jeg sett mange brødkrummer på mange sider som nettbutikkens sider og produktsider. Men en liten detalj som fikk øye på meg, er footer link område med en liten breadcrumb over sine nedre linker.
Apple er et stort selskap med mange sider og ressurser. Denne breadcrumb ville være verdt å legge til toppen av siden også, men det sikkert ikke vondt å være nær bunnen.
Jeg vil oppfordre designere til å prøve dette og se hvordan det fungerer. Footer breadcrumbs er absolutt ikke normen, men de hjelper med visuell navigering.
5. TechRadar
De fleste brødsmuler som jeg finner er vanligvis på bedriftsnettsteder eller i e-handelsbutikker. Men blogger har ofte egne brødkrummer også, og et godt eksempel er TechRadar artikkel side .
Hver breadcrumb er ganske liten med en link direkte til hodet kategorien og en kopi av artikkelenes tittel. For denne typen blogg er det vanskelig å rettferdiggjøre breadcrumbs fordi det ikke er mye av et hierarki.
Men dette fungerer bra hvis du ikke har et annet sted å legge artikkels kategori på siden.
6. TutsPlus
For en mye mer detaljert breadcrumb design sjekk ut TutsPlus blogg . Hver artikkel har en liten breadcrumb øverst på siden, inkludert primære og sekundære kategorier.
Jeg liker dette designet mye fordi det blander seg naturlig inn i overskriften til siden. Så i stedet for å duplisere overskriften i en breadcrumb og i en overskrift tag, kombinerer dette alt i ett element slik at
overskriften er en del av breadcrumb.
Merk at dette ikke bruker riktig Google-skjema, slik at det ikke vises med breadcrumbs i søk. Men vurderer at det knapt påvirker CTR. Jeg verdsetter design og brukbarhet på siden langt mer enn SEO-fordeler (eller mangel på det).
7. Coolspotters
Tradisjonelle breadcrumbs holder vanligvis med noen tekstsymboler som foroverstrekk eller høyre pilbrakett (>). Disse arbeidene fordi de har blitt brukt i flere tiår, og brukere er kjent med dem.
Men jeg liker alltid å se andre brødrommet design trender som på Coolspotters . De bruker egendefinerte breadcrumb-koblinger som har piler bygget inn i koblingselementene.
Du kan finne nok av open source breadcrumb stiler akkurat som disse for ditt eget nettsted. Det er en fin måte å jazz opp på dette svært tradisjonelle sideelementet.
8. MarketWatch
Å komme tilbake til grunnleggende er nettbasert nyhetsside Marketwatch . Alle deres interne innlegg funksjonen breadcrumb navs med høyre pekende pil ikoner ganske liten tekst.
I dette tilfellet tror jeg den lille teksten fungerer bra. Det er ikke akkurat vanskelig å bruke breadcrumbs, men de føler seg mindre og mindre signifikante enn resten av siden.
Blogger og nyhetssider fungerer bedre med mindre breadcrumbs fordi det virkelige fokuset er innholdet. Likevel er det fint å passe dem i et sted, og dette designet er et godt eksempel.
9. Amazon
Alle elsker Amazon for sin store beholdning og gratis frakt. Men de har også et fantastisk sted, og det er ingen måte jeg kunne passere over deres breadcrumb design.
Mange produkt sider ha et sett med brødsmuler i nærheten av toppnavigasjonen. Dette er alltid super lenge fordi Amazonas kategorier blir dype. Dette er verdifullt for forbrukerne å se hvilke kategorier som kan være verdt å surfe og verdifulle for designere / webmastere å studere Amazons massive produktstruktur.
Men hvis du ruller ned på hver produktside, finner du en «produktinformasjon» eller «produktdetaljer» -seksjon med bestselgereoppføringer.
Denne funksjonen bruker breadcrumb-koblinger for å vise hvor produktet har solgt det beste og oppfordrer besøkende til å klikke gjennom til de relaterte kategoriene.
Amazonas breadcrumbs er forbausende lange, så de er verdt å studere hvis du har et nettsted med et veldig dypt hierarki.
10. Etsy
Den massive online-håndverks- og håndverk-e-handelssiden Etsy utvikler stadig sin design. Den ble grunnlagt i 2005 og ser på nettstedet nå kan du se at de har gjort noen store endringer de siste 10 + årene.
Hvis du sjekker ut noen kategori side Du finner små brødsmuler i øverste venstre hjørne. Disse er ikke like fremtredende i forhold til sidebarnavigasjonen som virkelig føles som den primære måten å søke på.
Men en fin tilleggsvirkning er den totale varelisten i kategorien. Etsy viser hvor mange totale gjenstander som er til salgs i hver underkatastrofe som du graver dypere inn på siden.
En ting jeg vil klage på er mangel på brødsmuler på produktsidene. Dette virker som et reelt tilsyn til brukergrensesnittet, og jeg håper de legger til det som går framover.
11. LinuxInsider
Denne breadcrumb designen er ikke spesielt vakker, men den har en funksjon som griper min oppmerksomhet.
Du vil legge merke til en «Neste artikkel» -link nær toppen av hver LinuxInsider innlegg . Dette vises direkte ved siden av breadcrumb, så det føles som en del av navigasjonen.
Brukere som samhandler med breadcrumbs ønsker vanligvis å grave rundt i disse crumb kategorier, slik at denne ekstra linken gir mening. Alle som er interessert i Linux-programvare, vil kanskje hoppe rett til neste artikkel i den kategorien.
