Breadcrumbs Exemple de design web și cele mai bune practici

Inspirație – Exemple de site-uri webAndrian Valeanu – 14 iunie 2013 – 6 minute CITEȘTE

Breadcrumbs sunt un element foarte important în designul site-urilor web. Pentru a face acest lucru, puteți implementa breadcrumbs în designul web. Acesta sporește standardul site-ului dvs. web și, prin urmare, atrage vizitatorii pe site. Practic, acestea sunt linkuri bazate pe text. În mod normal, fontul breadcrumbs este cu câteva puncte mai mic decât dimensiunea textului original al conținutului site-ului web.

Când construiți un site web, care ar trebui să fie obiectivul dvs. principal? Bineînțeles, este ușurința de utilizare a site-ului. Fie că este vorba de un site educațional, de un site de comerț electronic sau de un site informațional; nu puteți ignora semnificația ușurinței de utilizare a site-ului.

Vizitatorii trebuie să beneficieze de informațiile de pe site într-un mod lipsit de probleme. Dacă este un site de comerț electronic, atunci vizitatorii nu trebuie să întâmpine dificultăți pentru a afla produsele lor preferate. În cazul în care consideră că le ia mult timp să obțină informații relevante de pe site-ul dvs., nu vor ezita să părăsească site-ul și să acceseze din nou pagina de căutare pentru a afla un alt site concurent care este mai util pentru ei. Prin urmare, este important să faceți site-ul util și eficient pentru vizitatori.

Breadcrumbs, după cum sugerează și numele, lasă o urmă pentru ca vizitatorii site-ului să se întoarcă la destinație într-un mod mai simplu. Numele este preluat din basmul „Hansel și Gretel”. Breadcrumbs sunt cunoscute ca fiind legăturile de text care se găsesc în general pe site-urile web în partea de sus a corpului principal al paginii; sub antetul sau/și orice banner grafic al paginii, dar deasupra conținutului. Breadcrumb-urile sunt planificate în funcție de structura paginii site-ului dvs. web.

De exemplu, dacă aveți un magazin de comerț electronic și un vizitator se află pe o pagină pentru frigidere, structura traseului breadcrumb va arăta principalele categorii care duc la pagina respectivă și înapoi la pagina principală, în funcție de ordinea corectă de apariție a acestora în pagină. Prin urmare, telespectatorii vor găsi breadcrumb-ul ceva de genul „Acasă>Dispozitive electronice>Electrocasnice>Refrigidere”. Acest traseu se bazează de obicei pe structura specifică a dosarelor din sistemul backend al site-ului web. Utilizatorul poate merge la oricare dintre paginile din traseu făcând clic pe text. De exemplu, dacă doriți să mergeți la pagina de pornire, puteți merge direct acolo făcând clic pe linkul „home” de pe traseul breadcrumb.

Breadcrumb-urile sunt utilizate în principal ca meniuri de navigare. Există mai multe moduri prin care un utilizator poate naviga prin diferite pagini ale unui site web. Meniurile de navigare trebuie să fie ușor de utilizat și simple. Prin urmare, breadcrumb este o idee genială ca meniu de navigare.

Nu numai ca meniuri de navigare, ci și pentru optimizarea pentru motoarele de căutare acest lucru este benefic. Mai ales în eCommerce, unde concurența poate fi mare, obținerea unei poziții înalte în motoarele de căutare este importantă. Deoarece breadcrumbs se bazează pe structura de dosare a site-ului web, acesta plasează cuvintele cheie în mai multe locuri pe întregul site web. Prin urmare, dacă „poncho de lână” este un termen de căutare popular în industria dumneavoastră, Breadcrumb va crea încă o legătură internă către cuvântul cheie relevant în cadrul site-ului dumneavoastră web.

Cu toate acestea, în timp ce vă ocupați de meniurile Breadcrumb, trebuie să rețineți un lucru, acest tip de navigare trebuie considerat ca o caracteristică suplimentară pentru a spori atractivitatea site-ului și nu ar trebui să înlocuiască meniurile de navigare primare utile.

În timp ce căutați mai multe tipuri de meniuri breadcrumb pe internet, puteți găsi meniuri de navigare breadcrumb bazate pe locație, bazate pe atribute și bazate pe traseu.

Componenta este realizată în culoarea neagră pentru a ieși în mod natural în evidență de pe fundalul deschis și pentru a intra în centrul atenției. Pânza texturată colaborează frumos cu designul artistic general. Legăturile sunt percepute rapid datorită tipografiei ascuțite și formale, iar spațiile mici dintre fiecare element contribuie la lizibilitate.

Order

În timp ce toate elementele din UI sunt marcate de gradiente subtile, firimiturile de pâine, dimpotrivă, aderă la un fundal mai curat, plat spre exterior și monocrom. Cu toate acestea, se potrivește destul de bine cu celelalte și completează estetica datorită coloritului similar. Butonul home adaugă un aspect clasic. Tonurile luminoase sunt folosite pentru a delimita mai eficient titlurile.

Breadcrumbs by Rob Dozier magnetizează cu un aspect extrem de elegant, curat și proaspăt. Deși navigația este realizată într-o schemă de culori deschise, totuși atrage atenția. Umbra subtilă oferă cutiilor în formă de săgeată un plus de greutate vizuală, ajutându-le astfel să iasă în evidență din fundalul zgomotos. Pentru a indica în mod clar poziția curentă, ultimul element este prezentat sub forma unei inscripții simple.

Breadcrumbs/Error de Jason Mayo este o bară de navigare raționalizată, fără goluri sau caracteristici impresionante. Se îmbină armonios cu compoziția, devenind un detaliu esențial al interfeței de utilizare. Cu toate acestea, un efect în relief salvează ziua. Acesta furnizează fiecărui bloc și titlu un aspect mai clar și mai ascuțit. Violetul care face parte din paleta de culori primare este aplicat pentru a evidenția pagina propriu-zisă.

Design Fundamentals

Allison House renunță la toate detaliile clasice în formă de săgeată și optează doar pentru caracteristici mai simpliste și mai elegante. Astfel, componenta arată natural și intuitiv și are un stil educațional puternic, care este necesar pentru proiect. Fiecare bloc include un titlu care este întărit de o pictogramă care îl însoțește.

La fel ca în exemplul anterior, Michal Vasko aranjează toate linkurile într-un rând abandonând detaliile grafice în favoarea tipografiei. Elementele sunt separate de mici săgeți minimaliste care, datorită culorii albastre, indică în mod discret direcția. Cu toate acestea, deoarece elementul este perfect integrat în design și culoarea gri nu contrastează puternic cu fundalul, poate fi ușor pierdut din vedere.

JomSocial Template

JomSocial Template este o cu totul altă problemă. Navigarea breadcrumbs are o mare greutate vizuală datorită dimensiunii sale relativ uriașe și coloritului luminos. Ea frapează ochiul fără să copleșească utilizatorii. Mohd Izuddin Helmi manipulează cu caractere tipografice distincte, umbra interioară, butonul home solid și câteva gradiente blânde pentru a obține un rezultat impresionant.

Acesta este un exemplu destul de elementar, dar are dreptul de a exista. Este cel mai simplu mod de a arăta utilizatorilor mișcările lor în cadrul proiectului. Deși este lipsit de un aspect frumos și are nevoie de câteva îmbunătățiri, totuși, își îndeplinește destul de bine rolul. Include toate caracteristicile comune: titluri, săgeți pentru direcție și chiar evidențierea culorii, oferind astfel vizitatorilor un asistent de navigare viabil.

Managementul galeriei de imagini

Navigația breadcrumbs degajă eleganță și claritate. Are un aspect curat și detaliat care este obținut printr-o muncă meșteșugită cu tipografia, spațiul alb și fundalul. Ultimul element are litere mai îndrăznețe, în contrast cu celelalte, pentru a direcționa atenția către pagina relevantă. Deși navigarea păstrează un aspect simplist, totuși are farmec și se potrivește ca o mănușă aici.

Gamerscouch.com redesign

Aaron Moody a creat cu vigilență front-end-ul site-ului în care breadcrumbs își ocupă locul cuvenit și au un aspect îngrijit, sofisticat și la modă. Navigarea completează designul general și surprinde starea de spirit a proiectului. Culoarea întunecată cu un strop de nuanță caldă de portocaliu conturează componenta și evocă emoții pozitive.

Concluzie

Ca un ajutor de navigare opțional care nu numai că sprijină meniul principal, dar dezvăluie și ierarhia și arată calea către secțiunea curentă, breadcrumbs sunt un instrument puternic pentru a îmbunătăți experiența utilizatorului.

Cu toate acestea, din păcate, destul de des rămâne destul de des trecut cu vederea în ceea ce privește designul, deși ar trebui să fie tratat ca orice element comun al UI. Exemplele enumerate mai sus stimulează utilizatorii cu privire la crearea unor breadcrumbs frumoase și intuitive, care își vor îndeplini misiunea, precum și nu vor fi o „oaie neagră” în design.