9 sfaturi pentru a vă face site-ul mai ușor de navigat [+ Exemple]

Publicat: 2022-09-13

Ți-ai pierdut vreodată telefonul, cheile sau portofelul? Dacă da, probabil că ați fost sfătuit să vă întoarceți pe pași. Navigarea prin breadcrumb îi ajută pe vizitatorii site-ului dvs. să facă exact asta, dar în loc să caute în bucătărie, baie și zona ușii din față doar pentru a-și găsi cheile în frigider, navigarea în breadcrumb le arată utilizatorilor locația lor actuală și pașii făcuți pentru a ajunge acolo.

Navigarea pesmet de pâine își ia numele de la basmul Hansel și Gretel, în care duoul frate și soră lasă o urmă de pesmet în urma lor în timp ce traversează pădurea pentru a-și arăta calea de întoarcere acasă. Navigarea prin breadcrumb implementată eficient pe site-ul dvs. va asigura că vizitatorii dvs. nu se pierd niciodată în pădure.

Accesați sute de teme și șabloane de site-uri web pe HubSpot

Ce este navigarea prin breadcrumb?

Breadcrumb-urile sunt un ajutor de navigare care le permite utilizatorilor să țină evidența locației lor curente pe un site web sau pe o interfață. Un traseu de breadcrumb afișează pagina pe care se află în prezent un utilizator și relația acesteia cu paginile pe care le-a vizitat înainte sau ierarhia paginilor părinte de nivel superior deasupra paginii curente. Navigarea prin breadcrumb oferă utilizatorului posibilitatea de a naviga rapid înapoi la punctul de pornire sau la paginile anterioare de la vizita sa.

Breadcrumb-urile sunt de obicei afișate ca o listă orizontală de pagini de site-uri web cu hyperlink, separate printr-un semn mai mare decât (>). Navigarea prin breadcrumbs este adesea situată în partea de sus a paginii undeva sub navigarea principală a site-ului web. Înainte de a trece la sfaturi și cele mai bune practici, este important să rețineți că pesmetul vine în câteva arome diferite.

Tipuri de navigare pe breadcrumb

Pesmeturi bazate pe locație sau ierarhie

Navigarea prin rubrica bazată pe locație sau ierarhie este tipul pe care îl veți întâlni cel mai des. O breadcrumb bazată pe locație arată utilizatorului pagina curentă pe care se află și relația acesteia cu ierarhia site-ului de deasupra acesteia. Gândiți-vă la el ca la folderele în care stocați documentele pe computer. Primul folder este cel mai larg și fiecare dosar din interior devine mai specific până când ajungeți la documentul dvs.

exemplu de breadcrumb ierarhice din baza de cunoștințe HubSpot

În exemplul de mai sus, breadcrumb arată pagina curentă în care se află utilizatorul și fiecare pagină părinte succesivă care duce înapoi acasă la baza de cunoștințe. Navigarea prin breadcrumb bazată pe ierarhie facilitează accesul utilizatorului la pagina principală sau la oricare dintre paginile părinte de mai sus, unde se află pagina curentă.

Pesmeturi bazate pe cale sau istorie

Navigarea prin breadcrumb bazată pe cale reprezintă calea unică pe care a urmat-o un utilizator înainte de a ajunge pe pagina curentă. Deși calea nu este de obicei afișată în întregime, breadcrumb-urile bazate pe cale sunt adesea implementate ca o formă de buton înapoi, care aduce utilizatorul la pagina anterioară a vizitei sale.

un exemplu de navigare pe ruta pe site-ul Bloomingdales

Exemplul de mai sus arată linkul „Înapoi la rezultate” de pe site-ul Bloomingdale, care este un breadcrumb bazat pe cale care permite utilizatorului să navigheze înapoi la pagina anterioară cu interogarea sa unică intactă. Pesmeturile bazate pe istorie sunt obișnuite pe site-urile de comerț electronic cu multe categorii și varietăți diferite de articole prin care să căutați.

Pesmet bazat pe atribute

Breadcrumb-urile bazate pe atribute afișează atributele sau etichetele selectate de un utilizator pentru a-și filtra căutarea pe o pagină web. Pesmeturile bazate pe atribute sunt utile pe site-urile de comerț electronic, unde utilizatorii pot selecta diferite atribute pentru a restrânge articolele de pe o pagină și pentru a găsi acea pereche perfectă de blugi, de exemplu.

un exemplu de navigare pe site-ul Gap

Breadcrumb-urile bazate pe atribute pot fi implementate și ca etichete pentru clasificarea postărilor de blog și a tipurilor de conținut.

Acum, că am acoperit diferitele varietăți de navigare prin breadcrumb, să trecem la 9 sfaturi pentru implementarea navigației pe site-ul dvs. pentru a îmbunătăți navigabilitatea pe site și a reduce rata de respingere.

Sfaturi și exemple pentru navigarea pe breadcrumb

1. Folosiți navigarea prin breadcrumb numai dacă are sens pentru structura site-ului dvs.

Navigarea prin breadcrumb este adecvată numai dacă structura site-ului dvs. o impune. Dacă aveți pagini de nivel inferior care sunt accesibile din mai multe pagini de destinație diferite, folosirea navigării pe breadcrumb ar putea deruta cititorii care accesează aceleași pagini din puncte de plecare diferite. În plus, navigarea prin breadcrumb ar putea să nu fie deloc necesară dacă aveți un site web mic, cu doar câteva pagini de nivel superior.

un exemplu de navigare pe site-ul lui Goshi

Goshi este un exemplu de site web care nu trebuie să implementeze navigarea prin breadcrumb. Oferă un singur produs, iar site-ul lor conține doar câteva pagini esențiale. În acest caz, navigarea principală acoperă tot ceea ce are de oferit site-ul și nu există pagini suplimentare amplasate în paginile părinte.

2. Nu vă măriți prea mult navigarea prin breadcrumb.

Navigarea prin breadcrumb este secundară navigației principale a site-ului dvs. web. Cea mai bună practică este ca pesmeturile dvs. să apară mai mici decât și undeva sub navigarea principală a site-ului dvs. Dacă pesmeturile dvs. par prea mari, ar putea afecta echilibrul vizual al paginii și ar putea provoca confuzie atunci când navigați pe site.

Site-ul web al OXO este un bun exemplu. Bara lor de navigare principală este mare și situată curat în partea de sus a paginii, cu categorii precum „Gătit și coacere” „Băuturi” etc. Navigarea lor se află sub navigarea principală, într-un font mai mic și mai subțire.

un exemplu de navigare pe site-ul Oxo

În exemplul lui Oxo, este clar că traseul breadcrumb este secundar barei de navigare principale a site-ului de deasupra acestuia. Bara gri în care se află navigarea pe firul de pâine este, de asemenea, o atingere plăcută.

3. Includeți calea de navigare completă în navigarea dvs. de tip breadcrumb.

Este probabil ca unii vizitatori să descopere pagini de pe site-ul dvs. prin căutare, în loc să înceapă de la pagina de pornire și să navigheze. Am căutat pe Google „Studenți fără studii de la Universitatea Elon” pentru a ajunge la această pagină de destinație. Elon este inteligent să includă calea completă de navigare, inclusiv „Acasă” și „Admiteri” în navigarea pe firul de navigare.

Dacă omiteți anumite niveluri, veți deruta utilizatorii și calea de breadcrumb nu se va simți la fel de utilă. Chiar dacă utilizatorii nu au început pe pagina de pornire, doriți să le oferiți o modalitate ușoară de a vă explora site-ul de la început.

un exemplu de navigare pe site-ul universității elon

4. Progres de la cel mai înalt nivel la cel mai jos.

Este important ca navigarea în breadcrumb să citească de la stânga la dreapta, linkul din stânga fiind pagina de pornire, iar linkul din dreapta fiind pagina curentă a utilizatorului. Un studiu realizat de Nielsen Norman Group a constatat că utilizatorii își petrec 80% din timp vizualizând jumătatea stângă a paginii și 20% vizualizând jumătatea dreaptă, ceea ce reprezintă un argument puternic pentru designul de la stânga la dreapta. În plus, legătura cea mai apropiată din stânga va apărea ca început al lanțului, așa că doriți să fie pagina dvs. de cel mai înalt nivel.

5. Păstrează-ți titlurile de breadcrumb în concordanță cu titlurile paginilor tale.

Este important să rămâneți în concordanță cu titlurile paginii și ale firului de navigare. Acest lucru nu numai că va evita confuzia, dar oferă și un alt loc pentru a obține cuvintele cheie vizate. De asemenea, doriți să legați în mod clar titlurile filierelor dvs. de pagină. Dacă titlul breadcrumb nu are un link, clarificați-l. Sony își etichetează în mod eficient titlurile de breadcrumb pentru a se potrivi cu titlurile paginilor. „Mediu, CSR și calitate”, de exemplu, se citește la fel în navigarea pe breadcrumb ca și pe pagină.

De asemenea, Sony face o treabă bună diferențiind linkurile de non-linkuri. Legăturile sunt subliniate, în timp ce non-linkurile precum pagina actuală „Mediu” rămân nedecorate.

exemplu de navigare prin breadcrumb sony

6. Fii creativ cu designul.

Navigarea prin breadcrumb este stilată în mod tradițional ca o listă orizontală de link-uri separate printr-un semn mai mare decât (>). Cu toate acestea, nu trebuie să urmați calea tradițională dacă un design diferit este mai în concordanță cu aspectul site-ului dvs.

De exemplu, Hoka folosește un „https://blog.hubspot.com/” pentru a separa elementele din navigarea lor. În acest caz, variația subtilă de design are sens pentru site-ul și estetica mărcii lor.

exemplu de navigare hoka breadcrumb

7. Păstrați-l curat și neaglomerat.

Navigarea pe breadcrumb este un ajutor pentru utilizator și nu ar trebui să atragă atenția inutilă decât dacă utilizatorul o caută. Din acest motiv, nu doriți să vă aglomerați navigarea cu text inutil sau design neplăcut.

Eionet, de exemplu, s-ar putea descurca fără textul „Ești aici” din navigarea pe firul de navigare. Deși este menit să fie de ajutor, textul aglomera pagina. Cu un design potrivit, navigarea prin breadcrumb ar trebui să fie suficient de vizibilă fără o introducere, dar să nu iasă ca un degetul mare dureros.

un exemplu de navigare pe site-ul eionet

8. Gândiți-vă la ce tip de navigare în breadcrumb are cel mai mult sens pentru site-ul dvs.

După cum sa discutat la începutul articolului, există câteva tipuri de pesmeturi de luat în considerare - pesmeturi bazate pe locație, pe atribute și pe istoric. Breadcrumb-urile bazate pe locație arată utilizatorului unde se află în ierarhia site-ului. Breadcrumb-urile bazate pe atribute arată utilizatorilor în ce categorii sau etichete se încadrează pagina lor. În cele din urmă, breadcrumb-urile bazate pe istoric arată utilizatorilor calea specifică pe care au urmat-o pentru a ajunge la pagina curentă.

Rolling Stone folosește navigarea prin breadcrumb bazată pe locație pentru a arăta utilizatorilor în ce secțiune a site-ului se află conținutul pe care îl vizionează. Acest tip de navigare prin breadcrumb este cel mai eficient pentru utilizatorii Rolling Stone, astfel încât aceștia pot naviga cu ușurință înapoi acasă sau la o pagină de categorie mai largă. Atunci când creați o navigare de tip breadcrumb, luați în considerare ce este cel mai util pentru vizitatorii site-ului dvs.

exemplu de pesmet bazat pe locație pe site-ul Rolling stone

Dacă site-ul dvs. web oferă produse cu multe opțiuni și stiluri diferite, pesmeturile bazate pe atribute sunt utile pentru a le permite utilizatorilor să-și restrângă căutarea și să acceseze cu ușurință paginile dintr-un atribut selectat. Verishop folosește pesmeturi bazate pe atribute pentru a afișa selecțiile utilizatorilor pe măsură ce își restrâng căutarea de prosoape după marcă și culoare, de exemplu.

exemplu de pesmet bazate pe atribute pe site-ul Verishop

Atunci când decideți ce tip de navigare prin breadcrumb este cel mai potrivit pentru site-ul dvs., ar trebui să luați în considerare structura site-ului dvs., tipul de produse sau servicii pe care le oferiți și modul în care vă așteptați ca utilizatorii să interacționeze cu paginile dvs.

9. Cunoaște-ți publicul.

Cea mai bună practică în navigarea prin breadcrumb este să plasați breadcrumb în partea de sus a paginii, sub navigarea principală. Cu toate acestea, Apple, una dintre cele mai valoroase companii din toate timpurile, sfidează această logică punând navigarea în breadcrumb în subsol, în partea de jos a site-ului. În cele din urmă, este esențial să-ți cunoști publicul. Clienții Apple sunt de obicei cunoscători de tehnologie și probabil că ar găsi navigarea dacă ar avea nevoie. Luați în considerare nevoile clienților dvs. și implementați testarea A/B dacă nu sunteți sigur.

exemplu de pesmet bazat pe locație pe site-ul Apple iPhone 13 Pro

Navigare prin breadcrumb în HTML și CSS

Nu numai că sunt utile pesmeturile, ci sunt și ușor de adăugat pe site-ul dvs. cu un pic de cod HTML și CSS.

Să începem cu HTML, pe care îl vom folosi pentru a crea link-urile în sine. Cel mai simplu mod de a face acest lucru este să vă organizați legăturile într-un element de listă neordonat (<ul>), fiecare element de listă (<li>) cuprinzând un link din seria breadcrumb până la articolul final, care denotă pagina curentă.

Iată un șablon HTML pentru pesmet pe care îl puteți folosi:

Vedeți pesmeturile Pen în HTML și CSS de la HubSpot (@hubspot) pe CodePen.

Observați cum am inclus și lista neordonată într-un element HTML <nav> (navigație) și am adăugat o clasă și o etichetă ARIA la eticheta de deschidere. Acest lucru este opțional, dar vă ajută să faceți pagina mai accesibilă cititorilor de ecran și motoarelor de căutare.

Desigur, acest HTML în sine nu este suficient - acum avem doar o listă cu marcatori de link-uri. Adăugând CSS, putem obține aspectul breadcrumb pe care îl căutăm. Aplicați următorul CSS la HTML-ul de mai sus:

Vedeți pesmeturile Pen în HTML și CSS de la HubSpot (@hubspot) pe CodePen.

Împreună, acest cod generează o zonă de navigare de bază care poate fi utilizată pe orice site - vezi rezultatul final de mai jos. Am adăugat și un stil suplimentar pentru un aspect mai curat. Pentru a vedea cum arată pesmeturile fără acest stil, comentați codul din partea de jos a filei CSS.

Vedeți pesmeturile Pen în HTML și CSS de la HubSpot (@hubspot) pe CodePen.

Navigare prin breadcrumb în Bootstrap CSS

Bootstrap CSS oferă, de asemenea, o modalitate de a crea breadcrumbs fără a fi nevoie să adăugați CSS personalizat. Pentru a face acest lucru, utilizați componenta Breadcrumb astfel. Iată un exemplu din documentația Bootstrap 5:

Vedeți pesmeturile stiloului în Bootstrap CSS de la HubSpot (@hubspot) pe CodePen.

Acestea sunt doar elementele de bază ale navigării pe breadcrumb în Bootstrap — consultați documentația pe ruta Bootstrap pentru a afla toate detaliile.

Design pentru a ajuta utilizatorii să navigheze pe site-ul dvs

În cele din urmă, navigarea prin pesmet este un instrument eficient pentru a face site-ul dvs. mai ușor de navigat, dar este important să luați în considerare cele mai bune practici pentru a vă asigura că profitați la maximum de bucățile (pesmet) gustoase. Pentru sfaturi suplimentare UX, consultați Ghidul nostru final pentru UX Design.

Nota editorului: această postare a fost publicată inițial în septembrie 2018 și a fost actualizată pentru a fi completă.

{{slideInCta('3b85a969-0893-4010-afb7-4690