Weboldal kenyérmorzsa – mik ezek? + Bevált gyakorlatok

Legtöbben hallottuk már a népmesét, a Hansel és Gretel. Az erdőben eltévedve a gyerekek zsemlemorzsadarabokkal jelzik hazafelé vezető útjukat. A webdizájnban a „morzsa” a webhely fő tartalmához vezető útvonalra utal, amelyet a gyermekek hazaútjáról neveztek el.

Mik azok a kenyérmorzsák?

A webhely navigációs stratégiája egy vizuális navigációs eszköz, amely segít a felhasználóknak megtalálni, hol tartanak a webhely tartalmán belül, és hogyan térhetnek vissza egy korábbi oldalra.

Hasznosak azokon a webhelyeken, ahol sok tartalom található számos hierarchikusan rendezett oldalon. Kevésbé hasznos egyszerű, kevesebb oldalt tartalmazó webhelyeknél.

Hierarchikus webhelyszervezés: A webhely-architektúra elterjedt módszere, ahol az információk egy fába rendeződnek, és a központi tartalomból új tartalom ágazik ki.

Forrás: Ikon készítette ITim tól től www.flaticon.com

Példák a kenyérmorzsára

A navigációs navigáció elsősorban vizuális eszköz, így gyakran könnyebben megjeleníthető. Vegyük ezt a példát a bútorboltból Ikea:

Ebben az üzletben hatalmas számú termék található, és weboldala megtekinthető egyedi tételenként vagy elvileg helyiségenként. Az oldal tetején található zsemlemorzsa, így a felhasználó gyermektextileket néz, de a következőre kattintva visszatérhet egy korábbi lépéshez:

  • Gyerekek
  • Baba és gyerekek
  • Termékek

Miért érdemes kenyérmorzsát használni a webhelyén?

Ha webhelyén sok oldal van hierarchikusan rendezve, akkor a navigációs útvonal jó választás lehet.

Bár nincsenek szigorú szabályok, a következő webhelyek gyakran sikeresen használják a navigációs útvonalat:

  • E-kereskedelmi webhelyek sok terméklistával
  • Útmutató oldalak
  • Oktatási oldalak
  • Pénzügyi oldalak

Az ilyen típusú webhelyek általában sok olyan tartalommal rendelkeznek, amelyek logikai útvonalon vannak elrendezve a fő pilléroldalaktól a konkrétabb tartalomig, ami hasznossá teszi a webhely navigációs stratégiáját.

A kenyérmorzsa előnyei

A kenyérmorzsa nyomvonal nem csupán egy stílusbeli választás – értékes részét képezheti felhasználói élményének.

Íme a navigációs navigáció néhány fő előnye.

A navigációs elemek segítenek a látogatóknak elképzelni, hogy hol tartózkodnak a webhelyen. A fenti Ikea példában az ügyfél dönthet úgy, hogy nem akarja megtekinteni az ágyneműt, de meg akarja tekinteni a többi gyerekterméket. Egyszerűen rákattint a megfelelő navigációs útvonalra, hogy a kívánt oldalra navigáljon.

Olvasni:  Elköteleződési elemzés: mit jelentenek ezek?

Csökkenti a visszafordulási arányt

Az ügyfelek zavartsága vagy képtelensége megtalálni, amit keres két vezető közreműködő magas visszafordulási arányra.

A navigációs rendszer segítségével az ügyfelek gyorsan mozoghatnak a webhelyen, így valószínűbb, hogy hosszabb ideig látogatnak, sőt vásárolnak, előfizetnek vagy más kívánt műveletet hajtanak végre.

Csökkenti a kattintások számát a magasabb szintű oldalra való visszatéréshez

A jó webdizájn további böngészésre ösztönzi a látogatókat. Azáltal, hogy egyszerűbb, minimális kattintással visszatérhet egy magasabb sorrendű oldalra, a webtervezők nagyobb forgalmat irányíthatnak webhelyük kulcsfontosságú oldalaira.

Képernyőterületet takarít meg

Senki sem akar zsúfolt weboldaltervezést. Ugyanakkor az ügyfelek gyorsan szeretnék megtalálni, amit keresnek.

A navigációs navigáció egyszerű kialakítást használ, amely nem foglal sok helyet. Ez vonzóvá teszi mind az ügyfelek, mind a webtervezők számára.

Mikor NE HASZNÁLJON zsemlemorzsát

Ha webhelyének nincs annyi oldala, vagy nincsenek hierarchikusan elrendezve, akkor a navigációs útvonal nem igazán ad hozzá semmit a felhasználói élményhez, és jobb, ha elhagyja.

A fenti példa innen származik a szerző Jon Acuff honlapján. Ennek az oldalnak viszonylag kevés oldala van, és mindegyik kényelmesen elfér a fő navigációs menüben.

Ezenkívül a webhelynek nincs hierarchikus struktúrája. A látogató nem feltétlenül halad tovább a „Névjegy”-ből a „Könyvek”-be vagy a „Beszéd”-be egy adott sorrendben.

Ennek a webhelynek a tervezői úgy döntöttek, hogy elhagyják a navigációs útvonalat, mert ez szükségtelen az ilyen típusú webhelyeken.

Breadcrumbs és SEO

A kenyérmorzsa nyomvonal a keresőoptimalizálást is fellendítheti.

A Google navigációs útvonalakat használ az információk rendszerezésére, és megjelenítheti az Ön adatait is zsemlemorzsa ösvény a keresési eredmények között. A Breadcrumbs SEO segít a Google-nak az Ön oldalának pontosabb megértésében és indexelésében, így a keresők számára jobb találatokat kínál.

Az UX-előny végső soron a keresőoptimalizálási rangsorolását is segíti, mert csökkenti a visszafordulási arányt, és hosszabb ügyfélinterakciókat eredményez a webhelyével.

Breadcrumbs bevált gyakorlatok

Ha helyesen csinálja, a navigációs útvonal javíthatja webhelye felhasználói élményét.

A navigációs útvonal tervezése során be kell tartani néhány bevált módszert.

Helyezze el az oldal tetején

Az emberek jól érzik magukat az ismerősben; hagyományosan a navigációs útvonalat a weboldal tetején kell elhelyezni.

Olvasni:  Smash Balloon Review: Ez a legjobb a WordPress közösségi média hírcsatornáihoz?

Ennek intuitív értelme van, mivel a felhasználók általában az oldal tetejére görgetnek, amikor rájönnek, hogy egy másik oldalon szeretnének lenni. A kenyérmorzsa nyomvonalának tetején tartása megerősíti azt a meggyőződést, hogy a felhasználók könnyen megtalálják, amit keresnek.

Használjon szavakat vagy kifejezéseket

Bár kreatívan tetszetősnek tűnhet képeket használni a navigációs menüben – csak ne tegye. Ez zavaró, mert a képek kétértelműek lehetnek. Az „otthon” ikon lehet az egyetlen lehetséges kivétel ez alól, mert annyira mindenütt jelen van.

Ragaszkodjon egyetlen szóhoz vagy rövid kifejezéshez. Például – Kezdőlap > Termékek > Férfi ruházat> Nadrág > Farmer egy logikus formátum egy ruházati e-kereskedelmi webhely számára.

Hozzá kell adnia a felhasználói élményt

A webhely navigációs útvonala nem automatikusan a legjobb választás minden webhely számára. Ha viszonylag kevés oldala van, a navigációs menü szükségtelenül összezavarja az oldalak megjelenését.

Csak akkor használja a navigációs útvonalat, ha az valóban javítja a felhasználói élményt.

Míg az UX-dizájn az apróságokba kerül milyen menüt használjon és mikor, általában igaz, hogy ha a kenyérmorzsa menüje csak két-három lépésből áll, akkor nincs is rá szüksége. Egyszerűen csak a fő navigációs fejlécet vagy akár a hamburger menüt is ugyanolyan hatékonyan használhatja.

Legyen rövid

Ne használjon olyan hosszú kifejezéseket, amelyek nem férnek el egy rövid sorba. Például egy lépés, amely így szól: „minden férfi téli ruházati méret s-xxl”, túl hosszú lenne.

Ne adjon hozzá felesleges oldalakat, és azt gondolja, hogy attól szebb lesz a webhelye – csak zsúfolt lesz.

Hierarchikus

A kenyérmorzsának vissza kell vezetnie a látogatót egy magasabb sorrendű oldalra. Ez azt jelenti, hogy az első navigációs útvonalnak mindig a kezdőlapnak kell lennie, mert így a felhasználó megérzi, hol van az oldalon.

Minden navigációs útvonalnak egy szülőoldallal kell kezdődnie, majd sorban fel kell sorolnia az utána következő alárendelt oldalakat, még akkor is, ha a látogató egy keresőmotorból vagy közvetlen linkből egyenesen egy alacsonyabb rangú oldalra érkezett.

Használjon egykarakteres elválasztót ( vagy )

Annak érdekében, hogy a hagyományos és az ismertség továbbra is működjön, használjon egy karakteres elválasztót az egyes navigációs útvonalak között.

A < és a > speciális karakterek a leggyakoribbak, mert nyilakat sugallnak. Kerülje a perjelek használatát, például – vagy | vagy \ mert nem irányadóak és nem is vizuálisan kommunikálni a szülőoldalakról az aloldalakra való haladás.

Olvasni:  Az e-mailes hírlevél tervezésének bevált gyakorlatai: A siker alapjai

A kenyérmorzsa fajtái

A webhelyek navigációs útvonalának három fő típusa létezik. Gondosan gondolja át felhasználói szándékát és általános tapasztalatait a webhelyével kapcsolatban, mielőtt eldönti, melyik típus a legmegfelelőbb az Ön számára.

Hely-alapú

A helyalapú navigációs útvonalak az oldalak haladását mutatják a szülőoldalról az aloldalakra, hasonlóan ahhoz, ahogyan almappák lehetnek a számítógépen.

Ez a legelterjedtebb kenyérmorzsa-nyomvonal, mert vizuális térképként szolgál a látogatók számára, megmutatva, hogy hol tartózkodnak a webhelyen, és hová mehetnek.

Például a fenti képernyőkép Connecticut állami parkjaiból és erdőiből készült weboldal.

A helyalapú navigációs navigáció azt mutatja, hogy a látogató Connecticut állam kormányzati webhelyének egy aloldalán van.

Attribútum-alapú

A sok aloldalt tartalmazó webhelyek esetében attribútum-alapú navigációs útvonalakat használnak a hasonló oldalak (általában terméklisták) csoportosítására a látogató által megadott jellemzők alapján. Ez koncepcionálisan megmutatja az ügyfeleknek, hogy milyen típusú tételeket néznek meg.

Az Amazon jó példa erre. Az oldalon számtalan egyedi oldal található, és ezek többsége egy adott vásárló számára érdektelen. A terméklista oldalának tetején található attribútum-alapú navigációs útvonalak azt mutatják az ügyfélnek, hogy a megfelelő termékkategóriákat keresi – jelen esetben a kezdőknek szánt digitális fényképezőgépeket.

Ez azt is lehetővé teszi az ügyfeleknek, hogy gyorsan észrevegyék, ha rossz kategóriába tartoznak, és visszalépjenek egy-két lépést anélkül, hogy elveszítenék az összes eddig alkalmazott szűrőt.

Előfordulhat például, hogy az ügyfél egy digitális fényképezőgépet szeretne, de nem egy célzást – csak egy lépéssel korábban kell kattintania a navigációs útvonalon, hogy a megfelelő kategóriába kerüljön.

Ezek vizuálisan nagyon hasonlítanak a helyalapú kenyérmorzsához; a nagy különbség az, hogy a felhasználók általában személyre szabhatják az attribútumalapú navigációs elemeket, hasonlóan a keresési szűrőrendszerekhez.

Útvonal-alapú

„Előzmények alapúnak” is nevezett navigációs útvonaltervezés megmutatja a felhasználóknak, hogy milyen utat jártak be, amíg eljutottak az Ön webhelyére.

Ezek az egyes felhasználók navigációjától függően jönnek létre.

Ezek a legkevésbé elterjedt kenyérmorzsa-típusok, amelyeket a webhelytervezők használnak, mivel általában zavaróak, és a „vissza” gomb miatt nagyrészt irrelevánssá teszik őket.

Egyesek szerinta népszerű „vissza az eredményekhez” gomb, amely lehetővé teszi a vásárlók számára, hogy a szűrők elvesztése nélkül térjenek vissza a keresési eredmények testreszabott listájához, technikailag egy útvonalon alapuló navigációs útvonal.

Itt láthat egy példát az Etsy.com-ról. Ez az oldal több tucat keresési szűrőt kínál, és a „vissza” gomb általában érvényteleníti azokat, így a „vissza a keresési eredményekhez” gomb ebben az esetben javítja a felhasználói élményt.

Olvasni:  Új termékfejlesztési folyamat: szakaszok és amp; Legjobb gyakorlatok

Hogyan készítsünk kenyérmorzsát

Szerencsére a zsemlemorzsa elkészítése viszonylag egyszerű. A módszer attól függően változik, hogy milyen típusú webhelyet épít, ezért a három fő platformot lebontjuk Önnek.

A WordPressben

A WordPress számos beépülő modullal rendelkezik, amelyek segítségével navigációs morzsát hozhat létre anélkül, hogy magának kellene megírnia a kódot.

Mióta már nagyon sok webhely használ kenyérmorzsát, a WordPress elterjedt ezeknek a beépülő moduloknak. Néhány jó közé tartozik:

  • Minden egyben SEO (ingyenes verzió be van kapcsolva a navigációs útvonal)
  • Breadcrumb Trail
  • Yoast
  • WooCommerce kenyérmorzsa
  • NavXT

Természetesen a bővítmények nem tesznek meg mindent helyetted. Előfordulhat, hogy testre kell szabnia a navigációs HTML-kódot a keresett megjelenés eléréséhez.

Ez általában a bővítmény „SEO” lapján keresztül érhető el.

Itt módosíthatja az olyan beállításokat, mint a margók vagy a speciális karakterek elválasztója alap HTML használatával.

A Wixben

A Wix lassabban kínál navigációs útvonalat a webhelyein.

Jelenleg automatikusan hozzáadhat egy webhely navigációs menüjét Wix üzletekde más típusú webhelyeken nem.

Ha navigációs útvonalat szeretne hozzáadni a Wix-hez, akkor azt manuálisan kell hozzáadnia a webhely kódjához.

A Wix Forum kínál több kódsablon amellyel manuálisan adhat hozzá navigációs útvonalat a webhelyéhez. A jó oldalon a HTML navigációs útvonalak jobban testreszabhatók, mint az automatikusan generáltak.

Mindhárom típushoz (útvonal, hely és attribútum) van lehetőség, ezért egyszerűen másolja ki és illessze be a kívántat a webhely kódjába, miközben saját stílusmódosításokat hajt végre.

Shopify-ban

A navigációs útvonal hozzáadása a Shopify-ban egyszerű. A téma testreszabásakor egyszerűen kattintson a „kosár” elemre, és válassza a „navigáció megjelenítése navigációs útvonalat” lehetőséget.

Ezzel a módszerrel kevesebb a testreszabási lehetőség, de mivel a Shopify szinte kizárólag e-kereskedelmi webhelyeken működik, a sablon elég jól működik.

A Shopify súgóoldala rendelkezik egyszerű utasításokata fenti képen.

Következtetés: A kenyérmorzsa javítja a felhasználói élményt és a keresőoptimalizálást

Ha továbbra is megkérdőjelezi, hogy alkalmazzon-e navigációs útvonalat a webhelyén, érdemes feltennie magának egy kérdést: mire való a kenyérmorzsa?

Végső soron segítenek a látogatóknak könnyebben navigálni a webhelyen. Ha a navigációs menü nem adna hozzá semmit a felhasználói élményhez, akkor nincs ok arra, hogy túlbonyolítsa a webdizájnt.

De ha sok olyan oldala van, amely több mint 3 oldalnyira ágazik el a webhely mélyén (mint a legtöbb e-kereskedelmi webhely), a navigációs útvonal javíthatja a felhasználói élményt, és javíthatja a keresőoptimalizálási pontszámot a Google segítségével.

Új publikációk:

Ajánlott