A Jancsi és Juliska című mesében két gyerek kenyérmorzsákat dobál az erdőben, hogy hazataláljanak.
Mostanában valószínűleg nem tapasztalsz túl sok erdőben eltévedt élményt, de fogadni mernék, hogy érezted már magad frusztrálóan tájékozatlannak rosszul megtervezett webhelyeken.
A webhelytervezésben a kenyérmorzsás navigáció egy módja annak, hogy megmutasd a felhasználóidnak a helyzetüket és azt, hogy hogyan jutottak oda (hasonlóan Jancsi kenyérmorzsáihoz). Segít a felhasználóknak abban is, hogy gyorsabban megtalálják a magasabb szintű oldalakat, ha keresésből vagy mélyreható linkről érkeztek a webhelyére.
- Mi a morzsanavigáció?
- Breadcrumb-navigációs tippek és példák
- Csak akkor használja a breadcrumb-navigációt, ha annak van értelme a webhely felépítése szempontjából.
- Ne tegye túl nagyra a morzsamegoldást.
- A breadcrumb-navigációban szerepeljen a teljes navigációs útvonal.
- A legmagasabb szintről a legalacsonyabbra haladva.
- Tartsák konzisztensnek a morzsacímeket az oldalcímekkel.
- Legyen kreatív a tervezéssel.
- Tartsd tisztán és rendezetten.
- Megfontolja, hogy melyik típusú morzsanavigációnak van a legtöbb értelme az oldala számára.
- Ismerje a közönségét.
A morzsanavigáció a felhasználók számára a webhelyen való elhelyezkedésük megjelenítésének módja. Ez egy másodlagos navigációs sáv, amely általában vízszintes szöveges linkek formájában jelenik meg, a “nagyobb, mint” szimbólummal (>) elválasztva. A breadcrumb-navigáció javítja a céloldalak megtalálhatóságát, és segít a felhasználóknak gyorsabban elérni a magasabb szintű oldalakat, ha eredetileg keresésből vagy mélyre mutató linkről találtak rá az oldalra.
Jakob Nielsen, a Nielsen Norman Group társalapítója 1995 óta ajánlja a breadcrumb-navigációt, és határozottan kiáll mellettük: “A morzsák mindössze annyit tesznek, hogy megkönnyítik a felhasználók számára a webhelyen való mozgást, feltéve, hogy annak tartalma és általános szerkezete értelmes. Ez elegendő hozzájárulás olyasvalamihez, ami csak egy sort foglal el a dizájnban.”
Ha vállalkozása weboldala többrétegű, érdemes megfontolnia a breadcrumb-navigáció bevezetését, hogy megkönnyítse a webhelyen való navigálást. Azonban, mint minden tervezési elemnek, ennek is van helyes és helytelen módja. Itt kilenc tippet és példát mutatunk be, amelyekkel biztosíthatja, hogy a leghatékonyabb breadcrumb-navigációt hozza létre a felhasználók számára.
A breadcrumb-navigáció lineáris felépítésű, ezért csak akkor érdemes használni, ha a webhely hierarchiája szempontjából van értelme. Ha vannak alacsonyabb szintű oldalai, amelyek különböző céloldalakról érhetők el, a breadcrumb-navigáció használata csak összezavarja az olvasókat, akik folyamatosan ugyanazokat az oldalakat különböző kiindulópontokról érik el. Továbbá, ha webhelye viszonylag egyszerű, és csak néhány oldalt tartalmaz, valószínűleg nincs szüksége morzsamegoldásra.
Ne tegye túl nagyra a morzsamegoldást.
A morzsamegoldás másodlagos eszköz az elsődleges navigációs sávhoz képest, ezért nem szabad túl nagynak vagy feltűnőnek lennie az oldalon. Például a DHL weboldalán az elsődleges navigációs sáv nagy és jól felismerhető, olyan oszlopokkal, mint “Expressz” “Csomag & e-kereskedelem” “Logisztika” stb. A kenyérmorzsa navigációjuk az alatta lévő kisebb rész, amely a következő szöveget tartalmazza: “DHL Global | > Logistics | > Freight Transportation”. Nem szeretné, ha a felhasználók összetévesztenék a breadcrumb-navigációt az elsődleges navigációs sávval.
Az “Elon University Non-Degree Students” kifejezésre gugliztam, hogy elérjem ezt a céloldalt, de az Elon okosan teszi, hogy a teljes navigációs útvonalat tartalmazza, beleértve a “Home” és a “Admissions” (Felvételi) pontot. Ha kihagy bizonyos szinteket, összezavarja a felhasználókat, és a morzsaútvonal nem lesz annyira hasznos. Még ha a felhasználók nem is a kezdőlapon kezdték, akkor is szeretnéd, hogy a kezdetektől fogva könnyen felfedezhessék webhelyedet.
A legmagasabb szintről a legalacsonyabbra haladva.
Fontos, hogy a breadcrumb navigáció balról jobbra haladjon, a bal oldali legközelebbi link a kezdőlap, a jobb oldali legközelebbi link pedig a felhasználó aktuális oldala legyen. A Nielsen Norman Group tanulmánya szerint a felhasználók idejük 80%-át az oldal bal oldali felének, 20%-át pedig a jobb oldali felének megtekintésével töltik, ami a balról jobbra történő tervezés mellett szól. Ráadásul a balhoz legközelebbi link jelenik meg a lánc elején, ezért azt szeretné, ha ez lenne a legmagasabb szintű oldal.
Tartsák konzisztensnek a morzsacímeket az oldalcímekkel.
A félreértések elkerülése érdekében maradjanak konzisztensek az oldal- és morzsacímek, különösen, ha bizonyos kulcsszavakat céloz meg ezekben a címekben. A breadcrumb-címeket is egyértelműen az oldalhoz kell kapcsolnia. Ha a morzsacím nem tartalmaz linket, tegye egyértelművé. A Nestle hatékonyan címkézi a breadcrumb-címeket, hogy megfeleljenek az oldalcímeknek. “Hatáskörök & kötelezettségvállalás” például ugyanúgy olvasható a breadcrumb-navigációban, mint az oldalon.
A Nestle jól megkülönbözteti a linkeket a nem linkektől különböző színekkel is — a linkek kék színűek, míg a nem linkek szürkék maradnak.
Legyen kreatív a tervezéssel.
A hagyományos breadcrumb-navigáció így néz ki: Főoldal > Rólunk > Karrier. Nem kell azonban feltétlenül követnie a hagyományos utat, ha úgy érzi, hogy egy másfajta design jobban megfelelne a közönségének, vagy jobban mutatna a webhelyén.
A Target például kenyérmorzsás navigációt használ a termékoldalakon (mert ki ne tévedne el a virtuális cipőosztályon?), de “/” szimbólumokat és egyszerű fekete-szürke szöveget használ. Ebben az esetben a finom dizájnváltozatnak van értelme az oldaluk esztétikája szempontjából.
Tartsd tisztán és rendezetten.
A kenyérmorzsás navigáció egyszerűen csak egy segítség a felhasználó számára, és ideális esetben nem vehető észre, hacsak a felhasználó nem keresi. Emiatt ne akarja felesleges szöveggel telezsúfolni a breadcrumb-navigációt.
Az Eionet például nélkülözhetné az “Ön itt van” szöveget. A szöveg ugyan hasznosnak hivatott lenni, de eltömíti az oldalt. Megfelelő tervezéssel a morzsanavigációnak elég feltűnőnek kell lennie bevezető nélkül is.
A morzsanavigációnak több típusa is létezik: helyalapú, attribútumalapú és előzményalapú. A helyalapú morzsák megmutatják a felhasználónak, hogy hol van a webhely hierarchiájában. Az attribútum-alapú morzsák megmutatják a felhasználóknak, hogy az oldal melyik kategóriába tartozik. Végül az előzményalapú morzsák megmutatják a felhasználóknak, hogy milyen úton jutottak el az aktuális oldalra.
Bed Bath & A Beyond attribútumalapú morzsákat használ, hogy megmutassa a felhasználóknak, melyik kategóriába tartozik a termékoldal, így a felhasználók visszakattinthatnak a “Konyha” vagy a “Kisgépek” oldalra, hogy átnézzék a hasonló termékeket. Ez a fajta breadcrumb navigáció a leghatékonyabb a Bed Bath & Beyond vásárlói számára. A breadcrumb-navigáció létrehozásakor vegye figyelembe, mi a leghasznosabb a webhely látogatói számára.
Ismerje a közönségét.
A breadcrumb-navigáció legjobb gyakorlatai arra ösztönzik a webdesignereket, hogy a navigációt az oldal tetején helyezzék el — de az Apple, minden idők egyik legértékesebb vállalata, szembemegy ezzel a logikával, és a breadcrumb-navigációt a webhelye aljára helyezi. Végső soron döntő fontosságú, hogy ismerje a közönségét. Az Apple ügyfelei jellemzően műszaki ismeretekkel rendelkeznek, és valószínűleg megtalálnák a navigációt, ha szükségük lenne rá. Vegye figyelembe ügyfelei igényeit, és hajtson végre A/B tesztelést, ha nem biztos benne.
A morzsamegjelölés végül is hatékony eszköz arra, hogy megkönnyítse webhelye navigálását, de a legjobb tervezési gyakorlatokat követve biztosítsa, hogy kihasználja az eszköz segítőkészségét. További UX-tanácsokért olvassa el a “The Ultimate Guide to UX Design” (Az UX-dizájn végső útmutatója) című részt.
