Dropdown – Element UI

Ce este un Dropdown UI?

Un dropdown UI este o colectie predefinita de optiuni care ofera utilizatorului posibilitatea de a selecta si alege din acestea. Este o optiune convenabila si rapida introdusa de UI UX designers care economiseste timp prin evitarea necesitatii de a proiecta o alta pagina, ceea ce ajuta la . Dropdown-urile ajuta utilizatorii sa completeze campurile oferindu-le optiuni sau sugerand potentiale intrari.

‍

Tipuri de Dropdown Menu

Alegerea unui dropdown menu UI element potrivit poate defini designul UI/UX si poate imbunatati considerabil experienta utilizatorului.

1. Dropdown Menu Standard

Acest tip de dropdown este un element de design comun. Textul dropdown-ului trebuie sa fie ascuns, iar meniul dropdown ar trebui sa apara doar atunci cand a avut loc o actiune.

2. Dropdown Menu cu Autosugestii

Aceste dropdown-uri sunt intalnite in bara de cautare si pot economisi mult timp. Scopul lor este de a oferi mai multe variante si poate fi foarte util atunci cand utilizatorii stiu deja ce vor sa completeze. Autosugestia ofera variante pentru campul de intrare pe baza literelor sau termenilor tastati pana acum.

3. Dropdown Menu cu Autocomplete

Procesul de autocompletare are loc in interiorul campului de text UI, software-ul prezicand alternativele disponibile folosindu-se de dictionarul sau intern. Analizeaza ce intentioneaza utilizatorii sa tasteze in functie de primele litere si optiunile potrivite, completand varianta cea mai potrivita disponibila in dropdown.

4. Dropdown Menu cu Multi-select

Aceasta optiune de dropdown UI este creata cu ajutorul checkbox-urilor, o extensie a checkbox-urilor unde utilizatorul are posibilitatea de a selecta mai multe variante. Cu toate acestea, acest tip de dropdown poate deveni rapid coplesitor, deoarece trebuie completate toate casetele in care utilizatorii sunt interesati.

5. Dropdown Menu cu Grupuri

Dropdown-urile cu grupuri ofera utilizatorului posibilitatea de a fi mai organizat, fiind gasite sub diferite categorii.

6. Combo Box

Cand acest UI element este introdus in UI UX design, combo box-ul permite utilizatorului sa aleaga o optiune dintr-un set predefinit de intrari sau sa personalizeze o intrare.

7. Date Picker

Acest tip de dropdown UI este implementat de UI UX designers doar atunci cand este necesar ca utilizatorul sa vada exact ziua saptamanii. Este util doar cand utilizatorul programeaza o intalnire, o data sau un eveniment.

‍

Cum se folosesc Dropdown Menu?

• Atasat: Acesta este unul dintre stilurile comune care pot fi intalnite in UI design. Este cand intregul dropdown poate fi vazut ca un intreg.
• Detasat: Acesta este opusul celui de mai sus. Atunci cand este introdus de UI UX designers, dropdown menu va avea meniul detasat de selectia disponibila si poate schimba partile in functie de vizualizarea utilizatorului.
• Borduri Rotunjite: Asa cum suna, dropdown UI design include borduri rotunjite.
• Dropdown Complet: Acest tip de dropdown depinde doar de preferintele personale ale utilizatorului, deoarece atat dropdown-urile umplute, cat si cele conturate arata grozav. Dropdown-ul umplut are deja un element completat implicit.
• Dropdown Conturat: Acest tip de dropdown poate fi diferentiat de cel umplut, deoarece utilizatorii pot completa golurile cu optiunea aleasa.
• Cu imagini: Chiar daca adaugarea imaginilor in dropdown poate parea multa munca, merita, in functie de marimea dropdown-ului. Imaginile pot fi prea mici si greu de observat, provocand o experienta proasta utilizatorului.
• Cu Icons: Dropdown design poate include o iconita la inceputul textului, facandu-l sa para mai jucaus.

‍

Starile unui Dropdown Menu

• Activa: Aceasta este starea principala in care dropdown-ul nu a fost inca interactionat.
• Dezactivat: Aceasta stare a unui dropdown va fi vizibila, dar utilizatorul nu va putea interactiona cu ea.
• Hover: Aceasta stare ar trebui sa arate utilizatorului ca exista posibilitatea unei interactiuni cu dropdown-ul.
• Highlight: Aceasta stare ar trebui sa apara atunci cand utilizatorul incearca sa interactioneze cu dropdown-ul.
• Focusat: Aceasta stare se intampla cand utilizatorul interactioneaza cu dropdown-ul prin clic pe el si decide sa faca o anumita actiune. Mai mult decat atat, optiunea care reprezinta alegerea utilizatorului poate fi de asemenea evidentiata.
• Input: Aceasta stare ar trebui sa aiba loc doar dupa ce utilizatorul a finalizat o actiune, astfel incat dropdown-ul sa poata reveni la starea sa initiala.
• Eroare de feedback: Aceasta stare este introdusa de UI UX designer si este activata doar daca unul dintre utilizatori a facut o greseala sau o eroare de tastare.

‍

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 Dropdown Menu. 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.