Kotak Centang
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 centang, pengguna membuat keputusan antara dua pilihan yang jelas berlawanan. Label kotak centang menunjukkan status yang dipilih, sedangkan arti status yang dikosongkan harus merupakan kebalikan dari status yang dipilih yang tidak ambigu. Akibatnya, kotak centang harus digunakan hanya untuk mengaktifkan atau menonaktifkan opsi atau untuk memilih atau membatalkan pilihan item.
Sekelompok kotak centang yang khas.
Catatan
Panduan yang terkait dengan tata letak disajikan dalam artikel terpisah.
Apakah ini kontrol yang tepat?
Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:
Apakah kotak centang digunakan untuk mengaktifkan atau menonaktifkan opsi atau untuk memilih atau membatalkan pilihan item? Jika tidak, gunakan kontrol lain.
Apakah status yang dipilih dan dibersihkan berlawanan yang jelas dan tidak ambigu? Jika tidak, gunakan tombol radio atau daftar drop-down sehingga Anda dapat memberi label status secara independen.
Saat digunakan dalam grup, apakah grup terdiri dari pilihan independen, dari mana pengguna dapat memilih nol atau lebih? Jika tidak, pertimbangkan kontrol untuk pilihan dependen, seperti tombol radio dan tampilan pohon kotak centang.
Saat digunakan dalam grup, apakah grup terdiri dari pilihan dependen, dari mana pengguna harus memilih satu atau beberapa? Jika demikian, gunakan sekelompok kotak centang dan tangani kesalahan saat tidak ada opsi yang dipilih.
Apakah jumlah opsi dalam grup 10 atau kurang? Karena ruang layar yang digunakan sebanding dengan jumlah opsi, pertahankan jumlah kotak centang menjadi 10 atau kurang. Untuk lebih dari 10 opsi, gunakan daftar kotak centang.
Apakah tombol radio akan menjadi pilihan yang lebih baik? Di mana kotak centang hanya cocok untuk mengaktifkan atau menonaktifkan opsi, tombol radio dapat digunakan untuk opsi yang sama sekali berbeda. Jika kedua solusi dimungkinkan:
Gunakan tombol radio jika arti kotak centang yang dikosongkan tidak sepenuhnya jelas.
Salah:
Dalam contoh ini, pilihan yang berlawanan dari Lanskap tidak jelas, sehingga kotak centang bukan pilihan yang baik.
Benar:
Dalam contoh ini, pilihan tidak berlawanan sehingga tombol radio adalah pilihan yang lebih baik.
Gunakan tombol radio pada halaman wizard untuk memperjelas alternatif, meskipun kotak centang dapat diterima.
Gunakan tombol radio jika Anda memiliki ruang layar yang cukup dan opsinya cukup penting untuk memanfaatkan ruang layar tersebut dengan baik. Jika tidak, gunakan kotak centang atau daftar drop-down.
Salah:
Dalam contoh ini, opsi tidak cukup penting untuk menggunakan tombol radio.
Benar:
Dalam contoh ini, kotak centang adalah penggunaan ruang layar yang efisien untuk opsi periferal ini.
Gunakan kotak centang jika ada kotak centang lain di jendela.
Apakah opsi menyajikan opsi program, bukan data? Nilai opsi tidak boleh didasarkan pada konteks atau data lainnya. Untuk data, gunakan daftar kotak centang atau daftar beberapa pilihan.
Pola penggunaan
Kotak centang memiliki beberapa pola penggunaan:
| Penggunaan | Contoh |
|---|---|
|
Pilihan individu Satu kotak centang digunakan untuk memilih pilihan individual. |
Satu kotak centang digunakan untuk pilihan individual. |
|
Pilihan independen (nol atau lebih) Sekelompok kotak centang digunakan untuk memilih dari satu set pilihan nol atau lebih. |
tidak seperti kontrol pilihan tunggal seperti tombol radio, pengguna dapat memilih kombinasi opsi apa pun dalam sekelompok kotak centang.
Sekelompok kotak centang digunakan untuk pilihan independen. |
|
Pilihan dependen (satu atau beberapa) Sekelompok kotak centang juga dapat digunakan untuk memilih dari satu set pilihan atau lebih. |
Anda mungkin perlu mewakili pilihan satu atau beberapa pilihan dependen. karena microsoft?windows tidak memiliki kontrol yang secara langsung mendukung jenis input ini, solusi terbaik adalah menggunakan sekelompok kotak centang dan menangani kesalahan ketika tidak ada opsi yang dipilih.
Sekelompok kotak centang digunakan di mana setidaknya satu protokol harus dipilih. |
|
Pilihan campuran Selain status yang dipilih dan dikosongkan, kotak centang juga memiliki status campuran untuk beberapa pilihan untuk menunjukkan bahwa opsi diatur untuk beberapa objek, tetapi tidak semua, . |
Kotak centang status campuran. |
Panduan
Umum
Kotak centang terkait grup. Gabungkan opsi terkait dan pisahkan opsi yang tidak terkait ke dalam grup 10 atau kurang, menggunakan beberapa grup jika perlu.
Contoh grup opsi independen terkait.
Pertimbangkan kembali penggunaan kotak grup untuk menata grup kotak centang ini sering menghasilkan kekacauan layar yang tidak perlu.
Daftar kotak centang dalam urutan logis, seperti mengelompokkan opsi yang sangat terkait bersama-sama atau menempatkan opsi yang paling umum terlebih dahulu, atau mengikuti beberapa perkembangan alami lainnya. Pengurutan alfabet tidak disarankan karena bergantung pada bahasa, dan karenanya tidak dapat dilokalkan.
Ratakan kotak centang secara vertikal, bukan horizontal. Perataan horizontal lebih sulit dibaca.
Benar:
Dalam contoh ini, kotak centang diratakan dengan benar.
Salah:
Dalam contoh ini, perataan horizontal lebih sulit dibaca.
Jangan gunakan status campuran untuk mewakili status ketiga. Status campuran digunakan untuk menunjukkan bahwa opsi diatur untuk beberapa, tetapi tidak semua, objek anak. Pengguna seharusnya tidak dapat mengatur status campuran secara langsung, bukan status campuran adalah refleksi dari objek anak. Status campuran tidak digunakan sebagai status ketiga untuk item individual. Untuk mewakili status ketiga, gunakan tombol radio atau daftar drop-down sebagai gantinya.
Salah:
Dalam contoh ini, status campuran seharusnya menunjukkan bahwa layanan Tema tidak diinstal.
Benar:
Dalam contoh ini, pengguna dapat memilih dari daftar tiga opsi yang jelas.
Mengklik kotak centang status campuran harus menelusuri semua status yang dipilih, semua dikosongkan, dan status campuran asli. Untuk pengampunan, penting untuk dapat memulihkan status campuran asli karena pengaturannya mungkin rumit atau tidak diketahui oleh pengguna. Jika tidak, satu-satunya cara untuk memulihkan status campuran dengan percaya diri adalah dengan membatalkan tugas dan memulai kembali.
Jangan gunakan kotak centang sebagai indikator kemajuan. Gunakan kontrol indikator kemajuan sebagai gantinya.
Salah:
Dalam contoh ini, kotak centang salah digunakan sebagai indikator kemajuan.
Benar:
Contoh bilah kemajuan yang khas.
Perlihatkan kotak centang yang dinonaktifkan menggunakan status pilihan yang benar. Meskipun pengguna tidak dapat mengubahnya, kotak centang yang dinonaktifkan menyampaikan informasi sehingga mereka harus konsisten dengan hasil.
Salah:
Dalam contoh ini, opsi "Selalu baca bagian ini dengan lantang" harus dibersihkan karena bagian tidak dibaca saat opsi dinonaktifkan.
Jangan gunakan pilihan kotak centang 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).
Jangan perlihatkan item> ini <lagi
- Pertimbangkan untuk menggunakan opsi Jangan perlihatkan item> ini <lagi untuk memungkinkan pengguna menyembunyikan kotak dialog berulang hanya jika tidak ada alternatif yang lebih baik. Cobalah untuk menentukan sebelumnya jika pengguna benar-benar membutuhkan dialog; jika ya, selalu tampilkan dialog, dan jika tidak, hilangkan dialog.
Untuk panduan dan contoh lainnya, lihat Kotak Dialog.
Kontrol subordinat
Tempatkan kontrol subordinat di sebelah kanan atau di bawahnya (diinden, hapus dengan label kotak centang) kotak centang dan labelnya. Akhiri label kotak centang dengan titik dua.
Dalam contoh ini, kotak centang dan kontrol bawahannya berbagi label kotak centang dan kunci aksesnya.
Biarkan kotak teks dependen yang dapat diedit dan daftar drop-down diaktifkan jika mereka berbagi label kotak centang. Saat pengguna mengetik atau menempelkan apa pun ke dalam kotak, pilih opsi terkait secara otomatis. Melakukannya menyederhanakan interaksi.
Dalam contoh ini, memasukkan header atau footer secara otomatis memilih opsi .
Jika Anda menumpuk kotak centang dengan tombol radio atau kotak centang lainnya, nonaktifkan kontrol subordinat ini hingga opsi tingkat tinggi dipilih. Melakukannya menghindari kebingungan tentang arti kontrol bawahan.
Buat kontrol subordinat ke kotak centang yang berdekatan dengan kotak centang dalam urutan tab.
Jika memilih opsi menyiratkan pemilihan kotak centang subordinat, pilih kotak centang tersebut secara eksplisit untuk memperjelas hubungan.
Salah:
Dalam contoh ini, kotak centang subordinat tidak dipilih.
Benar:
Dalam contoh ini, kotak centang subordinat dipilih, membuat hubungan mereka dengan opsi yang dipilih kosong.
Gunakan kotak centang dependen jika alternatif menambahkan kompleksitas yang tidak perlu. Meskipun kotak centang harus berupa opsi independen, terkadang alternatif seperti tombol radio menambah kompleksitas yang tidak perlu.
Benar:
Dalam contoh ini, penggunaan tombol radio akurat, tetapi menciptakan kompleksitas yang tidak perlu.
Lebih:
Dalam contoh ini, penggunaan kotak centang lebih sederhana dan memungkinkan pengguna untuk fokus pada memilih opsi yang diinginkan alih-alih pada hubungan kompleks mereka.
Penting: Terapkan pedoman ini hanya dalam keadaan yang sangat jarang terjadi, ketika menunjukkan dependensi menambah kompleksitas yang signifikan tanpa menambahkan kejelasan. Dalam contoh sebelumnya, tidak mungkin pengguna akan mencoba memilih superskrip dan subskrip, dan jika mereka melakukannya, akan mudah untuk memahami bahwa mereka adalah opsi eksklusif.
Nilai default
- Jika kotak centang adalah untuk opsi pengguna, atur yang paling aman (untuk mencegah hilangnya data atau akses sistem), status paling aman dan privat secara default. Jika keamanan dan keselamatan bukan faktor, pilih nilai yang paling mungkin atau nyaman.
Ukuran dan penspasian yang direkomendasikan
Ukuran dan penspasian yang direkomendasikan untuk kotak centang.
Label
Label kotak centang
Beri label setiap kotak centang.
Tetapkan kunci akses unik untuk setiap label. Untuk panduan, lihat Keyboard.
Gunakan kapitalisasi gaya kalimat.
Tulis label sebagai frasa atau kalimat imperatif, dan jangan gunakan tanda baca akhir.
- Pengecualian: Jika label kotak centang juga memberi label kontrol subordinat yang mengikutinya, akhiri label dengan titik dua.
Tulis label sehingga menjelaskan status kotak centang yang dipilih.
Untuk sekelompok kotak centang, gunakan pembuatan frasa paralel dan coba pertahankan panjangnya yang hampir sama untuk semua label.
Untuk sekelompok kotak centang, fokuskan teks label pada perbedaan di antara opsi. Jika semua opsi memiliki teks pengantar yang sama, pindahkan teks tersebut ke label grup.
Gunakan pembuatan frasa positif. Jangan membuat frasa label sehingga memilih kotak centang berarti tidak melakukan tindakan.
- Pengecualian:Jangan perlihatkan item> ini <lagi kotak centang.
Salah:
Dalam contoh ini, opsi tidak menggunakan pembuatan frasa positif.
Jelaskan hanya opsi dengan label. Jaga agar label tetap singkat sehingga mudah untuk merujuknya dalam pesan dan dokumentasi. Jika opsi memerlukan penjelasan lebih lanjut, berikan penjelasan dalam kontrol teks statis menggunakan kalimat lengkap dan tanda baca akhir.
Catatan
Menambahkan penjelasan ke satu kotak centang dalam grup tidak berarti Anda harus memberikan penjelasan untuk semua kotak centang dalam grup. Berikan informasi yang relevan dalam label jika Anda bisa, dan gunakan penjelasan hanya jika perlu. Jangan hanya mengembalikan label untuk konsistensi.
Dalam contoh ini, label kotak centang memiliki teks penjelasan tambahan di bawahnya.
Jika opsi sangat disarankan, pertimbangkan untuk menambahkan "(disarankan)" ke label. Pastikan untuk menambahkan ke label kontrol, bukan catatan tambahan.
Jika Anda harus menggunakan label multibaris, ratakan bagian atas label dengan kotak centang.
Jangan gunakan kontrol subordinat, nilai yang dikandungnya, atau label unitnya untuk membuat kalimat atau frasa. Desain seperti itu tidak dapat dilokalkan karena struktur kalimat bervariasi menurut bahasa.
Salah:
Dalam contoh ini, kotak teks salah ditempatkan di dalam label kotak centang.
Label grup kotak centang
Gunakan label grup untuk menjelaskan tujuan grup, bukan cara membuat pilihan. Asumsikan bahwa pengguna tahu cara menggunakan kotak centang. Misalnya, jangan ucapkan "Pilih salah satu pilihan berikut".
Akhiri setiap label dengan titik dua.
Jangan tetapkan kunci akses ke label. Melakukannya tidak diperlukan dan membuat kunci akses lainnya lebih sulit ditetapkan.
Untuk pilihan satu atau beberapa pilihan dependen, jelaskan persyaratan pada label.
Benar:
Dalam contoh ini, pengguna mungkin berpikir bahwa mereka hanya dapat membuat satu pilihan.
Lebih:
Dalam contoh ini, jelas bahwa pengguna dapat membuat lebih dari satu pilihan.
Dokumentasi
Saat merujuk ke kotak centang:
Gunakan teks label yang tepat, termasuk kapitalisasinya, tetapi jangan sertakan garis bawah atau titik dua kunci akses. Sertakan kotak centang kata.
Lihat kotak centang sebagai kotak centang, bukan opsi, kotak centang, atau hanya kotak, karena kotak saja ambigu untuk pelokalan.
Untuk menjelaskan interaksi pengguna, gunakan pilih dan hapus.
Jika memungkinkan, format label menggunakan teks tebal. Jika tidak, letakkan label dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.
Contoh: Pilih kotak centang Garis Bawah .