11 måder Breadcrumbs Bolster UX Design
Hjemmeside breadcrumbs forbedre brugeroplevelsen opmuntrer brugerne til at grave dybere ind i dit websteds hierarki og samtidig fortælle besøgende præcis, hvor de er på en given side. Googles breadcrumb skema er en anden værdifuld grund til at opsætte brødkrummer. Men designfaktoren er altid vanskelig, så det hjælper med at studere eksempler og samle ideer.
Dette er nogle af mine foretrukne breadcrumb-stilarter, og de skal give et godt udgangspunkt for nye designprojekter.
1. Wayfair
Wayfair hjemmeside har meget ret og hele deres UX er fænomenal side til side. En ting jeg virkelig kan lide er deres breadcrumb stil, fordi den ikke er for stor, men heller ikke for lille og heller ikke påtrængende.
Du finder disse krummer på produkt sider og kategori sider så de følger dig rundt hele stedet. Dette lader dig springe en kategori eller to fra en hvilken som helst detaljeret side.
Og breadcrumb baren får sin egen lille sektion under navigationen med en anden BG farve. Ikke påtrængende, men ikke svært at finde. En fantastisk design stil og en af mine personlige favoritter.
2. Google Support
En anden åbenbar omtale er Google, da de er kendt for utrolig UX arbejde . Du finder brødkrummer på de fleste Google-produkter med tierede sider, og et af de bedste er Google Support websted.
Deres support sider giver råd om alt fra skema til analyse og værktøjet Søgekonsol. Hver side har brødkrummer, og disse krummer indtager en lignende plads som siden overskriften, så de er tydeligt synlige.
Igen bemærke, hvordan disse links blend i pænt uden at hoppe ud af siden. De føler sig meget naturlige i designet, og dette bør altid være målet med dine brødkrummer.
3. MSDN Docs
Der er en rigtig unik breadcrumb funktion i MSDN Docs som jeg virkelig kan lide. Det har alle de typiske designfunktioner som pile ikoner og kategoriske links, men det endelige link i kæden har en brugerdefineret dropdown med ekstra sider.
Jeg har aldrig set dette før på nogen breadcrumb design, men det er utroligt værdifuldt for brugeren. Typisk ville det kræve en anden navigationsmenu for at få adgang til disse links, men med et websted som Microsoft er der så mange sider at gå igennem.
For ikke at nævne dokumentation kan det være ret komplekst, så det er ikke det nemmeste at lave brødkrummer til. Denne teknik er strålende og værd at bruge, hvis du har et komplekst hierarki på dit websted.
4. Apple
På Apples hjemmeside har jeg set masser af brødkrummer på tværs af mange sider som online shop sider og produkt sider. Men en mindre detaljer, der fik øje på mig, er footer link område med en lille breadcrumb over deres bund links.
Apple er et stort firma med mange sider og ressourcer. Denne breadcrumb ville være værd at tilføje til toppen af siden også, men det gør bestemt ikke ondt at være tæt på bunden.
Jeg vil opfordre designere til at prøve dette og se, hvordan det virker. Footer brødkrummer er bestemt ikke normen, men de hjælper med visuel navigation.
5. TechRadar
Størstedelen af brødkrummer, som jeg finder, er normalt på firmasider eller e-handelsbutikker. Men blogs har ofte deres egne brødkrummer også, og et godt eksempel er TechRadar artikelside .
Hver breadcrumb er temmelig lille med et link direkte til hovedkategorien og en kopi af artiklens titel. For denne type blog er det svært at retfærdiggøre brødkrummer, fordi der ikke er meget af et hierarki.
Men det fungerer godt, hvis du ikke har et andet sted at tilføje artiklens kategori på siden.
6. TutsPlus
For en meget mere detaljeret breadcrumb design tjek den TutsPlus blog . Hver artikel indeholder en lille brødkrumme øverst på siden, herunder de primære og sekundære kategorier.
Jeg kan godt lide dette design meget, fordi det blander sig naturligt ind i overskriften på siden. Så i stedet for at duplikere overskriften i en breadcrumb og i en overskrift tag kombinerer dette alt sammen i ét element, så
overskriften er en del af breadcrumb.
Bemærk, at dette ikke bruger korrekt Google-skema, så det ikke vises med brødkrummer i søgning. Men i betragtning af, at der ikke er nogen indflydelse på CTR, sætter jeg pris på design og brugbarhed på siden langt mere end SEO-fordele (eller manglende).
7. Coolspotters
Traditionelle brødkrummer holder normalt med et par tekstsymboler som den forreste skråstreg eller højre pilbeslag (>). Disse arbejder, fordi de har været brugt i årtier, og brugerne er bekendt med dem.
Men jeg kan godt lide at se andre breadcrumb design trends som på Coolspotters . De bruger brugerdefinerede breadcrumb links, der har pile indbygget i linkelementerne.
Du kan finde masser af open source breadcrumb stilarter ligesom disse til dit eget websted. Det er en fantastisk måde at jazz op på dette meget traditionelle sideelement.
8. MarketWatch
At komme tilbage til det grundlæggende er online-nyhedswebstedet MarketWatch . Alle deres interne stillinger feature breadcrumb navs med højre pegende pil ikoner temmelig lille tekst.
I dette tilfælde synes jeg, at den lille tekst fungerer godt. Det er ikke ligefrem svært at bruge brødkrummerne, men de føler sig mindre og mindre signifikante end resten af siden.
Blogs og nyhedswebsteder fungerer bedre med mindre brødkrummer, fordi det egentlige fokus er indholdet. Det er dog sjovt at passe dem i et sted, og dette design er et godt eksempel.
9. Amazon
Alle elsker Amazon for deres store varebeholdning og gratis forsendelse. Men de har også et fantastisk sted, og der er ingen måde jeg kunne passere over deres breadcrumb design.
Mange produkt sider Har et sæt brødkrummer nær den øverste navigation. Dette er altid super lang, fordi Amazonas kategorier bliver dybe. Dette er værdifuldt for forbrugerne at se, hvilke kategorier der kan være værd at surfe på og værdifulde for designere / webmastere at studere Amazons massive produktstruktur.
Men hvis du ruller ned på hver produktside, finder du en "produktinformation" eller "produktdetaljer" sektion med de bedste sælgere.
Denne funktion bruger breadcrumb links til at vise, hvor produktet har solgt det bedste og opfordrer besøgende til at klikke igennem til de relaterede kategorier.
Amazons brødkrummer er vidunderligt lange, så de er værd at studere, hvis du har et websted med et meget dybt hierarki.
10. Etsy
Den massive online DIY / håndværk ecommerce site Etsy stiger konstant deres design. Det blev grundlagt i 2005 og kigger på webstedet nu kan du se, at de har lavet nogle store ændringer i løbet af de sidste 10 + år.
Hvis du tjekker noget kategori side Du finder små brødkrummer i øverste venstre hjørne. Disse er ikke så fremtrædende i forhold til sidebarnavigationen, som virkelig føles som den primære måde at søge på.
Men en god tilføjet effekt er den samlede vareliste i kategorien. Etsy viser, hvor mange samlede varer der er til salg i hver underkat, som du graver dybere ind på siden.
Én ting jeg vil klage over er manglen på brødkrummer på produktsider. Dette virker som et reelt tilsyn til brugergrænsefladen, og jeg håber, at de tilføjer det fremad.
11. LinuxInsider
Dette breadcrumb design er ikke særlig smukt, men det har en funktion der griber min opmærksomhed.
Du vil bemærke et link "Næste artikel" nær toppen af hver LinuxInsider post . Dette vises direkte ud for breadcrumb, så det føles som en del af navigationen.
Brugere, der interagerer med brødkrummer, ønsker typisk at grave rundt i disse crumb kategorier, så dette ekstra link giver mening. Enhver, der er interesseret i Linux-software, kan måske hoppe direkte til næste artikel i den pågældende kategori.
