Breadcrumb Navigation Best Practices & Exemple

Navigarea prin navigație este deseori neglijată în procesul de proiectare și dezvoltare. Unii oameni pot considera acest lucru inutil, în timp ce alții ar putea simți că este prea mare pentru o greșeală pentru ceea ce merită. În realitate, navigarea prin navigație va crește considerabil gradul de utilizare a unui site web.

Breadcrumbs oferă utilizatorilor o metodă alternativă de navigare, permite acestora să vadă unde stau în ierarhia unui site Web și va reduce numărul de pași necesari pentru a naviga la un nivel superior într-un site web.

Descriu aici diferitele tipuri de navigație pentru navigație care sunt folosite astăzi, de ce sunt importante și cum ar trebui să fie implementate cel mai bine online. Sunt incluse și aici pentru referință peste 30 de exemple despre modul în care sunt utilizate astăzi pesmeturile online.

Rețineți că, deși navigarea prin navigație nu va face sau nu va rupe un site web, va oferi un avantaj suplimentar utilizatorilor dvs., prin creșterea gradului de utilizare și funcționalitate generală a site-ului dvs..

Breadcrumb Tipuri

cale

Căsuțele de pescuit bazate pe traseu indică pașii sau calea pe care un utilizator le-a luat pentru a ajunge la pagina curentă a unui site Web. În plus, utilizatorii vor vedea linkuri către paginile pe care le-au vizitat anterior pentru a ajunge la pagina curentă. Dintre cele trei tipuri de navigație pentru pescuit, pescuitul pe căi navigabile pe traseu este cel mai puțin popular online. Motivul fiind că navigarea pe căi navigabile pe traseu oferă o funcționalitate similară cu funcția “Redirecţiona” și “Înapoi” butoanele de pe un browser. Pentru majoritatea site-urilor de navigare bazate pe locație și navigație pe bază de atribute oferă o mai bună funcționalitate.

Locație

Pesmicele bazate pe locație indică utilizatorului unde pagina curentă se află în ierarhia site-ului web. Acest tip de navigare cu pescuit este cel mai frecvent văzută pe site-uri cu mai mult de două nivele de adâncime sau de conținut. După mutarea ulterioară într-un site web, utilizatorii au la dispoziție legături către pagini sau categorii care au rolul de a “mamă” sau un nivel de sus față de pagina pe care o vizualizează în prezent. De exemplu, un utilizator poate fi pe “Vorbi” pagina, cu toate acestea, “Ce facem” pagina este un părinte al “Vorbi” în timp ce “Acasă” pagina este un părinte al “Ce facem” pagină.

Clearleft Ltd

Atribut

Seturile de breadcrumbii bazate pe atribute indică utilizatorului atributele sau categoriile atribuite paginii curente dintr-un site Web. Adesea văzute pe site-urile de comerț electronic, produsele nu numai că se încadrează într-o categorie, dar și sub anumite atribute. De exemplu, un vehicul poate fi clasificat ca un SUV, având atributele de a fi negru și eliberat în anul 2010.

Cars.com

De ce folosiți Breadcrumbs?

• Utilizabilitate mare

  Breadcrumbs oferă un mijloc suplimentar prin care utilizatorii pot naviga cu ușurință pe un site Web. Dacă un utilizator aterizează pe o pagină internă de pe site-ul dvs. dintr-o altă sursă, breadcrumbs va permite utilizatorului să vadă exact unde se află în ierarhia site-ului. Utilizatorului i se oferă, de asemenea, posibilitatea de a vă deplasa la un nivel mai înalt al site-ului la un moment dat fără nici un fel de hassle.

• Ușor de Backtrack

  Navigările primare nu sunt concepute pentru a fi urmate înapoi, ci sunt pescuitul. Deoarece backtracking este extrem de popular online oferind un pic de ajutor suplimentar poate merge mult.

• Eliminați clicurile suplimentare

  Breadcrumbs permite utilizatorilor să sară de la un nivel al unui site web la altul fără a fi nevoie să utilizeze “redirecţiona” sau “înapoi” butoanele din browser. În plus, pesmetul elimină nevoia ca utilizatorii să recurgă în mod continuu la navigația principală.

• Afișează ierarhia utilizatorilor

  Navigarea primară a unui site web nu va reflecta ierarhia fiecărei pagini din site. Oferirea de utilizatori de breadcrumbs le va permite să vadă ierarhia unei pagini într-un site Web.

• Vizibil plăcut

  Nu numai că pesmetul oferă utilizatorilor o utilizare suplimentară, ci și fără a ocupa mult spațiu sau spațiu pe pagină. Breadcrumbs sunt ușor de implementat în designul vizual al site-ului dvs. și oferă un mare beneficiu utilizatorilor.

• Oferă ajutor suplimentar

  Este foarte posibil ca unii utilizatori să nu înțeleagă cum funcționează un site web de navigare primară și, în unele cazuri, utilizatorii chiar nu știu ce caută. Oferirea de utilizatori de breadcrumbs le va permite să vadă progresul general și structura unui site web, permițându-le astfel să navigheze mai bine pe site.

• Rata inferioară a sarcinilor

  De obicei pesmetul va oferi o navigare mai detaliată decât navigația primară. În acest mod, utilizatorilor li se vor oferi mai multe opțiuni privind navigarea pe un site Web. Oferindu-le posibilitatea de a urmări cu ușurință câteva nivele în cadrul site-ului, va scădea rata de respingere.

• Creează interes

  Când un utilizator aterizează pe o pagină internă a site-ului, s-au aflat deja pe o pagină de interes. Breadcrumbs poate furniza link-uri către pagini suplimentare și informații de care utilizatorul este, de asemenea, interesat, fără a le face să pornească de la un pătrat.

Breadcrumb Best Practices

• Utilizați Breadcrumbs în partea de sus a paginii

  Cea mai obișnuită și instinctuală destinație de plasare a pesmetului se află în partea de sus a paginii. Acest lucru permite utilizatorilor să găsească pescuitul într-o manieră simplă și să le utilizeze în consecință.

• Folosiți Breadcrumbs Consistent

  Dacă decideți să folosiți pesmetul, asigurați-vă că îl folosiți pe întregul site web. Oferirea unor utilizatori de pescuit pe anumite pagini, iar altele nu le va confunda și le va deranja. (Un prim exemplu este Amazon, deoarece elimină pesmetul de pe paginile individuale ale produsului.)

• Breadcrumbs ar trebui să se degradeze grațios

  Breadcrumbs ar trebui să înceapă întotdeauna cu pagina de pornire și să se degradeze la pagina curentă. În acest fel, pesmetul dvs. trebuie să meargă de la cel mai înalt nivel la cel mai mic nivel cu câte un pas la un moment dat.

• Stylize Breadcrumbs În mod corespunzător

  Vreți să vă vedeți pesmetul, totuși nu doriți ca acesta să fie punctul focal. De asemenea, doriți să vă dați seama că pesmeturile dvs. nu fac parte din conținutul principal al unei pagini, ci doar suport suplimentar pentru aceasta. Găsiți un mediu fericit în care pescuiețele dvs. sunt vizibile cu toate acestea, nu sunt arogante.

• Categoria paginilor în mod clar

  Dacă aveți pagini care se încadrează în două sau mai multe categorii, este posibil să nu doriți să utilizați pagini de pescuit pe site-ul dvs. Web. Încercarea de a plasa o pagină sub două sau mai multe categorii va produce, probabil, numai pesmeturi neclare și va împiedica utilizatorul. Asigurați-vă că site-ul dvs. are o ierarhie organizată și este afișat în mod corespunzător prin intermediul pescuitului dvs..

• În mod clar separați fiecare nivel

  Asigurați-vă că utilizatorii pot distinge diferența dintre fiecare nivel de pescuit. Cel mai comun separator între niveluri este caracterul "mai mare decât" (>). Alți separatori buni includ cotațiile drept unghiuri drepte (»), tăieturile (/) și săgețile (→). Dacă utilizați un caracter de text simplu, utilizați numai unul. (»Este mai atrăgătoare și mai eficientă decât >>)

• Eliminați pagina curentă

  Utilizați un stil diferit pentru ultimul element dintr-o listă de pagini de coacere pentru a stabili că aceasta este pagina curentă vizualizată. Puteți realiza acest lucru făcând elementul îndrăzneţ, schimbarea culorii sau subliniind aceasta.

• Nu faceți pagina curentă o legătură

  Nu este nevoie ca ultimul articol dintr-o listă de pescuit să aibă un link, deoarece este vizionată pagina curentă. Crearea unui link aici va confunda utilizatorii, mai ales atunci când fac clic pe el și nu sunt luați la o pagină nouă.

• Nu folosiți Breadcrumbs ca pagină

  Folosirea ultimului element dintr-o listă de pagini de pescuit ca titlu al unei pagini curente este ineficientă. Dacă alegeți să folosiți pesmetul, faceți acest lucru adăugând și o pagină.

• Breadcrumbs nu înlocuiesc navigarea primară

  Breadcrumbs-urile trebuie folosite doar ca suport pentru navigația primară, fără a înlocui niciodată navigarea primară. Ar trebui să oferiți utilizatorilor întotdeauna o navigație primară de la care pot naviga pe un site web înainte de a utiliza navigarea prin navigație.

Exemple mari de croșetoare

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia și Maggie

Intridea

Design de către oameni

Roxy

Blik

Sitepoint

Ţintă

Walmart

1-800-Flowers

Cea mai buna achizitie

Amazon.com

Barns & Noble

Teritoriu

măr

Google

urmarire

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

ZONA 17

Wufoo

Cercetătorii din Tennessee de la mijloc

Colegiul din Glasgow

Firstborn

Bell Canada

Grooveshark

Devlounge

Despre autor - Shay Howe este un designer profesionist de interfață și web care locuiește în prezent în Chicago, IL. El scrie despre designul de web în blogul său propriu peste la letscountday și ar dori să audă de la tine pe Twitter. Te rog să-i spui salut!