Stepper – Element UI

Ce este un Stepper in UI/UX?

Steppers sunt elemente de UI folosite pentru a afisa progresul realizat de un utilizator. Ele servesc scopurilor de navigare, ghidand utilizatorul prin pasii urmatori ai unei operatiuni.

Stepper-urile UI reusesc sa ia un proces mai complicat si sa-l imparta in pasi mai mici. in acest fel, utilizatorii vor sti clar cum sa finalizeze actiunea. Stepper-urile UI sunt utilizate in formulare si in interfetele utilizatorilor unde sunt necesare mai multe pagini. De exemplu, cumpararea unui articol sau aplicarea pentru un imprumut.

Un design stepper poate fi impartit in doua versiuni potrivite pentru interfetele posibile: stepper UI mobil si stepper pentru site-uri web. Atat stepper-ul UI mobil, cat si stepper-ul pentru site-uri web au scopul de a finaliza un proces multi-step prin descompunerea acestuia in sarcini mai mici, facandu-l mai putin coplesitor.

Stepper-ul UI de progres este integrat intr-un design pentru a aduce claritate si pentru a crea un design precis, prietenos pentru utilizator. Este un proces de descompunere divizat de abordarea clasica, care poate preveni erorile. Un stepper UI va ajuta utilizatorii sa isi urmareasca progresul corespunzator si sa respecte obiectivul pe care si l-au stabilit.

Tipuri de Steppers in UI Design:

1. Steppers UI Orizontale

Cu stepers UI orizontale, utilizatorii pot vizualiza o linie simpla de la inceput pana la sfarsit. Acest design de stepper UI ajuta utilizatorii sa determine vizual exact cate sectiuni sunt necesare pentru a naviga. Folositi steppere orizontale cu intelepciune deoarece nu sunt foarte compatibile cu ecranele mici - cum ar fi ecranele mobile. Acest stepper UX ajuta la crearea unui mediu in care utilizatorii pot anticipa si vedea pasii pe care trebuie sa-i navigheze pentru a finaliza procesul.

2. Steppers UI Verticale

Un Stepper UI vertical permite utilizatorilor sa vizualizeze pasii necesari pentru a finaliza ierarhic, de sus in jos. Un Stepper UI vertical este ideal pentru ilustrarea cronologiei pasilor urmatori. Dar, in functie de layout, pasii urmatori pot sa nu fie vizibili, iar revenirea intre pasi poate fi mai dificila. Un stepper UI vertical aduce avantajul unui design care ajuta utilizatorii sa creeze o ierarhie privind acel stepper UX necesar.

Cand sa Folosesti Steppers in UI UX Design:

• Folositi un stepper UI in procese mai lungi unde sunt necesari mai multi pasi - checkout, inregistrare, onboarding etc.
• Folositi un stepper UX atunci cand intrebarile sau campurile sunt impartite in categorii.
• Folositi un stepper UI in formulare lungi.
• Evitati utilizarea unui stepper in liste de obiecte dinamice - folositi containere in schimb.
• Evitati utilizarea unui stepper in cazurile in care informatia nu este interconectata - folositi carduri sau tab-uri in schimb.

Cum sa Folosesti Steppers? Cele Mai Bune Practici in UI UX Design

1. Anatomie: Un stepper UI este alcatuit din:

• Status Icon: Componenta UI stepper este iconita de status. Elementele UI ale stepper-ului vor aparea de obicei sub forma unei forme geometrice simple - cel mai adesea, un cerc. Designul stepper trebuie sa fie clar si precis, iar cu o iconita de status, acest lucru va fi posibil. Iconitele de status pot fi reprezentate prin valori numerice indicand pasul respectiv sau prin iconite relevante pentru actiunea pe care trebuie sa o intreprinda utilizatorul.
• Label: Un design stepper trebuie sa aiba grija si de eticheta folosita. Scopul fundamental al unei etichete stepper este sa explice utilizatorilor ce li se cere sa faca. Pastrati continutul scurt, clar si concis - ideal pana la trei cuvinte. Nu dati prea multe informatii si nu folositi punct la final.
• Secondary Icon: O alta componenta stepper este iconita secundara. Aceste iconite secundare indica informatii suplimentare privind progresul pasului. Folositi iconite si culori universal recunoscute pentru a fi evidente pentru utilizatori. De exemplu, folositi iconita de eroare in cazul unei probleme specifice in finalizarea pasului.
• Track: Elementul de tracking conecteaza toti pasii si este reprezentat printr-o linie simpla care se intinde de la primul pas pana la ultimul. Poate schimba culoarea in functie de cat progres s-a facut.

2. Creare a unui Flux Logic

Utilizatorii citesc de la stanga la dreapta sau de sus in jos. Secventa intr-un stepper ar trebui sa urmeze aceeasi secventa.

3. Evitarea Steppers sau Trackers de Progres innodate

Ca si UI  UX designer, este important sa evitam utilizarea de steppers in interiorul altor UI componente steppers sau a altor trackere de progres. Acest lucru creeaza aglomeratie vizuala si confuzeaza utilizatorii.

4. Gruparea Elementelor 

Cand lucram cu diverse UI elements in UI UX design, trebuie sa grupam aceste componente flotante vizual prin containere - de exemplu, un fieldset. Acest lucru nu este necesar daca este deja prezent un mod container - de exemplu, o lista.

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 stepper 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.