Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2015-10-150 komment

Még mindig fontos a breadcrumbs a weboldalaknál? Úgy néz ki, hogy igen

A breadcrumbs, azaz a morzsamenü használata nem egy forradalmian új dolog, ezért sokan talán már feleslegesnek találják a téma tárgyalását. Ugyanakkor még mindig rendkívül fontos a szerepe a webdesignban, mivel nagymértékben javíthatja egy-egy weboldal használhatóságát.

Korábban már érintettük egy bejegyzésünkben a breadcrumbs, azaz a morzsamenü használatát, azonban most elérkezettnek láttuk az időt, hogy egy kicsit bővebben is kifejtsük a témát. Annak ellenére, hogy nem egy újdonságról van szó, hiszen a breadcrumbs már ősidők óta létezik a webdesignban. Célját tekintve alapvetően arra használjuk, hogy általa a felhasználó könnyebben tudja pozicionálni és navigálni magát a többszintes weboldalakon. Ha egy weboldal vagy webáruház esetében jelentősebb visszapattanási aránnyal, vagy sok félbehagyott vásárlással találkozunk, akkor felmerülhet, hogy vagy valami gond van a fő navigációval, vagy pedig a a morzsamenü hiányzik a weboldalról.

A breadcrumbs alapvető funkciója

Ahogy a vonatkozó Wikipédia bejegyzéséből is kiderül, ez a navigációs eszköz Jancsi és Juliska meséje alapján kapta a nevét, hiszen a két mesehős kenyérmorzsákat szórt el, hogy ezáltal könnyen visszataláljanak otthonukba az erdőből. Éppúgy, mint a mesében, a webdesignban is alapvetően arra használjuk a morzsamenüt, hogy a látogatók képesek legyenek visszatérni kiindulási pontjukra egy weboldalon.

Mint azt korábbi bejegyzésünkben is már említettük, a breadcrumbs csak kiegészíti a fő navigációs menüt, annak szerepét teljes egészében nem veheti át. Ezért attól még, hogy használunk morzsamenüt a weboldalunkon, kellő alapossággal kell kivitelezni a navigációs menüt is. A cél elsősorban az, hogy ha egy felhasználó elveszett egy összetett weboldalon, akkor a morzsamenüre rátekintve átlássa annak szerkezetét, illetve rákattintva a lehető leggyorsabban vissza tudjon térni valamelyik magasabb szintű weboldalra.

Breadcrumbs az Edigital oldalán

Breadcrumbs az Edigital oldalán

A morzsamenü felépítése

Technikailag a leggyakrabban használt helyalapú morzsamenü úgy néz ki, hogy egy linkkel indít, mely a főoldalra mutat, és mindig annak az oldalnak a címével fejeződik be, ahol a felhasználó éppen tartózkodik. Ez az utolsó elem a morzsamenüben szereplő többi elemtől eltérően nem kattintható.

A leggyakrabban vízszintes sorként megjelenő breadcrumbs azt a folyamatot ábrázolja, ahogy a weboldal legfelső szintjéről a jelenlegi legalsó szintig el lehet jutni. Általában egyszerű szöveges linkekből áll, melyeket valamilyen egykarakteres elválasztó jel különít el egymástól. Az ilyen felépítés révén a felhasználók számára az is világossá válik, hogy egy-egy oldal milyen kapcsolatban van azzal az oldallal, ahol adott pillanatban állnak. A linkek által a felhasználók egyetlen kattintással elérhetik a weboldal felsőbb szintjeit, ami komoly segítséget jelent azok számára, akik teljesen véletlenül egy bonyolult hierarchia legalján találták magukat.

A breadcrumbs javítja a használhatóságot

A morzsamenük nem okoznak nagyobb problémát az embereknek a használat során, hiszen ismerik a működését, nem hozza zavarba őket. Az szokott csak időnként előfordulni, hogy észre sem veszik a morzsamenüt. Ennek persze az is oka lehet, hogy alig foglalnak helyet a weboldalon, szinte észrevétlenül húzódnak meg többnyire annak bal felső részén.

Nem problémát okoznak tehát, hanem jelentős mértékben javítanak a weboldalak használhatóságán, többek között azért, mert világosan megmutatják a weboldal felépítését a felhasználóknak, és csökkentik a szükségtelen kattintások számát. Sok szakértő egyébként úgy véli, hogy a Google is figyelembe veszi a breadcrumbokat egy weboldal minőségének a meghatározásakor. Ez azt is jelenti, hogy a morzsamenük révén akár a látogatások számát is növelhetjük.

Gondosan jelölve az útvonalak

Gondosan jelölve az útvonalak

A morzsamenü típusai

A morzsamenünek alapvetően három típusát különböztetjük meg. Az első és leggyakrabban használt típusa a helyalapú breadcrumbs, mely által könnyen meghatározható, hogy egy-egy aloldal pontosan hol helyezkedik el a weboldal hierarchiájában, valamint linkeket mutat a felhasználóknak, melyek révén megtalálják a weboldalak felsőbb szintjeit.

Létezik emellett az útvonal alapú morzsamenü, amely segít megmutatni a felhasználóknak, hogy milyen utat tettek meg a weboldalra érkezésük óta. A felhasználó ebben az esetben látja azon oldalak linkjeit, melyeket korábban meglátogatott. Ez a megoldás azonban nem nyújt sokkal többet, mint a böngésző “vissza” és “előre” gombja, így nem is különösebben elterjedt a használata.

A harmadik megoldás az ún. tulajdonság alapú morzsamenü, mely nem mindig egy egyenes útvonalat ábrázol, hanem azt mutatja meg, hogy az a weboldal, ahol adott pillanatban a felhasználó tartózkodik, milyen tulajdonsággal rendelkezik, milyen kategóriába sorolható. Ez a típusú morzsamenü a webáruházaknál terjedt el, ahol egy-egy termékhez akár több útvonalon is eljuthatunk, ugyanakkor az számít igazán, hogy az adott termék milyen termékcsoportnak a része.

Mikor érdemes használni breadcrumbst, és mikor nem?

Alapvetően akkor érdemes morzsamenükkel kiegészíteni a weboldalunkat, ha az oldal valamilyen szigorú hierarchia alapján épül fel, és különösen akkor javasolt a használata, amikor elég bonyolult ez a hierarchia, esetleg egy adott mélységű szinten nincs már más navigációs segítség a felhasználó számára.

Ugyanakkor egyszintes weboldalaknál felesleges morzsamenüt elhelyezni az oldalon, ahogy akkor is, ha nem tudunk valamiféle értelmes csoportosítással vagy hierarchiával előállni. Ilyenkor egy oldaltérkép jobb megoldás lehet. Arra azonban mindig figyeljünk, ha morzsamenüt alkalmazunk, hogy az ne helyettesítse, ne akarja pótolni az elsődleges navigációt, pusztán csak egészítse ki, vagyis alternatív megoldásként segítsen a felhasználóknak a tájékozódásban a weboldalon!

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.