În basmul Hansel și Gretel, doi copii aruncă firimituri de pâine în pădure pentru a-și găsi drumul spre casă.
În zilele noastre, probabil că nu trăiți prea multe experiențe de rătăcire în pădure, dar sunt dispus să pariez că v-ați simțit frustrant de dezorientat pe site-uri web prost proiectate.
În designul site-urilor web, navigarea cu firimituri de pâine este o modalitate de a le arăta utilizatorilor dvs. locația lor și modul în care au ajuns acolo (similar cu firimiturile de pâine ale lui Hansel). De asemenea, îi ajută pe utilizatori să găsească mai repede pagini de nivel superior dacă au ajuns pe site-ul dvs. de la o căutare sau de la un link profund.
- Ce este navigarea breadcrumb?
- Consiliere și exemple de navigare breadcrumb
- Utilizați navigarea breadcrumb doar dacă are sens pentru structura site-ului dumneavoastră.
- Nu faceți navigarea breadcrumb prea mare.
- Includeți calea de navigare completă în navigarea breadcrumb.
- Progresează de la cel mai înalt nivel la cel mai jos.
- Păstrați titlurile breadcrumb-urilor în concordanță cu titlurile paginilor.
- Să fim creativi cu designul.
- Păstrați-o curată și lipsită de dezordine.
- Considerați ce tip de navigare breadcrumb are cel mai mult sens pentru site-ul dumneavoastră.
- Cunoașteți-vă publicul.
Navigația breadcrumb este o modalitate prin care utilizatorii pot vizualiza locația lor pe un site web. Este o bară de navigare secundară care apare de obicei sub formă de linkuri de text orizontale, separate de simbolul „mai mare decât” (>). Navigarea breadcrumb îmbunătățește capacitatea de regăsire a paginilor dvs. de destinație și ajută utilizatorii să ajungă mai repede la paginile de nivel superior dacă au găsit inițial site-ul dvs. de la căutare sau de la un link profund.
Jakob Nielsen, co-fondator al Nielsen Norman Group, recomandă navigarea breadcrumb încă din 1995 și aduce un argument puternic în favoarea acestora: „Tot ceea ce fac firimiturile de pâine este să le faciliteze utilizatorilor deplasarea pe site, presupunând că conținutul și structura generală a acestuia au sens. Aceasta este o contribuție suficientă pentru ceva care ocupă doar o singură linie în design.”
Dacă site-ul web al afacerii dvs. are mai multe niveluri, ați putea lua în considerare implementarea navigării breadcrumb pentru a face site-ul dvs. mai ușor de navigat. Cu toate acestea, ca orice element de design, există un mod corect și unul greșit de a face acest lucru. Aici, vom explora nouă sfaturi și exemple pentru a vă asigura că creați cea mai eficientă navigare breadcrumb pentru utilizatorii dumneavoastră.
Navigația breadcrumb are o structură liniară, deci doriți să o utilizați doar dacă are sens cu ierarhia site-ului dumneavoastră. Dacă aveți pagini de nivel inferior care sunt accesibile din diferite pagini de destinație, utilizarea navigației breadcrumb nu va face decât să deruteze cititorii care continuă să acceseze aceleași pagini din puncte de plecare diferite. În plus, dacă site-ul dvs. este relativ simplu, cu doar câteva pagini, probabil că nu aveți nevoie de navigarea breadcrumb.
Navigația breadcrumb este un instrument secundar față de bara de navigare principală, așa că nu ar trebui să fie prea mare sau proeminentă pe pagină. De exemplu, pe site-ul web al DHL, bara lor de navigare principală este mare și ușor de recunoscut, cu coloane precum „Express” „Parcel & eCommerce” „Logistică” etc. Navigarea lor breadcrumb este secțiunea mai mică de mai jos, care spune „DHL Global | > Logistică | > Transport de marfă”. Nu doriți ca utilizatorii dvs. să confunde navigarea breadcrumb cu bara de navigare principală.
Am căutat pe Google „Elon University Non-Degree Students” pentru a ajunge la această pagină de destinație, dar Elon este inteligent să includă calea de navigare completă, inclusiv „Home” și „Admissions”. Dacă omiteți anumite niveluri, veți deruta utilizatorii, iar calea breadcrumb nu va părea la fel de utilă. Chiar dacă utilizatorii nu au început de pe pagina de pornire, doriți să le oferiți o modalitate ușoară de a vă explora site-ul de la început.
Progresează de la cel mai înalt nivel la cel mai jos.
Este important ca navigarea breadcrumb să se citească de la stânga la dreapta, cea mai apropiată legătură din stânga fiind pagina de pornire, iar cea mai apropiată legătură din dreapta fiind pagina curentă a utilizatorului. Un studiu realizat de Nielsen Norman Group a constatat că utilizatorii petrec 80% din timpul lor vizualizând jumătatea stângă a unei pagini și 20% vizualizând jumătatea dreaptă, ceea ce constituie un argument puternic pentru un design de la stânga la dreapta. În plus, link-ul cel mai apropiat de stânga va apărea ca fiind începutul lanțului, așa că doriți ca acesta să fie pagina dvs. de cel mai înalt nivel.
Pentru a evita confuzia, veți dori să rămâneți în concordanță cu titlurile paginilor și breadcrumb-urilor, în special dacă vizați anumite cuvinte cheie în aceste titluri. De asemenea, doriți să legați în mod clar titlurile breadcrumb-urilor dvs. de pagină. Dacă titlul breadcrumb nu are un link, clarificați acest lucru. Nestle își etichetează eficient titlurile breadcrumb-urilor pentru a se potrivi cu titlurile paginilor. „Arii de impact & angajament”, de exemplu, se citește la fel în navigarea breadcrumb ca și pe pagină.
Nestle face, de asemenea, o treabă bună în a diferenția legăturile de non-legături cu culori diferite – legăturile sunt albastre, în timp ce non-legăturile rămân gri.
Să fim creativi cu designul.
Navigația breadcrumb tradițională arată astfel: Home > Despre noi > Cariere. Cu toate acestea, nu trebuie să urmați calea tradițională dacă simțiți că un design diferit ar putea atrage mai mult publicul dumneavoastră sau ar arăta mai bine pe site-ul dumneavoastră.
De exemplu, Target folosește navigarea breadcrumb în paginile de produse (pentru că cine nu s-ar pierde în secțiunea virtuală de pantofi?), dar folosește simbolurile „/” și un text simplu negru și gri. În acest caz, variația subtilă de design are sens pentru estetica site-ului lor.
Păstrați-o curată și lipsită de dezordine.
Navigația breadcrumb este pur și simplu un ajutor pentru utilizator și, în mod ideal, nu ar trebui să fie observată decât dacă utilizatorul o caută. Din acest motiv, nu doriți să vă aglomerați navigarea breadcrumb cu text inutil.
Eionet, de exemplu, ar putea renunța la textul lor „You are here”. Deși este menit să fie util, textul aglomerează pagina. Cu un design corect, o navigare breadcrumb ar trebui să fie suficient de vizibilă fără o introducere.
Există câteva tipuri diferite de breadcrumbs pe care le puteți folosi – bazate pe locație, pe atribute și pe istoric. Breadcrumb-urile bazate pe locație arată utilizatorului unde se află în ierarhia site-ului. Breadcrumbs bazate pe atribute arată utilizatorilor în ce categorie se încadrează pagina lor. În cele din urmă, firul de pâine bazat pe istoric le arată utilizatorilor calea specifică pe care au urmat-o pentru a ajunge la pagina curentă.
Bed Bath & Beyond folosește navigarea cu firul de pâine bazat pe atribute pentru a le arăta utilizatorilor în ce categorie se încadrează pagina lor de produs, astfel încât utilizatorii pot face clic înapoi la „Bucătărie” sau „Aparate mici” pentru a parcurge articole similare. Acest tip de navigare breadcrumb este cel mai eficient pentru clienții Bed Bath & Beyond. Atunci când creați o navigare breadcrumb, luați în considerare ceea ce este cel mai util pentru vizitatorii site-ului dvs.
Cunoașteți-vă publicul.
Bunele practici în materie de navigare breadcrumb îndeamnă designerii web să plaseze navigarea în partea de sus a paginii – dar Apple, una dintre cele mai valoroase companii din toate timpurile, sfidează această logică prin plasarea navigării breadcrumb în partea de jos a site-ului lor. În cele din urmă, este esențial să vă cunoașteți publicul. Clienții Apple sunt, de obicei, cunoscători de tehnologie și ar găsi probabil navigarea dacă ar avea nevoie de ea. Luați în considerare nevoile clienților dvs. și implementați teste A/B dacă nu sunteți sigur.
În cele din urmă, navigarea breadcrumb este un instrument eficient pentru a face site-ul dvs. mai ușor de navigat, dar doriți să urmați cele mai bune practici de design pentru a vă asigura că profitați de utilitatea instrumentului. Pentru sfaturi UX suplimentare, consultați „The Ultimate Guide to UX Design”.
