Resources

Cum folosim Breadcrumbs in Web Design?

By October 4, 2017 No Comments

breadcrumbs

O experienta excelenta a utilizatorului contribuie la indrumarea vizitatorului spre obiectivul sau. Acesta ar putea fi achizitionarea unui produs, citirea unui articol sau trimiterea de mesaje de catre cineva de pe site-ul social. Cea mai buna modalitate de a imbunatati experienta utilizatorului este printr-o navigare clara. Si puteti imbunatati navigatia prin adaugare in paginile dvs. Aceste breadcrumbs ajuta la definirea unei ierarhii de continut pentru pagina dvs si ii incurajeaza pe vizitatori sa se ocupe mai adanc in site-ul vostru, indiferent daca site-ul este un magazin de comert electronic sau un blog online, este intotdeauna un lucru bun pentru a atrage vizitatorii sa sara mai adanc.

Sa ne aruncam in paine si sa vedem cum pot fi folosite pe internet. Voi impartasi exemplele mele preferate impreuna cu cateva resurse gratuite pentru designeri si dezvoltatori.

INTRO TO BREADCRUMBS

In general, breadcrumbs este folosit pentru a desemna o ierarhie in continut. Acestea permit cititorilor dvs sa stie exact unde se afla pe site-ul dvs si modul in care fiecare pagina se incadreaza in structura generala. Aceasta nava de pescuit statificata se potriveste frumos cu categoriile de pe site cu mai multe niveluri. Dar este posibil sa utilizati si breadcrumbs pentru a organiza alte caracteristici, cum ar fi etichete, arhive sau chiar articole cu mai multe pagini.

Fisele de pescuit detaliate sunt intotdeauna utile deoarece incurajeaza utilizatorii sa intre mai adanc in site. Magazinele de comert electronic sunt notorii pentru pescuitul detaliat deoarece pot avea adesea 3 sau 4 niveluri de categorii.

Amazon este cel mai mare magazin de comert electronic pe care il veti gasi.

amazon breadcrumbs

In general, acestea nu vor face prea multe pentru SERP-uri, dar veti obtine caracteristici remarcabile in breadcrumb in Google.

google ajax search breadcrumbs

Sterge ierarhia continutului. Breadcrumbs sunt doar o parte a proiectarii acestei ierarhii pentru cea mai buna experienta a utilizatorului.

Google search consoleCRUMBS in BLOG LAYOUTS

Prefer sa vad pestoarea langa antetul paginii si in vedere clara. Acestea ar trebui sa defineasca ca este pagina si sa includa link-uri catre categorii relevante.

ubuntu handbook breadcrumbs

Putine bloguri vor ajunge mai complicate decat acestea, dar arata cat de bine functioneaza pescuitul in setarea potrivita. In plus, utilizatorii pot accesa rapid alte articole de tip how-to daca sunt curiosi sa citeasca mai multe. Dar unul dintre modelele mele preferate de pescuit pe blog este reprezentarea TutsPlus, care adauga elemente de pescuit in antetul paginii principale.

envato tutplus breadcrumbsDin moment ce TutsPlus foloseste meniuri mari pentru navigarea lor, este mai greu sa sapi in categorii. Dar aceste link-uri de navigare ofera acces cu un singur click la categorii care ar putea interesa utilizatorul pe baza a ceea ce citesc. Urmati orice tehnica care sa se potriveasca cel mai bine la blogul dvs. Nu aveti nevoie de breadcrumbs care sa apara fals sau detaliat; ei trebuie doar sa functioneze.

Ecommerce Breadcrumb Designs

Intotdeauna recomand magazinele de comert electronic sa foloseasca breadcrumbs, deoarece sunt doar atat de utile pentru utilizatorul final. Paginile de produse nu au continut la fel de bun ca o postare pe blog. Daca vizitatorii doresc sa gaseasca produse similare, legaturile de pescuit sunt solutia perfecta.

wayfair breadcrumbsImi place de asemenea felul in care in paginile de categorii se include breadcrumbs. Bara principala de pescuit este vizibila in principiu in fiecare pagina, astfel este o navigare consecventa pentru cumparatorii Wayfair. Veti gasi un design similar pe site-ul Walmart, desig navigatia lor de pescuit este mult mai mica si mai subtire.

walmart breadcrumbsDar partea de sus a legaturilor mai mici este ca nu depasesc pagina. Economisiti mai mult spatiu pe ecran pentru preturile produselor si caracteristicile de checkout. Nu exista nici o modalitate corecta sau gresita de a face paine de comert electonic. Ei cheie este de a va asigura ca le aveti undeva pe pagina in care utilizatorii le pot vedea si de a le folosi.

Breadcrumb Web Design Freebies

In loc sa-ti proiectezi propriile UI-uri de pescuit, de ce sa nu resetezi unul existent? Exista tone de PSD-uri gratuite online. Acestea sunt motivele mele de top, deoarece sunt usor de descarcat si se pot potrivi in orice site WEB. Uneori link-urile plaintext sunt bune, dar daca doriti o lovitura incercati sa refaceti aceste “freebies”.

Checkout Process

checkout processAmbii pasi de progres si pescuitul par foarte asemanatoare, dar foloste in scopuri diferite. Formatele sagetiloor conduc vizitatorii prin legaturi si fiecare “segment” este clar definit cu umbre de picatura. Deci, fie acest mod gratuit functioneaza bine pentru inceput.

Traditional Crumbs

breadcrumbs freebies

Simple Nav

dark and light breadcrumbsOfera atat o versiune intunecata si usoara, acest freebie ar trebui sa se potriveasca practic cu orice pagina web cu usurinta.

Light Blue Gradients

blue gradient breadcrumbsEste foarte usor sa creati gradiente in CSS3 si acum le puteti aplica paginilor dvs cu aceste breadcrumbs.

WP Breadcrumb

O alta alegere pentru WordPress este pluginul simplu Breadcrumbs. Acest lucru nu are la fel de multe actualizari frecvente, dar este inca un plugin stabil, care va permite sa adaugati rapid breadcrumbs pe site-ul dvs. Aceste miezuri functioneaza in cea mai mare parte prin intermediul codurilor scurte, dar puteti schimba setarile pentru a rula pescuitul pe orice pagina. Din pacate, design-ul implicit este destul de urat, asa ca veti dori sa editati in CSS.

Daca nu aveti prea multe cunostinte in codificare, atunci acest plugin poate fi un obstacol mai dificil decat NavXT.

Bootsnipp Breadcrumbs

bootsnipp breadcrumbsFiecare fragment este trimit de altii care isi elibereaza codurile. In special toate acestea ruleaza pe cea mai recenta versiune de BootStrap, cu multe coduri, chiar sustinand actualizarea BS4. Dar aceste fragmente sunt doar foarte utile pentru dezvoltatorii care lucreaza cu BootStrap. Totusi acestea sunt nepretuite pentru crearea de paini de pescuit care functioneaza si respecta stilurile receptive ale BootStrap.

CodePen Snippets

codepen breadcrumbsO alta resursa pe care ati putea sa o explorati este CodePen. Acest IDE browser gratuit va permite dezvoltatorilor sa salveze fragmentele de cod si sa le partajeze cu lumea. Daca navigati prin eticheta de pescuit, veti gasi o multime de stiluri de cofetarie CSS coapte pentru colectare. Puteti sa le testati chiar in “cod” si sa reaplicati pentru a salva modificarile.

Moving Forward

Daca rulati un site care ar putea beneficia de breadcrumbs, recomand sa le testati. Nu aveti prea multe de pierdut si majoritatea utilizatorilor apreciaza navigatia adaugata. Dar asigurati-va ca urmati unele dintre cele mai bune practici din exemplele din acest post. O nava de pescuit dificil este mai rau decat nimic. Incercati sa va pozitionati in ochii utilizatorului si sa creati breadcrumbs pentru nevoile lor.

GabrielSita

Author GabrielSita

More posts by GabrielSita

Leave a Reply