Breadcrumb Navigation Bästa praxis och exempel

Breadcrumb navigering är ofta förbisedd i design och utvecklingsprocessen. Vissa människor kan se det som onödigt medan andra kan känna att det är för stort av ett krångel för vad det är värt. Fakta i saken är att breadcrumb-navigering avsevärt ökar användbarheten hos en webbplats.

Breadcrumbs ger användarna ett alternativt sätt att navigera, låta dem se var de står i hierarkin på en webbplats och minska antalet steg som behövs för att navigera till en högre nivå inom en webbplats.

Skisserat här är de olika typerna av breadcrumb-navigering som används idag, varför de är viktiga och hur de bäst ska implementeras online. Också här ingår för din referens över 30 exempel på hur breadcrumbs används online idag.

Kom ihåg att även om det är troligt att breadcrumb-navigering inte kommer att göra eller bryta en webbplats, kommer det att ge en extra fördel för dina användare genom att öka webbplatsens övergripande användbarhet och funktionalitet.

Breadcrumb Typer

Väg

Banbaserade brödsmulor anger stegen eller sökvägen som en användare har tagit för att komma fram till den aktuella sidan på en webbplats. Dessutom kommer användarna att se länkar till sidor de tidigare har besökt för att nå den aktuella sidan. Av de tre typerna av breadcrumb-navigering är banbaserad breadcrumb-navigering minst populär online. Anledningen är att banbaserad breadcrumb-navigation ger liknande funktionalitet till “Framåt” och “Tillbaka” knappar på en webbläsare. För de flesta webbplatser Platsbaserad och attributbaserad breadcrumb-navigation ger bättre funktionalitet.

Plats

Platsbaserade brödsmulor anger användaren där den aktuella sidan står i webbplatsens hierarki. Denna typ av breadcrumb-navigering ses mest på webbplatser med mer än två nivåer av djup eller innehåll. När du flyttar vidare till en webbplats får användarna länkar till sidor eller kategorier som fungerar som en “förälder” eller en nivå upp från den sida som de tittar på. Till exempel kan en användare vara på “Tala” sida, dock “Vad vi gör” sidan är en förälder till “Tala” sida medan “Hem” sidan är en förälder till “Vad vi gör” sida.

Clearleft Ltd

Attribut

Attributsbaserade brödsmulor indikerar för användaren de attribut eller kategorier som tillskrivs den aktuella sidan på en webbplats. Ofta sett på e-handelswebbplatser kan produkterna inte bara falla in i en kategori utan även under vissa attribut. Till exempel kan ett fordon kategoriseras som en SUV, då har attributen att vara färg svart och släppt år 2010.

Cars.com

Varför använda brödsmulor?

Bra användbarhet

Breadcrumbs ger ett extra medel som användare enkelt kan navigera på en webbplats. Om en användare landar på en intern sida på din webbplats från en annan källa, kommer brödsmulor att tillåta användaren att se exakt var de ligger inom webbplatsens hierarki. Användaren ges också möjlighet att flytta upp till en högre nivå på webbplatsen när som helst utan några problem.
Lätt att backtracka

Primärnavigationer är inte konstruerade för att följa bakåt, där brödsmulor är. Eftersom backtracking är oerhört populär på nätet, ger lite extra hjälp kan gå långt.
Eliminera ytterligare klick

Breadcrumbs tillåter användare att hoppa från en nivå av en webbplats till nästa utan att behöva använda “framåt-” eller “bakåt” knappar på webbläsaren. Dessutom brödsmulor eliminerar behovet av att användare kontinuerligt tillgriper huvudnavigeringen.
Visar användarhierarkin

Den primära navigeringen på en webbplats kommer inte att återspegla hierarkin för varje sida på webbplatsen. Att ge användare brödsmulor ger dem möjlighet att se hierarkin för en sida på en webbplats.
Visuellt tilltalande

Inte bara gör brödsmulor användarna extra användbarhet, de gör det utan att ta upp mycket utrymme eller utrymme på sidan. Breadcrumbs är lätta att genomföra i den visuella designen på din webbplats och ger en stor fördel för användarna.
Ger ytterligare hjälp

Det är helt möjligt att vissa användare kanske inte förstår hur en webbplatsens primära navigering fungerar och i vissa fall kan användarna inte ens veta vad de letar efter. Att ge användare brödsmulor ger dem möjlighet att se den övergripande utvecklingen och strukturen på en webbplats så att de kan navigera på webbplatsen bättre.
Lägre avvisningspriser

Brödsmulor ger vanligtvis en mer detaljerad navigering än den primära navigeringen. Därefter får användarna fler alternativ om hur man navigerar på en webbplats. Att ge dem möjlighet att enkelt spåra några nivåer på webbplatsen sänker din avvisningsfrekvens.
Byggar Intressen

När en användare landar på en intern sida på en webbplats odds är de redan på en intressant sida. Breadcrumbs kan ge länkar till ytterligare sidor och information som användaren är intresserad av utan att starta dem från fyrkant.

Breadcrumb Best Practices

Använd brödsmulor högst upp på en sida

Den vanligaste och instinktiva placeringen för brödsmulor ligger längst upp på en sida. Detta gör det möjligt för användare att hitta brödsmulorna på ett okomplicerat sätt och utnyttja dem i enlighet därmed.
Använd Breadcrumbs konsekvent

Om du bestämmer dig för att använda brödsmulor, se till att du använder dem över hela din webbplats. Att ge användare brödsmulor på vissa sidor och inte andra kommer bara att förvirra och frustrera dem. (Ett bra exempel på detta är Amazon eftersom de tar bort brödsmulor från de enskilda produktsidorna.)
Breadcrumbs bör gradera Gracefully

Breadcrumbs bör alltid börja med hemsidan och försämras till den aktuella sidan. Då måste dina brödsmulor gå från högsta nivå till lägsta nivå ett steg åt gången.
Stylize Breadcrumbs Passande

Du vill att dina brödsmulor ska ses men du vill inte att de ska vara kontaktpunkten. Du vill också göra det uppenbart att dina brödsmulor inte ingår i huvudinnehållet på en sida, bara ytterligare stöd till det. Hitta ett gott medium där dina brödsmulor är märkbara men inte överdrivande.
Kategorisidor tydligt

Om du har sidor som faller i två eller flera kategorier kan du inte använda brödsmulor på din webbplats. Att försöka placera en sida under två eller flera kategorier kommer sannolikt endast att producera oklara brödsmulor och pussel användaren. Se till att din webbplats har en organiserad hierarki och visas i enlighet med dina brödkorgen.
Tydligt separera varje nivå

Se till att användarna kan skilja skillnaden mellan varje breadcrumb-nivå. Den vanligaste skillnaden mellan nivåer är "större än" tecken (>). Andra goda separatorer inkluderar rätt dubbla vinkelnoteringar (»), snedstreck (/) och pilar (→). Om du använder en vanlig text tecken, använd bara en. (»Är mer tilltalande och effektiv än >>)
Singel ut den nuvarande sidan

Använd en annan stil på sista objektet i en breadcrumb-lista för att fastställa att det är den aktuella sidan som visas. Du kan uppnå detta genom att göra objektet djärv, byter färg, eller betona Det.
Gör inte den aktuella sidan a Link

Det finns inget behov av att göra det sista objektet i en breadcrumb-lista en länk eftersom det är den aktuella sidan som visas. Att skapa en länk här kommer endast att förvirra användarna, särskilt när de klickar på den och inte tas till en ny sida.
Använd inte brödsmulor som sidrubrik

Använda det sista objektet i en breadcrumb-lista som rubriken på en aktuell sida är ineffektiv. Om du väljer att använda brödsmulor gör du det med att lägga till en sidrubrik också.
Breadcrumbs Byt inte Primär Navigation

Brödsmulor får endast användas som stöd för den primära navigeringen, för att aldrig ersätta den primära navigeringen helt och hållet. Du bör alltid ge användarna en primärnavigering från vilken de kan navigera på en webbplats innan du använder breadcrumb-navigering.

Bra exempel på brödsmulor

Vitra Direct

Trekcyklar

Illy

SiteInspire

Mia och Maggie

Intridea

Design av människor

roxy

Blik

Sitepoint

Mål

Walmart

1-800-Flowers

Bästa köp

Amazon.com

Barns & Noble

Lands End

Äpple

Google

jaga

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

OMRÅDE 17

Wufoo

Girl Scouts of Middle Tennessee

Glasgow Collective

Förstfödde

Bell Canada

Grooveshark

Devlounge

Om författaren - Shay Howe är en professionell webb- och användargränssnittare som för närvarande bor i Chicago, IL. Han skriver om webbdesign i sin egen blogg över på lördag och skulle älska att höra från dig på Twitter. Var snäll och fråga honom hej!