Radio Buttons – Element UI

Ce este un Radio Button in UI UX design?

Radio buttons sunt elemente UI care permit utilizatorilor sa aleaga doar o singura optiune dintr-un set de selectii mutual exclusive. Daca utilizatorii doresc sa aleaga optiuni suplimentare, selectia initiala va fi anulata automat.

Acest element UI al radio button apare sub forma de forme circulare si are doua stari – selectat sau neselectat. Cand checkbox-ul este selectat, acesta este completat cu un simbol corespunzator – fie ca este un semn de bifare, un punct solid sau alte icoane relevante. Acestea servesc ca confirmare vizuala pentru utilizatori ca selectia lor a fost efectuata.

Cand se folosesc un Radio Button UI? Cele Mai Bune Practici in UI UX Design

Radio buttons sunt folosite de UI UX designers atunci cand utilizatorii trebuie sa selecteze un singur element:

1. Cand o Selectie este Necesara

Utilizarea unui radio button in UI UX design va face utilizatorii sa selecteze o optiune si nu vor putea sa o deselecteze. Vor putea sa-si schimbe selectia si sa aleaga un alt element, dar nu vor putea sa lase selectia necompletata.

2. Cand un Raspuns Rapid este Prioritar 

Radio buttons UI pot fi utilizate atunci cand utilizatorii trebuie sa finalizeze formularul rapid. Cu radio buttons, au o vizibilitate mai buna atunci cand scaneaza interfata utilizatorului. Acest lucru este util in formulare mai lungi, unde utilizatorii trebuie sa scaneze rapid mai multe intrebari si optiuni.

3. Cand Exista Mai Putin de Cinci Optiuni 

Radio buttons UI sunt utile atunci cand formularul are mai putin de cinci optiuni. Cand sunt mai mult de cinci elemente, utilizati un meniu drop-down in schimb, deoarece nu va aglomera interfata si nu va coplesi vizual utilizatorul cu prea multe optiuni.

Cum sa Folositi Radio Button in Designul UI

• Comportament 

Cand este selectat, un radio button poate activa instantaneu actiunea solicitata sau poate necesita confirmarea utilizatorului pentru a activa starea. Daca utilizatorii doresc sa aleaga optiuni suplimentare, selectia initiala va fi anulata automat.

• Stari 

Radio buttons UI au doua stari: selectat si neselectat. 

Starea selectata reprezinta ca utilizatorul a ales un anumit element si apare cu un simbol corespunzator. Starea neselectata indica faptul ca utilizatorul nu a selectat acest element si apare necompletat.

• Structura

Structura unui radio button UI este:

1. intrebare: intrebarea la care trebuie sa raspunda utilizatorii;
2. Radio Button Selectat: Optiunea selectata;
3. Radio Buttons: Alte optiuni care nu au fost selectate;
4. Labels: Continutul care reprezinta un posibil raspuns.

‍

• Continut 

Mesajul unui radio button UI ar trebui sa fie scurt si clar, astfel incat utilizatorii sa poata scana usor textul. Cu exceptia cazului in care este necesar, este recomandat ca UI UX designers sa evite propozitiile complete sau frazele complicate care necesita elemente pe mai multe linii. Gruparea optiunilor va creste, de asemenea, lizibilitatea si scanabilitatea.

Enumerati elementele intr-o ordine logica – de exemplu, de la cel mai mic la cel mai mare, sau viceversa. Enumerati alfabetic numai daca elementele nu pot fi comparate – de exemplu, „Branza, Salata, Rosie”.

UI UX designers are trebui si sa fie atenti sa nu copleseasca utilizatorii cu prea multe optiuni. Daca sunt necesare mai mult de cinci elemente, ia in considerare alti selectori decat radio buttons.

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 radio button 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.

‍