11 sätt Breadcrumbs Bolster UX Design
Webbsida breadcrumbs förbättra användarupplevelsen uppmuntra användare att gräva djupare in i din webbplats hierarki, samtidigt som de berättar besökare exakt var de är på en viss sida. Googles breadcrumb schema är en annan värdefull anledning att installera brödsmulor. Men designfaktorn är alltid knepig, så det hjälper till att studera exempel och samla idéer.
Det här är några av mina favoritbrödcrumb-stilar och de bör ge en bra utgångspunkt för nya designprojekt.
1. Wayfair
Wayfairs hemsida gör mycket rätt och hela UX är en fenomenal sida till sida. En sak som jag verkligen gillar är deras breadcrumb-stil eftersom den inte är för stor, men inte heller för liten och inte påträngande heller.
Du hittar dessa smulor på produktsidor och kategori sidor så följer de dig runt hela webbplatsen. Detta låter dig hoppa en kategori eller två från någon detaljerad sida.
Och breadcrumb-fältet får sin egen lilla del under navigeringen med en annan BG-färg. Inte påträngande men inte svårt att hitta heller. En stor designstil och en av mina personliga favoriter.
2. Google Support
En annan uppenbar uppgift är Google eftersom de är kända för otroligt UX-arbete . Du hittar brödsmulor på de flesta Google-produkter med tierade sidor och en av de bästa är Google Support webbplats.
Deras supportsidor erbjuder råd om allt från schema till analys och verktyget Sökkonsol. Varje sida har brödsmulor och dessa smulor upptar ett liknande utrymme som sidans rubrik så att de är tydligt synliga.
Återigen märker hur dessa länkar blandar sig snyggt utan att hoppa av sidan. De känner sig väldigt naturliga i designen och det borde alltid vara målet med dina brödsmulor.
3. MSDN-dokument
Det finns en riktig unik breadcrumb-funktion i MSDN-dokument som jag verkligen gillar. Den har alla typiska designfunktioner som pilikoner och kategoriska länkar, men den sista länken i kedjan har en anpassad rullgardinsmeny med extra sidor.
Jag har aldrig sett det här tidigare på någon form av breadcrumb men det är oerhört värdefullt för användaren. Vanligtvis skulle det behöva en annan navigeringsmeny för att komma åt dessa länkar, men med en webbplats som Microsoft finns det så många sidor att gå igenom.
Att inte tala om dokumentation kan vara ganska komplex så det är inte det enklaste att skapa brödsmulor för. Denna teknik är lysande och väl värt att använda om du har en komplex hierarki på din webbplats.
4. Apple
På Apples hemsida har jag sett massor av brödsmulor på många sidor som webbshopsidor och produktsidor. Men en liten detalj som fångade mitt öga är footer länkområde med en liten breadcrumb ovanför sina nedre länkar.
Apple är ett stort företag med många sidor och resurser. Denna brödcrumb skulle vara värt att lägga till överst på sidan också men det gör inte ont för att vara nära botten.
Jag skulle uppmuntra designers att prova detta och se hur det fungerar. Footer brödsmulor är verkligen inte normen men de hjälper till med visuell navigering.
5. TechRadar
Majoriteten av brödsmulor som jag hittar är vanligtvis på företags webbplatser eller e-handelsbutiker. Men bloggar har ofta sina egna brödsmulor också och ett bra exempel är TechRadar artikel sida .
Varje breadcrumb är ganska liten med en länk direkt till huvudkategorin och en kopia av artikelns titel. För denna typ av blogg är det svårt att rättfärdiga brödsmulor eftersom det inte finns mycket av en hierarki.
Men det här fungerar bra om du inte har någon annan plats att lägga till artikelns kategori på sidan.
6. TutsPlus
För en mycket mer detaljerad breadcrumb design kolla in TutsPlus blogg . Varje artikel har en liten brödkorg längst upp på sidan, inklusive de primära och sekundära kategorierna.
Jag gillar den här designen mycket eftersom den blandar sig naturligt i rubriken på sidan. Så istället för att duplicera rubriken i en brödcrumb och i en rubrik, kombinerar det allt i ett element så att
rubrik är en del av breadcrumb.
Observera att detta inte använder korrekt Google-schema så det visas inte med brödsmulor i sökningen. Men med tanke på att knappt påverkar CTR, värderar jag designen och användbarheten på sidan mycket mer än SEO-fördelar (eller brist på det).
7. Coolspotters
Traditionella brödsmulor sticker vanligtvis med några textsymboler som framåtskuren eller högerpilfästet (>). Dessa arbete eftersom de har använts i årtionden och användarna är bekanta med dem.
Men jag gillar alltid att se andra brödcrumb designtrender som på Coolspotters . De använder anpassade breadcrumb länkar som har pilar inbyggda i länkelementen.
Du kan hitta gott om open source breadcrumb stilar Precis som dessa för din egen webbplats. Det är ett bra sätt att jazz upp detta mycket traditionella sidelement.
8. MarketWatch
Att komma tillbaka till grunderna är den elektroniska nyhetssidan Market . Alla deras interna inlägg funktionen breadcrumb navs med höger pekande pil ikoner ganska liten text.
I det här fallet tycker jag att den lilla texten fungerar bra. Det är inte exakt svårt att använda brödsmulorna men de känner sig mindre och mindre signifikanta än resten av sidan.
Bloggar och nyhetssajter fungerar bättre med mindre brödsmulor eftersom det verkliga fokuset är innehållet. Det är ändå trevligt att passa dem i någonstans och denna design är ett bra exempel.
9. Amazon
Alla älskar Amazon för deras stora lager och gratis frakt. Men de har också en fantastisk plats och det finns inget sätt att jag kunde passera över deras breadcrumb design.
Många produktsidor ha en uppsättning brödsmulor nära den allra högsta navigeringen. Det här är alltid superlängt eftersom Amazonas kategorier blir djupa. Detta är värdefullt för konsumenterna att se vilka kategorier som kan vara värda att surfa och värdefulla för designers / webmasters att studera Amazons massiva produktstruktur.
Men om du rullar ner på varje produktsida hittar du en "produktinformation" eller "produktinformation" sektion med bästa säljare listor.
Den här funktionen använder breadcrumb-länkar för att visa var produkten har sålt det bästa och uppmuntrar besökare att klicka till de relaterade kategorierna.
Amazons brödsmulor är underbara långa, så de är värda att studera om du har en webbplats med en mycket djup hierarki.
10. Etsy
Den massiva online-DIY / hantverks-e-handelsplatsen Etsy utvecklar ständigt sin design. Det grundades 2005 och tittar på webbplatsen nu kan du se att de har gjort några stora förändringar under de senaste 10 + åren.
Om du checkar ut något kategorisida Du hittar små brödsmulor i det övre vänstra hörnet. Dessa är inte lika framträdande jämfört med sidofältnavigering som verkligen känns som det primära sättet att söka.
Men en fin tillagd effekt är den totala objektlistan inom kategorin. Etsy listar hur många totala objekt som är till salu i varje underkatt när du gräver djupare in på webbplatsen.
En sak jag klagar över är bristen på brödsmulor på produktsidor. Det verkar som ett verkligt tillsyn till användargränssnittet och jag hoppas att de lägger till det som går framåt.
11. LinuxInsider
Denna breadcrumb design är inte särskilt vacker men den har en funktion som tar min uppmärksamhet.
Du märker en länk "Nästa artikel" nära toppen av varje LinuxInsider-posten . Detta visas direkt bredvid breadcrumb så det känns som en del av navigeringen.
Användare som interagerar med brödsmulor vill vanligtvis gräva i dessa krumkategorier så att den här extra länken är meningsfull. Alla som är intresserade av Linux-programvara kan vilja hoppa direkt till nästa artikel i den kategorin.
