Breadcrumb Navigasjon Best Practices & Examples

Breadcrumb navigasjon overses ofte i design og utviklingsprosessen. Noen mennesker kan se det som unødvendig, mens andre kan føle det er for stort av et problem for det som er verdt det. Fakta om saken er at breadcrumb navigasjon vil øke brukbarheten til et nettsted.

Breadcrumbs gi brukerne en alternativ navigasjonsmetode, la dem se hvor de står i hierarkiet til et nettsted og vil redusere antall trinn som trengs for å navigere til et høyere nivå på et nettsted.

Skitsert her er de forskjellige typer breadcrumb-navigasjon som brukes i dag, hvorfor de er viktige, og hvordan de skal best implementeres online. Også inkludert her for din referanse er over 30 eksempler på hvordan breadcrumbs blir brukt online i dag.

Husk at mens det er sannsynlig at breadcrumb-navigasjon ikke vil gjøre eller ødelegge et nettsted, vil det gi en ekstra fordel for brukerne ved å øke brukervennligheten og funksjonaliteten til nettstedet ditt.

Breadcrumb Typer

Sti

Banebaserte brødkrummer angir trinnene eller banen som en bruker har tatt for å komme til den nåværende siden av et nettsted. Videre vil brukerne se lenker til sider de tidligere har besøkt for å nå den nåværende siden. Ut av de tre typer breadcrumb-navigasjon er banbasert breadcrumb-navigasjon minst populær på nettet. Årsak er at banebasert breadcrumb-navigasjon gir lignende funksjonalitet til “Framover” og “Tilbake” knapper på en nettleser. For de fleste nettsteder Stedbasert og Egenskapsbasert breadcrumb-navigering gir bedre funksjonalitet.

plassering

Stedbaserte brødkrummer indikerer til brukeren hvor den nåværende siden står i nettstedets hierarki. Denne typen breadcrumb navigasjon er mest sett på nettsteder med mer enn to nivåer av dybde eller innhold. Ved å flytte videre til et nettsted, får brukerne lenker til sider eller kategorier som fungerer som en “forelder” eller et nivå opp fra siden de ser på. For eksempel kan en bruker være på “Snakke” side, men “Hva vi gjør” siden er forelder for “Snakke” side mens “Hjem” siden er forelder for “Hva vi gjør” side.

Clearleft Ltd

Egenskap

Attributtbaserte brødsmuler indikerer til brukeren attributtene eller kategoriene som tilskrives den gjeldende siden på et nettsted. Ofte sett på e-handels nettsteder, kan produktene ikke bare falle inn i en kategori, men også under visse attributter. For eksempel kan et kjøretøy kategoriseres som en SUV, da har egenskapene til å være fargen svart og utgitt i år 2010.

Cars.com

Hvorfor bruke brødsmuler?

Stor brukervennlighet

Breadcrumbs gir en ekstra måte som brukerne enkelt kan navigere på et nettsted. Hvis en bruker lander på en intern side på nettstedet ditt fra en annen kilde, vil breadcrumbs tillate brukeren å se nøyaktig hvor de står innenfor nettstedets hierarki. Brukeren får også mulighet til å flytte opp til et høyere nivå på nettsiden til enhver tid uten problemer.
Lett å Backtrack

Primære navigasjoner er ikke konstruert for å bli fulgt bakover hvor brødkrummer er. Siden backtracking er ekstremt populær på nettet, kan det hende at en liten ekstra hjelp kan gå langt.
Fjern ytterligere klikk

Breadcrumbs tillater brukere å hoppe fra ett nivå av et nettsted til det neste uten å måtte bruke “framover” eller “bakover” knapper på nettleseren. Dessuten eliminerer brødkrummer behovet for at brukerne alltid går til hovednavigasjonen.
Viser brukere hierarki

Den primære navigasjonen til et nettsted vil ikke gjenspeile hierarkiet til hver side på nettstedet. Å gi brukerne breadcrumbs vil tillate dem å se hierarkiet for en side på et nettsted.
Visuelt behagelig

Ikke bare gjør brødsmuler brukerne ekstra brukbarhet, de gjør det uten å ta opp mye plass eller plass på siden. Brødsmuler er enkle å implementere i den visuelle utformingen av nettstedet ditt og gir en stor fordel for brukerne.
Gir ytterligere hjelp

Det er helt mulig at noen brukere kanskje ikke forstår hvordan en primærnavigasjon på nettstedet fungerer, og i noen tilfeller kan brukerne ikke engang vite hva de leter etter. Å gi brukere breadcrumbs vil tillate dem å se den generelle fremdriften og strukturen til et nettsted, slik at de kan navigere på nettstedet bedre.
Lavere avkastningspriser

Vanligvis vil breadcrumbs gi en mer detaljert navigering enn primærnavigasjonen. Da får brukerne flere alternativer på hvordan man navigerer på et nettsted. Å gi dem muligheten til enkelt å spore noen nivåer på nettsiden, vil senke studsene.
Bygger interesse

Når en bruker lander på en intern side av et nettsted odds er de allerede på en side av interesse. Brødsmuler kan gi koblinger til flere sider og informasjon som brukeren også er interessert i, uten at de starter fra firkantet.

Breadcrumb Best Practices

Bruk brødsmuler øverst på en side

Den vanligste og instinktiske plasseringen for brødsmuler er innenfor toppen av en side. Dette gjør det mulig for brukere å finne breadcrumbs på en ukomplisert måte og gjøre bruk av dem tilsvarende.
Bruk brødsmuler konsekvent

Hvis du bestemmer deg for å bruke brødsmuler, må du sørge for at du bruker dem på hele nettstedet ditt. Å gi brukerne brødkrummer på enkelte sider og ikke andre, vil bare forvirre og frustrere dem. (Et godt eksempel på dette er Amazon fordi de fjerner brødsmuler fra de enkelte produktsidene.)
Breadcrumbs burde nedbrytes grasiøst

Breadcrumbs bør alltid starte med hjemmesiden og degradere til den aktuelle siden. Ved å gjøre det må brødkrummene dine gå fra høyeste nivå til laveste nivå ett trinn av gangen.
Stylize Breadcrumbs Passende

Du vil at dine brødkrummer skal ses, men du vil ikke at de skal være fokuspunktet. Du vil også gjøre det tydelig at dine brødkrummer ikke er en del av hovedinnholdet på en side, bare ekstra støtte til det. Finn et godt medium hvor dine breadcrumbs er merkbare, men ikke overbærende.
Kategoriser sider tydelig

Hvis du har sider som faller inn i to eller flere kategorier, vil du kanskje ikke bruke brødsmuler på nettstedet ditt. Å forsøke å legge inn en side under to eller flere kategorier vil trolig bare produsere uklare breadcrumbs og puslespillet til brukeren. Sørg for at nettstedet ditt har et organisert hierarki og vises i henhold til dine brødkrummer.
Klart skille hvert nivå

Sørg for at brukerne kan skille forskjellen mellom hvert breadcrumb-nivå. Den vanligste separatoren mellom nivåene er karakteren 'større enn' (>). Andre gode separatorer inkluderer høyre doble vinkelnoteringer (»), skråstreker (/) og piler (→). Hvis du bruker et vanlig tekstkarakter, bruk bare en. (»Er mer tiltalende og effektiv enn >>)
Enkelt ut på gjeldende side

Bruk en annen stil på det siste elementet i en breadcrumb-liste for å fastslå at det er den aktuelle siden som vises. Du kan oppnå dette ved å gjøre varen modig, endrer farge, eller streker den.
Ikke gjør gjeldende side a Link

Det er ikke nødvendig å gjøre det siste elementet i en breadcrumb-liste en kobling fordi det er den nåværende siden som vises. Å opprette en kobling her vil bare forvirre brukere, spesielt når de klikker på det og ikke blir tatt til en ny side.
Ikke bruk brødsmuler som en sideoverskrift

Bruke det siste elementet i en breadcrumb-liste som overskriften til en gjeldende side er ineffektiv. Hvis du velger å bruke brødsmuler, gjør du det med tillegg av en sideoverskrift også.
Breadcrumbs Bytt ikke primærnavigasjon

Brødsmuler skal bare brukes som støtte til primærnavigasjonen, og aldri å erstatte primærnavigasjonen helt. Du bør alltid gi brukerne en primærnavigasjon som de kan navigere på et nettsted før du bruker breadcrumb navigering.

Gode eksempler på brødkrem

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia og Maggie

Intridea

Design av mennesker

roxy

Blik

Sitepoint

Mål

Walmart

1-800-Flowers

Beste kjøp

Amazon.com

Barns & Noble

Landets ende

eple

Google

jage

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

OMRÅDE 17

Wufoo

Girl Scouts of Middle Tennessee

The Glasgow Collective

Førstefødte

Bell Canada

Grooveshark

Devlounge

Om forfatteren - Shay Howe er en profesjonell web- og brukergrensesnittsdesigner som for tiden bor i Chicago, IL. Han skriver om webdesign i sin egen blogg over på lørdagstid og vil gjerne høre fra deg på Twitter. Ta gjerne fortell ham hei!