Dropdown polja često dobijaju lošu reputaciju u svetu UI dizajna – i, da budem iskrena, ne bez razloga. Kada su loše urađena, postaju nezgrapna, preplavljujuća i ružna. Ali ovde neću govoriti o greškama, već o tome šta uraditi kada morate da ih koristite.
Prvo da razjasnim: postoje dve glavne vrste dropdown-a – oni za navigaciju i oni u formama. Ovde ću se fokusirati samo na one u formama.
U ovoj šemi ću pokriti:
-
Anatomiju dropdown polja
-
Tipove i varijacije
-
Stilove
-
Stanja
-
Šta staviti u placeholder
-
Kada ne koristiti dropdown (i kada da)
-
Prirodne (native) dropdown opcije
-
Checklistu za pristupačnost
1. Anatomija dropdown polja
Anatomija dropdown polja je slična tekstualnom polju, samo sa nekoliko dodataka. Glavni elementi su:
-
Okvir (container)
-
Label (naziv polja)
-
Placeholder (podsetnik šta uneti)
-
Strelica ili ikonica za otvaranje
-
Padajući meni sa opcijama
2. Tipovi i varijacije dropdown-a
Iako je standardni dropdown najpoznatiji, postoje različite varijante koje možete koristiti u zavisnosti od potreba.
Standardni dropdown
Klasično padajuće meni koje se otvara klikom.
Dropdown sa autosuggest-om
Ovo volim! Koristan je kada korisnik unosi podatak iz duge liste (npr. država). Kako kuca, prikazuju mu se predlozi.
Dropdown sa autocomplete-om
Autocomplete dovršava unos umesto samo da predlaže opcije. Ponekad izgleda kao obično tekstualno polje dok ne počnete da kucate.
Dropdown sa multi-select-om
Omogućava odabir više stavki (kao checkbox-ovi). Ali iskreno – pokušajte da ga izbegnete. Dugotrajno održavanje i loš UX ga čine problematičnim.
Dropdown sa grupama
Ako imate dugačku listu, možete grupisati opcije kako bi bile preglednije.
Meni sa fiksnim prikazom (scrollable menu)
Otvoren je odmah i izgleda kao prozorčić sa opcijama. Retko se koristi, posebno na mobilnim uređajima gde stvara „skrol unutar skrola“.
Date picker
Kalendarski izbor datuma koristan je za zakazivanje, ali katastrofalan za unose poput roka važenja pasoša. Ako morate da ga koristite, dozvolite i ručni unos.
3. Stilovi dropdown-a
Ovo se odnosi na vizuelni izgled, a ne funkcionalnost.
Standardni stil (prikačen)
Najčešći izgled gde se meni otvara direktno ispod polja.
Standardni stil (odvojen)
Sve češći pristup gde meni može da se otvori iznad ili ispod, zavisno od raspoloživog prostora.
Zaobljeni uglovi
Dodaje prijatan izgled ako želite blaži, igračkastiji dizajn.
Sa ikonicama
Dodavanje ikonica levo od opcija može poboljšati vizuelnu hijerarhiju.
Sa slikama
Retko koristim jer slike u uskom meniju često izgledaju slabo. Ali može biti korisno za vizuelne razlike (npr. vrste kolača).
Material Design stilovi
Volim njihove „filled“ i „outlined“ varijante – čiste, moderne i pristupačne.
4. Stanja dropdown-a
Korisnik mora jasno da vidi u kom je stanju interakcija:
-
Neaktivno – polje čeka unos.
-
Hover – pokazuje da je klikabilno (ne važi za touch uredjaje!).
-
Fokus – otvoren meni sa opcijama.
-
Izabrano – nakon odabira, prikazuje se selektovana vrednost.
-
Greška – ako korisnik preskoči obavezno polje.
5. Šta staviti u placeholder?
-
Ostaviti prazno – ako druga polja nemaju podsetnik.
-
Generički tekst („Izaberi“, „Odaberi opciju“).
-
Eksplicitno uputstvo („Izaberi državu“).
-
Pre-selektovana opcija – ali budite oprezni da ne izgleda kao manipulative dark pattern!
6. Kada ne koristiti dropdown?
-
Ako imate manje od 5 opcija – koristite radio dugmad.
-
Ako je brže ukucati (npr. datum rođenja).
-
Za binarna pitanja (da/ne) – toggle je bolji.
-
Za brojeve – koristite stepere ili slajdere.
7. Kada koristiti dropdown?
-
Ima više od 6 opcija.
-
Korisnik ne zna tačan odgovor unapred (npr. izbor licence za video).
8. Prirodni (native) dropdown-i
Kada nema vremena/budžeta za custom dizajn, koristite ugrađene opcije. One su:
-
Sigurnije – rade svuda.
-
Pristupačnije – bolje podržavaju assistive tehnologije.
Moguće je koristiti shell pristup: polje izgleda custom, ali se otvara native meni. To uštedi vreme, a i dalje izgleda u skladu sa dizajnom.
9. Checklista za pristupačnost
-
Da li je visina polja (uključujući label) minimum 44px?
-
Da li su stavke u meniju dovoljno visoke (44px) sa prostorom između?
-
Da li boje zadovoljavaju AAA standarde kontrasta?
-
Da li dropdown radi sa tab navigacijom?
-
Da li meni može da se otvori gore ili dole u zavisnosti od prostora?
Kada god sumnjate, proverite WebAIM smernice.
Zaključak
Dropdown-i su često omalovažavani, ali ponekad su neizbežni. Kada ih koristite, pobrinite se da budu što intuitivniji i pristupačniji. Ako imate izbora, razmotrite alternative – ali ako morate, napravite ih da zasijaju!