Breadcrumb-navigoinnin parhaat käytännöt ja esimerkit

Breadcrumb-navigointi on usein unohdettu suunnitteluprosessissa. Jotkut saattavat nähdä sen tarpeettomana, kun taas toiset saattavat tuntea, että se on liian suuri vaivaa sen arvosta. Tosiasia on, leipäkorjaus parantaa merkittävästi verkkosivuston käytettävyyttä.

Breadcrumbs antaa käyttäjille vaihtoehtoisen navigointimenetelmän, anna heille nähdä, missä ne ovat verkkosivuston hierarkiassa, ja pienentää niiden toimien määrää, joita tarvitaan navigoimaan korkeammalle tasolle verkkosivustossa.

Tässä on kuvattu nykyisin käytettävät erilaiset leipäkorjaustyypit, miksi ne ovat tärkeitä ja miten ne olisi parasta toteuttaa verkossa. Tähän sisältyy myös viittauksesi yli 30 esimerkkiä siitä, miten leipäkorjuja käytetään nykyään verkossa.

Muista, että vaikka on todennäköistä, että roskapostin navigointi ei tee tai katkaise verkkosivustoa, se tarjoaa käyttäjille lisäetua lisäämällä sivuston yleistä käytettävyyttä ja toimivuutta.

Breadcrumb-tyypit

polku

Reittipohjaiset leipäkorvat osoittavat vaiheet tai polun, jonka käyttäjä on ottanut saapua verkkosivuston nykyiselle sivulle. Lisäksi käyttäjät näkevät linkit aiemmin vierailemiinsa sivuihin, jotta he pääsevät nykyiselle sivulle. Kolmen tyyppisestä leipäkorjauksesta navigointi on polkuperusteinen vähiten suosittu verkossa. Syy siihen, että polkuperusteinen leipäkorjaus tarjoaa samanlaisen toiminnallisuuden kuin “Eteenpäin” ja “Takaisin” painikkeita selaimessa. Useimmille sivustoille sijaintipohjainen ja attribuuttipohjainen leipäkorjaus tarjoaa paremman toimivuuden.

Sijainti

Sijaintipohjaiset leipäkerrat osoittavat käyttäjälle, jossa nykyinen sivu on verkkosivuston hierarkiassa. Tämän tyyppinen leipäkorjaus on yleisimmin nähtävissä verkkosivuilla, joissa on enemmän kuin kaksi syvyyttä tai sisältöä. Kun siirrytään edelleen verkkosivustoon, käyttäjille annetaan linkkejä sivuille tai luokkiin, jotka toimivat “vanhempi” tai taso ylöspäin sivulta, jota he katsovat parhaillaan. Käyttäjä voi esimerkiksi olla “Puhua” sivu, mutta “Mitä me teemme” sivu on “Puhua” sivun ollessa “Koti” sivu on “Mitä me teemme” sivu.

Clearleft Oy

ominaisuus

Attribuuttipohjaisilla leipäkorteilla ilmoitetaan käyttäjälle määritteet tai luokat, jotka on kohdistettu verkkosivuston nykyiselle sivulle. Usein sähköisen kaupankäynnin sivustoilla nähtävissä tuotteissa ei voi olla vain luokkaa vaan myös tiettyjä ominaisuuksia. Esimerkiksi ajoneuvo voidaan luokitella maastoautoiksi, ja sen ominaisuudet ovat väriltään mustia ja julkaistaan ​​vuonna 2010.

Cars.com

Miksi käyttää Breadcrumbsia?

• Suuri käytettävyys

  Breadcrumbs tarjoaa lisävälineen, jolla käyttäjät voivat helposti navigoida verkkosivustolla. Jos käyttäjä laskeutuu verkkosivustosi sisäiselle sivulle toisesta lähteestä, käyttäjä voi nähdä tarkalleen, missä ne ovat sivuston hierarkiassa. Käyttäjälle annetaan myös mahdollisuus siirtyä korkeintaan korkeammalle tasolle milloin tahansa ilman mitään vaivaa.

• Helppo taaksepäin

  Ensisijaisia ​​navigointeja ei ole suunniteltu seuraamaan taaksepäin, kun roskakorit ovat. Koska takaisinkytkentä on erittäin suosittu verkossa, se antaa vähän lisäapua.

• Poista ylimääräiset napsautukset

  Breadcrumbs antaa käyttäjille mahdollisuuden hypätä verkkosivun yhdestä tasosta toiseen käyttämättä “eteenpäin” tai “taaksepäin” selaimen painikkeita. Lisäksi röyhelöillä ei ole tarvetta käyttäjien jatkuvaan päävalikkoon.

• Näyttää käyttäjien hierarkian

  Sivuston ensisijainen navigointi ei vastaa sivuston jokaisen sivun hierarkiaa. Käyttäjien leipäkerhojen antaminen antaa heille mahdollisuuden nähdä sivun hierarkian verkkosivustossa.

• Visuaalisesti miellyttävä

  Leipäkirjat eivät ainoastaan ​​anna käyttäjille lisäkäytettävyyttä, vaan tekevät niin ottamatta paljon tilaa tai tilaa sivulle. Breadcrumbs on helppo toteuttaa sivustosi visuaaliseen suunnitteluun ja antaa käyttäjille suurta hyötyä.

• Tarjoaa lisätietoja

  On täysin mahdollista, että jotkut käyttäjät eivät välttämättä ymmärrä, miten sivuston ensisijainen navigointi toimii, ja joissakin tapauksissa käyttäjät eivät ehkä edes tiedä, mitä he etsivät. Käyttäjien leipäkerhojen antaminen antaa heille mahdollisuuden nähdä sivuston yleisen edistymisen ja rakenteen, jotta he voivat navigoida sivustolla paremmin.

• Alhaisemmat palautumisnopeudet

  Tyypillisesti leivonnaiset tarjoavat yksityiskohtaisemman navigoinnin kuin ensisijainen navigointi. Tällöin käyttäjille annetaan enemmän vaihtoehtoja verkkosivuston navigoimiseksi. Heidän mahdollisuutensa seurata helposti muutamia tasoja verkkosivustossa alentaa palautumisnopeutta.

• Rakentaa kiinnostusta

  Kun käyttäjä laskee verkkosivuston sisäiselle sivulle, kertoimet ovat jo kiinnostavalla sivulla. Breadcrumbs voi tarjota linkkejä lisäsivuille ja tiedot, joista käyttäjä on kiinnostunut myös tekemättä niitä neliöistä.

Breadcrumb Best Practices

• Käytä Breadcrumbs-sivua sivun yläreunassa

  Yleisimpiä ja instinktuaalimerkkejä leipäkirjoille on sivun yläosassa. Näin käyttäjät voivat löytää leivänmurut helposti ja käyttää niitä vastaavasti.

• Käytä Breadcrumbs-tuotetta johdonmukaisesti

  Jos päätät käyttää korppujauhoja, varmista, että käytät niitä koko sivustossasi. Joidenkin sivujen roskakorien antaminen käyttäjille ja toiset eivät vain sekoita ja turhauttaa niitä. (Yksi esimerkki tästä on Amazon, koska ne poistavat leikkeleet yksittäisiltä tuotesivuilta.)

• Breadcrumbs pitäisi hajottaa sulavasti

  Breadcrumbs pitäisi aina aloittaa kotisivulla ja alentaa nykyiselle sivulle. Tällöin sinun leipäkorun on siirryttävä korkeimmasta tasosta alimmalle tasolle kerrallaan.

• Stylize Breadcrumbs asianmukaisesti

  Haluatko, että leipäkartat näkyvät, mutta et halua niiden olevan keskipisteenä. Haluat myös tehdä selväksi, että leipäkartat eivät kuulu sivun pääsisältöön, vaan vain lisää tukea. Etsi onnellinen väline, jossa leipäkorvat ovat havaittavissa, mutta eivät kuitenkaan ylivoimaisia.

• Luokittele sivut selkeästi

  Jos sinulla on sivuja, jotka kuuluvat kahteen tai useampaan luokkaan, et ehkä halua käyttää leipäkorjauksia sivustossasi. Yritetään sijoittaa sivu kahteen tai useampaan luokkaan todennäköisesti tuottamaan epäselviä roskakoruja ja paljastamaan käyttäjää. Varmista, että sivustossasi on järjestetty hierarkia ja että se näytetään vastaavasti leivänpurun kautta.

• Erota jokainen taso selvästi

  Varmista, että käyttäjät voivat erottaa kunkin leipäkerran tason. Yleisin tasojen välinen erotin on "suurempi kuin" merkki (>). Muita hyviä erottimia ovat oikea kaksoiskulma-lainausmerkit (»), viistot (/) ja nuolet (→). Jos käytät tavallista tekstiä, käytä vain yhtä. (»On houkuttelevampi ja tehokkaampi kuin >>)

• Yhdistä nykyinen sivu

  Käytä toista tyyliä leipäkorjausluettelon viimeiseen kohtaan selvittääksesi, että se on tällä hetkellä tarkasteltava sivu. Voit tehdä tämän tekemällä kohteen rohkea, muuttaa sen väriä tai korostaen se.

• Älä tee nykyistä sivua Linkiksi

  Ei ole tarvetta tehdä viimeistä roskakorin luetteloa linkistä, koska se on nykyinen sivu, jota tarkastellaan. Linkin luominen täällä vain hämmentää käyttäjiä, varsinkin kun he napsauttavat sitä eivätkä siirry uuteen sivuun.

• Älä käytä leipäkirjoja sivun otsikkona

  Käyttämällä viimeisimmän leikkuulistan luetteloa nykyisen sivun otsikkona on tehoton. Jos päätät käyttää korppuja, tee se myös lisäämällä sivun otsikko.

• Breadcrumbs Älä korvaa ensisijaista navigointia

  Breadcrumbsia käytetään vain ensisijaisen navigoinnin tukena eikä koskaan korvata ensisijaista navigointia kokonaan. Sinun pitäisi aina antaa käyttäjille ensisijainen navigointi, josta he voivat navigoida verkkosivustolla ennen kuin käytät roskakorin navigointia.

Hyviä esimerkkejä leivonnaisista

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia ja Maggie

Intridea

Ihmiset suunnittelevat

Roxy

Blik

SitePoint

Kohde

Walmart

1-800-Flowers

BestBuy

Amazon.com

Barns & Noble

Maan loppu

Omena

Google

ajaa takaa

AbsolutePunk.net

Littman Bros Valaistus

Guardian.co.uk

ALUE 17

Wufoo

Tyttöjen keski-tytöt

Glasgow Collective

Esikoinen

Bell Kanada

Grooveshark

Devlounge

Tietoja kirjoittajasta - Shay Howe on ammattimainen web- ja käyttöliittymäsuunnittelija, joka asuu tällä hetkellä Chicagossa, IL: ssä. Hän kirjoittaa web-suunnittelusta omassa blogissaan osoitteessa letcounthedays ja haluaisi kuulla sinusta Twitterissä. Voit vapaasti kertoa hänelle!