Kotak Dialog Windows 7 (Dasar-dasar desain)

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 kami saat ini.

Kotak dialog adalah jendela sekunder yang memungkinkan pengguna melakukan perintah, mengajukan pertanyaan kepada pengguna, atau memberi pengguna informasi atau umpan balik kemajuan.

screen shot identifying dialog box elements

Kotak dialog umum.

Kotak dialog terdiri dari bilah judul (untuk mengidentifikasi perintah, fitur, atau program tempat kotak dialog berasal), instruksi utama opsional (untuk menjelaskan tujuan pengguna dengan kotak dialog), berbagai kontrol di area konten (untuk menyajikan opsi), dan tombol penerapan (untuk menunjukkan bagaimana pengguna ingin berkomitmen pada tugas).

Kotak dialog memiliki dua jenis dasar:

  • Kotak dialog modal mengharuskan pengguna untuk menyelesaikan dan menutup sebelum melanjutkan dengan jendela pemilik. Kotak dialog ini paling baik digunakan untuk tugas penting atau jarang, satu kali yang memerlukan penyelesaian sebelum melanjutkan.
  • Kotak dialog tanpa mode memungkinkan pengguna beralih antara kotak dialog dan jendela pemilik sesuai keinginan. Kotak dialog ini paling baik digunakan untuk tugas yang sering, berulang, dan sedang berlangsung.

Dialog tugas adalah kotak dialog yang diimplementasikan menggunakan antarmuka pemrograman aplikasi dialog tugas (API). Mereka terdiri dari bagian-bagian berikut, yang dapat dirakit dalam berbagai kombinasi:

  • Bilah judul untuk mengidentifikasi aplikasi atau fitur sistem tempat kotak dialog berasal.
  • Instruksi utama, dengan ikon opsional, untuk mengidentifikasi tujuan pengguna dengan dialog.
  • Area konten untuk informasi dan kontrol deskriptif.
  • Area perintah untuk tombol penerapan, termasuk tombol Batal, dan opsi Lainnya opsional dan Jangan perlihatkan item> ini <lagi kontrol.
  • Area catatan kaki untuk penjelasan dan bantuan tambahan opsional, biasanya ditargetkan pada pengguna yang kurang berpengalaman.

screen shot of a typical task dialog box

Dialog tugas umum.

Dialog tugas direkomendasikan kapan pun sesuai karena mudah dibuat dan mencapai tampilan yang konsisten. Dialog tugas memerlukan Windows Vista atau yang lebih baru, sehingga tidak cocok untuk versi Microsoft Windows yang lebih lama.

Panel tugas seperti kotak dialog, kecuali bahwa itu disajikan dalam panel jendela, bukan jendela terpisah. Akibatnya, panel tugas memiliki nuansa kontekstual yang lebih langsung daripada kotak dialog. Meskipun secara teknis panel tugas tidak sama, panel tugas sangat mirip dengan kotak dialog sehingga panduannya disajikan dalam artikel ini.

screen shot of a typical task pane

Panel tugas umum.

Jendela properti adalah tipe kotak dialog khusus yang digunakan untuk melihat dan mengubah properti untuk objek, kumpulan objek, atau program. Selain itu, jendela properti biasanya mendukung beberapa tugas, sedangkan kotak dialog biasanya mendukung satu tugas atau langkah dalam tugas. Karena penggunaannya khusus, jendela properti tercakup dalam serangkaian pedoman yang berbeda.

Kotak dialog bisa memiliki tab, dan jika demikian, kotak dialog tersebut disebut kotak dialog bertab. Jendela properti ditentukan oleh presentasi propertinya, bukan oleh penggunaan tab.

Catatan: Panduan terkait tata letak, manajemen jendela, kotak dialog umum, jendela properti, wizard, konfirmasi, pesan kesalahan, dan pesan peringatan disajikan dalam artikel terpisah.

Apakah ini antarmuka pengguna yang tepat?

Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:

  • Apakah tujuan untuk memberi pengguna informasi, mengajukan pertanyaan kepada pengguna, atau mengizinkan pengguna memilih opsi untuk melakukan perintah atau tugas? Jika tidak, gunakan antarmuka pengguna (UI) lain.
  • Apakah tujuan untuk melihat dan mengubah properti untuk objek, kumpulan objek, atau program? Jika demikian, gunakan jendela properti atau toolbar sebagai gantinya.
  • Apakah tujuan untuk menyajikan kumpulan perintah atau alat? Jika demikian, gunakan toolbar atau jendela palet.
  • Apakah tujuan untuk memverifikasi bahwa pengguna ingin melanjutkan tindakan? Apakah ada alasan yang jelas untuk tidak melanjutkan dan kemungkinan yang wajar bahwa kadang-kadang pengguna tidak akan? Jika demikian, gunakan konfirmasi.
  • Apakah tujuan untuk memberikan pesan kesalahan atau peringatan? Jika demikian, gunakan pesan kesalahan atau pesan peringatan.
  • Adalah tujuan untuk:
    • Buka file
    • Simpan file
    • Buka folder
    • Menemukan atau mengganti teks
    • Mencetak dokumen
    • Pilih atribut halaman yang dicetak
    • Pilih font
    • Pilih warna
    • Telusuri file, folder, komputer, atau printer
    • Mencari pengguna, komputer, atau grup di Microsoft Active Directory
    • Meminta nama pengguna dan kata sandi?

Jika demikian, gunakan dialog umum yang sesuai sebagai gantinya. Banyak dari dialog umum ini dapat diperluas.

  • Apakah tujuan untuk melakukan tugas multi-langkah yang memerlukan lebih dari satu jendela? Jika demikian, gunakan alur tugas atau wizard sebagai gantinya.
  • Apakah tujuan untuk memberi tahu pengguna tentang peristiwa sistem atau program yang tidak terkait dengan aktivitas pengguna saat ini, yang tidak memerlukan tindakan pengguna segera, dan pengguna dapat dengan bebas mengabaikan? Jika demikian, gunakan pemberitahuan sebagai gantinya.
  • Apakah tujuan untuk menampilkan status program? Jika demikian, gunakan bilah status sebagai gantinya.
  • Apakah lebih baik menggunakan UI di tempat? Kotak dialog dapat merusak alur pengguna dengan menuntut perhatian. Terkadang alur jeda tersebut dibenarkan, seperti ketika pengguna harus melakukan tindakan yang berada di luar konteks saat ini. Dalam kasus lain, pendekatan yang lebih baik adalah menyajikan UI dalam konteks, baik secara langsung dengan UI di tempat (seperti panel tugas), atau sesuai permintaan menggunakan pengungkapan progresif.
  • Apakah tujuan untuk menampilkan masalah input pengguna yang tidak penting atau kondisi khusus? Jika demikian, gunakan balon sebagai gantinya.
  • Untuk alur tugas, apakah lebih baik menggunakan halaman lain? Umumnya Anda ingin tugas mengalir dari halaman ke halaman dalam satu jendela. Gunakan kotak dialog untuk mengonfirmasi perintah di tempat, untuk mendapatkan input untuk perintah di tempat, dan untuk melakukan tugas sekunder yang berdiri sendiri yang paling baik dilakukan secara independen dan di luar alur tugas utama.
  • Untuk memilih opsi, apakah pengguna cenderung mengubah opsi? Jika tidak, pertimbangkan alternatif, seperti:
    • Menggunakan opsi default tanpa bertanya, tetapi memungkinkan pengguna untuk membuat perubahan nanti.
    • Menyediakan versi dengan opsi (misalnya, Cetak... di menu) serta versi tanpa opsi (misalnya, Cetak di toolbar). Umumnya, perintah toolbar harus segera dan menghindari menampilkan kotak dialog.
  • Untuk memilih opsi, apakah ada cara yang lebih sederhana dan lebih langsung untuk menyajikan opsi? Jika demikian, pertimbangkan alternatif, seperti:
    • Menggunakan tombol pisahkan untuk memilih variasi perintah.
    • Menggunakan submenu untuk perintah, kotak centang, tombol radio, dan daftar sederhana.

Screenshot that shows a menu and sub-menu.

screen shot of a menu and submenu

Dalam contoh ini, submenu digunakan alih-alih kotak dialog untuk pilihan sederhana.

Konsep desain

Ketika digunakan dengan benar, kotak dialog adalah cara yang bagus untuk memberikan daya dan fleksibilitas pada program Anda. Saat disalahgunakan, kotak dialog adalah cara mudah untuk mengganggu pengguna, mengganggu alur mereka, dan membuat program terasa tidak langsung dan melelahkan untuk digunakan. Kotak dialog modal menuntut perhatian pengguna. Kotak dialog sering kali lebih mudah diimplementasikan daripada UI alternatif, sehingga cenderung terlalu banyak digunakan.

Kotak dialog paling efektif ketika karakteristik desainnya cocok dengan penggunaannya. Desain kotak dialog sebagian besar ditentukan oleh tujuannya (untuk menawarkan opsi, mengajukan pertanyaan, memberikan informasi atau umpan balik), jenis (modal atau modeless), dan interaksi pengguna (diperlukan, respons opsional, atau pengakuan), sedangkan penggunaannya sebagian besar ditentukan oleh konteksnya (pengguna atau program dimulai), probabilitas tindakan pengguna, dan frekuensi tampilan.

Untuk merancang kotak dialog yang efektif, gunakan elemen berikut secara efektif:

  • Teks kotak dialog
  • Instruksi utama
  • Jangan perlihatkan opsi item> ini <lagi

Jika Anda hanya melakukan satu hal ...

Pastikan desain kotak dialog Anda (ditentukan oleh tujuan, jenis, dan interaksi penggunanya) cocok dengan penggunaannya (ditentukan oleh konteksnya, probabilitas tindakan pengguna, dan frekuensi tampilannya).

Pola penggunaan

Kotak dialog memiliki beberapa pola penggunaan:

  • Dialog pertanyaan (menggunakan tombol) meminta pengguna satu pertanyaan atau untuk mengonfirmasi perintah, dan menggunakan respons sederhana dalam tombol perintah yang diatur secara horizontal.
  • Dialog pertanyaan (menggunakan tautan perintah) meminta pengguna satu pertanyaan atau untuk memilih tugas yang akan dilakukan, dan menggunakan respons terperinci dalam tautan perintah yang diatur secara vertikal.
  • Dialog pilihan menyajikan sekumpulan pilihan kepada pengguna, biasanya untuk menentukan perintah dengan lebih lengkap. Tidak seperti dialog pertanyaan, dialog pilihan dapat mengajukan beberapa pertanyaan.
  • Dialog kemajuan menyajikan umpan balik kemajuan kepada pengguna selama operasi panjang (lebih dari lima detik), bersama dengan perintah untuk membatalkan atau menghentikan operasi.
  • Dialog informasi menampilkan informasi yang diminta oleh pengguna.

Panduan

Umum

  • Jangan gunakan kotak dialog yang dapat digulir. Jangan gunakan kotak dialog yang mengharuskan penggunaan bilah gulir ditampilkan sepenuhnya selama penggunaan normal. Desain ulang kotak dialog sebagai gantinya. Pertimbangkan untuk menggunakan pengungkapan atau tab progresif.

  • Tidak memiliki bilah menu atau bilah status. Sebagai gantinya, berikan akses ke perintah dan status langsung pada kotak dialog itu sendiri, atau dengan menggunakan menu konteks pada kontrol yang relevan.

    • Pengecualian: Bilah menu dapat diterima saat kotak dialog digunakan untuk mengimplementasikan jendela utama (seperti utilitas).

    Salah:

    screen shot of a dialog box with a menu bar

    Dalam contoh ini, Temukan Sertifikat adalah kotak dialog tanpa mode dengan bilah menu.

  • Jika kotak dialog memerlukan perhatian segera dan program tidak aktif, flash tombol taskbar-nya tiga kali untuk menarik perhatian, dan biarkan disorot. Jangan lakukan hal lain: jangan pulihkan atau aktifkan jendela dan jangan putar efek suara apa pun. Sebagai gantinya, hormati pilihan status jendela pengguna dan biarkan pengguna mengaktifkan jendela saat siap.

  • Untuk panduan dan contoh selengkapnya, lihat Taskbar.

  • Gunakan untuk tugas penting atau jarang, satu kali yang memerlukan penyelesaian sebelum melanjutkan.
  • Gunakan model penerapan yang tertunda sehingga perubahan tidak berlaku hingga diterapkan secara eksplisit.
  • Terapkan menggunakan dialog tugas kapan pun sesuai untuk mencapai tampilan yang konsisten. Dialog tugas memerlukan Windows Vista atau yang lebih baru, sehingga tidak cocok untuk versi Windows yang lebih lama.

Kotak dialog tanpa mode

  • Gunakan untuk tugas yang sering, berulang, dan sedang berlangsung.
  • Gunakan model penerapan segera sehingga perubahan segera berlaku.
  • Untuk dialog tanpa mode, gunakan tombol perintah Tutup eksplisit dalam dialog untuk menutup jendela. Untuk keduanya, gunakan tombol Tutup pada bilah judul untuk menutup jendela.
  • Pertimbangkan untuk membuat kotak dialog modeless dapat ditambatkan. Dialog modeless yang dapat di-dock memungkinkan penempatan yang lebih fleksibel.

screen shot of a dockable, modeless dialog box

Beberapa kotak dialog modeless yang digunakan di Microsoft Office dapat ditambatkan.

Beberapa kotak dialog

  • Jangan tampilkan lebih dari satu dialog pilihan yang dimiliki pada satu waktu dari dialog pilihan pemilik. Menampilkan lebih dari satu membuat arti tombol penerapan sulit dipahami pengguna. Anda dapat menampilkan jenis kotak dialog lainnya (dialog pertanyaan tersebut) sesuai kebutuhan.
  • Untuk urutan dialog terkait, pertimbangkan untuk menggunakan dialog multi-halaman jika memungkinkan. Gunakan dialog individual jika tidak terkait dengan jelas.

Kotak dialog multi-halaman

  • Gunakan kotak dialog multi-halaman alih-alih kotak dialog individual saat Anda memiliki urutan halaman terkait berikut:
    • Satu halaman input (opsional)
    • Halaman kemajuan
    • Satu halaman hasil

Halaman input bersifat opsional karena tugas mungkin telah dimulai di tempat lain. Melakukannya memberikan pengalaman yang dihasilkan dengan nuansa yang stabil, sederhana, dan ringan.

screen shot of a progress bar

screen shot of 'no problems found' message

Dalam contoh ini, Diagnostik Jaringan Windows terdiri dari halaman kemajuan dan hasil.

  • Jangan gunakan dialog multi-halaman jika halaman input adalah dialog standar. Dalam hal ini konsistensi menggunakan dialog standar lebih penting.
  • Jangan gunakan tombol Berikutnya atau Kembali dan tidak memiliki lebih dari tiga halaman. Kotak dialog multi-halaman adalah untuk tugas satu langkah dengan umpan balik. Mereka bukan wizard, yang digunakan untuk tugas multi-langkah. Wizard memiliki nuansa berat dan tidak langsung dibandingkan dengan kotak dialog multi-halaman.
  • Pada halaman input, gunakan tombol perintah atau tautan perintah tertentu untuk memulai tugas.
  • Gunakan tombol Batalkan pada halaman input dan kemajuan, dan tombol Tutup pada halaman hasil.

Pengembang: Anda dapat membuat dialog tugas multi-halaman menggunakan pesan TDM_NAVIGATE_PAGE .

Presentasi

Untuk membuat kotak dialog mudah ditemukan dan diakses, kaitkan dialog dengan sumbernya dengan jelas, dan bekerja dengan baik dengan beberapa monitor:

  • Awalnya menampilkan dialog "berpusat" di atas jendela pemilik. Untuk tampilan berikutnya, pertimbangkan untuk menampilkannya di lokasi terakhirnya (relatif terhadap jendela pemilik) jika melakukannya cenderung lebih nyaman.

diagram of dialog box centered on window behind it

Awalnya tengahkan dialog di atas jendela pemilik.

  • Jika dialog bersifat kontekstual, tampilkan di dekat objek tempat dialog diluncurkan. Namun, letakkan di luar jalan (sebaiknya offset ke bawah dan ke kanan) sehingga objek tidak tercakup oleh dialog.

diagram of dialog box offset down and to the right

Properti objek ditampilkan di dekat objek.

  • Untuk dialog tanpa mode, tampilkan awalnya di atas jendela pemilik untuk memudahkan ditemukan. Jika pengguna mengaktifkan jendela pemilik, yang dapat mengaburkan dialog tanpa mode.
  • Jika perlu, sesuaikan lokasi awal sehingga seluruh dialog terlihat dalam monitor target. Jika jendela yang dapat diubah ukurannya lebih besar dari monitor target, kurangi agar pas.
  • Saat dialog diputar ulang, pertimbangkan untuk menampilkannya dalam status yang sama seperti yang terakhir diakses. Pada penutupan, simpan monitor yang digunakan, ukuran jendela, lokasi, dan status (dimaksimalkan vs. pemulihan). Pada pemutaran ulang, pulihkan ukuran dialog, lokasi, dan status yang disimpan menggunakan monitor yang sesuai. Selain itu, pertimbangkan untuk membuat atribut ini bertahan di seluruh instans program berdasarkan per pengguna.
  • Untuk jendela yang dapat diubah ukurannya, atur ukuran jendela minimum jika ada ukuran di bawah ini yang kontennya tidak lagi dapat digunakan. Pertimbangkan untuk mengubah presentasi agar konten dapat digunakan dengan ukuran yang lebih kecil.

screen shot of centered media player buttons

Dalam contoh ini, Pemutar Media Windows mengubah formatnya ketika jendela menjadi terlalu kecil untuk format standar.

  • Jangan gunakan atribut Always on Top.
    • Pengecualian: Gunakan hanya ketika kotak dialog mengimplementasikan operasi modal pada dasarnya, tetapi perlu ditangguhkan secara singkat untuk mengakses jendela pemilik. Misalnya, saat memeriksa ejaan dokumen, pengguna terkadang meninggalkan kotak dialog centang ejaan dan mengakses dokumen untuk memperbaiki kesalahan.

Untuk informasi dan contoh selengkapnya, lihat Manajemen Jendela.

Bilah judul

  • Kotak dialog tidak memiliki ikon bilah judul. Ikon bilah judul digunakan sebagai perbedaan visual antara jendela utama dan jendela sekunder.
    • Pengecualian: Jika kotak dialog digunakan untuk mengimplementasikan jendela utama (seperti utilitas) dan karenanya muncul di taskbar, kotak dialog tersebut memiliki ikon bilah judul. Dalam hal ini, optimalkan judul untuk ditampilkan di taskbar dengan secara ringkas menempatkan informasi pembeda terlebih dahulu.
  • Kotak dialog selalu memiliki tombol Tutup. Dialog tanpa mode juga dapat memiliki tombol Minimalkan. Dialog yang dapat diubah ukurannya dapat memiliki tombol Maksimalkan.
  • Jangan nonaktifkan tombol Tutup. Memiliki tombol Tutup membantu pengguna tetap memegang kontrol dengan mengizinkan mereka menutup jendela yang tidak diinginkan.
    • Pengecualian: Untuk dialog kemajuan, Anda dapat menonaktifkan tombol Tutup jika tugas harus berjalan hingga selesai untuk mencapai status yang valid atau mencegah kehilangan data.
  • Tombol Tutup pada bilah judul harus memiliki efek yang sama dengan tombol Batalkan atau Tutup dalam kotak dialog. Jangan pernah memberikan efek yang sama seperti OK.
  • Jika keterangan dan ikon bilah judul sudah ditampilkan dengan cara yang menonjol di dekat bagian atas jendela, Anda dapat menyembunyikan keterangan dan ikon bilah judul untuk menghindari redundansi. Namun, Anda masih harus mengatur judul yang cocok secara internal untuk digunakan oleh Windows.

Interaksi

  • Saat ditampilkan, kotak dialog yang dimulai pengguna harus selalu mengambil fokus input. Kotak dialog yang dimulai program tidak boleh mengambil fokus input karena pengguna mungkin berinteraksi dengan jendela lain. Interaksi seperti itu salah dialihkan di kotak dialog mungkin memiliki konsekuensi yang tidak diinginkan.

  • Tetapkan fokus input awal ke kontrol yang kemungkinan besar berinteraksi dengan pengguna terlebih dahulu, yang biasanya (tetapi tidak selalu) kontrol interaktif pertama. Hindari menetapkan fokus input awal ke tautan Bantuan.

  • Untuk navigasi keyboard, urutan tab harus mengalir dalam urutan logis, umumnya dari kiri ke kanan, atas ke bawah. Biasanya urutan tab mengikuti urutan baca, tetapi pertimbangkan untuk membuat pengecualian ini:

    • Letakkan kontrol yang paling umum digunakan sebelumnya dalam urutan tab.
    • Letakkan tautan Bantuan di bagian bawah kotak dialog, setelah tombol terapkan dalam urutan tab.

    Saat menetapkan pesanan, asumsikan bahwa pengguna menampilkan kotak dialog untuk tujuan yang dimaksudkan; jadi, misalnya, pengguna menampilkan dialog pilihan untuk membuat pilihan, bukan untuk meninjau dan mengklik Batal.

  • Menekan tombol Esc selalu menutup kotak dialog aktif. Ini berlaku untuk kotak dialog dengan Batal atau Tutup, dan bahkan jika Batal telah diganti namanya menjadi Tutup karena hasilnya tidak dapat dibatalkan lagi.

Kunci akses

  • Jika memungkinkan, tetapkan kunci akses unik ke semua kontrol interaktif atau labelnya.Kotak teks baca-saja adalah kontrol interaktif (karena pengguna dapat menggulirnya dan menyalin teks) sehingga mereka mendapat manfaat dari kunci akses. Jangan tetapkan kunci akses ke:

    • Tombol OK, Batal, dan Tutup. Enter dan Esc digunakan untuk kunci akses mereka. Namun, selalu tetapkan kunci akses ke kontrol yang berarti OK atau Batal, tetapi memiliki label yang berbeda.

      screen shot of delete file dialog box

      Dalam contoh ini, tombol penerapan positif memiliki kunci akses yang ditetapkan.

    • Label grup. Biasanya, kontrol individual dalam grup diberi kunci akses, sehingga label grup tidak memerlukannya. Namun, jika ada kekurangan kunci akses, tetapkan kunci akses ke label grup dan bukan kontrol individual.

    • Tombol Bantuan Generik, yang diakses dengan F1.

    • Label tautan. Seringkali ada terlalu banyak tautan untuk menetapkan kunci akses unik, dan garis bawah yang sering digunakan untuk menandakan tautan menyembunyikan garis bawah kunci akses. Akses tautan dengan tombol Tab sebagai gantinya.

    • Nama tab. Tab di-siklus menggunakan Ctrl+Tab dan Ctrl+Shift+Tab.

    • Telusuri tombol berlabel "...". Tombol Telusuri ini tidak dapat ditetapkan kunci akses secara unik.

    • Kontrol tanpa label, seperti kontrol putar, tombol perintah grafis, dan kontrol pengungkapan progresif tanpa label.

    • Teks atau label statis non-label untuk kontrol yang tidak interaktif, seperti bilah kemajuan.

  • Jika memungkinkan, tetapkan kunci akses untuk perintah yang umum digunakan sesuai dengan Penetapan Kunci Akses Standar. Meskipun penetapan kunci akses yang konsisten tidak selalu dimungkinkan, penetapan kunci tersebut tentu lebih disukai terutama untuk kotak dialog yang sering digunakan.

  • Tetapkan kunci akses tombol penerapan terlebih dahulu untuk memastikan bahwa kunci tersebut memiliki penetapan kunci standar. Jika tidak ada penetapan kunci standar, gunakan huruf pertama dari kata pertama. Misalnya, kunci akses untuk tombol Ya dan Tidak ada penerapan harus selalu "Y" dan "N", terlepas dari kontrol lain dalam kotak dialog.

  • Untuk membuat kunci akses mudah ditemukan, tetapkan kunci akses ke karakter yang muncul di awal label, idealnya karakter pertama, bahkan jika ada kata kunci yang muncul nanti di label.

  • Lebih suka karakter dengan lebar lebar, seperti w, m, dan huruf kapital.

  • Lebih suka konsonan yang khas atau vokal, seperti "x" di Exit.

  • Hindari menggunakan karakter yang membuat garis bawah sulit dilihat, seperti (dari yang paling bermasalah hingga paling tidak bermasalah):

    • Huruf yang hanya lebar satu piksel, seperti i dan l.
    • Huruf dengan turunan, seperti g, j, p, q, dan y.
    • Surat di samping huruf dengan turunan.

Untuk panduan dan contoh lainnya, lihat Keyboard.

Dialog kemajuan

Untuk tugas yang berjalan lama, asumsikan bahwa pengguna akan melakukan hal lain saat tugas selesai. Desain tugas untuk menjalankan tanpa pengawas.

  • Sajikan pengguna dengan kotak dialog umpan balik kemajuan jika operasi membutuhkan waktu lebih dari lima detik untuk diselesaikan, bersama dengan perintah untuk membatalkan atau menghentikan operasi.
    • Pengecualian: Untuk panduan dan alur tugas, gunakan dialog modal untuk kemajuan hanya jika tugas tetap berada di halaman yang sama (dibandingkan dengan maju ke halaman lain) dan pengguna tidak dapat melakukan apa pun saat menunggu. Jika tidak, gunakan halaman kemajuan atau kemajuan di tempat.
  • Jika operasi adalah tugas jangka panjang (lebih dari 30 detik) dan dapat dilakukan di latar belakang, gunakan dialog kemajuan tanpa mode sehingga pengguna dapat terus menggunakan program Anda saat menunggu.
  • Dialog kemajuan tanpa mode:
    • Memiliki tombol Minimalkan pada bilah judul.
    • Ditampilkan pada bilah tugas.
  • Terapkan dialog kemajuan modeless sehingga terus berjalan meskipun jendela pemilik ditutup.

screen shot of copy dialog box with progress bar

Dalam contoh ini, salinan file berlanjut bahkan jika jendela pemilik ditutup.

  • Berikan tombol perintah untuk menghentikan operasi jika perlu waktu lebih dari beberapa detik untuk diselesaikan, atau memiliki potensi untuk tidak pernah selesai. Beri label tombol Batal jika membatalkan mengembalikan lingkungan ke status sebelumnya (tidak meninggalkan efek samping); jika tidak, beri label tombol Berhenti untuk menunjukkan bahwa tombol tersebut membiarkan operasi yang diselesaikan sebagian tetap utuh. Anda dapat mengubah label tombol dari Batal ke Berhenti di tengah operasi, jika pada titik tertentu tidak dimungkinkan untuk mengembalikan lingkungan ke status sebelumnya.

screen shot of dialog box with cancel button

Dalam contoh ini, menghentikan diagnosis masalah tidak memiliki efek samping.

  • Berikan tombol perintah untuk menjeda operasi jika membutuhkan waktu lebih dari beberapa menit untuk diselesaikan, dan itu mengganggu kemampuan pengguna untuk menyelesaikan pekerjaan. Melakukannya tidak memaksa pengguna untuk memilih antara menyelesaikan tugas dan menyelesaikan pekerjaan mereka.
  • Kumpulkan informasi sebanyak mungkin sebelum memulai tugas.
  • Jika masalah yang dapat dipulihkan terdeteksi, minta pengguna menangani semua masalah yang ditemukan di akhir tugas. Jika itu tidak praktis, minta pengguna menangani masalah saat terjadi.
  • Jangan tinggalkan tugas sebagai akibat dari kesalahan yang dapat dipulihkan.

screen shot of dialog box with try again button

Dalam contoh ini, Windows Explorer memungkinkan pengguna untuk melanjutkan tugas setelah kesalahan yang dapat dipulihkan.

  • Menunjukkan masalah dengan mengubah bilah kemajuan menjadi merah.

screen shot of progress bar and try again button

Dalam contoh ini, disk yang dapat dilepas dihapus selama salinan file.

  • Jika hasilnya jelas jelas bagi pengguna, tutup dialog kemajuan secara otomatis pada penyelesaian yang berhasil. Jika tidak, gunakan umpan balik hanya untuk melaporkan masalah:
    • Untuk menampilkan umpan balik sederhana, tampilkan umpan balik dalam dialog kemajuan, dan ubah tombol Batalkan menjadi Tutup.
    • Untuk menampilkan umpan balik terperinci, tutup kotak dialog kemajuan dan tampilkan dialog informasi.

Jangan gunakan pemberitahuan untuk umpan balik penyelesaian. Gunakan dialog kemajuan atau pemberitahuan keberhasilan tindakan, tetapi tidak keduanya.

Sisa waktu

  • Gunakan format waktu berikut. Mulailah dengan format pertama dari format berikut di mana unit waktu terbesar bukan nol, lalu ubah ke format berikutnya setelah unit waktu terbesar menjadi nol.

Untuk bilah kemajuan:

Jika informasi terkait ditampilkan dalam format titik dua:

Sisa waktu: jam h, m menit

Sisa waktu: m menit, detik

Sisa waktu: s detik

Jika ruang layar berada pada premium:

h hrs, m menit tersisa

m menit, s detik tersisa

s detik tersisa

Sebaliknya:

jam, m menit tersisa

m menit, detik tersisa

s detik tersisa

Untuk bilah judul:

hh:mm tersisa

mm:ss tersisa

0:ss tersisa

Format ringkas ini menunjukkan informasi terpenting terlebih dahulu sehingga tidak terpotong pada taskbar.

  • Buat perkiraan akurat, tetapi jangan berikan presisi palsu. Jika unit terbesar adalah jam, beri menit (jika bermakna) tetapi bukan detik.

Salah:

jam hh, mm menit, detik ss

  • Pertahankan perkiraan terbaru. Perkiraan waktu pembaruan yang tersisa setidaknya setiap 5 detik.
  • Fokus pada sisa waktu karena itu adalah informasi yang paling dipedulikan pengguna. Berikan total waktu yang berlalu hanya ketika ada skenario di mana waktu yang berlalu sangat membantu (seperti ketika tugas kemungkinan akan diulang). Jika perkiraan waktu yang tersisa dikaitkan dengan bilah kemajuan, tidak memiliki persentase teks lengkap karena informasi tersebut disampaikan oleh bilah kemajuan itu sendiri.
  • Jadilah benar secara tata bahasa. Gunakan unit tunggal ketika angkanya adalah satu.

Salah:

1 menit, 1 detik

  • Gunakan kapitalisasi gaya kalimat.

Untuk informasi dan contoh selengkapnya, lihat Bilah Kemajuan.

Ikon dan grafik

Grafik

  • Jangan gunakan grafis besar yang tidak memiliki tujuan selain mengisi ruang dengan permen mata. Jaga penampilan tetap sederhana sebagai gantinya.

Salah:

screen shot of dialog box with a large graphic

Dalam contoh ini, grafik besar tidak memiliki tujuan.

Ikon bilah judul

  • Kotak dialog tidak memiliki ikon bilah judul.
    • Pengecualian: Jika kotak dialog digunakan untuk mengimplementasikan jendela utama (seperti utilitas) dan karenanya muncul di taskbar, kotak dialog tersebut memiliki ikon bilah judul.

Ikon isi

  • Pilih ikon isi berdasarkan pola desain:
Pola Ikon isi
Dialog pertanyaan
Program, fitur, objek, ikon peringatan (jika potensi kehilangan data atau akses sistem), peringatan keamanan, atau tidak ada.
Dialog pilihan
Tidak ada.
Dialog kemajuan
Tidak ada (tetapi mungkin memiliki animasi).
Dialog informasi
Tidak ada.
  • Salah:

screen shot of dialog box with warning icon

Dalam contoh ini, ikon peringatan salah digunakan untuk pertanyaan yang tidak melibatkan potensi kehilangan data atau akses sistem.

  • Pertimbangkan untuk menggunakan ikon untuk membantu pengguna mengenali fitur program Anda secara visual. Teknik ini paling efektif ketika ikon mudah dikenali dan digunakan di beberapa lokasi dalam program Anda.

screen shot of favorites dialog box with star icon

Dalam contoh ini, ikon bintang kuning mewakili Favorit. Ikon ini mudah dikenali dan digunakan secara konsisten di seluruh Windows untuk mewakili Favorit.

  • Gunakan ikon untuk membantu pengguna mengenali objek yang dimaksud.

screen shot of dialog box with powerpoint icon

Dalam contoh ini, ikon objek membantu pengguna mengenali jenis file yang sedang dibuka atau disimpan.

  • Pertimbangkan untuk menggunakan ikon untuk membantu membuat fitur menjadi jelas.

images of arrows showing how to position monitor

Dalam contoh ini, ikon ini membantu pengguna memvisualisasikan efek fitur mereka.

  • Gunakan ikon dalam dialog Tentang Kotak untuk branding aplikasi.

screen shot of about dialog box with windows logo

Dalam contoh ini, bitmap digunakan dalam Kotak Tentang untuk mengidentifikasi dan memberi merek aplikasi.

Ikon catatan kaki

  • Jika Anda memiliki catatan kaki, pertimbangkan untuk menggunakan ikon catatan kaki untuk meringkas subjek catatan kaki.

screen shot of dialog box with footnote icon

Dalam contoh ini, ikon catatan kaki menunjukkan bahwa pertanyaan memiliki implikasi keamanan.

  • Jangan gunakan ikon catatan kaki yang mengulangi ikon isi.
  • Jangan gunakan ikon standar kesalahan atau informasi. Kondisi kesalahan harus disampaikan melalui ikon isi dan catatan kaki selalu untuk informasi, membuat ikon informasi berlebihan. Namun, Anda dapat menggunakan ikon peringatan standar dan perisai keamanan kuning untuk memperingatkan pengguna tentang konsekuensi berisiko.

Untuk informasi dan contoh selengkapnya, lihat Ikon.

Tombol Terapkan

Catatan:

  • Panduan ini tidak berlaku untuk dialog pertanyaan menggunakan tautan perintah, karena pola tersebut menggunakan tautan perintah alih-alih tombol.
  • [Lakukan] dan [Jangan lakukan itu] adalah respons afirmatif dan negatif, masing-masing, terhadap instruksi utama.

Umum

  • Pilih tombol penerapan berdasarkan pola desain:
Label Nilai
Pola
Tombol Terapkan
Dialog pertanyaan (menggunakan tombol)
Salah satu set perintah ringkas berikut: Ya/Tidak, Ya/Tidak/Batal, [Do it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel.
Dialog pertanyaan (menggunakan tautan)
Batalkan.
Dialog pilihan
  • Dialog modal: OK/Batal atau [Do it]/Cancel
  • Dialog tanpa mode: Tombol tutup pada kotak dialog dan bilah judul
  • Panel tugas: Tombol tutup pada bilah judul
Dialog kemajuan
Gunakan Batal jika mengembalikan lingkungan ke status sebelumnya (tidak meninggalkan efek samping); jika tidak, gunakan Hentikan.
Dialog informasi
Tutup.
  • Semua tombol penerapan kecuali Terapkan hasil dalam menutup jendela kotak dialog.

  • Jangan konfirmasi tombol penerapan. Melakukannya secara tidak perlu bisa sangat mengganggu. Pengecualian:

    • Tindakan ini berpotensi bencana.
    • Tindakan ini jelas tidak konsisten dengan tindakan lain.
    • Jika salah, tindakan dapat mengakibatkan hilangnya data, waktu, atau upaya yang signifikan atas nama pengguna.

    Untuk panduan dan contoh selengkapnya, lihat Konfirmasi.

  • Jangan nonaktifkan tombol penerapan. Pengecualian:

    • Jika pengguna harus meningkatkan untuk membuat perubahan, nonaktifkan tombol penerapan positif hingga pengguna membuat perubahan. Melakukannya mencegah pengguna meningkatkan hanya untuk menutup jendela dengan memaksa mereka untuk mengklik Batal.
    • Untuk pengecualian lainnya, lihat Menonaktifkan atau menghapus kontrol vs. memberikan pesan kesalahan.
  • Rata kanan tombol penerapan dalam satu baris di bagian bawah kotak dialog, tetapi di atas area catatan kaki. Lakukan ini bahkan jika ada satu tombol penerapan (seperti OK).

    Salah:

    screen shot of message with centered ok button

    Dalam contoh ini, tombol OK salah dipusatkan.

  • Sajikan tombol penerapan dalam urutan berikut:

    1. OK/[Do it]/Yes
    2. [Jangan lakukan]/Tidak
    3. Batalkan
    4. Terapkan (jika ada)
    5. Bantuan (jika ada)
  • Jika Anda memiliki banyak tombol penerapan terkait, konsolidasikan menggunakan tombol pisahkan.

  • Memiliki pemisahan yang jelas dari tombol penerapan (yang menutup jendela) dan semua tombol perintah lainnya (seperti Tingkat Lanjut).

Menanggapi instruksi utama

  • Gunakan tombol penerapan positif yang merupakan respons khusus terhadap instruksi utama, alih-alih label generik seperti OK atau Ya/Tidak. Pengguna harus dapat memahami opsi dengan membaca teks tombol saja. Pengecualian:

    • Gunakan Tutup untuk dialog yang tidak memiliki pengaturan, seperti dialog informasi. Jangan pernah menggunakan Tutup untuk dialog yang memiliki pengaturan.

    • Gunakan OK saat respons "spesifik" masih umum, seperti Simpan, Pilih, atau Pilih. Gunakan OK saat mengubah pengaturan tertentu atau kumpulan pengaturan.

    • Untuk kotak dialog warisan tanpa instruksi utama, Anda dapat menggunakan label generik seperti OK. Seringkali kotak dialog tersebut tidak dirancang untuk melakukan tugas tertentu, mencegah respons yang lebih spesifik.

    • Tugas-tugas tertentu memerlukan pembacaan yang lebih cermat dan cermat bagi pengguna untuk membuat keputusan berdasarkan informasi. Ini biasanya terjadi dengan konfirmasi. Dalam kasus seperti itu, Anda dapat dengan sengaja menggunakan label tombol penerapan generik untuk memaksa pengguna membaca instruksi utama dan mencegah keputusan yang terburu-buru.

      Benar:

      screen shot of message with yes and no buttons

      Dalam contoh ini, menggunakan tombol penerapan Ya/Tidak memaksa pengguna untuk setidaknya membaca instruksi utama.

  • Atau, Anda dapat menambahkan kata "anyway" ke label tombol penerapan positif untuk menunjukkan bahwa kotak dialog menyajikan alasan untuk tidak melanjutkan dan bahwa pengguna harus membaca dialog dengan hati-hati sebelum melanjutkan.

    Benar:

    screen shot of message and uninstall anyway button

    Dalam contoh ini, "anyway" ditambahkan ke label tombol penerapan untuk menunjukkan bahwa pengguna harus melanjutkan dengan hati-hati.

  • Gunakan Batalkan atau Tutup untuk tombol penerapan negatif alih-alih respons tertentu terhadap instruksi utama. Cukup sering pengguna menyadari bahwa mereka tidak ingin melakukan tugas setelah mereka melihat kotak dialog. Jika Batal atau Tutup diberi label pada respons tertentu, pengguna harus membaca semua tombol penerapan dengan hati-hati untuk menentukan cara membatalkan. Pelabelan Batal dan Tutup secara konsisten membuatnya mudah ditemukan. Pengecualian:

    • Jangan gunakan Ya/Batal. Selalu gunakan Ya/Tidak sebagai pasangan.
    • Gunakan respons tertentu saat Batal bersifat ambigu.
  • Jangan memetakan label generik ke arti spesifiknya dengan teks di area konten. Sebagai gantinya, gunakan label tombol penerapan tertentu, atau dialog pertanyaan menggunakan tautan jika label panjang.

    Salah:

    screen shot of message with unclear use of buttons

    Dalam contoh ini, OK dipetakan ke Lanjutkan, Batal dipetakan ke Tetap di Halaman.

Tombol Ya dan Tidak

  • Lebih suka respons khusus untuk tombol Ya dan Tidak. Meskipun tidak ada yang salah dengan menggunakan Ya dan Tidak, respons spesifik dapat dipahami lebih cepat, sehingga menghasilkan pengambilan keputusan yang efisien. Namun, konfirmasi biasanya memiliki tombol Ya dan Tidak untuk membuat pengguna memberikan konfirmasi beberapa pemikiran sebelum merespons.

  • Gunakan tombol Ya dan Tidak hanya untuk merespons pertanyaan ya atau tidak. Instruksi utama harus dinyatakan secara alami sebagai pertanyaan ya atau tidak. Jangan pernah menggunakan OK dan Batal untuk pertanyaan ya atau tidak.

    Salah:

    Screenshot that shows a message with an 'OK' for a yes-no question.

    Benar:

    screen shot of message with yes for same question

    Lebih:

    screen shot of message with run for same question

    Dalam contoh-contoh ini, Ya dan Tidak adalah respons yang baik terhadap ya dan tidak ada pertanyaan, tetapi respons spesifik bahkan lebih baik.

  • Pertimbangkan untuk membuat frasa instruksi utama sebagai ya atau tidak ada pertanyaan jika tombol penerapan dengan frasa tertentu ternyata panjang atau canggung. Atau, Anda dapat menggunakan tautan perintah untuk respons yang lebih panjang (lima kata atau lebih) ke instruksi utama.

    Salah:

    screen shot of message with wordy button labels

    Benar:

    screen shot of message with yes/no button labels

    Penyusunan frasa tertentu dalam contoh yang salah terlalu panjang, sehingga contoh yang benar menggunakan Ya dan Tidak.

  • Jangan gunakan tombol Ya dan Tidak jika arti dari Tidak ada respons yang tidak jelas. Jika demikian, gunakan respons tertentu sebagai gantinya.

Tombol OK

  • Dalam dialog modal, mengklik OK berarti menerapkan nilai, melakukan tugas, dan menutup jendela.

  • Jangan gunakan tombol OK untuk menanggapi pertanyaan.

  • Jangan tetapkan kunci akses ke OK, karena Enter adalah kunci akses untuk tombol default. Melakukannya membuat kunci akses lainnya lebih mudah ditetapkan.

  • Beri label tombol OK dengan benar. Tombol OK harus diberi label OK, bukan Ok atau Oke.

  • Jangan gunakan tombol OK untuk kesalahan atau peringatan. Masalah tidak pernah baik-baik saja. Gunakan Tutup sebagai gantinya.

    Salah:

    screen shot of message with ok button

    Dalam contoh ini, Tutup harus digunakan alih-alih OK.

  • Jangan gunakan tombol OK dalam kotak dialog tanpa mode. Sebaliknya, dialog tanpa mode harus menggunakan tombol penerapan khusus tugas (misalnya, Temukan). Namun, beberapa kotak dialog tanpa mode hanya memerlukan tombol Tutup.

Tombol Batal

  • Mengklik Batal berarti mengabaikan semua perubahan, membatalkan tugas, menutup jendela, dan mengembalikan lingkungan ke status sebelumnya, tanpa meninggalkan efek samping. Untuk kotak dialog pilihan berlapis, mengklik Batal dalam dialog pilihan pemilik berarti setiap perubahan yang dibuat oleh dialog pilihan yang dimiliki juga diabaikan.

  • Berikan tombol Batal untuk memungkinkan pengguna secara eksplisit meninggalkan perubahan. Kotak dialog memerlukan titik keluar yang jelas. Jangan bergantung pada pengguna yang menemukan tombol Tutup pada bilah judul.

    • Pengecualian: Jangan sediakan tombol Batalkan untuk kotak dialog tanpa pengaturan. Tombol OK dan Tutup memiliki efek yang sama dengan Batal dalam kasus ini.

    Salah:

    screen shot of message with ok button only

    Dalam contoh ini, hanya memiliki tombol Tutup pada bilah judul membuatnya muncul seolah-olah pengguna tidak memiliki pilihan.

  • Jangan gunakan tombol Batal untuk menanggapi pertanyaan.

    Salah:

    screen shot of message with ok for yes-no question

    Dalam contoh ini, OK dan Batal salah digunakan untuk menanggapi pertanyaan Ya atau Tidak.

  • Jangan tetapkan kunci akses ke Batal, karena Esc adalah kunci akses. Melakukannya membuat kunci akses lainnya lebih mudah ditetapkan.

  • Jangan gunakan tombol Batal dalam kotak dialog tanpa mode. Sebaliknya, gunakan Tutup sebagai gantinya.

  • Jangan nonaktifkan tombol Batalkan. Pengguna harus selalu dapat membatalkan kotak dialog.

    • Pengecualian: Anda dapat menonaktifkan tombol Batal dalam dialog kemajuan jika ada periode di mana operasi tidak dapat dibatalkan. Namun, solusi yang lebih baik adalah merancang operasi tersebut agar selalu dapat dibatalkan.

Tombol Tutup

  • Gunakan tombol Tutup untuk kotak dialog tanpa mode, serta dialog modal yang tidak dapat dibatalkan.
  • Mengklik Tutup berarti menutup jendela kotak dialog, meninggalkan efek samping yang ada. Jangan gunakan Selesai, karena ini bukan konstruksi imperatif. Untuk kotak dialog pilihan berlapis, mengklik Tutup dalam dialog pilihan pemilik berarti setiap perubahan yang dibuat oleh dialog pilihan yang dimiliki dipertahankan.
  • Letakkan tombol Tutup eksplisit di isi kotak dialog. Kotak dialog memerlukan titik keluar yang jelas. Jangan bergantung pada pengguna yang menemukan tombol Tutup pada bilah judul.
  • Pastikan tombol Tutup pada bilah judul memiliki efek yang sama dengan Batalkan atau Tutup.
  • Jangan tetapkan kunci akses ke Tutup, karena Esc adalah kunci akses. Melakukannya membuat kunci akses lainnya lebih mudah ditetapkan.

Terapkan tombol

  • Jangan gunakan tombol Terapkan dalam kotak dialog yang bukan lembar properti atau panel kontrol. Tombol Terapkan berarti menerapkan perubahan yang tertunda, tetapi biarkan jendela terbuka. Melakukannya memungkinkan pengguna untuk mengevaluasi perubahan sebelum menutup jendela. Namun, hanya lembar properti dan panel kontrol yang memiliki kebutuhan ini.

    Salah:

    screen shot of dialog box with apply button

    Dalam contoh ini, dialog pilihan tidak perlu memiliki tombol Terapkan.

Tombol Penerapan untuk kotak dialog tidak langsung

Catatan: Kotak dialog tidak langsung ditampilkan di luar konteks, baik sebagai hasil tidak langsung dari tugas atau hasil dari masalah dengan sistem atau proses latar belakang. Untuk dialog tidak langsung, tombol Batalkan bersifat ambigu karena bisa berarti membatalkan dialog atau membatalkan seluruh tugas.

  • Jika pengguna perlu membatalkan kotak dialog dan tugas, berikan tombol penerapan untuk melakukan keduanya. Beri label tombol yang membatalkan kotak dialog dengan respons negatif terhadap instruksi utama. Beri label tombol yang membatalkan seluruh tugas dengan Batal. Menggunakan Batal memungkinkan kotak dialog digunakan dalam banyak konteks.

    Benar:

    screen shot of dialog box with save/don't save

    Dalam contoh ini, kotak dialog ini ditampilkan oleh Windows Paint sebagai hasil dari perintah Baru atau Keluar saat grafik belum disimpan. Jangan Simpan menutup dialog tanpa menyimpan, sedangkan Batal membatalkan perintah Baru atau Keluar.

    Salah:

    screen shot of dialog box with yes/no buttons

    Dalam contoh ini, tidak ada cara untuk membatalkan tugas (menutup Bilah Pintasan Office) yang menyebabkan menampilkan kotak dialog ini. Kotak dialog ini memerlukan tombol Batal.

  • Jika pengguna hanya perlu membatalkan dialog tetapi bukan tugas, gunakan tombol dengan respons negatif tertentu terhadap instruksi utama, dan tidak memiliki tombol Batal.

    screen shot of dialog box with run/don't run

    Dalam contoh ini, kotak dialog ini ditampilkan secara tidak langsung sebagai hasil menavigasi ke halaman Web yang menginstal kontrol ActiveX. Menggunakan Batal akan ambigu di sini, jadi Jangan jalankan digunakan sebagai gantinya.

Untuk informasi dan contoh selengkapnya, lihat Tombol Perintah.

  • Sajikan sekumpulan perintah panjang menggunakan tautan perintah, bukan tombol perintah atau kombinasi tombol radio dan tombol OK. Melakukannya memungkinkan pengguna merespons dengan satu klik. Namun, pendekatan ini hanya berfungsi untuk satu pertanyaan.
  • Sajikan tautan perintah yang paling umum digunakan terlebih dahulu. Urutan yang dihasilkan kira-kira harus mengikuti kemungkinan penggunaan, tetapi juga memiliki alur logis.
    • Pengecualian: Tautan perintah yang mengakibatkan melakukan semuanya harus ditempatkan terlebih dahulu.
  • Jika tautan perintah memerlukan penjelasan lebih lanjut, berikan penjelasan tambahan. Penjelasan tambahan menjelaskan mengapa pengguna mungkin ingin memilih perintah, atau apa yang terjadi jika perintah dipilih.
  • Jangan gunakan penjelasan tambahan yang merupakan pemulihan kata-kata dari tautan perintah. Gunakan penjelasan tambahan hanya ketika Anda tidak dapat membuat tautan perintah secara mandiri. Memberikan penjelasan tambahan untuk satu tautan perintah tidak berarti Bahwa Anda harus menyediakannya untuk semua perintah.

screen shot of dialog box with text noting options

Dalam contoh ini, penjelasan tambahan menjelaskan implikasi dari salah satu opsi.

  • Gunakan frasa yang dimulai dengan kata kerja, tanpa mengakhiri tanda baca.
  • Jika perintah sangat disarankan, pertimbangkan untuk menambahkan "(disarankan)" ke label. Pastikan untuk menambahkan ke label tautan, bukan penjelasan tambahan.
  • Jika perintah hanya ditujukan untuk pengguna tingkat lanjut, pertimbangkan untuk menambahkan "(tingkat lanjut)" ke label. Pastikan untuk menambahkan ke label tautan, bukan penjelasan tambahan.
  • Selalu sediakan tombol Batalkan eksplisit. Jangan gunakan tautan perintah untuk tujuan ini.

Salah:

screen shot of dialog box with don't exit link

Dalam contoh ini, kotak dialog menggunakan tautan perintah alih-alih tombol Batalkan.

Untuk informasi dan contoh selengkapnya, lihat Tautan Perintah.

Jangan perlihatkan item> ini <lagi

  • Pertimbangkan untuk menggunakan opsi Jangan perlihatkan item> ini <lagi untuk memungkinkan pengguna menekan kotak dialog berulang, hanya jika tidak ada alternatif yang lebih baik. Lebih baik selalu menunjukkan dialog jika pengguna benar-benar membutuhkannya, atau hanya menghilangkannya jika tidak.
  • Gunakan item> ganti <frasa khusus ini dengan item tertentu. Misalnya, Jangan tampilkan pengingat ini lagi. Saat merujuk ke kotak dialog secara umum, gunakan Jangan perlihatkan pesan ini lagi.
  • Tunjukkan dengan jelas kapan input pengguna akan digunakan untuk nilai default di masa mendatang dengan menambahkan kalimat berikut di bawah opsi: Pilihan Anda akan digunakan secara default di masa mendatang.
  • Jangan pilih opsi secara default. Jika kotak dialog benar-benar harus ditampilkan hanya sekali, lakukan tanpa bertanya. Jangan gunakan opsi ini sebagai alasan untuk mengganggu pengguna, pastikan perilaku default tidak mengganggu.

Salah:

screen shot of message asking unnecessary question

Dalam contoh ini, pesan hanya boleh ditampilkan sekali. Tidak perlu bertanya.

  • Buat pengaturan tetap berlanjut per pengguna.
  • Jika pengguna memilih opsi dan mengklik Batal, opsi ini berlaku. Pengaturan ini adalah opsi meta, sehingga tidak mengikuti perilaku Batalkan standar tanpa meninggalkan efek samping. Perhatikan bahwa jika pengguna tidak ingin melihat dialog di masa mendatang, kemungkinan besar mereka juga ingin membatalkannya.
  • Jika pengguna mungkin perlu memulihkan kotak dialog ini, berikan perintah Pulihkan pesan dalam kotak dialog Opsi program.

Tanyakan saya nanti

  • Berikan opsi ini untuk menutup kotak dialog hanya saat:
    • Kotak dialog tidak langsung, sehingga pengguna kemungkinan akan difokuskan pada tugas lain.
    • Pengguna harus merespons tetapi tidak segera, sehingga mereka dapat melanjutkan pekerjaan mereka.
    • Pertanyaan tersebut memerlukan pemikiran atau upaya yang memadai sehingga pengguna dapat membuat keputusan yang lebih baik jika diberikan lebih banyak waktu.
    • Kotak dialog atau opsi akan disajikan secara otomatis nanti (sehingga pengguna benar-benar diminta nanti).
  • Salah:
  • screen shot of message with ask me later option
  • Dalam contoh ini, pertanyaannya cukup sederhana sehingga menambahkan opsi Tanyakan saya nanti hanya mempersulitnya.
  • Jika tidak, harapkan pengguna merespons sekarang, tetapi izinkan mereka untuk menutup kotak dialog secara normal dengan Batalkan atau Tutup. Ketika digunakan dengan benar, opsi ini harus jarang terjadi.

Lebih Banyak/Lebih Sedikit

  • Gunakan lebih banyak/Lebih sedikit tombol pengungkapan progresif untuk menampilkan atau menyembunyikan opsi, perintah, atau detail tingkat lanjut atau jarang digunakan yang biasanya tidak diperlukan pengguna target. Melakukannya menyederhanakan kotak dialog untuk penggunaan umum. Jangan sembunyikan opsi, perintah, atau informasi yang umum digunakan karena pengguna mungkin tidak menemukannya.

screen shot of dialog box with more options button

Dalam contoh ini, opsi yang jarang digunakan disembunyikan secara default.

  • Jangan gunakan kontrol Lebih/Lebih Sedikit kecuali benar-benar ada detail lebih lanjut untuk ditampilkan. Jangan hanya mengembalikan informasi yang sama dalam format yang berbeda.
  • Jangan gunakan kontrol Lainnya/Lebih Sedikit untuk menampilkan Bantuan. Gunakan tautan Bantuan atau catatan kaki sebagai gantinya.
  • Dengan dialog tugas, hindari menggabungkan kontrol Lebih Banyak/Lebih Sedikit dengan Jangan perlihatkan item> ini <lagi. Kombinasi ini memiliki penampilan yang canggung.
  • Untuk panduan pelabelan, lihat Pengungkapan Progresif.

Catatan kaki

  • Gunakan catatan kaki untuk informasi yang tidak penting untuk tujuan kotak dialog, tetapi pengguna mungkin merasa berguna dalam membuat keputusan. Sebagian besar pengguna harus dapat melewati catatan kaki dan masih membuat keputusan berdasarkan informasi dalam respons mereka terhadap kotak dialog.

screen shot of dialog box with clarifying footnote

Dalam contoh ini, informasi catatan kaki bersifat tambahan, tidak penting.

Menonaktifkan atau menghapus kontrol vs. memberikan pesan kesalahan

  • Saat kontrol tidak berlaku dalam konteks saat ini, pertimbangkan opsi berikut:
    • Hapus kontrol ketika tidak ada cara bagi pengguna untuk mengaktifkannya, atau pengguna tidak mengharapkannya diterapkan dan statusnya tidak sering berubah. Melakukannya menyederhanakan kotak dialog, dan pengguna tidak akan melewatkannya. Memiliki kontrol muncul dan sering menghilang sangat mengganggu.
    • Nonaktifkan kontrol saat pengguna mengharapkannya untuk diterapkan atau statusnya sering berubah, dan pengguna dapat dengan mudah menyimpulkan mengapa kontrol dinonaktifkan. Contoh pengurangan yang mudah adalah menonaktifkan tombol penerapan ketika ada satu kotak teks kosong yang memerlukan input apa pun. Anda dapat menggunakan balon untuk menampilkan masalah input pengguna yang tidak penting dengan kotak teks dan daftar drop-down yang dapat diedit. Namun, jika masalah tidak dapat dijelaskan dengan balon atau melibatkan beberapa kontrol, pengurangan tidak akan mudah lagi.
    • Jika tidak, biarkan kontrol diaktifkan, tetapi berikan pesan kesalahan saat digunakan dengan tidak benar. Menonaktifkan dalam hal ini akan menyulitkan pengguna untuk memahami mengapa kontrol dinonaktifkan. Pengguna akan dipaksa untuk menentukan masalah melalui eksperimen dan logika deduktif. Lebih baik hanya memberikan pesan kesalahan yang bermanfaat untuk menjelaskan masalah secara eksplisit.
  • Tips: Jika Anda tidak yakin apakah Anda harus menonaktifkan kontrol atau memberikan pesan kesalahan, mulailah dengan membuat pesan kesalahan yang mungkin Anda berikan. Jika pesan kesalahan berisi informasi bermanfaat yang kemungkinan tidak disimpulkan pengguna target dengan cepat, biarkan kontrol diaktifkan dan berikan kesalahan. Jika tidak, nonaktifkan kontrol.
  • Jika Anda menonaktifkan kontrol, nonaktifkan juga semua kontrol terkait, seperti labelnya, penjelasan tambahan, atau tombol perintah. Namun, jangan nonaktifkan kotak grup, label grup, atau penjelasan grupnya jika ada.

screen shot of dialog box with dimmed controls

Dalam contoh ini, label kotak teks yang dinonaktifkan juga dinonaktifkan, tetapi label grup dan penjelasan grupnya tidak.

Input yang diperlukan

  • Untuk menunjukkan bahwa pengguna harus memberikan informasi dalam kontrol, pertimbangkan opsi berikut:

    • Jangan menunjukkan apa pun, tetapi tangani input yang diperlukan yang hilang dengan pesan kesalahan. Pendekatan ini mengurangi kekacauan dan berfungsi dengan baik jika sebagian besar input bersifat opsional atau pengguna tidak mungkin melewati kontrol, sehingga menjaga jumlah pesan kesalahan tetap rendah.

    • Menunjukkan input yang diperlukan menggunakan tanda bintang di awal label. Jelaskan tanda bintang menggunakan:

      • Catatan kaki di bagian bawah area konten yang bertuliskan * Input yang diperlukan.
      • Tipsalat pada tanda bintang yang bertuliskan Input yang diperlukan.

      Pendekatan ini berfungsi dengan baik jika tidak ada banyak kontrol yang diperlukan, tetapi buruk jika sebagian besar kontrol diperlukan.

      screen shot of text box labels with asterisks

      Dalam contoh ini, tanda bintang digunakan untuk menunjukkan input yang diperlukan.

    • Jika semua kontrol memerlukan input, status "Semua input diperlukan" di tempat yang sesuai di bagian atas area konten. Pendekatan ini mengurangi kekacauan untuk kasus tertentu ini.

    • Tunjukkan input opsional dengan "(opsional)" setelah label. Pendekatan ini berfungsi dengan baik jika sebagian besar input diperlukan, tetapi sebaliknya buruk.

  • Untuk konsistensi, coba gunakan metode yang sama untuk menunjukkan input yang diperlukan di seluruh program Anda. Secara khusus, tunjukkan input yang diperlukan atau opsional sesuai kebutuhan, tetapi hindari menggunakan keduanya dalam program yang sama.

Penanganan kesalahan

  • Cegah kesalahan dengan menggunakan kontrol yang dibatasi untuk input pengguna yang valid. Anda juga dapat membantu mengurangi jumlah kesalahan dengan memberikan nilai default yang wajar.

  • Validasi input pengguna sesegera mungkin, dan tampilkan kesalahan sedekat mungkin dengan titik input.

  • Gunakan penanganan kesalahan tanpa mode (kesalahan atau balon di tempat) untuk masalah input pengguna.

    • Gunakan balon untuk masalah input pengguna titik tunggal yang tidak penting yang terdeteksi saat berada di kotak teks atau segera setelah kotak teks kehilangan fokus. Balon tidak memerlukan ruang layar yang tersedia atau tata letak dinamis yang diperlukan untuk menampilkan pesan di tempat. Hanya menampilkan satu balon pada satu waktu. Karena masalahnya tidak penting, tidak ada ikon kesalahan yang diperlukan. Balon hilang saat diklik, ketika masalah diselesaikan, atau setelah batas waktu.

      screen shot of 'incorrect character' message

      Dalam contoh ini, balon menunjukkan masalah input saat masih dalam kontrol.

  • Gunakan kesalahan di tempat untuk deteksi kesalahan tertunda, biasanya kesalahan yang ditemukan dengan mengklik tombol penerapan. (Jangan gunakan kesalahan di tempat untuk pengaturan yang segera diterapkan.) Mungkin ada beberapa kesalahan di tempat pada satu waktu. Gunakan teks normal dan ikon kesalahan piksel 16x16, menempatkannya langsung di samping masalah jika memungkinkan. Kesalahan di tempat tidak hilang kecuali pengguna melakukan dan tidak ada kesalahan lain yang ditemukan.

    screen shot of dialog box with two error messages

    Dalam contoh ini, kesalahan di tempat digunakan untuk kesalahan yang ditemukan dengan mengklik tombol penerapan.

  • Gunakan penanganan kesalahan modal (dialog tugas atau kotak pesan) untuk semua masalah lainnya, termasuk kesalahan yang melibatkan beberapa kontrol, atau kesalahan non-kontekstual atau non-input yang ditemukan dengan mengklik tombol penerapan.

  • Ketika masalah input ditemukan dan dilaporkan, atur fokus input ke kontrol pertama dengan data yang salah. Gulir kontrol ke tampilan jika perlu.

Untuk informasi dan contoh selengkapnya, lihat Pesan Kesalahan dan Balon.

Bantuan

  • Saat memberikan bantuan pengguna, pertimbangkan opsi berikut (tercantum dalam urutan preferensi mereka):

    • Berikan label penjelasan mandiri kontrol interaktif. Pengguna lebih cenderung membaca label pada kontrol interaktif daripada teks lainnya.
    • Berikan penjelasan dalam konteks menggunakan label teks statis.
    • Berikan tautan Bantuan tertentu ke topik Bantuan yang relevan.
  • Temukan tautan Bantuan di bagian bawah area konten kotak dialog. Jika kotak dialog memiliki catatan kaki dan tautan Bantuan terkait dengannya, letakkan tautan Bantuan di dalam catatan kaki.

    screen shot of dialog box with help link

    Dalam contoh ini, tautan Bantuan berlaku untuk seluruh dialog.

    • Pengecualian: Jika kotak dialog memiliki beberapa grup pengaturan berbeda yang memiliki topik Bantuan terpisah (mungkin dalam kotak grup), temukan tautan Bantuan di bagian bawah grup.
  • Jangan gunakan tautan topik Bantuan umum atau samar atau tombol Bantuan umum. Pengguna sering mengabaikan Bantuan generik.

Untuk informasi dan contoh selengkapnya, lihat Bantuan.

Nilai default

  • Sertakan tombol penerapan default pada setiap kotak dialog.
  • Untuk dialog pertanyaan:
    • Pilih yang paling aman (untuk mencegah hilangnya data atau akses sistem), respons yang paling aman menjadi default. Jika keamanan dan keselamatan bukan faktor, pilih respons yang paling mungkin atau nyaman.
      • Pengecualian: Jangan membuat respons yang merusak sebagai default kecuali ada cara yang mudah dan jelas untuk membatalkan perintah.
  • Untuk dialog pilihan:
    • Untuk nilai default awal, pilih yang paling aman (untuk mencegah hilangnya data atau akses sistem) dan nilai paling aman untuk setiap kontrol. Jika keamanan dan keselamatan bukan faktor, pilih opsi yang paling mungkin atau nyaman.
    • Untuk nilai default berikutnya, pilih kembali opsi yang dipilih sebelumnya jika nilai tersebut kemungkinan akan diulang, dan melakukannya aman dan aman. Jika tidak, pilih nilai default awal.

screen shot of print dialog box

Dalam contoh ini, pengguna kemungkinan besar memilih pengaturan pencetakan yang sama seperti yang mereka lakukan terakhir kali. Namun, jumlah salinan yang diinginkan kemungkinan akan berubah, sehingga pengaturan ini tidak dipilih kembali.

  • Mendukung resolusi layar Windows Vista minimum 800 x 600 piksel. Tata letak dapat dioptimalkan untuk jendela yang dapat diubah ukurannya menggunakan resolusi layar 1024 x 768 piksel.
  • Gunakan jendela yang dapat diubah ukurannya kapan pun praktis untuk menghindari bilah gulir dan data terpotong. Windows dengan isi dinamis dan daftar mendapatkan manfaat paling besar dari jendela yang dapat diubah ukurannya.
  • Jendela berukuran tetap harus sepenuhnya terlihat dan berukuran agar pas di dalam area kerja.
  • Jendela yang dapat diubah ukurannya dapat dioptimalkan untuk resolusi yang lebih tinggi, tetapi menurunkan ukuran sesuai kebutuhan pada waktu tampilan ke resolusi layar aktual.
  • Pilih ukuran jendela default yang sesuai untuk isinya. Jangan takut untuk menggunakan ukuran jendela awal yang lebih besar jika Anda dapat menggunakan ruang secara efektif.

Teks

Umum

  • Hapus teks redundan. Cari teks redundan dalam judul, instruksi utama, instruksi tambahan, area konten, tautan perintah, dan tombol penerapan. Umumnya, biarkan teks lengkap dalam instruksi dan kontrol interaktif, dan hapus redundansi apa pun dari tempat lain.
  • Gunakan pembuatan frasa positif. Pembuatan frasa positif lebih mudah dipahami pengguna.

Benar:

Anda ingin memfungsikan berbagi berkas dan pencetak?

Salah:

Ingin menon-fungsikan berbagi berkas dan pencetak?

Namun, pembuatan frasa harus cocok dengan perintah terkait, bahkan jika perintah diungkapkan secara negatif; jadi, misalnya, gunakan nonaktifkan untuk mengonfirmasi perintah Nonaktifkan.

  • Jika perlu, gunakan kata "jendela" untuk merujuk ke kotak dialog itu sendiri.
  • Gunakan orang kedua ("Anda/Anda") untuk memberi tahu pengguna apa yang harus dilakukan di area instruksi dan konten utama. Seringkali orang kedua tersirat.

Contoh:

Pilih gambar yang ingin Anda cetak

Pilih akun

  • Gunakan orang pertama ("I/me/my") untuk memungkinkan pengguna memberi tahu program apa yang harus dilakukan dalam kontrol di area konten yang menanggapi instruksi utama.

Contoh: Cetak foto di kamera saya.

Judul kotak dialog

  • Gunakan judul untuk mengidentifikasi perintah, fitur, atau program tempat kotak dialog berasal.
    • Jika dialog dimulai oleh pengguna, identifikasi menggunakan perintah atau nama fitur. Pengecualian:
      • Jika kotak dialog ditampilkan oleh banyak perintah berbeda, pertimbangkan untuk menggunakan nama program sebagai gantinya.
      • Jika judul tersebut akan berlebihan dengan instruksi utama, gunakan nama program sebagai gantinya.
    • Jika program atau sistem dimulai (dan karena itu di luar konteks), identifikasi menggunakan program atau nama fitur untuk memberikan konteks.
    • Jangan gunakan judul untuk menjelaskan apa yang harus dilakukan dalam dialog yang menjadi tujuan instruksi utama.
  • Gunakan nama perintah yang tepat untuk nama berbasis perintah, tetapi jangan sertakan elipsis jika ada. Anda dapat menyertakan judul menu perintah jika perlu untuk membuat judul yang bagus. Contoh: untuk Objek... perintah di menu Sisipkan, gunakan judul Sisipkan Objek.
  • Jika kotak dialog tanpa mode muncul di taskbar, optimalkan judul untuk ditampilkan di taskbar dengan secara ringkas menempatkan informasi pembeda terlebih dahulu. Contoh: "66% Selesai," dan "3 Pengingat."
  • Jangan sertakan kata "dialog" atau "kemajuan" dalam judul. Ini tersirat, dan membiarkannya menjadi lebih mudah bagi pengguna untuk memindai.
  • Gunakan kapitalisasi gaya judul, tanpa tanda baca akhir.

Instruksi utama

  • Gunakan instruksi utama untuk menjelaskan dengan ringkas apa yang harus dilakukan dalam dialog. Instruksi harus berupa pernyataan tertentu, arah imperatif, atau pertanyaan. Instruksi yang baik mengkomunikasikan tujuan pengguna dengan dialog daripada berfokus murni pada mekanisme memanipulasinya.
  • Hilangkan instruksi utama ketika satu-satunya hal yang dapat Anda katakan adalah jelas. Dalam kasus seperti itu, konten kotak dialog adalah penjelasan mandiri. Misalnya, dialog umum Buka File dan Simpan File tidak memerlukan instruksi utama karena konteks dan desainnya membuat tujuannya jelas.
  • Hilangkan label kontrol yang mengembalikan instruksi utama. Dalam hal ini, instruksi utama mengambil kunci akses.

Diterima:

screen shot of text box with redundant label

Dalam contoh ini, label kotak teks hanyalah pemulihan dari instruksi utama.

Lebih:

screen shot of same text box with one label

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

  • Ringkas gunakan hanya satu kalimat lengkap. Pare instruksi utama ke informasi penting. Jika Anda harus menjelaskan sesuatu lebih lanjut, gunakan instruksi tambahan.
  • Gunakan kata kerja tertentu jika memungkinkan. Kata kerja tertentu (contoh: menyambungkan, menyimpan, menginstal) lebih bermakna bagi pengguna daripada yang umum (contoh: mengonfigurasi, mengelola, mengatur).
  • Gunakan kapitalisasi gaya kalimat.
  • Jangan sertakan periode akhir jika instruksi adalah pernyataan. Jika instruksi adalah pertanyaan, sertakan tanda tanya akhir.
  • Untuk dialog kemajuan, gunakan frasa gerund yang menjelaskan operasi yang sedang berlangsung secara singkat, diakhir dengan elipsis. Contoh: Mencetak gambar Anda...
  • Tips: Anda dapat mengevaluasi instruksi utama dengan membayangkan apa yang akan Anda katakan kepada teman. Jika merespons dengan instruksi utama akan menjadi tidak wajar, tidak membantu, atau canggung, lakukan ulang instruksi.

Instruksi tambahan

  • Jika perlu, gunakan instruksi tambahan opsional untuk menyajikan informasi tambahan yang berguna untuk memahami atau menggunakan halaman. Anda dapat memberikan informasi yang lebih rinci dan menentukan terminologi.
  • Jika tampilan kotak dialog adalah program atau sistem yang dimulai (dan oleh karena itu di luar konteks), gunakan instruksi tambahan untuk menjelaskan mengapa dialog telah muncul. Untuk dialog tersebut, konteksnya biasanya tidak jelas.
  • Jangan ulangi instruksi utama dengan kata-kata yang sedikit berbeda. Sebagai gantinya, hilangkan instruksi tambahan jika tidak ada lagi yang ditambahkan.
  • Gunakan kalimat lengkap, kapitalisasi gaya kalimat, dan tanda baca akhir.
  • Pilih teks tautan ringkas yang berkomunikasi dengan jelas dan membedakan apa yang dilakukan tautan perintah. Ini harus jelas sendiri dan sesuai dengan instruksi utama. Pengguna tidak perlu mencari tahu apa arti tautan sebenarnya atau perbedaannya dengan tautan lain.
  • Selalu mulai tautan perintah dengan kata kerja.
  • Gunakan kapitalisasi gaya kalimat.
  • Jangan gunakan tanda baca akhir.
  • Jika perlu, berikan penjelasan lebih lanjut menggunakan kalimat lengkap dan tanda baca akhir. Namun, tambahkan penjelasan tersebut hanya jika diperlukan tidak menambahkan penjelasan ke semua tautan perintah hanya karena satu tautan perintah membutuhkannya.

Untuk informasi dan contoh selengkapnya, lihat Panduan Command Link .

Tombol Terapkan

  • Gunakan label tombol penerapan tertentu yang masuk akal sendiri dan merupakan respons terhadap instruksi utama. Idealnya pengguna tidak perlu membaca hal lain untuk memahami label. Pengguna jauh lebih mungkin membaca label tombol perintah daripada teks statis.
  • Mulai terapkan label tombol dengan kata kerja. Pengecualian baik-baik saja, Ya, dan Tidak.
  • Gunakan kapitalisasi gaya kalimat.
  • Jangan gunakan tanda baca akhir.
  • Tetapkan kunci akses unik.
    • Pengecualian: Jangan tetapkan kunci akses ke tombol OK dan Batalkan karena Enter dan Esc adalah kunci aksesnya. Melakukannya membuat kunci akses lainnya lebih mudah ditetapkan.

Dokumentasi

Saat merujuk ke kotak dialog:

  • Dalam pemrograman dan dokumentasi teknis lainnya, lihat kotak dialog sebagai kotak dialog. Di tempat lain, lihat kotak dialog berdasarkan judulnya. Jika bilah judul disembunyikan, lihat dialog menggunakan instruksi utama.
  • Jika Anda harus merujuk ke kotak dialog secara umum, gunakan jendela dalam dokumentasi pengguna. Anda dapat merujuk ke dialog pertanyaan sederhana atau konfirmasi sebagai pesan.
  • Gunakan judul atau teks instruksi utama yang tepat, termasuk kapitalisasinya.
  • Jika memungkinkan, format judul menggunakan teks tebal. Jika tidak, letakkan judul dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.

Contoh: Di Keamanan Windows, klik Opsi Lainnya.