Breadcrumb Navigation parimad tavad ja näited

Breadcrumbi navigeerimine jäetakse disaini ja arendustegevuse käigus sageli tähelepanuta. Mõned inimesed näevad seda ebavajalikuna, samas kui teised võivad tunda, et see on liiga suur vaeva selle väärtuse pärast. Asjaolu on see, et leibkonna navigeerimine suurendab oluliselt veebisaidi kasutatavust.

Breadcrumbs annab kasutajatele alternatiivse navigatsioonimeetodi, võimaldab neil näha, kus nad veebisaidi hierarhias seisavad, ja vähendab nende sammude arvu, mis on vajalikud veebisaidi kõrgemale tasemele liikumiseks.

Siinkohal on kirjeldatud tänapäeval kasutatavaid mitmesuguseid kärbete navigeerimise tüüpe, miks nad on olulised ja kuidas neid kõige paremini võrgus rakendada. Siin on ka teie viide üle 30 näite selle kohta, kuidas praetud riisi täna online kasutatakse.

Pidage meeles, et kuigi tõenäoline on, et lehitsemise navigeerimine veebilehte ei tee ega murda, annab see teie kasutajatele lisakasu, suurendades teie veebisaidi üldist kasutatavust ja funktsionaalsust.

Breadcrumb tüübid

Tee

Rajapõhised leivapaberid näitavad samme või teed, mille kasutaja on võtnud veebisaidi praegusele lehele jõudmiseks. Lisaks sellele näevad kasutajad lingid eelnevalt külastatud lehekülgedele, et jõuda praeguse lehekülje juurde. Kolmest leibkonnatüübi liikumisest on marsruutidel põhinev leibkonna navigeerimine kõige vähem populaarne võrgus. Põhjus on selles, et teekonnapõhine leibkonna navigeerimine pakub sarnast funktsiooni “Edasi” ja “tagasi” nupud brauseris. Enamiku veebisaitide jaoks pakub asukohapõhine ja atribuutidel põhinev leibkonna navigeerimine paremat funktsionaalsust.

Asukoht

Asukohapõhised röstid näitavad kasutajale, kus praegune lehekülg asub veebisaidi hierarhias. Seda tüüpi kärbete navigeerimine on kõige sagedamini nähtav veebisaitidel, kus on rohkem kui kaks sügavust või sisu. Veebilehe edasiseks liikumiseks pakutakse kasutajatele linke lehekülgedele või kategooriatele, mis toimivad a “vanem” või tasemest ülespoole, mida nad praegu vaatavad. Näiteks võib kasutaja olla “Räägi” lehel, aga “Mida me teeme” lehekülg on vanem “Räägi” lehel, samal ajal kui “Kodu” lehekülg on vanem “Mida me teeme” lehel.

Clearleft Ltd.

Atribuut

Atribuutidel põhinevad leivapaberid näitavad kasutajale atribuute või kategooriaid, mis on antud veebisaidi praegusele lehele omistatud. Sageli on e-kaubanduse veebisaitidel näha, et tooted ei pruugi kuuluda ainult kategooriasse, vaid ka teatud omaduste alla. Näiteks võib sõiduki liigitada maasturautomaadiks ja seejärel omada värvi musta värvi ja 2010. aastal avaldatud atribuute..

Cars.com

Miks kasutada Breadcrumbsi?

Suur kasutatavus

Breadcrumbs on täiendav vahend, mille abil saavad kasutajad veebisaidil hõlpsasti navigeerida. Kui kasutaja maandub teie veebisaidi sisemisele lehele teisest allikast, siis võimaldab kasutaja näha täpselt, kus nad saidi hierarhias asuvad. Kasutajale antakse ka võimalus liikuda igal ajahetkel veebisaidi kõrgemale tasemele ilma probleemideta.
Lihtne tagurdada

Esmased navigeerimised ei ole ette nähtud tagurpidi jälgimiseks, sest need on röstitud. Kuna tagasipöördumine on väga populaarne võrgus, annab veidi täiendavat abi kaugele.
Likvideerida täiendavad klõpsud

Breadcrumbs võimaldab kasutajatel hüpata ühelt veebisaidi tasemelt teisele, ilma et peaksite seda kasutama “edasi” või “tagasi” brauseri nupud. Lisaks kõrvaldab röstimine kasutajate vajadust jätkata peamist navigeerimist.
Näitab kasutajate hierarhiat

Veebisaidi esmane navigeerimine ei kajasta saidi iga lehe hierarhiat. Kasutades leivapuru, võimaldab neil näha veebisaidi lehe hierarhiat.
Visuaalselt meeldiv

Pähklipuru ei paku kasutajatele lisaks täiendavat kasutatavust, nad teevad seda ilma palju ruumi või ruumi leheküljel. Breadcrumbs on oma veebisaidi visuaalsesse disaini hõlpsasti rakendatav ja pakub kasutajatele suurt kasu.
Annab täiendavat abi

On täiesti võimalik, et mõned kasutajad ei pruugi mõista, kuidas veebisait esmalt navigeerib ja mõnel juhul ei pruugi kasutajad isegi teada, mida nad otsivad. Kasutades leivapuru, saavad nad näha veebisaidi üldist arengut ja struktuuri, võimaldades neil veebisaidil paremini navigeerida.
Madalamad põrgatuse määrad

Tavaliselt annavad kärnkärud üksikasjalikumat navigatsiooni kui esmane navigatsioon. Seda tehes antakse kasutajatele rohkem võimalusi veebisaidi navigeerimiseks. Võimaldades neil veebilehe mõne taseme kergesti tagasi jälgida, väheneb teie põrkekiirus.
Ehitab huvi

Kui kasutaja maandub veebisaidi sisemisele lehele, on need juba huvipakkuvas lehel. Breadcrumbs võib pakkuda linke täiendavatele lehekülgedele ja teave, millest kasutaja on huvitatud ka ilma, et nad alustaksid ruudust.

Breadcrumb Best Practices

Kasutage lehe ülaosas Breadcrumbsi

Kõige tavalisem ja instinktiivne paigutus leivakorvile on lehe ülaosas. See võimaldab kasutajatel leida leivakorvid lihtsal viisil ja kasutada neid vastavalt.
Kasuta Breadcrumbs'i järjepidevalt

Kui otsustate kasutada riivsai, veenduge, et kasutate neid kogu oma veebilehel. Mõnedele lehtedele pähklihakkamise andmine ja mitte ainult teised segavad neid ja segavad neid. (Üks parimaid näiteid on Amazon, kuna nad eemaldavad üksiktoodete lehtedelt riivsai.)
Breadcrumbs peaks lagunema õrnalt

Breadcrumbs peaks alati algama avalehega ja lagunema praegusele lehele. Seda tehes peavad teie röstijad minema kõige kõrgemale tasemele madalaima tasemeni üks samm korraga.
Stylize Breadcrumbs sobib

Sa tahad, et teie leivapuru oleks näha, aga te ei taha, et nad oleksid keskpunktiks. Samuti tahate teha selgeks, et teie riivsai ei ole lehe põhisisu osa, vaid ainult sellele lisatoetus. Leidke õnnelik meedium, kus teie röstitud marjad on siiski märgatavad, kuid mitte ülevoolav.
Lehekülgede kategoriseerimine selgelt

Kui teil on leheküljed, mis jagunevad kahte või enamasse kategooriasse, ei pruugi te oma kodulehte kasutada. Kahe või enama kategooria lehekülje püüdmine tekitab tõenäoliselt ainult ebaselgeid röstitud riideid ja laseb kasutajal mõista. Veenduge, et teie veebisaidil on organiseeritud hierarhia ja see kuvatakse vastavalt teie leivakorviga.
Selge eraldada iga tase

Veenduge, et kasutajad saaksid eristada iga leivakoormuse taset. Kõige tavalisem tasandite vaheline eraldaja on "suurem kui" märk (>). Teiste heade eraldajate hulka kuuluvad parempoolsed topeltnurga tsitaadid (»), kaldkriipsud (/) ja nooled (→). Kui kasutate tavalist teksti, kasutage ainult ühte. (»On atraktiivsem ja efektiivsem kui >>)
Ühekordne väljavõte

Kasutage leivaplaani viimase elemendi erinevat stiili, et veenduda, et see on hetkel kuvatav lehekülg. Seda saab teha, tehes selle elemendi julge, selle värvi muutmine või rõhutades seda.
Ära tee praegust lehte linkiks

Puudub vajadus leibri viimase elemendi koostamiseks, sest see on praegune leht, mida vaadatakse. Lingi loomine siin ainult segadusse ajada, eriti kui nad seda klõpsavad ja neid ei viida uude lehele.
Ärge kasutage Breadcrumbsi lehekülje pealkirjana

Praeguse lehekülje pealkirjana käivitusnimekirja viimase elemendi kasutamine on ebaefektiivne. Kui otsustate kasutada pähkleid, tehke seda ka lehe pealkirja lisamisega.
Breadcrumbs Ärge asendage esmast navigeerimist

Breadcrumbsi kasutatakse ainult esmase navigeerimise toena, mitte kunagi esmase navigeerimise asendamiseks. Peaksite alati andma kasutajatele esmase navigatsiooni, millest nad saavad enne leibkonna navigeerimist veebisaidil navigeerida.

Breadcrumbsi suurepärased näited

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia ja Maggie

Intridea

Inimeste disain

Roxy

Blik

SitePoint

Sihtmärk

Walmart

1-800-Lilled

Parim ost

Amazon.com

Barns & Noble

Maade lõpp

Apple

Google

Chase

AbsolutePunk.net

Littman Bros Valgustus

Guardian.co.uk

PIIRKOND 17

Wufoo

Tütarlaste tütarlapsed

Glasgow kollektiiv

Esmasündinu

Bell Kanada

Grooveshark

Devlounge

Autori kohta - Shay Howe on professionaalne veebi- ja kasutajaliidese disainer, kes elab praegu Chicago, IL-s. Ta kirjutab veebidisainist oma blogis üle letcounthedays ja sooviks sinult Twitterist kuulda. Palun vabalt öelge talle tere!