Breadcrumbs Webdesign példák és legjobb gyakorlatok

Inspiráció – Weboldalak példáiAndrian Valeanu – 2013. június 14. – 6 perc READ

A morzsák nagyon fontos eleme a weboldalak tervezésének. Ennek érdekében megvalósíthatja a kenyérmorzsákat a webdesignban. Ez növeli a webhely színvonalát, és ezáltal vonzza a nézőket az oldalra. Alapvetően ezek szövegalapú hivatkozások. Általában a breadcrumbs betűtípusa néhány ponttal kisebb, mint a webhely tartalmának eredeti szövegmérete.

Mikor egy webhelyet épít, mire kell elsősorban összpontosítania? Természetesen a webhely használhatóságára. Legyen szó oktatási webhelyről, e-kereskedelmi webhelyről vagy információs webhelyről; nem hagyhatja figyelmen kívül a webhely használhatóságának jelentőségét.

A látogatóknak problémamentesen kell felhasználniuk a webhelyről származó információkat. Ha ez egy e-kereskedelmi webhely, akkor a látogatóknak nem szabad nehézségekkel szembesülniük, hogy megtalálják az általuk preferált termékeket. Ha időigényesnek találják a releváns információk megszerzését az Ön webhelyéről, akkor nem fognak habozni, hogy elhagyják a webhelyet, és újra a keresőoldalra lépjenek, hogy egy másik, számukra hasznosabb konkurens webhelyet találjanak. Ezért fontos, hogy az oldal hasznos és hatékony legyen a látogatók számára.

A morzsák, ahogy a neve is mutatja, nyomot hagynak a weboldal látogatói számára, hogy egyszerűbb módon térjenek vissza a céljukhoz. A név a “Jancsi és Juliska” című meséből származik. Kenyérmorzsáknak nevezzük azokat a szöveges hivatkozásokat, amelyek a weboldalakon általában az oldal fő részének tetején találhatók; az oldal fejléce vagy/és bármely bannergrafikája alatt, de a tartalom felett. A morzsákat a webhely oldalszerkezetének megfelelően tervezik meg.

Ha például van egy e-kereskedelmi boltja, és a néző egy hűtőszekrényekkel foglalkozó oldalon van, a morzsák nyomvonalának struktúrája az oldalra vezető fő kategóriákat és a főoldalra visszavezető fő kategóriákat az oldal megfelelő megjelenési sorrendjének megfelelően mutatja. Ennélfogva a nézők valami olyasmit fognak találni a breadcrumbban, mint “Főoldal>Elektronikai eszközök>Háztartási készülékek>Hűtőszekrények”. Ez a nyomvonal jellemzően a weboldal háttértárrendszerének sajátos mappaszerkezetén alapul. A felhasználó a szövegre kattintva a nyomvonal bármelyik oldalára léphet. Ha például a kezdőlapra szeretne eljutni, akkor a breadcrumb-nyomvonal “home” linkjére kattintva közvetlenül oda juthat el.

A breadcrumb-nyomvonalat elsősorban navigációs menüként használják. A felhasználó többféleképpen is navigálhat egy weboldal különböző oldalain. A navigációs menüknek felhasználóbarátnak és egyszerűnek kell lenniük. Ezért a breadcrumb egy zseniális ötlet navigációs menüként.

Nem csak navigációs menüként, hanem a keresőoptimalizálás szempontjából is előnyös. Különösen az e-kereskedelemben, ahol a verseny nagy lehet, fontos a keresőmotorokban való jó helyezés. Mivel a breadcrumbs a weboldal mappaszerkezetén alapul, a kulcsszavakat több helyen helyezi el az egész weboldalon. Ezért, ha a “gyapjú poncsó” egy népszerű keresőkifejezés az Ön iparágában, a Breadcrumb egy további belső linket hoz létre a releváns kulcsszóhoz a weboldalán belül.

A Breadcrumb menükkel való foglalkozás során azonban egy dolgot szem előtt kell tartania, ezt a fajta navigációt extra funkciónak kell tekinteni, hogy növelje a webhely vonzerejét, és nem szabad helyettesíteni a hasznos elsődleges navigációs menüket.

Az interneten a breadcrumb menük több típusát keresve találhat helyalapú, attribútumalapú és útvonalalapú breadcrumb navigációs menüket.

A komponens fekete színben van kialakítva, hogy természetesen kiemelkedjen a világos háttérből és fókuszba kerüljön. A texturált vászon szépen együttműködik az általános művészi kialakítással. A linkek az éles és formális tipográfiának köszönhetően gyorsan érzékelhetők, az egyes elemek közötti kis hézagok pedig hozzájárulnak az olvashatósághoz.

Sorrend

Míg a felhasználói felület minden elemét finom gradiensek jellemzik, a kenyérmorzsák ezzel szemben ragaszkodnak a letisztultabb, laposabb külsőhöz és a monokróm háttérhez. Ennek ellenére egész jól illik a többihez, és a hasonló színezésnek köszönhetően kiegészíti az esztétikát. A home gomb klasszikus vonzerőt kölcsönöz. A világos tónusokat a címek hatékonyabb elhatárolására használják.

Breadcrumbs by Rob Dozier rendkívül elegáns, letisztult és friss megjelenéssel mágnesez. Bár a navigáció világos színvilágban készült, mégis megragadja a tekintetet. A finom árnyékolás extra vizuális súlyt ad a nyíl alakú dobozoknak, ezáltal segít kiemelkedni a zajos háttérből. Az aktuális pozíció egyértelmű jelzése érdekében az utolsó elem egyszerű feliratként jelenik meg.

A Jason Mayo által készített Kenyérmorzsák/Hiba egy áramvonalas, hézagok és lenyűgöző funkciók nélküli navigációs sáv. Harmonikusan illeszkedik a kompozícióba, a felhasználói felület lényeges részévé válik. A dombornyomott hatás azonban megmenti a helyzetet. Minden egyes blokkot és címet tisztább és élesebb megjelenéssel lát el. Az elsődleges színpaletta részét képező lila színt a tényleges oldal kiemelésére alkalmazzák.

Design Fundamentals

Allison House lemond a klasszikus nyíl alakú részletekről, és csak az egyszerűbb és elegánsabb funkciókat választja. Így az összetevő természetesnek és intuitívnak tűnik, és a projekthez szükséges erős oktatási stílussal rendelkezik. Minden blokk tartalmaz egy címet, amelyet egy hozzá tartozó ikon erősít meg.

Az előző példához hasonlóan Michal Vasko az összes linket egy sorba rendezi, elhagyva a grafikai részleteket a tipográfia javára. Az elemeket apró, minimalista nyilak választják el egymástól, amelyek a kék színnek köszönhetően visszafogottan mutatják az irányt. Mivel azonban az elem zökkenőmentesen illeszkedik a dizájnba, és a szürke szín nem áll erős kontrasztban a háttérrel, könnyen szem elől téveszthető.

JomSocial Template

JomSocial Template egészen más tészta. A breadcrumbs navigációnak nagy vizuális súlya van a viszonylag hatalmas mérete és világos színezése miatt. Megragadja a szemet anélkül, hogy túlterhelné a felhasználókat. Mohd Izuddin Helmi markáns betűtípussal, belső árnyékkal, tömör home gombbal és néhány finom gradienssel manipulál, hogy lenyűgöző eredményt érjen el.

Ez egy meglehetősen egyszerű példa, mégis van létjogosultsága. Ez a legegyszerűbb módja annak, hogy megmutassuk a felhasználóknak a mozgását a projektben. Bár híján van a szép megjelenésnek, és némi felfrissítésre szorul, mégis elég jól ellátja a feladatát. Minden szokásos funkciót tartalmaz: címeket, irányt mutató nyilakat és még a kiemelés színét is, ezáltal életképes navigációs asszisztenst nyújt a látogatóknak.

Image Gallery Management

A breadcrumbs navigáció karcsúságot és áttekinthetőséget sugároz. Tiszta és részletgazdag megjelenése van, amelyet a tipográfiával, a fehér terekkel és a háttérrel való ravasz munkából nyerünk. Az utolsó elem a többivel ellentétben merészebb betűformákkal rendelkezik, hogy a figyelmet a megfelelő oldalra irányítsa. Bár a navigáció fenntartja az egyszerűségét, mégis van bája, és úgy illik ide, mint a kesztyű.

Gamerscouch.com redesign

Aaron Moody éberen megalkotta a weboldal front-endjét, ahol a kenyérmorzsák elfoglalják az őket megillető helyet, és takaros, kifinomult és divatos megjelenést kapnak. A navigáció kiegészíti az általános dizájnt, és elkapja a projekt hangulatát. A sötét színezés egy kis meleg narancssárga árnyalattal körvonalazza az elemet, és pozitív érzelmeket idéz elő.

Következtetés

A kenyérmorzsák mint opcionális navigációs segédeszköz, amely nemcsak a főmenüt támogatja, hanem feltárja a hierarchiát és megmutatja az aktuális szakaszhoz vezető utat, hatékony eszköz a felhasználói élmény fokozására.

Mégis sajnos elég gyakran figyelmen kívül marad a tervezés során, pedig úgy kellene kezelni, mint a felhasználói felület bármely általános elemét. A felsorolt fenti példák arra ösztönzik a felhasználókat, hogy szép és intuitív kenyérmorzsákat hozzanak létre, amelyek teljesítik küldetésüket, és nem lesznek “fekete bárányok” a dizájnban.