Kotak Grup

Kotak grup adalah bingkai persegi panjang berlabel yang mengelilingi sekumpulan kontrol terkait. Kotak grup adalah cara untuk memperlihatkan hubungan secara visual; selain mungkin menyediakan kunci akses untuk sekelompok kontrol, itu tidak menyediakan fungsionalitas.

Kotak grup biasa.

Apakah ini kontrol yang tepat?

Meskipun kotak grup adalah sarana visual yang kuat untuk menunjukkan hubungan, menggunakannya secara berlebihan menambahkan kekacauan visual dan sangat mengurangi ruang yang tersedia di permukaan. Mereka secara visual berat dan harus digunakan secara hemat—hanya ketika tidak ada solusi yang lebih baik.

Tren desain di Windows adalah penampilan yang lebih sederhana dan lebih bersih dengan menghilangkan garis yang tidak perlu.

Untuk memutuskan apakah kotak grup diperlukan, pertimbangkan pertanyaan-pertanyaan berikut:

• Apakah ada lebih dari satu kontrol dalam grup? Jika tidak, gunakan label teks biasa sebagai gantinya. Pengecualian langka adalah menggunakan kotak grup dengan satu kontrol untuk mempertahankan konsistensi dengan kotak grup lain di permukaan yang sama.

Salah:

Dalam contoh ini, kotak grup hanya memiliki satu kontrol.

• Apakah kontrol terkait? Apakah memperlihatkan hubungan menambah kejelasan? Jika tidak, sajikan kontrol secara terpisah di luar kotak grup.
• Apakah semua kontrol di dalam grup? Jika demikian, tunjukkan hubungan pada permukaan yang lebih besar, seperti kotak dialog atau halaman induk.

Salah:

Dalam contoh ini, semua kontrol (selain dari tombol penerapan) dalam kotak dialog berada dalam kotak grup.

• Bisakah Anda secara efektif mengomunikasikan hubungan menggunakan tata letak saja? Jika demikian, gunakan tata letak sebagai gantinya. Anda dapat menempatkan kontrol terkait di samping satu sama lain dan menempatkan penspasian ekstra di antara kontrol yang tidak terkait. Anda juga dapat menggunakan judul dan inden untuk memperlihatkan hubungan hierarkis.

Dalam contoh ini, tata letak saja digunakan untuk memperlihatkan hubungan kontrol.

• Dapatkah Anda secara efektif mengomunikasikan hubungan menggunakan pemisah? Jika demikian, gunakan pemisah sebagai gantinya. Pemisah adalah garis horizontal yang menyandingkan kontrol di bawahnya. Pemisah memberikan tampilan yang lebih sederhana dan lebih bersih. Namun, tidak seperti kotak grup, mereka bekerja paling baik ketika mereka menjangkau lebar penuh permukaan.
  • Pengembang: Anda dapat mengimplementasikan pemisah dengan persegi panjang terukir dengan tinggi satu.

Dalam contoh ini, pemisah berlabel digunakan untuk memperlihatkan hubungan kontrol.

Dalam contoh ini, pemisah yang tidak berlabel digunakan untuk menunjukkan hubungan kontrol.

• Dapatkah Anda secara efektif mengomunikasikan hubungan tanpa teks? Jika demikian, pertimbangkan untuk menggunakan elemen grafis seperti latar belakang atau agregator.

Panduan

• Jangan menumpuk kotak grup. Gunakan tata letak untuk memperlihatkan hubungan dalam kotak grup.

Salah:

Dalam contoh ini, kotak grup berlapis menghasilkan kekacauan visual yang tidak perlu.

Benar:

Dalam contoh ini, hubungan kontrol yang sama ditampilkan menggunakan tata letak sebagai gantinya.

• Jangan letakkan kontrol dalam label kotak grup.
  • Pengecualian: Anda bisa menggunakan kotak centang sebagai label kotak grup jika semua kontrol di dalam kotak diaktifkan dan dinonaktifkan oleh kotak centang.

Salah:

Dalam contoh ini, daftar drop-down salah ditempatkan pada kotak grup. Contoh ini harus menggunakan tab sebagai gantinya.

• Jangan nonaktifkan kotak grup. Untuk menunjukkan bahwa grup kontrol saat ini tidak berlaku, nonaktifkan semua kontrol dalam kotak grup, tetapi bukan kotak grup itu sendiri. Pendekatan ini lebih dapat diakses dan dapat didukung secara konsisten oleh semua kerangka kerja UI.

Label

• Beri label semua kotak grup.
• Jangan tetapkan kunci akses ke label. Melakukannya tidak perlu dan membuat kunci akses lainnya lebih sulit ditetapkan. Sebagai gantinya, tetapkan kunci akses ke kontrol dalam kotak grup.
  • Pengecualian: Jika permukaan memiliki banyak kontrol, mungkin tidak ada cukup kunci akses yang tersedia. Jika demikian, kurangi jumlah kunci akses dengan menetapkannya ke kotak grup alih-alih kontrol dalam kotak grup.
• Gunakan kapitalisasi gaya kalimat.
• Tulis label menggunakan kata benda atau frasa kata benda, bukan sebagai kalimat, dan tidak menggunakan tanda baca akhir, termasuk titik dua.
• Gunakan pembuatan frasa paralel untuk label kotak grup dalam permukaan yang sama.
• Pertahankan label kotak grup tetap ringkas. Jangan gunakan teks instruksi sebagai label. Namun, Anda dapat memiliki teks instruksional dalam kotak grup.
• Jangan ulangi label kotak grup dalam label kontrol dalam kotak. Misalnya, jika kotak grup diberi label Perataan, beri label tombol opsi Kiri, Kanan, dan sebagainya, bukan Perataan kiri atau Perataan kanan.
• Jangan merujuk ke kotak grup dalam teks antarmuka pengguna.

Dokumentasi

Saat merujuk ke kotak grup:

• Lihat kotak grup hanya di programmer dan dokumentasi teknis lainnya. Untuk kotak grup, gunakan dua kata huruf kecil.
• Di tempat lain, tidak perlu menyertakan nama kotak grup dalam prosedur kecuali kotak dialog berisi lebih dari satu opsi dengan nama yang sama. Dalam kasus seperti itu, gunakan di bawah dengan nama kotak grup.
• Jika memungkinkan, format label menggunakan teks tebal. Jika tidak, letakkan label dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.

Contoh: Di bawah Efek, pilih Tersembunyi.