Breadcrumb navigációs legjobb gyakorlatok és példák

A Breadcrumb navigációt gyakran figyelmen kívül hagyják a tervezési és fejlesztési folyamatokban. Néhány ember feleslegesnek látja, míg mások úgy érzik, hogy túl nagy a szóváltás, mire érdemes. A tény az, hogy a kenyérsütés navigációja jelentősen növeli a weboldal használhatóságát.

A Breadcrumbs alternatív navigációs módszert biztosít a felhasználóknak, lehetővé teszi számukra, hogy lássák, hol állnak a webhely hierarchiájában, és csökkenti a magasabb szintű navigáláshoz szükséges lépések számát.

Az alábbiakban bemutatjuk, hogy a mai napig milyen fajta navigációs navigációt alkalmaznak, miért fontosak ezek, és hogyan kell őket a legjobban megvalósítani az interneten. A hivatkozáshoz itt is szerepel több mint 30 példa arra, hogyan használják a kenyeret ma online.

Ne feledje, hogy bár valószínű, hogy a navigációs rendszer nem teszi lehetővé a webhely létrehozását vagy megszakítását, további előnyöket biztosít a felhasználók számára a webhely általános használhatóságának és funkcionalitásának növelésével.

Breadcrumb típusok

Pálya

Az útvonal-alapú kenyérrudak jelzik a lépéseket vagy az utat, amelyet a felhasználó egy weboldal aktuális oldalára ér. Továbbá a felhasználók a korábban meglátogatott oldalakra mutató hivatkozásokat fognak látni az aktuális oldal eléréséhez. A háromféle kenyérpálcás navigáció közül a legkevésbé népszerű az útvonal-alapú kenyérhúzás navigáció. Az oka az, hogy a Path-based breadcrumb navigáció biztosítja a hasonló funkciókat “Előre” és “Hát” gombok a böngészőben. A legtöbb webhelyen a helymeghatározó és az attribútum alapú kenyérpirító navigáció jobb funkcionalitást biztosít.

Elhelyezkedés

A helyalapú kenyérrudak jelzik azt a felhasználót, ahol az aktuális oldal a webhely hierarchiájában áll. Ez a fajta kenyérpirító navigáció leggyakrabban olyan webhelyeken jelenik meg, amelyek több mint két mélységi vagy tartalmi szinttel rendelkeznek. A webhelyre való továbblépéskor a felhasználók olyan oldalakra vagy kategóriákra mutató hivatkozásokat kapnak, amelyek a következőképpen működnek “szülő” vagy egy szinttel feljebb a jelenleg megtekintett oldalról. Például, a felhasználó lehet a “Beszél” oldal azonban “Amit csinálunk” az oldal szülője “Beszél” oldal, míg a “itthon” az oldal szülője “Amit csinálunk” oldal.

Clearleft Kft

Tulajdonság

Az attribútumalapú kenyérrudak jelzik a felhasználónak a webhelyen lévő aktuális oldalhoz rendelt attribútumokat vagy kategóriákat. Az e-kereskedelmi webhelyeken gyakran látható, hogy a termékek nem csak egy kategóriába tartoznak, hanem bizonyos attribútumok mellett is. Például egy jármű a SUV kategóriába sorolható, majd a 2010-es években megjelent fekete színű és tulajdonságai..

Cars.com

Miért használja a Breadcrumbs-ot?

• Nagy használhatóság

  A Breadcrumbs egy további eszköz, amellyel a felhasználók könnyen navigálhatnak egy weboldalon. Ha egy felhasználó a webhelyén található belső oldalra más forrásból származó lapot használ, akkor a felhasználó pontosan meg tudja találni, hogy hol tartózkodnak a webhely hierarchiájában. A felhasználónak lehetősége van arra is, hogy bármelyik időpontban magasabb szintre léphessen, anélkül, hogy problémát okozna.

• Könnyen visszafelé

  Az elsődleges navigációkat nem úgy tervezték, hogy visszafelé kövessék őket. Mivel a visszamutatás rendkívül népszerű az interneten, így egy kicsit több segítséget is lehet elérni.

• A további kattintások megszüntetése

  A Breadcrumbs lehetővé teszi a felhasználók számára, hogy a webhely egyik szintjéről a következőre ugorjanak, anélkül, hogy használni kellene a webhelyet “előre” vagy “hátrafelé” gombok a böngészőben. Továbbá a zsemlemorzsák megszüntetik a felhasználóknak a fő navigáció folyamatos igénybevételének szükségességét.

• Megmutatja a felhasználók hierarchiáját

  A webhely elsődleges navigációja nem tükrözi a webhely minden oldalának hierarchiáját. A felhasználóknak a zsemlemorzsák megadása lehetővé teszi számukra, hogy a weboldalon belül egy oldal hierarchiáját láthassák.

• Vizuálisan kellemes

  Nemcsak a zsemlemorzsák a felhasználók számára további használhatóságot biztosítanak, anélkül, hogy sok helyet vagy helyet foglalnának az oldalon. A Breadcrumbs könnyen megvalósítható webhelye vizuális tervezésében, és nagy előnyökkel jár a felhasználók számára.

• További segítséget nyújt

  Teljesen lehetséges, hogy egyes felhasználók nem érthetik meg, hogyan működik az elsődleges webhely, és bizonyos esetekben a felhasználók nem is tudják, hogy mit keresnek. Lehetővé teszi számukra, hogy a felhasználók a zsemlemorzsával megismerjék a weboldal általános fejlődését és szerkezetét, így jobban navigálhatnak a webhelyen.

• Alacsonyabb visszafordulási arányok

  Általában a zsemlemorzsák részletesebb navigációt biztosítanak, mint az elsődleges navigáció. Ennek során a felhasználók több lehetőséget kapnak a webhely navigálására. Lehetővé teszi számukra, hogy a webhelyen belül néhány szintet könnyen visszafelé nyomon követhessék a visszafordulási arányt.

• Érdeklődést épít

  Amikor egy felhasználó egy weboldal belső oldalára kerül, az esélye, hogy már szerepelnek egy érdekes oldalon. A Breadcrumbs linkeket is tartalmazhat olyan további oldalakra és információkra, amelyekről a felhasználó is érdeklődik anélkül, hogy négyzetből indulna.

Breadcrumb legjobb gyakorlatok

• Használja a Breadcrumbs-ot az oldal tetején

  A zsemlemorzsák leggyakoribb és ösztönös elhelyezése az oldal tetején található. Ez lehetővé teszi a felhasználók számára, hogy könnyen megtalálják a zsemlemorzsákat, és használják őket megfelelően.

• Breadcrumbs konzisztens használata

  Ha úgy dönt, hogy kenyeret használ, győződjön meg róla, hogy az egész webhelyen használja őket. Néhány oldalra adva a felhasználóknak a zsemlemorzsákat, és nem mások is csak összekeverik és megzavarják őket. (Az egyik legjobb példa erre az Amazon, mivel eltávolítják az egyes termékoldalakról a zsemlemorzsákat.)

• A Breadcrumbs kíméletesen romlik

  A Breadcrumbs-t mindig a kezdőlappal kell elkezdeni, és az aktuális oldalra kell bontaniuk. Ennek során a zsemlemorzsáknak a legmagasabb szintről a legalacsonyabb szintre kell mennie egy lépésenként.

• Stylize Breadcrumbs megfelelően

  Azt szeretné, ha a zsemlemorzsait látnánk, de nem akarod, hogy azok a fókuszpontok legyenek. Azt is szeretné nyilvánvalóvá tenni, hogy a zsemlemorzsa nem része az oldal fő tartalmának, csak kiegészítő támogatást nyújt hozzá. Keressen egy boldog médiumot, ahol a zsemlemorzsaik észrevehetőek, de nem túlzott.

• Oldalak egyértelmű kategorizálása

  Ha olyan oldala van, amely két vagy több kategóriába sorolható, előfordulhat, hogy nem kívánja használni a kenyeret a webhelyén. Az oldal két vagy több kategóriába való behelyezése valószínűleg csak bizonytalan zsemlemorzsákat hoz létre, és a felhasználókat rombolja. Győződjön meg róla, hogy webhelye szervezett hierarchiával rendelkezik, és ennek megfelelően jelenik meg a zsemlemorzsával.

• Minden szint egyértelműen elkülönül

  Győződjön meg róla, hogy a felhasználók megkülönböztethetik a különbséget az egyes zsemlemorzsák szintje között. A szintek között a leggyakoribb elválasztó a "nagyobb" karakter (>). Más jó szeparátorok közé tartoznak a jobb kettős szög idézőjelek (»), a vonalak (/) és a nyilak (→). Egyszerű szöveges karakter használata esetén csak egyet használjon. (»Vonzóbb és hatékonyabb, mint >>)

• Egyszeri ki az aktuális oldal

  Használjon egy másik stílust a kenyérsáv utolsó listáján, hogy megállapítsa, hogy ez az aktuális oldal. Ezt az elem elkészítésével érheti el bátor, színének megváltoztatása, vagy hangsúlyozva azt.

• Ne hozza létre az aktuális oldalt linkként

  Nincs szükség arra, hogy az utolsó elemet hozza létre egy linket, mert ez az aktuális oldal. A link létrehozása csak összekeveri a felhasználókat, különösen, ha rákattintanak rá, és nem kerülnek új oldalra.

• Ne használja a Breadcrumbs-t oldalfejlécként

  Az aktuális oldal fejlécének kenyérsáv utolsó listájának használata nem hatékony. Ha úgy dönt, hogy a zsemlemorzsát használja, akkor ezt egy oldalfejléc hozzáadásával is megteheti.

• Breadcrumbs Ne cserélje ki az elsődleges navigációt

  A kenyérrudak csak az elsődleges navigáció támogatására használhatók, soha nem cserélhetik ki teljesen az elsődleges navigációt. Mindig biztosítsa a felhasználók számára az elsődleges navigációt, ahonnan navigálni tudnak a webhelyen, mielőtt használnák a kenyeret.

A Breadcrumbs nagy példái

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia és Maggie

Intridea

Az emberek tervezése

Roxy

Blik

SitePoint

Cél

Walmart

1-800-Virág

Legjobb vásárlás

Amazon.com

Barns & Noble

Lands 'End

alma

Google

Üldözés

AbsolutePunk.net

Littman Bros. Világítás

Guardian.co.uk

TERÜLET 17

Wufoo

Lányok cserkészei a Tennessee középső részén

A Glasgow-i kollektív

Elsőszülött

Bell Kanada

Grooveshark

Devlounge

A szerzőről - Shay Howe egy professzionális webes és felhasználói felület tervező, aki jelenleg Chicagóban, IL-ben él. A web designról saját blogjában írja a letcounthedays-en, és szívesen hallaná Önt a Twitteren. Ne habozzon, mondja meg neki!