Breadcrumbs – Element UI

Ce sunt Breadcrumbs UI?

Breadcrumbs pe un site web sau o aplicatie sunt UI elements de navigare care indica locatia intr-o structura pe mai multe niveluri si ofera linkuri clickabile pentru a urca in acea ierarhie. In alte cuvinte, breadcrumbs reprezinta path-ul pe care l-ai efectuat pe un website sau aplicatie. 

Navigarea prin breadcrumbs UX UI serveste ca o compozitie structurala pentru o navigare mai usoara pe paginile de nivel inalt si sunt afisate de obicei in partea de sus a unei pagini web sau a interfetei unei aplicatii. Breadcrumbs UI informeaza utilizatorii unde se afla pe un anumit site web, platforma sau aplicatie si ofera o cale clara de orientare. 

Acest path al unui breadcrumbs UI incepe de la pagina de start si progreseaza in paginile principale si secundare. Breadcrumbs ocupa un spatiu mai mic si sunt mai usor de inteles de catre utilizatori decat atunci cand sunt plasate intr-un meniu, mai ales daca platforma are un nivel mai ridicat de complexitate.

‍

Tipuri de Breadcrumbs in UI Design

1. Breadcrumbs bazate pe locatie

Aceste breadcrumbs UI arata locatia structurala a unui utilizator pe o platforma. Acest tip de breadcrumbs este folosit in majoritatea site-urilor eCommerce sau site-urilor cu mult continut si pentru mobile breadcrumbs ui. 

2. Breadcrumbs bazate pe atribute

Breadcrumbs UI bazate pe atribute sunt necesare atunci cand se filtreaza si se categorizeaza continutul pe baza unor caracteristici specifice. Acest tip de design de breadcrumbs UI este folosit in cumparaturile online pentru a ajuta utilizatorii sa gaseasca produse cu atributele dorite. Pot fi intalnite ca breadcrumbs pe mobil sau pe site, avand scopul de a oferi o experienta buna utilizatorului. Acest tip de breadcrumbs UX poate fi intalnit in bloguri pentru organizarea articolelor si continutului pe baza diferitelor tag-uri. Breadcrumbs bazate pe atribute sunt integrate intr-un design UI UX pentru a face experienta mai intuitiva si pentru a sustine o navigare fara probleme. Deci, integrati aceste breadcrumbs de navigare doar atunci cand designul web sau al aplicatiei poate sustine structura, mai ales cand vine vorba de mobile breadcrumbs ui.

3. Breadcrumbs bazate pe path

Breadcrumbs bazate pe path, sau breadcrumbs bazate pe istoric, arata path-ul unic pe care un utilizatorul l-a urmat si ofera posibilitatea de a reveni la pagina curenta la fiecare pas. Functia „inapoi la rezultate” functioneaza ca un buton de intoarcere si ajuta utilizatorul sa navigheze inapoi la pagina anterioara a caii lor.

‍

Cand se foloseste Breadcrumbs UI

• Utilizarea breadcrumbs UI este recomandata pe platformele cu mult continut care pot fi impartite in trei sau mai multe niveluri intr-o ierarhie, fie ca mobile breadcrumbs UI, fie pe breadcrums website.
• Foloseste breadcrumbs website atunci cand este necesara o structura pentru ca utilizatorul sa inteleaga platforma.
• Foloseste breadcrumbs website  atunci cand niciun alt tip de navigare vizuala nu poate oferi informatiile la acelasi nivel de profunzime.
• Foloseste navigarea breadcrumbs UX UI atunci cand utilizatorul ar putea avea nevoie sa se deplaseze rapid intre nivelul principal.

‍

Cum se foloseste Breadcrumbs UI

Navigarea unui breadcrumbs trebuie sa arate intotdeauna progresul de la cel mai inalt nivel (parent) la cel mai jos (child). Utilizatorii ar trebui sa poata naviga prin breadcrumbs UI in mod intuitiv, indiferent de locul in care se afla pe platforma. Breadcrumbs au patru stari: activa, focused, onhover si dezactivata.

• Breadcrumbs active: Breadcrumbs UX UI active reprezinta locatia curenta pe o platforma si ultimul nivel din ierarhie. Evidentiati si folositi un font mai indraznet sau o alta culoare atunci cand un breadcrumb UX este activ pentru a-l face intuitiv si evident.
• Breadcrumbs focused: Bread crumbs focalizate indica faptul ca un utilizator a interactionat recent cu linkul. Aceasta stare este ilustrata printr-un container de linkuri cu un contur de tip inline stroke.
• Breadcrumbs onhover: Breadcrumbs onhover sunt activate atunci cand un utilizator indica zona pe care urmeaza sa faca click. Starea implicita a unui breadcrumb onhover este sublinierea containerului. Dar puteti alege, de asemenea, sa evidentiati breadcrumb-ul UI – mai ales daca starea activa a unui breadcrumb este, de asemenea, evidentiata.
• Breadcrumbs dezactivate: Breadcrumbs dezactivate indica faptul ca un link nu este disponibil si pagina nu poate fi accesata. Este recomandat ca aceste bread crumbs sa fie folosite cu opacitate redusa si un semn de blocare atunci cand cursorul este pe link pentru a ilustra ca linkul este inactiv, dar inca vizibil in ierarhie.

‍

Inscrie-te acum la Cursul de UI UX Design de la Traction Keys

Parcurge cursul nostru de UI/UX design pentru a invata totul despre user interface si user experience. La cursul de UI UX design de la Traction Keys vei invata cum se creaza un sistem de design, cat si cum se creeaza UI UX design Breadcrumbs. Stapanirea tuturor elementelor cat si a practicilor de design UI UX te vor ajuta sa devii un designer UI UX complet si iti va asigura urmatorul tau job si viitoarea cariera.