Drobčeky webových stránok – čo sú zač? + Osvedčené postupy

Väčšina z nás už počula ľudovú rozprávku, Hansel and Gretel. Stratené v lese si pomocou kúskov strúhanky označujú cestu domov. Vo webdizajne sa „strúhanka“ vzťahuje na cestu – alebo strúhankový chodník – späť k hlavnému obsahu vašej webovej stránky, pomenovanej podľa cesty detí domov.

Čo sú to Breadcrumbs?

Stratégia navigácie na webe je vizuálny navigačný nástroj, ktorý pomáha používateľom nájsť, kde sa nachádzajú v obsahu webovej lokality a ako sa vrátiť na predchádzajúcu stránku.

Sú užitočné na stránkach s množstvom obsahu na mnohých stránkach, ktoré sú usporiadané hierarchicky. Je to menej užitočné pre jednoduché webové stránky, ktoré majú menej stránok.

Hierarchická organizácia webových stránok: Bežná metóda architektúry webových stránok, kde sú informácie usporiadané ako strom, pričom nový obsah sa rozvetvuje z centrálneho obsahu.

Zdroj: Icon made by ITim od www.flaticon.com

Príklady strúhanky

Drobková navigácia je predovšetkým vizuálny nástroj, takže je často jednoduchšie ju zobraziť. Vezmite si tento príklad zo supermarketu s nábytkom Ikea:

Tento obchod má obrovské množstvo produktov a jeho webovú stránku je možné prezerať po jednotlivých položkách alebo koncepčne podľa miestnosti. Úlomky v hornej časti tejto stránky umožňujú používateľovi, aby si prezeral detské textílie, ale môže sa vrátiť na predchádzajúci krok kliknutím na:

  • deti
  • Bábätká a deti
  • Produkty

Prečo by ste mali na svojom webe používať strúhanku?

Ak má vaša lokalita veľa stránok usporiadaných hierarchicky, potom môže byť dobrou voľbou strúhanka.

Hoci neexistujú žiadne prísne pravidlá, nasledujúce stránky často úspešne používajú navigáciu v strúhanke:

  • Stránky elektronického obchodu s množstvom produktov
  • Stránky s návodmi
  • Vzdelávacie stránky
  • Finančné stránky

Tieto typy webových stránok majú zvyčajne veľa obsahu, ktorý je usporiadaný na logickej ceste od hlavných pilierových stránok k špecifickejšiemu obsahu, vďaka čomu je stratégia drobčekovej navigácie užitočná.

Čítať:  Google hovorí, že aj keď je HSTS dobrou praxou, nerobte si starosti s tým pre SEO

Výhody strúhanky

Cestička v strúhanke nie je len štylistickou voľbou – môže tvoriť cennú súčasť vašej používateľskej skúsenosti.

Tu sú niektoré kľúčové výhody navigácie v strúhanke.

Drobečková navigácia pomáha návštevníkom predstaviť si, kde sa na webovej stránke nachádzajú. V príklade Ikea vyššie sa zákazník môže rozhodnúť, že si nechce prezerať posteľnú bielizeň, ale chce si prezrieť produkty iných detí. Jednoducho klikne na príslušnú strúhanku a prejde na požadovanú stránku.

Znižuje mieru odchodov

Zmätenosť zákazníkov alebo neschopnosť nájsť to, čo hľadajú dvaja poprední prispievatelia k vysokej miere okamžitých odchodov.

Organizácia v strúhanke poskytuje zákazníkom rýchly spôsob, ako sa pohybovať po vašom webe, čím sa zvyšuje pravdepodobnosť, že budú navštevovať dlhšie a dokonca aj nakúpia, predplatia alebo vykonajú inú požadovanú akciu.

Znižuje počet kliknutí na návrat na stránku vyššej úrovne

Dobrý webový dizajn povzbudzuje návštevníkov, aby pokračovali v prehliadaní. Uľahčením návratu na stránku vyššieho poradia s minimálnym klikaním môžu weboví dizajnéri zvýšiť návštevnosť kľúčových webových stránok na svojom webe.

Šetrí priestor na obrazovke

Nikto nechce neprehľadný dizajn webových stránok. Zákazníci zároveň chcú rýchlo nájsť to, čo hľadajú.

Drobková navigácia využíva jednoduchý dizajn, ktorý nezaberá veľa miesta. Vďaka tomu je príťažlivý pre zákazníkov aj webdizajnérov.

Kedy NEPOUŽÍVAŤ strúhanku

Ak vaša webová lokalita nemá toľko stránok alebo nie sú usporiadané hierarchicky, potom strúhanka v skutočnosti nič nepridá k používateľskej skúsenosti a je lepšie ju vynechať.

Vyššie uvedený príklad je prevzatý z webová stránka autora Jona Acuffa. Táto stránka má relatívne málo stránok a všetky sa pohodlne zmestia do hlavnej navigačnej ponuky.

Okrem toho stránka nemá žiadnu hierarchickú štruktúru. Návštevník nemusí nutne postupovať z „O mne“ do „Knihy“ alebo „Hovorenie“ v určitom poradí.

Dizajnéri tejto stránky sa rozhodli vynechať navigáciu v strúhanke, pretože je pre tento typ stránok zbytočná.

Drobky a SEO

Cesto omrvinky môže tiež zvýšiť vaše SEO.

Google používa navigáciu na usporiadanie informácií a môže zobraziť aj vaše strúhankový chodník vo výsledkoch vyhľadávania. Breadcrumbs SEO pomáha spoločnosti Google porozumieť a indexovať vašu stránku presnejšie, a preto poskytuje vyhľadávačom lepšie zhody.

Výhoda UX tiež v konečnom dôsledku pomôže vášmu hodnoteniu SEO, pretože by mala znížiť mieru okamžitých odchodov a viesť k dlhším interakciám zákazníkov s vašou stránkou.

Osvedčené postupy v strúhanke

Ak to urobíte správne, strúhanka môže zlepšiť používateľský zážitok z vášho webu.

Pri navrhovaní navigácie v strúhanke je potrebné dodržiavať niekoľko osvedčených postupov.

Čítať:  5 jednoduchých spôsobov, ako sledovať organické hodnotenie vo vyhľadávačoch

Umiestnite na začiatok stránky

Ľudia sú spokojní so známym; je bežné, že navigácia v strúhanke je umiestnená v hornej časti webovej stránky.

To dáva intuitívny zmysel, pretože používatelia sa zvyčajne posúvajú na začiatok stránky, keď si uvedomia, že chcú byť na inej stránke. Udržiavanie strúhanky navrchu posilňuje presvedčenie, že používatelia môžu ľahko nájsť to, čo hľadajú.

Používajte slová alebo frázy

Aj keď sa môže zdať kreatívne príťažlivé používať obrázky v strúhankovej ponuke – jednoducho to nerobte. Je to mätúce, pretože obrázky môžu byť nejednoznačné. Ikona „domov“ môže byť jedinou možnou výnimkou, pretože je taká všadeprítomná.

Držte sa jedného slova alebo krátkej frázy. Napríklad – Domov > Produkty > Pánske oblečenie > Nohavice > Džínsy je logický formát strúhanky pre stránku elektronického obchodu s oblečením.

Musí pridať hodnotu do používateľskej skúsenosti

Cesta navigácie webovej stránky nie je automaticky najlepšou voľbou pre každú stránku. Ak máte relatívne málo stránok, drobková ponuka zbytočne zahltí dizajn vašich stránok.

Navigáciu v strúhanke používajte iba vtedy, ak skutočne zlepšuje používateľskú skúsenosť.

Zatiaľ čo dizajn UX sa dostáva do najmenších detailov aké druhy menu použiť a kedy, vo všeobecnosti platí, že ak má váš strúhankový jedálny lístok len dva-tri kroky, v skutočnosti ho nepotrebujete. Rovnako efektívne môžete použiť hlavnú navigačnú hlavičku alebo dokonca hamburgerovú ponuku.

Nechaj to krátke

Nepoužívajte dlhé frázy, ktoré sa nezmestia do krátkeho radu. Napríklad krok, ktorý znie „všetky pánske zimné oblečenie veľkosti s-xxl“, by bol príliš dlhý.

Nepridávajte zbytočné stránky, pretože si myslíte, že vďaka tomu bude vaša webová lokalita vyzerať lepšie – bude to len vyzerať neprehľadne.

Hierarchický

Drobčeky by mali návštevníka priviesť späť na stránku s vyšším poradím. To znamená, že prvou strúhankou by mala byť vždy domovská stránka, pretože to používateľovi poskytne predstavu o tom, kde sa na stránke nachádza.

Každá navigácia by mala začínať nadradenou stránkou a potom by mala postupne uvádzať podradené stránky, ktoré nasledujú po, aj keď návštevník prišiel priamo na stránku s nižším hodnotením z vyhľadávača alebo priameho odkazu.

Použite oddeľovač jedného znaku ( alebo )

Aby pre vás fungovali konvenčné a dôverné informácie, použite oddeľovač jedného znaku medzi jednotlivými strúhankami.

Špeciálne znaky < a > sú najbežnejšie, pretože naznačujú šípky. Nepoužívajte lomky ako – alebo | alebo \ pretože nie sú smerové a nie vizuálne komunikovať postup z nadradených stránok na podstránky.

Typy strúhanky

Existujú tri hlavné typy štruktúr strúhanky pre webové stránky. Predtým, ako sa rozhodnete, ktorý typ bude pre vás najlepší, dôkladne si premyslite zámer vášho používateľa a celkovú skúsenosť s vašou stránkou.

Čítať:  Google hovorí: Nepresmerujte sa na svoj súbor Sitemap. Uľahčite Googlu prístup a indexové prehľadávanie

Na základe polohy

Drobčeky podľa polohy zobrazujú postup stránok od nadradenej stránky k podstránkam, podobne ako v počítači môžete mať podpriečinky.

Toto je najbežnejší typ strúhanky, pretože slúži ako vizuálna mapa pre návštevníkov, ktorá im ukazuje, kde sa na stránke nachádzajú a kam môžu ísť.

Napríklad vyššie uvedená snímka obrazovky bola prevzatá zo štátnych parkov a lesov Connecticutu webovej stránky.

Navigácia v strúhanke podľa polohy ukazuje, že návštevník sa nachádza na podstránke webovej stránky vlády štátu Connecticut.

Na základe atribútov

V prípade webových stránok s mnohými podstránkami sa na zoskupenie podobných stránok (zvyčajne záznamov o produktoch) na základe charakteristík špecifikovaných návštevníkom používajú strúhankové cesty založené na atribútoch. To zákazníkom koncepčne ukazuje, aké typy položiek si prezerajú.

Amazon je toho skvelým príkladom. Na webe je nespočetné množstvo jednotlivých stránok a väčšina z nich je pre daného zákazníka nezaujímavá. Trasy navigácie na základe atribútov v hornej časti stránky so záznamom o produkte ukazujú zákazníkovi, že si prezerá správne kategórie produktov – v tomto prípade digitálne fotoaparáty pre začiatočníkov.

To tiež umožňuje zákazníkom rýchlo si všimnúť, či sú v nesprávnej kategórii a vrátiť sa o jeden alebo dva kroky späť bez toho, aby stratili všetky filtre, ktoré doteraz použili.

Zákazník môže napríklad chcieť digitálny fotoaparát, ale nie zariadenie typu point-and-shoot – stačí kliknúť o jeden krok skôr na cestičku, aby sa dostala do správnej kategórie.

Tieto sú vizuálne veľmi podobné strúhanke založenej na polohe; veľký rozdiel je v tom, že používatelia si zvyčajne môžu prispôsobiť strúhanku založenú na atribútoch, podobne ako systém filtrovania vyhľadávania.

Path-Based

Tento dizajn strúhanky, ktorý sa tiež nazýva „založený na histórii“, používateľom ukazuje cestu, ktorou sa dostali na váš web.

Tieto sa generujú v závislosti od navigácie jednotlivých používateľov.

Toto sú najmenej bežné typy strúhanky, ktoré dizajnéri webových stránok používajú, pretože majú tendenciu byť mätúce a tlačidlo „späť“ ich robí do značnej miery irelevantnými.

Podľa niektorýchpopulárne tlačidlo „späť na výsledky“, ktoré umožňuje kupujúcim vrátiť sa k prispôsobenému zoznamu výsledkov vyhľadávania bez straty filtrov, je technicky strúhanka založená na ceste.

Tu si môžete pozrieť príklad z Etsy.com. Táto stránka ponúka desiatky filtrov vyhľadávania a tlačidlo „späť“ ich zvyčajne zruší, takže tlačidlo „späť na výsledky vyhľadávania“ v tomto prípade zlepšuje používateľskú skúsenosť.

Čítať:  Zraniteľnosť doplnku WordPress OptinMonster: mohla by ovplyvniť 1 milión stránok

Ako vytvoriť strúhanku

Vytvorenie strúhanky je našťastie pomerne jednoduché. Metóda sa líši v závislosti od typu webu, ktorý vytvárate, takže pre vás rozoberieme tri hlavné platformy.

Vo WordPresse

WordPress má k dispozícii veľa doplnkov, ktoré vám pomôžu vytvárať strúhanku bez toho, aby ste museli písať kód sami.

Keďže toľko stránok teraz používa strúhanku, WordPress zaznamenal rozšírenie týchto doplnkov. Niektoré dobré zahŕňajú:

  • SEO všetko v jednom (bezplatná verzia má povolenú navigáciu)
  • Drobečková cesta
  • Yoast
  • WooCommerce Breadcrumbs
  • NavXT

Samozrejme, pluginy neurobia všetko za vás. Možno budete musieť prispôsobiť strúhanku HTML, aby ste dosiahli vzhľad, ktorý hľadáte.

K tomu sa zvyčajne dostanete cez kartu „SEO“ vo vašom doplnku.

Tu môžete zmeniť možnosti, ako sú okraje alebo oddeľovač špeciálnych znakov pomocou základného HTML.

Vo Wix

Spoločnosť Wix na svojich stránkach ponúkala navigáciu v strúhanke pomalšie.

V súčasnosti môžete automaticky pridať navigačnú ponuku webu Obchody Wixale nie na iných typoch stránok.

Ak chcete vo Wixe pridať strúhanku, budete ju musieť pridať do kódu stránky ručne.

Fórum Wix ponúka niekoľko šablón kódu ktoré môžete použiť na manuálne pridanie omrvinkovej trasy na vašu stránku. Pozitívom je, že drobky HTML sú prispôsobiteľnejšie ako automaticky generované.

K dispozícii sú možnosti pre všetky tri typy (cesta, umiestnenie a atribút), takže jednoducho skopírujte a prilepte tú, ktorú chcete, do kódu vašej lokality a zároveň vykonávajte svoje vlastné štylistické zmeny.

V Shopify

Pridanie strúhanky v Shopify je jednoduché. Pri prispôsobovaní motívu jednoducho kliknite na „košík“ a vyberte „zobraziť navigáciu v strúhanke“.

Táto metóda má menej možností prispôsobenia, ale keďže Shopify funguje takmer výlučne pre stránky elektronického obchodu, šablóna funguje celkom dobre.

Stránka pomocníka Shopify má jednoduché pokynyna obrázku vyššie.

Záver: Drobky zlepšujú používateľskú skúsenosť a SEO

Ak si stále kladiete otázku, či implementovať alebo neimplementovať omrvinkový chodník na svoje stránky, možno by ste si chceli položiť jednu otázku: na čo sú omrvinky?

V konečnom dôsledku pomáhajú vašim návštevníkom ľahšie sa pohybovať po vašom webe. Ak by omrvená ponuka nič nepridala k vášmu používateľskému zážitku, potom nie je dôvod príliš komplikovať váš webový dizajn.

Ak však máte veľa stránok, ktoré sa rozvetvujú na viac ako 3 stránky hlboko do vášho webu (ako väčšina webových stránok elektronického obchodu), strúhanka môže zlepšiť vaše UX a pomôcť vášmu SEO skóre s Google.

Nové Publikácie:

ODPORÚČANIE