Nav Tab – Element UI

Ce este un Nav Tab in UI UX Design?

Nav tabs UI sunt elemente de UI care organizeaza continutul asociat si permit utilizatorilor sa navigheze prin diferite vizualizari ale aceleiasi pagini. Acestea apar sub forma unor linii orizontale in corpul paginii si servesc scopurilor de navigare in interfata utilizatorului unei aplicatii mobile.

Fiecare destinatie intr-un nav tab UI este indicata de un icon relevant si un label de text optional. Cand un utilizator apasa pe un UI component al unui nav tab, actiunea este imediat declansata, iar vizualizarea paginii se schimba, lasand celelalte vizualizari inactive.

‍

Tipuri de Nav Tabs in UI Design

Nav tabs pot fi impartite in doua categorii:

1. Dupa Pozitionare

• Nav Tabs Statice: Nav tabs statice raman fixe pe ecran. Intr-un UI design, ele isi mentin pozitia constanta – indiferent daca utilizatorii comuta intre tab-uri sau sectiuni sau chiar deruleaza.
• Nav Tabs Dinamice: Nav tabs dinamice se ascund atunci cand utilizatorii deruleaza sau comuta intre elementele de navigare.
• Nav Tabs Scrollabile: Nav tabs scrollabile permit utilizatorilor sa navigheze prin mai multe tab-uri, unele tab-uri fiind in afara ecranului pana cand utilizatorul ajunge la ele. Acestea sunt folosite de cele mai multe ori de UI UX designers pentru interfetele touch.

2. Dupa Continut

• Nav Tabs Primare: Nav tabs primare sunt folosite in UI UX design pentru a organiza informatiile relevante pe o anumita pagina. Ele reprezinta continutul principal al elementului de destinatie si ofera utilizatorilor o idee despre ce sa se astepte de la aceasta pagina.
• Nav Tabs Secundare: Nav tabs secundare sunt plasate sub nav bars primare si sunt folosite de UI UX designers pentru a separa si mai mult continutul asociat. Ele sunt utilizate in platformele cu continut bogat sau cele cu multiple pagini, astfel incat sa poata stabili o ierarhie.

‍

Cand sa folosesti Nav Tabs in UI Design

Foloseste nav tabs in UI UX design atunci cand o cantitate mare de continut trebuie sa incapa intr-un spatiu mic. Nav tabs permit o navigare mai usoara intre acest continut prin organizarea acestuia in diferite vizualizari ale paginii la acelasi nivel de ierarhie. in loc sa fie folosite prea multe carduri sau optiuni pe o singura pagina, UI UX designers folosesc nav tabs pentru a distribui continutul in sectiuni gestionabile.

‍

Cele mai bune practici pentru Nav Tabs in UI Design

• Structura unui Nav Tab

Pentru a crea un Nav Tab, trebuie sa avem in vedere urmatoarele UI elements:

1. Container Nav Tab
2. Pictograma
3. Eticheta
4. Indicator Activ

‍

• Comportamentul unui Nav Tab 

Cand un utilizator selecteaza un alt element de nav tab de jos (diferit de elementul initial), aplicatia ar trebui sa navigheze imediat la pagina de destinatie pe care a declansat-o noul element. Acest lucru se face printr-un model de tranzitie si lasa celelalte pagini inactive.

Daca utilizatorul selecteaza acelasi element de nav tab de jos pe care se afla in prezent, aplicatia ar putea reveni la locul initial al ecranului (de obicei partea de sus). Dar ar putea, de asemenea, sa lase elementul complet inactiv, iar actiunea nu declanseaza nimic pe pagina, lasand ecranul asa cum este.

• Icons

Nav tabs ar trebui sa includa intotdeauna si un icon relevant pentru pagina de destinatie. Este recomandat ca UI UX designers sa foloseasca icons si simboluri recunoscute universal, astfel incat destinatia si actiunile din cadrul destinatiei sa fie clare pentru fiecare utilizator. Asociaza aceste pictograme cu o eticheta de text clara si scurta despre ce reprezinta destinatia si ce ar putea astepta utilizatorii. Acest lucru este bun daca pictograma nu este suficient de intuitiva sau evidenta pentru utilizatori.

Sfat Pro: Icons pot deveni optionale intr-un UI UX design daca sunt utilizate etichetele de text si vice-versa.

• Starile unui Nav Tab 

Un nav tab are doua stari: activ si inactiv.

Un Nav Tab UI element respectiv devine activ atunci cand un utilizator apasa pe elementul de navigare. Starea activa reprezinta faptul ca utilizatorul se afla in prezent pe pagina de destinatie pe care a declansat-o elementul. Pentru a indica vizual starea unui element de nav tab, pictograma este fie evidentiata, schimba culoarea, fie contururile sale devin umplute.

Starea inactiva a unui UI element de nav tab indica faptul ca utilizatorii nu au interactionat cu elementele respective. Acestea sunt estompate sau gri pentru a sugera vizual ca aceste optiuni nu sunt utilizate in prezent.

• Nu confunda continutul asociat cu cel secvential

Cand folosesti nav tabs, doar continutul asociat ar trebui sa fie grupat in categorii definite - nu continutul secvential. Nu folosi nav bars pentru continutul care trebuie citit intr-o anumita ordine. in schimb, ca UI UX designer este important sa stabilesti o ierarhie a continutului si sa-l grupezi in asa fel incat are sens pentru toti utilizatorii.

‍

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 Nav Tabs. 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.