Breadcrumb Navigation Best Practices & Examples

V procese návrhu a vývoja je často prehliadaná navigácia v režime Breadcrumb. Niektorí ľudia môžu považovať to za zbytočné, zatiaľ čo iní môžu cítiť, že je príliš veľký na ťažkosti s tým, čo stojí za to. Faktom je, že navigácia pomocou navigačnej siete výrazne zvýši využiteľnosť webových stránok.

Breadcrumbs poskytujú užívateľom alternatívnu metódu navigácie, umožňujú im vidieť, kde sa nachádzajú v hierarchii webových stránok, a zníži počet krokov potrebných na navigáciu na vyššiu úroveň v rámci webovej stránky.

Tu sú uvedené rôzne typy navigácie, ktoré sa používajú dnes, prečo sú dôležité a ako by mali byť najlepšie implementované online. Tiež tu sú tu vaše referencie viac ako 30 príkladov toho, ako sa dnes používajú strúhanky online.

Pamätajte si, že zatiaľ čo je pravdepodobné, že navigácia pomocou navigačnej siete nebude robiť alebo porušovať webové stránky, poskytne používateľom ďalší prínos tým, že zvýši celkovú použiteľnosť a funkčnosť vašej webovej stránky.

Typy dier

cesta

Stupňové trasy založené na trase označujú kroky alebo cestu, ktorú používateľ prijal na aktuálnu stránku webovej stránky. Používatelia navyše uvidia odkazy na stránky, ktoré predtým navštívili, aby sa dostali na aktuálnu stránku. Z troch typov navigácie s navigačnou sieťou je navigácia na trase založená na trase najmenej populárna online. Príčinou je navigácia s navigáciou na trase založená na trase poskytuje podobnú funkčnosť ako navigácia “vpred” a “späť” v prehliadači. Pre väčšinu webových stránok navigácia založená na lokalizácii a navigácia podľa navigácie podľa atribútov ponúka lepšiu funkčnosť.

umiestnenia

Trúbky na základe polohy určujú používateľovi, kde je aktuálna stránka v hierarchii webových stránok. Tento typ navigácie s navigáciou je najčastejšie viditeľný na webových stránkach s viac ako dvoma úrovňami hĺbky alebo obsahu. Pri ďalšom prechode na webovú lokalitu sa používateľom poskytujú odkazy na stránky alebo kategórie, ktoré slúžia ako “rodič” alebo úroveň na úrovni stránky, ktorú momentálne zobrazujú. Napríklad, používateľ môže byť na “hovoriť” stránku, však “Čo robíme” stránka je rodičom “hovoriť” stránky, zatiaľ čo “Domov” stránka je rodičom “Čo robíme” strana.

Clearleft Ltd

atribút

Atribúty založené na trasách označujú používateľovi atribúty alebo kategórie priradené k aktuálnej stránke v rámci webovej lokality. Často vidieť na internetových stránkach elektronického obchodovania, produkty môžu nielen spadnúť do kategórie, ale aj pod určitými atribútmi. Napríklad vozidlo môže byť zaradené do kategórie SUV, ktoré má atribúty byť čierna a vydané v roku 2010.

Cars.com

Prečo používať Breadcrumbs?

• Veľká použiteľnosť

  Breadcrumbs poskytujú ďalšie prostriedky, pomocou ktorých môžu používatelia ľahko navigovať na webových stránkach. Ak používateľ pristane na internej stránke na vašom webe z iného zdroja, pesničky umožnia užívateľovi vidieť presne to, kde sa nachádzajú v hierarchii webu. Užívateľ má tiež možnosť presunúť sa na vyššiu úroveň webových stránok v ľubovoľnom čase bez akýchkoľvek problémov.

• Jednoduché Backtrack

  Primárne navigácie nie sú navrhnuté tak, aby sa dali sledovať späť, ak by boli stoky. Vzhľadom k tomu, backtracking je veľmi populárny on-line poskytovanie trochu ďalšej pomoci môže ísť dlhú cestu.

• Odstrániť ďalšie kliknutia

  Breadcrumbs umožňujú používateľom skočiť z jednej úrovne webovej stránky do druhej bez toho, aby museli používať “vpred” alebo “zaostalý” v prehliadači. Navyše strúhanka eliminuje potrebu používateľov neustále využívať hlavnú navigáciu.

• Zobrazuje hierarchiu používateľov

  Primárna navigácia webovej stránky nebude odrážať hierarchiu každej stránky v rámci stránky. Poskytovanie užitočných užívateľov im umožní zobraziť hierarchiu stránky v rámci webových stránok.

• Vizuálne príjemné

  Nielen to, že drobné strúhky poskytujú používateľom ďalšiu použiteľnosť, to robia bez toho, aby na stránke zaberali veľa priestoru alebo priestoru. Breadcrumbs sa dajú ľahko implementovať do vizuálneho dizajnu webových stránok a prinášajú veľký prínos pre používateľov.

• Poskytuje ďalšiu pomoc

  Je úplne možné, že niektorí používatelia nemusia pochopiť, ako funguje webová stránka primárna navigácia av niektorých prípadoch môžu používatelia dokonca ani nevedia, čo hľadajú. Poskytovanie používateľov stôp nám umožní vidieť celkový pokrok a štruktúru webových stránok, čo im umožní lepšie navigovať na webových stránkach.

• Nižšie miery odchodov

  Zvyčajne stôlky poskytujú podrobnejšiu navigáciu ako primárna navigácia. Pritom sa používateľom poskytnú viac možností navigácie na webových stránkach. Dať im možnosť ľahko spätne sledovať niekoľko úrovní v rámci webových stránok zníži vašu mieru odchodov.

• Vybudovanie záujmu

  Keď používateľ pristane na internej stránke webových stránok, sú už na stránke záujmu. Breadcrumbs môžu poskytovať odkazy na ďalšie stránky a informácie, o ktoré má používateľ záujem, bez toho, aby ich začali od prvého štvorca.

Breadcrumb Best Practices

• Použiť Breadcrumbs na začiatku stránky

  Najčastejšie a najintenzívnejšie umiestnenie strúhanky je v hornej časti stránky. To umožňuje používateľom jednoducho nájsť strúhankové škrupiny a primerane ich používať.

• Používajte Breadcrumbs konzistentne

  Ak sa rozhodnete použiť strúhanky, uistite sa, že ich používate na celom vašom webe. Poskytovanie používateľov na niektorých stránkach strmene a nie iní ich len zamieňajú a znemožňujú. (Jedným z najlepších príkladov je Amazon, pretože z jednotlivých stránok produktov odstráni strúhanky.)

• Breadcrumbs by sa mali ladne znížiť

  Breadcrumbs by mali vždy začať s domovskou stránkou a degradovať na aktuálnu stránku. Pritom musia vaše strunové struny ísť z najvyššej úrovne na najnižšiu úroveň naraz.

• Štylizujte chrumkavce správne

  Chcete, aby vaše tresky boli viditeľné, nechcete, aby boli ohniskom. Tiež by ste chceli ukázať, že vaše strúhanky nie sú súčasťou hlavného obsahu na stránke, iba ďalšej podpory. Nájdite šťastné médium, v ktorom sú viditeľné stočené škrupiny, ktoré však nie sú náchylné.

• Stránky kategorizujte jasne

  Ak máte stránky, ktoré spadajú do dvoch alebo viacerých kategórií, možno nebudete chcieť používať na vašich webových stránkach strmene. Pokúšať sa umiestniť stránku do dvoch alebo viacerých kategórií bude pravdepodobne produkovať len nejasné struny a skopírovať užívateľa. Uistite sa, že vaše webové stránky majú organizovanú hierarchiu a zobrazujú sa podľa vašich trás.

• Jasne oddeľte každú úroveň

  Uistite sa, že používatelia dokážu rozlíšiť rozdiel medzi každou úrovňou strmosti. Najbežnejší oddeľovač medzi úrovňami je znak "väčší ako" (>). Ďalšie dobré oddeľovače zahŕňajú pravé dvojité uholové kótovanie (»), lomky (/) a šípky (→). Ak používate znak obyčajného textu, použite iba jeden. (»Je atraktívnejšia a účinnejšia ako >>)

• Jednotlivé vytlačiť aktuálnu stránku

  Použite iný štýl na poslednú položku zoznamu stôp, aby ste zistili, že ide o práve zobrazenú stránku. Môžete to dosiahnuť tým, že položku vykonáte smelý, zmena farby alebo zdôrazňovať to.

• Nedávajte súčasnú stránku odkaz

  Nie je potrebné, aby sa posledná položka zoznamu odkazov zobrazila ako odkaz, pretože sa zobrazuje aktuálna aktuálna stránka. Vytvorenie odkazu v tomto prípade iba zamieňa používateľov, najmä ak kliknú na ne a nebudú prenesené na novú stránku.

• Nepoužívajte Breadcrumbs ako hlavičku stránky

  Použitie poslednej položky zoznamu strmene ako hlavičky aktuálnej stránky je neúčinné. Ak sa rozhodnete použiť strúhanky, urobte tak aj pridaním hlavičky stránky.

• Drobné kruhy nenahrádzajú primárnu navigáciu

  Breadcrumbs sa používajú len ako podpora pre primárnu navigáciu a nikdy sa úplne nenahradí primárna navigácia. Vždy by ste mali používateľom poskytnúť primárnu navigáciu, z ktorej môžu navigovať na webových stránkach skôr, než použijú navigáciu pomocou navigácie.

Veľké príklady chlebov

Vitra Direct

Trek Bikes

illy

SiteInspire

Mia a Maggie

Intridea

Design ľudí

roxy

Blik

SitePoint

terč

Walmart

1-800-Flowers

Najlepšia kúpa

Amazon.com

Stodoly a noble

Krajina končí

jablko

Google

naháňačka

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

OBLASŤ 17

Wufoo

Dievča skautov z Middle Tennessee

Glasgow kolektív

prvorodený

Bell Kanada

Grooveshark

Devlounge

O autorovi - Shay Howe je profesionálny dizajnér webu a používateľského rozhrania, ktorý v súčasnosti žije v Chicagu, IL. Píše o web dizajne vo svojom vlastnom blogu na adrese letscounthedays a radi by vás počul na Twitteru. Prosím neváhajte mu povedať ahoj!