Breadcrumbs Příklady webdesignu a osvědčené postupy

Inspirace – Příklady webových stránekAndrian Valeanu – 14. června 2013 – 6 minut ČTENÍ

Breadcrumbs jsou velmi důležitým prvkem v designu webových stránek. Za tímto účelem můžete drobky implementovat do svých návrhů webových stránek. Zvyšuje úroveň vašich webových stránek, a tím přitahuje diváky na web. V podstatě se jedná o textové odkazy. Obvykle je písmo drobečkových odkazů o několik bodů menší než původní velikost textu obsahu webové stránky.

Při tvorbě webové stránky na co byste se měli především zaměřit? Samozřejmě je to použitelnost webu. Ať už se jedná o vzdělávací web, elektronický obchod nebo informační web; nemůžete ignorovat význam použitelnosti webu.

Návštěvníci musí informace z webu získat bezproblémovým způsobem. Pokud se jedná o stránky elektronického obchodu, pak by diváci neměli mít potíže s vyhledáváním preferovaných produktů. Pokud jim bude získání relevantních informací z vašeho webu připadat časově náročné, nebudou váhat web opustit a znovu přejít na vyhledávací stránku, aby zjistili jiný konkurenční web, který je pro ně užitečnější. Proto je důležité, aby byl web pro návštěvníky užitečný a efektivní.

Breadcrumbs, jak název napovídá, zanechává na webu stopu, po které se návštěvníci mohou jednodušeji vrátit k cíli. Název je převzat z pohádky „Jeníček a Mařenka“. Breadcrumbs jsou známé jako textové odkazy, které se na webových stránkách obvykle nacházejí v horní části hlavní části stránky; pod záhlavím nebo/i případným grafickým bannerem stránky, ale nad obsahem. Drobečková stezka se plánuje podle struktury stránky vašeho webu.

Pokud máte například e-shop a divák se nachází na stránce s ledničkami, struktura drobečkové stezky bude zobrazovat hlavní kategorie vedoucí na stránku a zpět na domovskou stránku podle jejich správného pořadí výskytu na stránce. Divák tedy najde drobečkovou navigaci ve tvaru „Domů>Elektronická zařízení>Domácí spotřebiče>Chladničky“. Tato stopa obvykle vychází z konkrétní struktury složek v backendovém systému webu. Uživatel může přejít na kteroukoli stránku této stopy kliknutím na text. Pokud například chcete přejít na domovskou stránku, můžete na ni přejít přímo kliknutím na odkaz „home“ na drobečkové stezce.

Drobečkové stezky se používají především jako navigační nabídky. Existuje několik způsobů, pomocí kterých se uživatel může pohybovat po různých stránkách webu. Navigační nabídky musí být uživatelsky přívětivé a jednoduché. Proto je drobečková navigace jako navigační menu geniální nápad.

Nejen jako navigační menu, ale i pro optimalizaci pro vyhledávače je to přínosné. Zejména v elektronickém obchodě, kde může být vysoká konkurence, je důležité získat vysoké pozice ve vyhledávačích. Vzhledem k tomu, že drobečková navigace vychází ze struktury složek webu, umisťuje klíčová slova na více míst napříč celým webem. Pokud je tedy „vlněné pončo“ oblíbeným vyhledávaným výrazem ve vašem oboru, vytvoří drobečková navigace v rámci vašeho webu ještě jeden interní odkaz na příslušné klíčové slovo.

Při práci s drobečkovými nabídkami je však třeba mít na paměti jednu věc, tento typ navigace je třeba považovat za doplňkovou funkci pro zvýšení atraktivity webu a neměl by nahrazovat užitečné primární navigační nabídky.

Při hledání několika typů drobečkových nabídek na internetu můžete najít drobečkové navigační nabídky založené na umístění, na atributech a na cestách.

Složka je vytvořena v černé barvě, aby přirozeně vystupovala ze světlého pozadí a dostala se do popředí. Texturované plátno pěkně spolupracuje s celkovým uměleckým designem. Odkazy jsou rychle vnímány díky ostré a formální typografii a malé mezery mezi jednotlivými položkami přispívají k čitelnosti.

Objednávka

Když jsou všechny položky uživatelského rozhraní vyznačeny jemnými gradienty, drobeček se naopak drží čistšího plochého vnějšího a jednobarevného pozadí. Přesto se k ostatním docela dobře hodí a díky podobnému zbarvení doplňuje estetiku. Tlačítko domů dodává klasický vzhled. Světlé tóny slouží k efektivnějšímu ohraničení nadpisů.

Breadcrumbs od Roba Doziera magnetizuje mimořádně elegantním, čistým a svěžím vzhledem. Navigace je sice provedena ve světlém barevném schématu, ale přesto upoutá pozornost. Jemný stín dodává políčkům ve tvaru šipek dodatečnou vizuální váhu, čímž jim pomáhá vyniknout z hluchého pozadí. Pro jasné označení aktuální pozice je poslední položka prezentována jako jednoduchý nápis.

Breadcrumbs/Error by Jason Mayo je zjednodušený navigační panel bez mezer a působivých prvků. Harmonicky splývá s kompozicí a stává se podstatným detailem uživatelského rozhraní. Situaci však zachraňuje reliéfní efekt. Dodává každému bloku a nadpisu jasnější a ostřejší vzhled. Fialová, která je součástí základní barevné palety, je použita ke zvýraznění aktuální stránky.

Základy designu

Allison House se zbavuje všech klasických detailů ve tvaru šipek a sází jen na jednodušší a elegantnější prvky. Komponenta tak vypadá přirozeně a intuitivně a má silný vzdělávací styl, který je pro projekt potřebný. Každý blok obsahuje nadpis, který je posílen doprovodnou ikonou.

Podobně jako v předchozím případě Michal Vaško uspořádává všechny odkazy do jedné řady a opouští grafické detaily ve prospěch typografie. Položky jsou odděleny drobnými minimalistickými šipkami, které díky modré barvě nenápadně ukazují směr. Protože je však prvek plynule začleněn do designu a šedá barva není v ostrém kontrastu s pozadím, může se snadno ztratit z dohledu.

Šablona JomSocial

Šablona JomSocial je zcela jiná záležitost. Drobečková navigace má díky své poměrně obrovské velikosti a jasnému zbarvení velkou vizuální váhu. Uhodí do očí, aniž by uživatele zahltila. Mohd Izuddin Helmi manipuluje s výrazným písmem, vnitřním stínem, pevným tlačítkem Domů a několika jemnými gradienty, aby dosáhl působivého výsledku.

Jedná se o zcela základní příklad, přesto má právo na existenci. Je to nejjednodušší způsob, jak uživatelům zobrazit jejich pohyby napříč projektem. Je sice ochuzen o krásný vzhled a potřebuje trochu vyšperkovat, přesto svou úlohu plní docela dobře. Obsahuje všechny běžné prvky: nadpisy, směrové šipky a dokonce i zvýrazňující barvu, čímž poskytuje návštěvníkům životaschopného navigačního pomocníka.

Správa galerie obrázků

Drobečková navigace působí elegantně a přehledně. Má čistý a detailně propracovaný vzhled, který je získán díky řemeslné práci s typografií, bílým prostorem a pozadím. Poslední položka má na rozdíl od ostatních tučnější tvary písmen, aby nasměrovala pozornost na příslušnou stránku. Navigace si sice zachovává zjednodušený dojem, přesto má šarm a padne sem jako ulitá.

Redesign webu Gamerscouch.com

Aaron Moody pečlivě vytvořil front-end webu, kde drobečky zaujímají své právoplatné místo a mají úhledný, sofistikovaný a módní vzhled. Navigace doplňuje celkový design a vystihuje náladu projektu. Tmavé podbarvení s nádechem teplého oranžového odstínu tuto komponentu obkresluje a vyvolává pozitivní emoce.

Závěr

Drobečková navigace je jako volitelná navigační pomůcka, která nejen podporuje hlavní nabídku, ale také odhaluje hierarchii a ukazuje cestu k aktuální sekci, mocným nástrojem pro zvýšení uživatelského zážitku.

Je však bohužel z hlediska designu poměrně často přehlížena, ačkoli by se k ní mělo přistupovat jako ke každému běžnému prvku uživatelského rozhraní. Výše uvedené příklady podněcují uživatele k vytvoření krásných a intuitivních drobečků, které budou plnit své poslání a zároveň nebudou „černou ovcí“ v designu.

.