Checkboxes – Element UI

Ce este un Checkbox in Designul UI?

Checkbox este un element UI care permite utilizatorilor sa aleaga oricare numar de articole dintr-un set de selectie – zero, unul sau mai multe. Checkboxes sunt folosite in liste sau notite, pentru a marca o activitate completata. Fiecare checkbox este independent si ofera utilizatorului posibilitatea de a bifa si debifa fiecare caseta. 

‍

Tipuri de Checkbox in Designul UI

1. Checkbox Unic:

Acest UI element apare sub forma de forme patrate sau dreptunghiulare si are doua stari – bifat sau nebifat. Cand un check box este selectat, este umplut cu un simbol corespunzator – fie ca este un semn de bifare, un punct solid sau alte pictograme relevante. Acestea servesc drept confirmare vizuala pentru utilizatori ca selectia lor a fost efectuata.

2. Grupuri de Checkbox

Grupurile de checkboxes sunt o colectie de checkboxes UI elements unde poti adauga mai multe informatii despre fiecare fara aglomera un UI design. Cand sunt separate in carduri, un check box cu informatii suplimentare vor permite utilizatorilor sa distinga intre optiuni.

‍

Cand sa folosesti Checkbox in UI/UX Design

Ca si UI UX designers, este important sa folosim checkbox UI elements in mai multe situatii:

• In formulare cand un utilizator poate alege una sau mai multe optiuni dintr-un set de selectie.
• Pe ecrane desktop sau mobile pentru a activa sau dezactiva un element.
• Pentru a prezenta o sectiune cu sub-selectii.
• Cand utilizatorul trebuie sa fie de acord cu termenii si conditiile.
• Daca vrei ca utilizatorii sa selecteze doar un singur element, alege un Radio Button in loc de un checkbox.
• Daca ai un singur checkbox, acesta functioneaza similar cu un Toggle Switch. Cand un toggle switch este activat, isi schimba imediat starea, dar un checkbox marcheaza starea (bifat sau nebifat) si trebuie trimis. Foloseste checkbox-urile in formulare sau liste lungi sau cand utilizatorul trebuie sa confirme explicit alegerea inainte de a continua.

‍

Cum se folosesc Checkbox-urile in Designul UI/UX

• Comportament:

Cand sunt selectate, checkbox-urile pot activa instantaneu actiunea solicitata sau pot necesita confirmarea utilizatorului pentru a activa starea. in cazul checkbox-urilor multiple, fiecare checkbox functioneaza independent intr-o lista, iar selectarea altor checkbox-uri nu are niciun efect asupra starii anterioare.

• Stari:

Vizual, checkbox-urile pot avea trei stari: bifat, nebifat sau indeterminat.

Starea bifat reprezinta o selectie specifica a utilizatorului si este indentificata de un UI designer cu un simbol corespunzator. Starea nebifat indica faptul ca utilizatorul nu a selectat acest element si apare necompletat. Starea indeterminata arata ca exista o sectiune cu sub-selectii si apare de obicei cu o linie orizontala intrerupta in centru.

• Layout:

Checkbox-urile pot avea doua layout-uri: unic sau grup. UI Designers ar trebui sa foloseasca check box unice atunci cand utilizatorul trebuie sa activeze sau dezactiveze un element sau cand utilizatorul trebuie sa fie de acord cu termenii si conditiile. In acelasi timp, este recomandat sa folosesti grupuri de checkbox-uri in formulare cand utilizatorii pot alege una sau mai multe optiuni dintr-un set de selectie sau intr-o sectiune cu sub-selectii.

• Structura:

1. Textul: intrebarea la care utilizatorii trebuie sa raspunda;

2. Checkbox Selectate: Optiunea/Optiunile selectate;

3. Checkbox: Alte optiuni care nu au fost selectate;

4. Label: Continutul care reprezinta un posibil raspuns.

• Continut:

Label-ul unui checkbox UI ar trebui sa fie scurt si clar, astfel incat utilizatorii sa poata scana cu usurinta textul. Daca nu este necesar, evita propozitiile complete sau frazele complicate care necesita elemente pe mai multe linii. Ca si pro tip, UI UX designers pot grupa optiunile pentru a va ajuta la lizibilitatea si capacitatea de scanare.

Listeaza elementele intr-o ordine logica – de exemplu, de la cel mai mare la cel mai mic, sau invers. Listeaza alfabetic doar daca elementele nu pot fi comparate – de exemplu, “Branza, Salata, Rosii”.

‍

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 UI UX Design Checkbox. 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.