Kotak Daftar

Catatan

Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kita saat ini.

Dengan kotak daftar, pengguna dapat memilih dari sekumpulan nilai yang disajikan dalam daftar yang selalu terlihat. Dengan kotak daftar pilihan tunggal, pengguna memilih satu item dari daftar nilai yang saling eksklusif. Dengan kotak daftar beberapa pilihan, pengguna memilih nol item atau lebih dari daftar nilai.

Kotak daftar pilihan tunggal yang khas.

Catatan

Panduan yang terkait dengan tampilan tata letak dan daftar disajikan dalam artikel terpisah.

Apakah ini kontrol yang tepat?

Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:

• Apakah daftar menyajikan data, bukan opsi program? Bagaimanapun, kotak daftar adalah pilihan yang sesuai terlepas dari jumlah item. Sebaliknya, tombol radio atau kotak centang hanya cocok untuk sejumlah kecil opsi program.
• Apakah pengguna perlu mengubah tampilan, mengelompokkan, mengurutkan menurut kolom, atau mengubah lebar dan urutan kolom? Jika demikian, gunakan tampilan daftar sebagai gantinya.
• Apakah kontrol harus berupa sumber seret atau target penghilangan? Jika demikian, gunakan tampilan daftar sebagai gantinya.
• Apakah item daftar perlu disalin atau ditempel dari clipboard? Jika demikian, gunakan tampilan daftar sebagai gantinya.

Daftar pilihan tunggal

• Apakah kontrol digunakan untuk memilih satu opsi dari daftar nilai yang saling eksklusif? Jika tidak, gunakan kontrol lain. Untuk memilih beberapa opsi, gunakan daftar pilihan ganda standar, daftar kotak centang, pembuat daftar, atau tambahkan/hapus daftar sebagai gantinya.
• Apakah ada opsi default yang direkomendasikan untuk sebagian besar pengguna dalam sebagian besar situasi? Apakah melihat opsi yang dipilih jauh lebih penting daripada melihat alternatifnya? Jika demikian, pertimbangkan untuk menggunakan daftar drop-down jika Anda tidak ingin mendorong pengguna untuk membuat perubahan dengan menyembunyikan alternatif.

Dalam contoh ini, kualitas warna tertinggi adalah pilihan terbaik untuk sebagian besar pengguna, jadi daftar drop-down adalah pilihan yang baik untuk downplay alternatif.

• Apakah daftar memerlukan interaksi konstan? Jika demikian, gunakan daftar pilihan tunggal untuk menyederhanakan interaksi.

Dalam contoh ini, pengguna terus mengubah item yang dipilih dalam daftar Tampilkan item untuk mengatur warna latar depan dan latar belakang. Menggunakan daftar drop-down dalam hal ini akan sangat membosankan.

• Apakah pengaturan tampak seperti jumlah relatif? Apakah pengguna akan mendapat manfaat dari umpan balik instan tentang efek perubahan pengaturan? Jika demikian, pertimbangkan untuk menggunakan pengganda sebagai gantinya.
• Apakah ada hubungan hierarkis yang signifikan antara item daftar? Jika demikian, gunakan kontrol tampilan pohon sebagai gantinya.
• Apakah ruang layar premium? Jika demikian, gunakan daftar drop-down sebagai gantinya karena ruang layar yang digunakan diperbaiki dan tidak bergantung pada jumlah item daftar.

Daftar beberapa pilihan standar dan daftar kotak centang

• Apakah beberapa pilihan penting untuk tugas atau umum digunakan? Jika demikian, gunakan daftar kotak centang untuk membuat beberapa pilihan menjadi jelas, terutama jika pengguna target Anda tidak tingkat lanjut. Banyak pengguna tidak akan menyadari bahwa daftar pilihan ganda standar mendukung beberapa pilihan. Gunakan daftar pilihan ganda standar jika kotak centang akan menarik terlalu banyak perhatian pada beberapa pilihan atau menghasilkan terlalu banyak kekacauan layar.
• Apakah stabilitas beberapa pilihan penting? Jika demikian, gunakan daftar kotak centang, penyusun daftar, atau tambahkan/hapus daftar karena mengklik hanya mengubah satu item pada satu waktu. Dengan daftar pilihan ganda standar, sangat mudah untuk menghapus semua pilihan bahkan secara tidak sengaja.
• Apakah kontrol digunakan untuk memilih nol item atau lebih dari daftar nilai? Jika tidak, gunakan kontrol lain. Untuk memilih satu item, gunakan daftar pilihan tunggal sebagai gantinya.

Daftar pratinjau

• Apakah opsi lebih mudah dipilih dengan gambar daripada dengan teks saja? Jika demikian, gunakan daftar pratinjau.

Mencantumkan penyusun dan menambahkan/menghapus daftar

• Apakah kontrol digunakan untuk memilih nol item atau lebih dari daftar nilai? Jika tidak, gunakan kontrol lain. Untuk memilih satu item, gunakan daftar pilihan tunggal sebagai gantinya.
• Apakah urutan item terpilih penting? Jika demikian, penyusun daftar dan tambahkan/hapus urutan dukungan pola daftar, sedangkan pola beberapa pilihan lainnya tidak.
• Apakah penting bagi pengguna untuk melihat ringkasan semua item yang dipilih? Jika demikian, pembuat daftar dan pola tambahkan/hapus daftar hanya menampilkan item yang dipilih, sedangkan pola beberapa pilihan lainnya tidak.
• Apakah pilihan yang mungkin tidak dibatasi? Jika demikian, gunakan daftar tambahkan/hapus sehingga pengguna dapat memilih nilai yang saat ini tidak ada dalam daftar.
• Apakah menambahkan nilai ke daftar memerlukan kotak dialog khusus untuk memilih objek? Jika demikian, gunakan daftar tambahkan/hapus dan tampilkan kotak dialog saat pengguna mengklik Tambahkan.
• Apakah ruang layar premium? Jika demikian, gunakan daftar tambahkan/hapus sebagai gantinya karena menggunakan lebih sedikit ruang layar dengan tidak selalu menampilkan kumpulan opsi.

Untuk kotak daftar, jumlah item dalam daftar bukanlah faktor dalam memilih kontrol karena mereka menskalakan dari ribuan item hingga satu untuk daftar pilihan tunggal (dan tidak ada untuk daftar beberapa pilihan). Karena kotak daftar dapat digunakan untuk data, jumlah item mungkin tidak diketahui sebelumnya.

Catatan: Terkadang kontrol yang terlihat seperti kotak daftar diimplementasikan menggunakan tampilan daftar dan sebaliknya. Dalam kasus seperti itu, terapkan pedoman berdasarkan penggunaan, bukan implementasi.

Pola penggunaan

Kotak daftar memiliki beberapa pola penggunaan:

Label	Nilai
Daftar pilihan tunggal Perbolehkan pengguna memilih satu item pada satu waktu.	Dalam contoh ini, pengguna hanya dapat memilih satu item tampilan.
Daftar pilihan ganda standar Perbolehkan pengguna memilih sejumlah item, termasuk tidak ada.	Daftar pilihan ganda standar memiliki tampilan yang sama persis dengan daftar pilihan tunggal, sehingga tidak ada petunjuk visual bahwa kotak daftar mendukung beberapa pilihan. Karena pengguna harus menemukan kemampuan ini, pola daftar ini paling baik digunakan untuk tugas di mana beberapa pilihan tidak penting dan jarang digunakan. Ada dua mode pilihan ganda yang berbeda: beberapa dan diperluas. Mode pilihan yang diperluas sejauh ini semakin umum, di mana pilihan dapat diperluas dengan menyeret atau dengan Shift+klik dan Ctrl+klik untuk memilih grup nilai yang berdampingan dan tidak berdampingan. Dalam mode beberapa pilihan, mengklik item apa pun mengalihkan status pilihannya terlepas dari tombol Shift dan Ctrl. Mengingat perilaku yang tidak biasa ini, mode beberapa pilihan tidak digunakan lagi dan Anda harus menggunakan daftar kotak centang sebagai gantinya. Dalam contoh ini, pengguna dapat memilih sejumlah item menggunakan mode beberapa pilihan.
Daftar kotak centang Seperti kotak daftar pilihan ganda standar, daftar kotak centang memungkinkan pengguna memilih sejumlah item, termasuk tidak ada.	Tidak seperti daftar pilihan ganda standar, kotak centang dengan jelas menunjukkan bahwa beberapa pilihan dimungkinkan. Gunakan pola daftar ini untuk tugas di mana beberapa pilihan sangat penting atau umum digunakan. Dalam contoh ini, pengguna biasanya memilih lebih dari satu item sehingga daftar kotak centang digunakan. Mengingat indikasi jelas dari beberapa pilihan ini, Anda mungkin berasumsi bahwa daftar kotak centang lebih disukai daripada daftar beberapa pilihan standar. Dalam praktiknya, beberapa tugas memerlukan beberapa pilihan atau menggunakannya dengan sangat; menggunakan daftar kotak centang dalam kasus seperti itu menarik terlalu banyak perhatian pada pilihan. Akibatnya, daftar pilihan ganda standar jauh lebih umum.
Daftar pratinjau Dapat berupa pilihan tunggal atau beberapa, tetapi menampilkan pratinjau efek pilihan, bukan hanya teks.	Dalam contoh ini, pratinjau setiap opsi dengan jelas menunjukkan efek pilihan, yang lebih efektif daripada menggunakan teks saja.
Daftar penyusun Perbolehkan pengguna membuat daftar pilihan dengan menambahkan satu item sekaligus, dan secara opsional mengatur urutan daftar.	Penyusun daftar terdiri dari dua daftar pilihan tunggal: daftar di sebelah kiri adalah sekumpulan opsi tetap dan daftar di sebelah kanan adalah daftar yang sedang dibuat. Ada dua tombol perintah di antara daftar: Tombol Tambahkan yang memindahkan opsi yang saat ini dipilih ke daftar yang sedang dibuat, disisipkan sebelum item yang dipilih. (Mengklik dua kali item opsi memiliki efek yang sama.) Tombol Hapus yang menghapus item yang dipilih dari daftar bawaan dan mengembalikannya ke daftar opsi. (Mengklik dua kali item dalam daftar bawaan memiliki efek yang sama.) Daftar bawaan mungkin secara opsional memiliki perintah Pindah ke Atas dan Pindah ke Bawah untuk mengurutkan item daftar. Dalam contoh ini, penyusun daftar digunakan untuk membuat toolbar dengan memilih item dari sekumpulan opsi yang tersedia dan mengatur urutannya.
Tambah/hapus daftar Perbolehkan pengguna membuat daftar pilihan dengan menambahkan satu atau beberapa item sekaligus, dan secara opsional mengatur urutan daftar (seperti penyusun daftar).	Tidak seperti penyusun daftar, mengklik Tambahkan menampilkan kotak dialog untuk memilih item yang akan ditambahkan ke daftar. Menggunakan kotak dialog terpisah memungkinkan fleksibilitas yang signifikan dalam memilih item, Anda dapat menggunakan pemilih objek khusus atau bahkan dialog umum. Dibandingkan dengan penyusun daftar, variasi ini lebih ringkas tetapi membutuhkan sedikit lebih banyak upaya untuk menambahkan item. Dalam contoh ini, pengguna dapat menambahkan atau menghapus alat dari menu, serta mengatur pesanan. Meskipun penyusun daftar dan pola daftar tambahkan/hapus secara signifikan lebih berat daripada daftar beberapa pilihan lainnya, mereka menawarkan dua keuntungan unik: Pengguna memiliki kontrol atas urutan daftar, baik saat membuat daftar maupun setelahnya. Pengguna dapat meninjau ringkasan item yang dipilih, yang dapat menjadi manfaat signifikan jika jumlah pilihan besar. Kerugiannya adalah mereka membutuhkan lebih banyak ruang layar dan bisa sulit digunakan saat membuat daftar besar item dari awal. Akibatnya, mereka paling baik digunakan untuk membuat daftar pendek atau memodifikasi daftar yang sudah ada.

Panduan

Presentasi

• Urutkan item daftar dalam urutan logis, seperti mengelompokkan opsi terkait bersama-sama, menempatkan item yang paling sering digunakan terlebih dahulu, atau menggunakan urutan alfabet. Urutkan nama dalam urutan alfabet, angka dalam urutan numerik, dan tanggal dalam urutan kronologis. Daftar dengan 12 item atau lebih harus diurutkan menurut abjad agar item lebih mudah ditemukan.

Benar:

Dalam contoh ini, item kotak daftar diurutkan berdasarkan hubungan spasialnya.

Salah:

Dalam contoh ini, ada begitu banyak item daftar yang harus diurutkan dalam urutan alfabet.

Benar:

Dalam contoh ini, item daftar lebih mudah ditemukan karena diurutkan dalam urutan alfabet. Namun, item "Semua produk Windows" berada di awal daftar, terlepas dari urutan pengurutannya.

• Tempatkan opsi yang mewakili Semua atau Tidak Ada di awal daftar, terlepas dari urutan urutan item yang tersisa.
• Sertakan meta-options dalam tanda kurung.

Dalam contoh ini, "(none)" adalah meta-option karena bukan nilai yang valid untuk pilihan, melainkan menunjukkan bahwa opsi itu sendiri tidak digunakan.

• Tidak memiliki item daftar kosong, gunakan opsi meta sebagai gantinya. Pengguna tidak tahu cara menginterpretasikan item kosong, sedangkan arti dari opsi meta bersifat eksplisit.

Salah:

Dalam contoh ini, arti item kosong tidak jelas.

Benar:

Dalam contoh ini, meta-option "(none)" digunakan sebagai gantinya.

Interaksi

• Pertimbangkan untuk menyediakan perilaku klik ganda. Mengklik ganda harus memiliki efek yang sama seperti memilih item dan melakukan perintah defaultnya.
• Buat perilaku klik ganda berlebihan. Harus selalu ada tombol perintah atau perintah menu konteks yang memiliki efek yang sama.
• Jika pengguna tidak dapat melakukan apa pun dengan item yang dipilih, jangan izinkan pilihan.

Koreksi:

Kotak daftar ini menampilkan daftar perubahan baca-saja; tidak perlu seleksi.

• Saat menonaktifkan kotak daftar, nonaktifkan juga label dan tombol perintah terkait.
• Jangan gunakan perubahan item yang dipilih dalam kotak daftar untuk:
  • Lakukan perintah.
  • Tampilkan jendela lain, seperti kotak dialog untuk mengumpulkan lebih banyak input.
  • Secara dinamis menampilkan kontrol lain yang terkait dengan kontrol yang dipilih (pembaca layar tidak dapat mendeteksi peristiwa tersebut). Pengecualian: Anda dapat mengubah teks statis yang digunakan secara dinamis untuk menjelaskan item yang dipilih.

Dapat diterima:

Dalam contoh ini, mengubah item yang dipilih mengubah deskripsi.

• Hindari pengguliran horizontal. Daftar multikolom mengandalkan pengguliran horizontal, yang umumnya lebih sulit digunakan daripada pengguliran vertikal. Daftar multikolom yang memerlukan pengguliran horizontal dapat digunakan ketika Anda memiliki banyak item yang diurutkan menurut abjad dan ruang layar yang cukup untuk kontrol yang luas.

Dapat diterima:

Dalam contoh ini, beberapa kolom yang memerlukan pengguliran horizontal digunakan karena ada banyak item dan banyak ruang layar yang tersedia untuk kontrol yang luas.

Daftar pilihan ganda

• Pertimbangkan untuk menampilkan jumlah item yang dipilih di bawah daftar, terutama jika pengguna cenderung memilih beberapa item. Informasi ini tidak hanya memberikan umpan balik yang berguna, tetapi juga dengan jelas menunjukkan bahwa kotak daftar mendukung beberapa pilihan.

Dalam contoh ini, jumlah item yang dipilih ditampilkan di bawah daftar.

• Anda dapat menyediakan metrik pilihan lain yang mungkin lebih bermakna, seperti sumber daya yang diperlukan untuk pilihan.

Dalam contoh ini, ruang disk yang diperlukan untuk menginstal komponen lebih bermakna daripada jumlah item yang dipilih.

• Jika kemungkinan ada banyak item daftar dan memilih atau menghapus semuanya, tambahkan tombol Pilih semua dan Hapus semua perintah.
• Untuk daftar pilihan ganda standar, jangan gunakan mode multi-pilihan karena mode pemilihan ini tidak digunakan lagi. Untuk perilaku yang setara, gunakan daftar kotak centang sebagai gantinya.

Nilai default

• Pilih opsi yang paling aman (untuk mencegah hilangnya data atau akses sistem) dan opsi yang paling aman secara default. Jika keamanan dan keselamatan bukan faktor, pilih opsi yang paling mungkin atau nyaman.

Pengecualian: Jangan pilih item apa pun jika kontrol mewakili properti dalam keadaan campuran, yang terjadi saat menampilkan properti untuk beberapa objek yang tidak memiliki pengaturan yang sama.

Ukuran dan penspasian yang direkomendasikan

Ukuran dan penspasian yang direkomendasikan untuk kotak daftar.

• Pilih lebar kotak daftar yang sesuai untuk data terlama yang valid. Kotak daftar standar tidak dapat digulir secara horizontal, sehingga pengguna hanya dapat melihat apa yang terlihat dalam kontrol.
• Sertakan tambahan 30 persen (hingga 200 persen untuk teks yang lebih pendek) untuk teks apa pun (tetapi bukan angka) yang akan dilokalkan.
• Pilih tinggi kotak daftar yang menampilkan jumlah item integral. Hindari memotong item secara vertikal.
• Pilih tinggi kotak daftar yang menghilangkan pengguliran vertikal yang tidak perlu. Kotak daftar harus ditampilkan antara 3 dan 20 item tanpa perlu menggulir. Pertimbangkan untuk membuat kotak daftar sedikit lebih lama jika melakukannya menghilangkan bilah gulir vertikal. Daftar dengan kemungkinan banyak item harus menampilkan setidaknya lima item untuk memfasilitasi pengguliran dengan menampilkan lebih banyak item sekaligus dan membuat bilah gulir lebih mudah untuk posisi.
• Jika pengguna mendapat manfaat dari membuat kotak daftar lebih besar, buat kotak daftar dan jendela induknya dapat diubah ukurannya. Melakukannya memungkinkan pengguna untuk menyesuaikan ukuran kotak daftar sesuai kebutuhan. Namun, kotak daftar yang dapat diubah ukurannya harus menampilkan tidak kurang dari tiga item.

Label

Label kontrol

• Semua kotak daftar memerlukan label. Tulis label sebagai kata atau frasa, bukan sebagai kalimat; gunakan titik dua di akhir label.

Pengecualian: Hilangkan label jika itu hanyalah instruksi utama kotak dialog. Dalam hal ini, instruksi utama mengambil titik dua (kecuali jika itu adalah pertanyaan) dan kunci akses.

Dapat diterima:

Dalam contoh ini, label kotak daftar hanya mengembalikan instruksi utama.

Lebih baik:

Dalam contoh ini, label redundan dihapus, sehingga instruksi utama mengambil titik dua dan kunci akses.

• Jika kotak daftar berada di bawah tombol radio atau kotak centang dan diperkenalkan oleh label kontrol yang diakhir dengan titik dua, jangan letakkan label tambahan pada kontrol kotak daftar.

Dalam contoh ini, kotak daftar berada di bawah tombol radio dan berbagi labelnya.

• Tetapkan kunci akses unik. Untuk panduan, lihat Keyboard.
• Gunakan kapitalisasi gaya kalimat.
• Tempatkan label di sebelah kiri atau di atas kontrol, dan ratakan label dengan tepi kiri kontrol.
  • Jika label berada di sebelah kiri, ratakan teks label secara vertikal dengan baris pertama teks dalam kontrol.

Benar:

Dalam contoh ini, label di atas selaras dengan tepi kiri kotak daftar dan label di sebelah kiri selaras dengan teks dalam kotak daftar.

Salah:

Dalam contoh yang salah ini, label di atas meratakan dengan teks dalam kotak daftar dan label di sebelah kiri selaras dengan bagian atas kotak daftar.

• Untuk kotak daftar beberapa pilihan, gunakan label yang dengan jelas menunjukkan beberapa pilihan dimungkinkan. Label daftar kotak centang bisa kurang eksplisit.

Koreksi:

Dalam contoh ini, label dengan jelas menunjukkan bahwa beberapa pilihan dimungkinkan.

Salah:

Dalam contoh ini, label tidak memberikan informasi yang jelas tentang beberapa pilihan.

Cuplikan

Dalam contoh ini, kotak centang dengan jelas menunjukkan bahwa beberapa pilihan dimungkinkan, sehingga label tidak harus eksplisit.

• Anda dapat menentukan unit (detik, koneksi, dan sebagainya) dalam tanda kurung setelah label.

Teks opsi

• Tetapkan nama unik untuk setiap opsi.
• Gunakan kapitalisasi gaya kalimat, kecuali item adalah kata benda yang tepat.
• Tulis label sebagai kata atau frasa, bukan sebagai kalimat, dan tidak menggunakan tanda baca akhir.
• Gunakan pembuatan frasa paralel, dan coba pertahankan panjangnya hampir sama untuk semua opsi.

Teks instruksi dan tambahan

• Jika Anda perlu menambahkan teks instruksi tentang kotak daftar, tambahkan di atas label. Gunakan kalimat lengkap dengan tanda baca akhir.
• Gunakan kapitalisasi gaya kalimat.
• Informasi tambahan yang berguna tetapi tidak perlu harus disingkat. Tempatkan teks ini baik dalam tanda kurung antara label dan titik dua, atau tanpa tanda kurung di bawah kontrol.

Dalam contoh ini, teks tambahan ditempatkan di bawah daftar.

Dokumentasi

Saat merujuk ke kotak daftar:

• Gunakan teks label yang tepat, termasuk kapitalisasinya, tetapi jangan sertakan garis bawah atau titik dua kunci akses. Sertakan daftar kata. Jangan merujuk ke kotak daftar sebagai kotak daftar atau bidang.
• Untuk item daftar, gunakan teks item yang tepat, termasuk kapitalisasinya.
• Dalam pemrograman dan dokumentasi teknis lainnya, lihat kotak daftar sebagai kotak daftar. Di tempat lain, gunakan daftar.
• Untuk menjelaskan interaksi pengguna, gunakan pilih.
• Jika memungkinkan, format label dan item daftar menggunakan teks tebal. Jika tidak, letakkan label dan item dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.

Contoh: Di daftar Buka apa , pilih Bookmark.