Dropdown polja često dobijaju lošu reputaciju u svetu UI dizajna – i, da budemo iskreni, ne bez razloga. Loše implementirana, postaju nezgrapna, preplavljujuća i ružna. Ali ovaj vodič nije o tome. Ovde ću podeliti savete o tome šta raditi 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 ovom članku ću pokriti:
-
Anatomiju dropdown polja
-
Tipove i varijacije
-
Stilove
-
Stanja
-
Šta staviti u placeholder
-
Kada izbegavati dropdown (i kada ga koristiti)
-
Native (podrazumevane) dropdown opcije
-
Proveru pristupačnosti
-
Zaključne misli
1. Anatomija Dropdown Polja
Anatomija dropdown polja je veoma slična običnom tekstualnom polju – samo sa dodatnim elementima.
Osnovni delovi:
-
Label (naziv polja) – objašnjava šta korisnik treba da izabere.
-
Placeholder (podsetnik) – može biti prazan ili sadržati uputstvo (npr. „Izaberite…“).
-
Strelica ili ikonica – pokazuje da se radi o padajućem meniju.
-
Meni sa opcijama – otvara se klikom.
2. Tipovi i Varijacije Dropdown-a
Standardni Dropdown
Klasično padajuće meni koje izgleda kao tekstualno polje dok se ne klikne.
Dropdown sa Autosuggest (automatskim predlogom)
Ovo volim! Koristi se za duge liste gde korisnik već zna odgovor (npr. izbor države). Primer: Google pretraga.
Dropdown sa Autocomplete (automatskim dovršavanjem) i Autosuggest
Autocomplete dopunjuje reč koju kucate, dok autosuggest nudi predloge.
Dropdown sa Multi-select (višestrukim izborom)
Dozvoljava odabir više stavki (kao checkbox-ovi). Savet: Izbegavajte ako možete – može biti neintuitivno.
Dropdown sa Grupama
Kategorizuje opcije radi lakšeg pretraživanja (npr. „Evropske države“, „Azijske države“).
Fiksni Meni sa Scroll-om
Nije baš dropdown, već otvoren meni sa mogućnošću skrolovanja. Retko se koristi, pogotovo na mobilnim uređajima.
Date Picker (izbor datuma)
Korisno za zakazivanje sastanaka, ali ne i za unose poput datuma rođenja ili isteka pasoša.
3. Stilovi Dropdown-a
Standardni (prikačen meni)
Najčešći izgled – meni se otvara direktno ispod polja.
Standardni (odvojen meni)
Meni može da se otvori iznad ili ispolju, što je korisno za manje ekrane.
Zaobljeni uglovi
Dodaje prijatan izgled, pogodan za „playful“ dizajn.
Dropdown sa Ikonama
Dodajte ikone za vizuelno poboljšanje (npr. ikona zemlje za izbor države).
Dropdown sa Slikama
Korisno za vizuelne izbore (npr. vrste kolača), ali može biti nepregledno u malom prostoru.
Material Design Stilovi
-
Filled Dropdown – moderan, sa animacijama.
-
Outlined Dropdown – elegantan, sa labelom koji se pomera pri fokusu.
4. Stanja Dropdown-a
-
Active (standardno stanje) – spreman za unos.
-
Disabled (onemogućeno) – korisnik ne može da menja.
-
Hover (prelaz mišem) – pokazuje da je interaktivno.
-
Focus (fokusirano) – otvara meni.
-
Izabrana opcija – prikazuje se nakon odabira.
-
Greška (neispunjeno polje) – prikazuje se ako korisnik preskoči obavezno polje.
5. Šta Staviti u Placeholder?
-
Prazno polje – ako druga polja nemaju placeholdere.
-
Generički tekst – „Izaberite…“, „Odaberite opciju“.
-
Kombinacija – „Izaberite državu“.
-
Pre-selektovana opcija – ali budite oprezni da ne bude manipulatoran (dark pattern).
6. Kada Ne Koristiti Dropdown (i Kada Da)
Kada izbegavati:
-
Ako imate manje od 5 opcija – koristite radio dugmad.
-
Ako je lakše ukucati (npr. datum rođenja).
-
Za binarna pitanja (da/ne) – koristite toggle.
-
Za brojeve – koristite stepere (za male vrednosti) ili slider (za velike).
Kada koristiti:
-
Ima više od 6 opcija.
-
Korisnik ne zna tačan odgovor unapred (npr. izbor licence za video).
7. Native (Podrazumevane) Dropdown Opcije
Ako nemate vremena/budžeta za custom dizajn, koristite native dropdown. Oni nisu lepi, ali su pristupačni i rade svuda.
„Shell“ pristup:
-
Polje izgleda custom, ali se otvara native meni.
-
Brže za razvoj, a i dalje pristupačno.
8. Provera Pristupačnosti
-
Visina polja + labela > 44px (lako za klik).
-
Razmak između stavki u meniju > 8px.
-
Kontrast boja (AAA standard).
-
Radi sa tab navigacijom.
-
Meni se prilagođava (otvara gore/dole ako nema mesta).
9. Zaključne Misli
Dropdown-i su često omalovažavani, ali ponekad su neizbežni. Ako morate da ih koristite, napravite ih što boljim.
Korisno pravilo: „Ako korisnik može da ukuca odgovor brže nego što može da ga izabere, nemojte koristiti dropdown.“
Šta vi mislite? Da li imate omiljene ili omražene primere dropdown-a? 😊
Autorski saveti za bolje UX:
-
Izbegavajte kalendarske dropdown-e za unose poput datuma rođenja.
-
Kombinujte autocomplete i autosuggest za duže liste.
-
Testirajte na stvarnim korisnicima – ponekad najjednostavnije rešenje je najbolje.
Srećno dizajniranje! 🚀