Lalu apa perbedaan combobox, multiselect, listbox, dan dropdown? Meskipun semua komponen UI ini mungkin tampak serupa, namun memiliki tujuan yang berbeda. Pilihannya sering kali bergantung pada jumlah opsi yang tersedia dan visibilitasnya. Mari kita lihat perbedaannya, apa tujuannya, dan bagaimana memilih yang tepat — menghindari kesalahpahaman dan ekspektasi yang salah.
Tidak Semua Pola Daftar Sama Semua komponen UI yang disorot di atas memiliki satu kesamaan: mendukung interaksi pengguna dengan daftar. Namun, mereka melakukannya dengan sedikit berbeda. Mari kita lihat satu per satu:
Dropdown → daftar disembunyikan hingga dipicu. Combobox → ketik untuk memfilter + pilih 1 opsi. Multipilih → ketik untuk memfilter + pilih banyak opsi. Kotak Daftar → semua opsi daftar terlihat secara default (+ gulir). Kotak daftar ganda → memindahkan item di antara 2 kotak daftar.
Dengan kata lain, Combobox menggabungkan kolom input teks dengan daftar dropdown, sehingga pengguna dapat mengetik untuk memfilter dan memilih satu opsi. Dengan Multiselect, pengguna dapat memilih banyak pilihan (sering ditampilkan sebagai pil atau keripik). Kotak daftar menampilkan semua opsi daftar yang terlihat secara default, seringkali dengan pengguliran. Ini berguna ketika pengguna perlu melihat semua pilihan yang tersedia dengan segera. Kotak daftar ganda (juga disebut daftar transfer) adalah variasi kotak daftar yang memungkinkan pengguna memindahkan item di antara dua kotak daftar (kiri ↔ kanan), biasanya untuk pemilihan massal. Jangan Pernah Sembunyikan Opsi yang Sering Digunakan Seperti disebutkan di atas, pilihan komponen UI yang tepat bergantung pada 2 faktor: berapa banyak opsi daftar yang tersedia, dan apakah semua opsi ini harus terlihat secara default. Semua daftar juga dapat memiliki struktur pohon, sarang, dan pemilihan kelompok.
Ada satu prinsip yang telah saya ikuti selama bertahun-tahun untuk komponen UI apa pun: jangan pernah menyembunyikan opsi yang sering digunakan. Jika pengguna sering mengandalkan pilihan tertentu, tidak ada gunanya menyembunyikannya dari mereka. Kita dapat memilihnya terlebih dahulu, atau (jika hanya ada 2–3 opsi yang sering digunakan) menampilkannya sebagai chip atau tombol, lalu menampilkan daftar lainnya pada interaksi. Secara umum, merupakan ide bagus untuk selalu menampilkan opsi populer — meskipun hal itu mungkin mengacaukan UI. Bagaimana Cara Memilih Yang Mana? Tidak semua daftar memerlukan metode pemilihan yang rumit. Untuk daftar dengan kurang dari 5 item, tombol radio atau kotak centang sederhana biasanya berfungsi paling baik. Namun jika pengguna perlu memilih dari daftar opsi yang banyak (misalnya, 200+ item), kotak kombo + multipilihan berguna karena pemfilteran yang lebih cepat (misalnya, pemilihan negara).
Kotak Daftar berguna ketika orang perlu mengakses banyak pilihan sekaligus, terutama jika mereka perlu memilih banyak pilihan dari daftar itu juga. Mereka dapat berguna untuk filter yang sering digunakan.
Listbox ganda sering diabaikan dan diabaikan. Namun ini bisa sangat membantu untuk tugas-tugas kompleks, misalnya seleksi massal, atau penetapan peran, tugas, tanggung jawab. Ini adalah satu-satunya komponen UI yang memungkinkan pengguna meninjau daftar pilihan lengkap mereka secara berdampingan dengan daftar sumber sebelum melakukan (juga disebut “Daftar transfer”). Faktanya, kotak daftar ganda seringkali lebih cepat, lebih akurat, dan lebih mudah diakses dibandingkan drag-and-drop. Pertimbangan Kegunaan Satu catatan penting yang perlu diingat adalah bahwa semua jenis daftar harus mendukung navigasi keyboard (misalnya, tombol panah ↑/↓) untuk aksesibilitas. Beberapa orang hampir selalu mengandalkan keyboard untuk memilih opsi setelah mereka mulai mengetik.
Selain itu:
Untuk daftar dengan 7+ opsi, pertimbangkan untuk menambahkan fungsi “Pilih Semua” dan “Hapus Semua” untuk menyederhanakan interaksi pengguna. Untuk daftar panjang dengan kotak kombo, tampilkan semua opsi kepada pengguna dengan mengklik/mengetuk, karena jika tidak, opsi tersebut mungkin tidak akan pernah terlihat, Yang terpenting, jangan tampilkan elemen non-interaktif sebagai tombol untuk menghindari kebingungan — dan jangan tampilkan elemen interaktif sebagai label statis.
Penutup: Tidak Semuanya Dropdown Nama penting. Daftar opsi vertikal biasanya digambarkan sebagai “dropdown” — tetapi sering kali terlalu umum untuk diartikan. "Dropdown" mengisyaratkan bahwa daftar tersebut disembunyikan secara default. “Multiselect” menyiratkan multi-pilihan (kotak centang) dalam daftar. “Kotak Kombo” menyiratkan masukan teks. Dan “Kotak Daftar” hanyalah sebuah daftar item yang dapat dipilih, terlihat setiap saat. Tujuannya bukan untuk konsisten dengan definisi di atas. Melainkan untuk menyelaraskan niat — gunakan bahasa yang sama saat memutuskan, merancang, membangun, dan kemudian menggunakan komponen UI ini. Ini harusnya berhasilsemua orang — desainer, insinyur, dan pengguna akhir — selama label statis tidak terlihat seperti tombol interaktif, dan tombol radio tidak berfungsi seperti kotak centang. Temui “Pola Desain Untuk Antarmuka AI” Perkenalkan Pola Desain Untuk Antarmuka AI, kursus video baru Vitaly dengan contoh praktis dari produk nyata — dengan pelatihan UX langsung yang akan segera diadakan. Lompat ke pratinjau gratis. Temui Pola Desain Untuk Antarmuka AI, kursus video Vitaly tentang desain antarmuka & UX.
Pelatihan Video + UXHanya videoVideo + Pelatihan UX$ 450,00 $ 799,00
Dapatkan Pelatihan Video + UX30 pelajaran video (10 jam) + Pelatihan UX Langsung. Jaminan uang kembali 100 hari. Hanya video$ 275.00$ 395.00
Dapatkan kursus video30 pelajaran video (10 jam). Diperbarui setiap tahun. Juga tersedia sebagai Paket UX dengan 3 kursus video.
Sumber Daya Berguna
Pelengkapan Otomatis: Pedoman UX, oleh Vitaly Friedman Kotak kombo, dari eBay 👍 Kotak Kombo, oleh Elastic Kotak Kombo, oleh Elisa Kotak Kombo, oleh MongoDB 👍 Kotak Kombo, dengan Visa 👍 Kotak Kombo, oleh Watson (Docplanner) Kotak Kombo, oleh Wikimedia Kotak Kombo, oleh Zendesk Multipilih (Dokumen Desain Combobox MongoDB), oleh MongoDB 👍 Pencarian Multipilih, oleh Wikimedia Kotak Kombo Multi-pilihan, oleh Vaadin Banyak pilihan, dengan Visa Transfer (contoh Listbox), oleh Ant Design Kotak Daftar, oleh Hopper Kotak Daftar, oleh Vaadin Kotak Daftar, oleh Visa Pemilih Daftar Ganda, oleh Red Hat (PatternFly) Kotak Daftar Ganda, oleh Salesforce (Lightning Design System) Daftar Transfer, oleh Mantine Kotak Daftar Ganda, oleh Dashlite Lencana vs. Pil vs. Keripik vs. Tag, oleh Vitaly Friedman Kotak Daftar vs. Daftar Dropdown, oleh Anna Kaley (NN/g)
