Breadcrumbs în magazinul online

Afișăm breadcrumbs în magazinul online? Răspunsul pe scurt este DA. Este necesar să afișăm breadcrumbs atât pe desktop, cât și pe dispozitivele mobile. Citește în continuare articolul să afli ce sunt breadcrumbs și de ce sunt importante atât pentru experiența utilizatorilor în magazinul online, cât și pentru motoarele de căutare.

Cuprins:

  1. Ce sunt breadcrumbs
  2. De ce sunt importante breadcrumbs pentru UX (experiența utilizatorilor)
  3. Tipuri de breadcrumbs pentru pagina de produs
  4. Cum implementezi breadcrumbs în magazinul online pentru dispozitivele mobile
  5. De ce sunt importante breadcrumbs pentru SEO?
  6. Concluzie

1. Ce sunt breadcrumbs?

Breadcrumbs sunt elemente de navigație secundară care indică locația vizitatorului în site. Acestea ajută la crearea unui user experience mai bun, dar și la SEO. 

Câteva dintre avantajele principale ale breadcrumbs sunt:

  • Încurajează și facilitează navigarea în magazin
  • Reduc rata de respingere (bounce)
  • Ajută la orientarea utilizatorilor în site
  • Google le iubește, deci te vor ajuta și la indexarea în motoarele de căutare

În magazinele online, acestea sunt afișate, în general, pe pagina de produs și, opțional, în paginile de categorie. Nu se afișează niciodată pe pagina principală. 

✔️ Breadcrumbs pe pagina de produs în magazinul domo.ro

Ele au aspectul unor linkuri afișate orizontal. Sunt plasate în partea superioară a paginii, sub meniu/header și înainte de alte elemente din pagină precum imaginea de produs, denumire sau descriere. Pentru pagina de produs a unui magazin online de fashion acestea ar putea arăta așa:

Home –  Femei – Încălțăminte – Balerini – Balerini de piele Geox

Utilizatorul poate da click pe elementele afișate în breadcrumbs pentru a naviga la niveluri superioare ale catalogului de produse. În exemplul de mai sus, poate da click pe Balerini pentru a trece de la pagina de produs la subcategoria din acesta care face parte. Astfel va vedea rapid toată oferta disponibilă pentru tipul de produs care-l interesează.

2. De ce sunt importante breadcrumbs pentru UX (experiența utilizatorilor)

Chiar dacă poate până acum nu le-ai acordat atenție, trebuie să știi că implementarea breadcrumbs în magazinul online va avea impact asupra:

  • ratei de respingere (bounce)
  • uzabiltății
  • satisfacției vizitatorilor
  • modului în care un utilizator va naviga pe site-ul tău

Afișarea breadcrumbs oferă o experiență mai bună pentru utilizator deoarece îl ajută:

Să se orienteze mai bine în ierarhia site-ului

Utilizatorii urăsc să se simtă dezorientați sau rătăciți. Cu ajutorul breadcrumbs ei își vor da seama mai ușor unde se află în magazin și unde ar putea să navigheze în continuare pentru a găsi produse de interes. Asta este în special util pentru cei care ajung pe direct pe paginile de produs din surse externe (căutări pe Google, campanii marketing etc.).

Să navigheze mai ușor și repede în magazin și să găsească produse relevante

Navigarea prin breadcrumbs este mult mai rapidă și necesită mai puțin efort decât navigarea prin accesarea meniului sau prin funcția de căutare. Asta pentru că numărul de acțiuni pe care un user e nevoie să le facă pentru a ajunge la o pagină de nivel superior se reduce semnificativ. Navigarea prin meniu, de sus în jos, implică mult mai mult efort și mai multe clickuri din partea utilizatorului. 

Să navigheze ușor la pașii anteriori

De exemplu, vizitatorul poate să meargă de pe pagina de produs înapoi la rezultatele unei căutări, dacă site-ul are implementat și breadcrumbs bazate pe istoricul de navigare. 

Exemplu de utilizare breadcrumbs în magazinul online

Să luăm exemplul de breadcrumbs din magazinul de fashion: 

Home –  Femei – Încălțăminte – Balerini – Balerini de piele Geox

Să zicem că un utilizator ajunge direct pe pagina produsului dintr-o căutare pe Google, dar realizează că modelul nu este ceea ce îți dorește. Fiindcă magazinul are implementate breadcrumbs, el poate da rapid click pe categoria Balerini din cadrul lor pentru a vizualiza întreaga ofertă de balerini disponibilă în magazin. 

Pe answear.ro nu sunt afișate breadcrumbs pe pagina de produs. Dacă userul ajunge direct pe această pagină, dintr-o sursă externă de trafic, va trebui să navigheze fie utilizând meniul principal, fie utilizând funcția de căutare pentru a găsi produse similare. Navigarea prin breadcrumbs ar fi fost mai rapidă și ar fi implicat mai puține acțiuni pentru utilizator.

Alternativa ar fi fost să acceseze meniul principal și să parcurgă navigația de sus în jos. În acest caz, ar fi trebuit să-și dea singur seama unde ar putea fi incluși balerinii în ierarhia site-ului. Poate în acest exemplu nu este atât de dificil să-și dai seama, dar deseori utilizatorii nu știu cum să localizeze anumite categorii de produse. 

O altă variantă ar fi fost să folosească funcția de căutare a site-ului pentru a găsi categoria de produse dorită. Din păcate, funcția de căutare lasă de dorit pe multe dintre magazinele online și nu afișează aceleași produse precum pagina de categorie. De cele mai multe ori, pe pagina rezultatelor unei căutări nu sunt disponibile nici filtrele pe care le ai disponibile la nivel de categorie, fapt care are impact negativ asupra experienței utilizatorului. 

Realitatea este că, deseori, utilizatorii nu sunt dispuși să investească energia necesară pentru a găsi produsele dorite. Navigarea prin breadcrumbs este mai la îndemână și rapidă decât cea prin meniul magazinului sau utilizarea funcției de căutare. Acest lucru este valabil în măsură și mai mare pentru userii care navighează de pe dispozitive mobile. Pe telefon e dificil să navighezi, meniul este ascuns, iar orientarea în site se face mult mai greu. 

3. Tipuri de breadcrumbs pentru pagina de produs

Există două tipuri de breadcrumbs de care magazinele online au nevoie:

Breadcrumbs bazate pe ierarhia site-ului 

Acestea arată calea de la pagina pe care userul o vizualizează, înapoi înspre pagina principală, bazându-se pe structura de categorii a site-ului. 

Ex: Home – Categorie Principală – Categorie secundară – Subcategorie – Produs 

Cea mai frecventă utilizare a breadcrumbs este de a naviga un nivel în sus, de la pagina de produs la categoria din care acesta face parte. Astfel vizitatorul poate vedea rapid produse similare cu cel pe a cărui pagină se află.

Dacă nu sunt afișate breadcrumbs pe pagina de produs, vizitatorilor le va fi mai greu să navigheze în site, iar probabilitatea de a abandona site-ul crește. În schimb, afișarea breadcrumbs încurajează navigarea în magazin și vizualizarea unor produse similare cu cele pentru care userul și-a manifestat interesul.

Breadcrumbs bazate pe istoricul de navigare

Uneori utilizatorii aplică filtre la o listă de produse sau fac anumite căutări pe site. În acest caz, afișarea breadcrumbs bazate pe istoricul de navigare, ajută userii să se întoarcă de la pagina de produs la lista de produse filtrate sau la rezultatele căutării. 

✔️ Magazinul thehome.ro afișează pe mobile atât breadcrumbs bazate pe ierarhia site-ului (Mobilier / Mese / Mese Dining), cât și breadcrumbs bazate pe istoric (Înapoi). În acest caz, a fost aplicat un filtru pe categorie (material: lemn), iar butonul de Înapoi ne va duce la lista de produse cu filtrul aplicat. În schimb, dacă dăm click pe Mese Dining vom ajunge la categoria respectivă, dar fără filtrul aplicat.

Acest tip de breadcrumbs sunt afișate pe pagina de produs ca un link de tipul Înapoi și chiar funcționează ca butonul de Back. Ele pot fi introduse fie înainte de breadcrumbs bazate pe ierarhia site-ului, fie la finalul acestora sau în proximitate. 

Atenție însă – unele magazine implementează doar acest tip de breadcrumbs, renunțând la cele bazate pe structura site-ului, ceea ce reprezintă o greșeală. Deși sunt utile, ele nu pot înlocui navigația prin breadcrumbs bazate pe ierarhia site-ului. 

4. Cum implementezi breadcrumbs în magazinul online pentru dispozitivele mobile

Testele de uzabilitate arată că, pe mobil utilitatea afișării breadcrumbs este și mai mare decât pe desktop. Asta se întâmplă din mai multe motive: 

  • Utilizatorii se orientează mai greu pe mobil deoarece elementele care încap pe ecran sunt mai puține, iar meniul nu este vizibil. 
  • Navigarea la categoriile dorite este mai dificilă și necesită mai multe clickuri și efort. 
  • Pe mobil userii își pierd răbdarea mai repede. Orice click în plus înseamnă efort în plus și timp de așteptare suplimentar până se încarcă pagina.

Cu toate acestea, unele magazine aleg să nu afișeze aceste breadcrumbs pe dispozitivele mobile din cauză că aglomerează interfața. Unele, chiar dacă le includ, aleg să afișeze doar anumite categorii pentru a reduce lungimea lor (ex. Categoria părinte din care face parte produsul). Această implementare nu este ideală deoarece nu se aliniază nevoilor și așteptărilor utilizatorilor. 

Nu este recomandat să renunți la afișarea breadcrumbs pe dispozitivele mobile. Pentru a le implementa cu succes, fără să aglomerezi interfața inutil, există câteva detalii de implementare prin care le poți scurta.

Cum poți scurta breadcrumbs pentru mobile?

  1. Exclude din breadcrumbs pagina principală a magazinului (home) și denumirea produsului pe pagina căruia se află userul. Pagina principală poate fi accesată oricum accesând logo-ul site-ului, iar pagina produsului nu ar fi fost oricum un link care să poată fi accesat. De exemplu, în loc de Home > Femei > Încălțăminte > Pantofi Sport > Teniți > Teniși de piele Tommy Hilfiger poți afișa doar Femei > Încălțăminte > Pantofi Sport > Teniși. Testele de uzabilitate desfășurate de Baymard Institute arată că aceast mod de a le scurta nu afectează performanța în mod negativ.
  1. Dacă denumirea este prea lungă și după implementarea de mai sus, poți opta să le faci glisabile (swipeable). Astfel userii vor putea da swipe, dacă sunt interesați să navigheze utilizând breadcrumbs. Testele arată că, în practică, această abordare funcționează bine și nu creează probleme. 
✔️ f64.ro a implementat breadcrumbs glisabile (swipeable) pentru mobil
  1. Evită supra-categorizarea în magazinul online – mai exact să creezi mai multe categorii de produse decât este cazul. Acest sfat te va ajuta pe mai multe planuri, nu doar în navigația prin breadcrumbs. În general, trebuie să eviți să creezi mai multe categorii sau subcategorii decât este necesar. În schimb, e indicat să folosești filtre pe care userii le pot aplica pentru a reduce lista de produse și a le găsi pe cele relevante pentru ei. De exemplu, în loc să ai o subcategorie Rochii de plajă, poți avea un filtru în categoria Rochii, unde userii pot selecta atributul de plajă.

5. De ce sunt importante breadcrumbs pentru SEO?

Breadcrumbs indică motoarelor de căutare cum este structurat site-ul. Google a schimbat recent modul cum afișează rezultatele căutării și acum arată în loc de url-ul paginilor, fragmente din breadcrumbs. Acestea oferă informații mai utile pentru utilizatori decât url-urile care nu indică întotdeauna modul în care o pagină se încadrează în ierarhia site-ului.

Google afișează breadcrumbs în rezultatele căutării.

Din Centrul pentru Dezvoltatori aflăm că Google folosește marcajul pentru breadcrumbs pentru a clasifica informațiile din pagină în rezultatele căutării.

Chiar și în Google Search Console a apărut un raport de date structurate dedicat special pentru Breadcrumbs. Acesta ajută administratorii de magazine online să identifice dacă sunt implementate corect sau dacă există erori.

Pe scurt, Google iubește breadcrumbs și încurajează utilizarea lor. 

6. Concluzie

În concluzie, implementarea breadcrumbs în magazinul online îți va aduce beneficii multiple atât în ceea ce privește experiența utilizatorilor, cât și din punct de vedere SEO. Afișarea lor este utilă pe desktop, dar mai ales pentru userii care accesează site-ul de pe telefon, unde navigarea se face cu mai mare dificultate. Așadar, afișează-le și pentru dispozitivele mobile. Pentru a le scurta, folosește sfaturile de implementare de mai sus.

Următorii pași pentru a îmbunătăți experiența utilizatorilor în magazinul tău online

Ai un magazin online și vrei să transformi mai mulți vizitatori în clienți? 

Află cum poți îmbunătăți experiența în magazinul tău online! Solicită un Audit UX și vei primi:

  • o analiză amănunțită a paginilor și funcționalităților magazinului tău
  • recomandări concrete pe care să le implementezi pentru a îmbunătăți rata de conversie și experiența pe care o oferi vizitatorilor
Avatar
Autor

Oana Chiriac este specialist certificat în eCommerce UX de Baymard Institute și în optimizarea ratei de conversie de CXL Institute. Activează în zona de eCommerce & marketing digital de peste 9 ani. În prezent, oferă și consultanță pentru magazinele online în vederea optimizării conversiei și a experienței de utilizare (UX).

Scrie un comentariu