Progress Bar – Element UI

Ce este un Progress Bar in UI Design?

Progress Bars sunt elemente UI folosite pentru a indica vizual progresul unei sarcini sau al unui flux de operatiuni. Software-ul UI/UX arata gradul de finalizare al sarcinii si cantitatea ramasa de completat. O progress bar UI poate fi, de asemenea, definita ca un instrument de experienta a utilizatorului care ajuta la crearea unui mediu intuitiv pentru orice utilizator potential.

‍

Care sunt Tipurile de Progres Bars in UI Design?

UI UX designers folosesc doua tipuri de progress bars cand creaza un produs digital: progress bars determinate si progress bars nedeterminate.

1. Progress Bars Determinate 

Progress bars determinate sunt folosite in UI UX design in contextul activitatilor cuantificabile si arata cat de mult a fost completata operatiunea si cat timp mai este pana la finalizarea completa. Este recomandat pentru UI UX designers sa utilizeze progress bars determinate ori de cate ori este posibil pentru a comunica starea unei actiuni. in acest fel, un progress bar este unul dintre cele mai bune instrumente UI UX, astfel incat utilizatorii sa stie ca platforma inca functioneaza si actiunea lor este in desfasurare.

2. Progress Bars Nedeterminate 

Progress bars nedeterminate sunt folosite in UI design atunci cand nu este posibil sa se masoare timpul necesar pentru a finaliza o operatiune. Acest tip de progress bar UI nu ofera utilizatorilor nicio indicatie despre o activitate in desfasurare, iar vizionarea acestui element UI prea mult timp ar putea duce la parasirea platformei. Cand sunt disponibile suficiente date, este recomandat ca UI UX designers sa implementeze un progress bar determinat.

Cand se folosesc un Progress Bar in UI Design

• Utilizati aceste componente de UI design atunci cand lucrati cu operatiuni care vor dura timp pentru a fi completate. in acest fel, progresul curent si cantitatea ramasa vor fi afisate.
• Utilizati aceste instrumente de experienta a utilizatorului atunci cand o actiune perturba un user interface pentru mai mult de trei secunde.
• Utilizati un progress bar in Figma atunci cand o operatiune necesita rularea in fundal pentru mai mult de trei secunde.
• Utilizati un progress bar in Figma atunci cand trebuie sa comunicati vizual progresul unei operatiuni in desfasurare si procentajul ramas.
• Nu folositi acest element UI daca se incarca intreaga pagina – folositi in schimb pagina Wireframe.

Cum sa Folositi Progress Bars in UI Design

• Eticheta 

Eticheta este optionala in designul barei de progres UI – in special in barele de progres indeterminate. Dar ar putea fi necesara atunci cand se lucreaza cu mai multi pasi. Pastrati continutul scurt, clar si concis. Nu oferiti prea multe informatii si folositi-o fara punct.

• Stare 

Starea arata progresul si cat mai este pana cand actiunea este completa. Este, de asemenea, optionala in barele de progres – in special atunci cand nu este posibil sa se determine cat timp va dura finalizarea unei anumite operatiuni. Acesta este in special cazul barelor de progres indeterminate.

• Combinarea Pasilor din Progress Bars

Daca un UI UX designer lucreaza cu mai multe operatiuni intr-un flux, este recomandat sa fie combinati toti pasii care fac parte dintr-un singur progress bar. Nu e bine sa fie data inapoi un componena UI de fiecare data cand un pas a fost completat, deoarece utilizatorii ar putea pierde increderea in acuratetea acesteia daca progress bar-ul UI se misca inapoi. 

De exemplu, atunci cand un utilizator incarca si verifica anumite fisiere in procesul de incarcare a fisierelor, asigurati-va ca este afisat doar o singura progress bar principala pentru intregul proces. Puteti adauga o alta progress bar, dar schimbati textul starii cand a fost finalizat si miscati progress bar-ul initial inainte simultan si continuu.

• Layout-ul unui Progress Bar Design

Un progress bar UX poate fi prezentata intr-un nou panou, intr-o notificare sau sub elementul de interfata utilizator care declanseaza sarcina. in unele cazuri, poate inlocui si interfata initiala a utilizatorului, cu conditia sa poata reveni la starea initiala atunci cand operatiunea este completa sau anulata. Permiteti utilizatorilor sa intrerupa sau sa anuleze prin adaugarea unui buton „inchide” in coltul din dreapta si asigurati-va ca butonul este aliniat cu eticheta barei de progres.

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 un progress bar UI design. 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.