Mi az a breadcrumb, vagy breadcrumb navigáció?

A breadcrumb navigációval általában olyan webhelyeken találkozhatsz, ami nagy mennyiségű, hierarchikusan rendezett tartalmat sorakoztat fel. Megjelennek továbbá olyan webes alkalmazásokban is, amelyek több lépésből állnak, hogy a felhasználó pontosan tudja, éppen melyik lépésnél jár, hogy milyeneken van túl, illetve esetenként, hogy milyenek vannak még hátra. 

A breadcrumb navigáció legegyszerűbb formája a > jellel elválasztott szintek. Ezek a szintek általában hiperhivatkozásokként működnek, hogy a felhasználó bármelyik előző szintre egyetlen kattintással eljuthasson. Webhelyünk is használ breadcrumb navigációt – a jelenlegi szakszótári bejegyzés például a Főoldalon belül, a szakszótárban található, Breadcrumb néven:

A breadcrumb navigáció általában ilyen, vagy ehhez hasonló, a webhely stílusához igazított sávként jelenik meg.

Mikor érdemes breadcrumb navigációt használni?

Habár rendkívül hasznos funkció, nem minden webhelyen ajánlott breadcrumb navigációt alkalmazni.

• Ha webhelyed nagyobb méretű, és hierarchikusan rendezett kategóriákból, illetve alkategóriákból áll, akkor erősen ajánlott breadcrumb navigációt használni. Jó példák erre a webáruházak, ahol a termékek számtalan alkategóriába sorolhatók be, például: Ruhák > Férfi ruhák > Nadrágok > Alkalmi – és így tovább.

Ezzel szemben a kisebb, egyszintes webhelyeken, amelyek tartalmai nincsenek hierarchikus szintekbe vagy csoportokba rendezve, nem érdemes implementálni breadcrumb navigációt.

Ha nem vagy biztos benne, hogy webhelyednek szüksége van-e erre, akkor érdemes először felállítani egy webhelytérképet, amiben láthatod, hogy mely oldalak, kategóriák vannak egymás alá-fölé rendelve. Ez alapján eldöntheted, hogy a breadcrumb navigáció javítana-e egyáltalán a felhasználói élményen, vagy sem.

Fontos észben tartani, hogy a breadcrumb navigáció első sorban egy kényelmi funkció, és nem válthatja ki az alapvető navigációs menüket. Egy másodlagos navigációs opció, ami emlékezteti a felhasználókat, hogy épen hol járnak, és egy alternatív lehetőséget kínál a navigációra.

A breadcrumb navigáció típusai

Helyalapú

A helyalapú breadcrumb sávok megmutatják az adott felhasználónak, hogy éppen hol járnak a webhely hierarchiájában. Ezekkel általában olyan webhelyeken találkozhatsz, amelyek két, vagy több szintből állnak. A MateBalazs.hu is ilyen típusú breadcrumb navigációt használ.

Tulajdonságalapú

A tulajdonságalapú breadcrumb sávok minden egyes szinttel egyre szűkítik a megjelenített tartalmakat, különféle választott szempontok szerint. A legtöbb webáruház ezt a fajta breadcrumb navigációt használja, hogy a felhasználó lássa, milyen termékeket böngészget éppen – például: Szórakoztató elektronika > Televíziók > LED televíziók > 4K > 55” – és így tovább.

Útvonalalapú

Az útvonalalapú breadcrumb sávok azt mutatják meg, hogy a felhasználó milyen lépéseket követve, vagyis milyen útvonalon keresztül jutott el az adott oldalra – tehát dinamikusak.

Érdemes megjegyezni, hogy a breadcrumb navigációs sávok nem csak kattinthatóságuk miatt lehetnek interaktívak – vannak olyan webhelyek, amelyeken ha a felhasználó az egérrel rámutat valamelyik szintre a sávban, akkor megjelenik annak többi alkategóriája is a gyorsabb, kényelmesebb elérés érdekében. Ezt általában csak nagyobb webhelyeken érdemes alkalmazni, ahol több alkategória tartozik egy-egy alkategóriához (pl. nagy webáruházakban).

Miért érdemes breadcrumb navigációt használni?

A breadcrumb navigációnak számos előnye van. Íme csupán néhány a legfontosabbak közül:

A felhasználók kényelmét szolgálja

A breadcrumb sávok főként másodlagos navigációs opcióként szerepelnek a webhelyeken. Ha ilyen navigációt kínálsz többszintű webhelyed látogatói számára, akkor azok sokkal könnyebben eligazodnak majd az adott kategória felsőbb szintjei között.

Csökkenti a navigációs műveletek számát

Ahelyett, hogy a felhasználóknak többször meg kellene nyomkodniuk a böngésző „Vissza” gombját, egyetlen kattintással visszatérhetnek egy adott breadcrumb útvonal bármelyik magasabb szintjére. Ez csökkenti a szükséges kattintások számát is, felgyorsítja a navigációt, és összességében javítja a felhasználói élményt.

Viszonylag kis helyet foglal a képernyőn

Mivel általában vízszintesen elhelyezettek, és egyszerű stílust használnak, a breadcrumb sávok nem foglalnak el sok helyet az oldal felületéből, így nem zavarják a felhasználót böngészés közben.

Csökkentik a visszafordulási arányt

A breadcrumb navigáció arra ösztönözheti az első alkalommal látogató felhasználókat, hogy felfedezzék a webhely többi tartalmát is. Egy breadcrumb navigációs sáv többféle olyan kulcsszót is tartalmazhat, ami kapcsolódik érdeklődési köreikhez, és ezt látva talán tovább a webhelyen maradnak, hogy felfedezhessék a többi releváns tartalmat rajta.

Mikre kell odafigyelni egy breadcrumb navigációs sáv kialakításakor?

Mivel válaszd el a breadcrumb navigációs sáv különböző szintjeit?

A leggyakrabban használt szimbólum a breadcrumb sávok szintjeinek elválasztására a balról jobbra nyíló relációs jel (>). Ez általában hierarchia jelzéséhez használatos, úgymint Főkategória > Alkategória > Alkategória > stb. Hierarchia jelzéséhez szokás még dupla relációs jeleket, vagy „nyilakat” (») használni.

A perjelek (/) szintén használatosak, de a választás általában attól függ, hogy mi illik a webhely designjához, illetve hogy milyen jellegű breadcrumb sávról van szó. Például ha a különböző lépések között nincs hierarchikus kapcsolat, akkor a perjelek (/) használata logikusabb lehet.

Milyen hosszú legyen a breadcrumb navigációs sáv?

A breadcrumb navigáció jól látható kell legyen az oldalon, mégsem szabad, hogy túl sok helyet foglaljon el, elvégre csak egy másodlagos, kényelmi funkcióról van szó. Persze arra is ügyelni kell, hogy a felhasználó könnyedén megpillanthassa, különben nem fogja tudni, hogy ott van, és használhatja.

A lényeg az, hogy ne a breadcrumb navigációs sáv legyen az első dolog, amit egy felhasználó észrevesz egy betöltődő oldalon, amire épp most érkezett meg.

Hová kerüljön a breadcrumb navigációs sáv?

A breadcrumb sávok általában az oldal felső felében jelennek meg, az elsődleges navigációs menü alatt, és általában az oldal fő tartalma (cím, szöveg, stb.) felett.