Bagikan melalui


Balon

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.

Balon adalah jendela pop-up kecil yang memberi tahu pengguna tentang masalah non-kritis atau kondisi khusus dalam kontrol.

Cuplikan layar yang memperlihatkan balon yang menunjukkan bahwa Caps Lock aktif.

Balon biasa.

Balon memiliki ikon, judul, dan teks isi, yang semuanya bersifat opsional. Tidak seperti tipsalat dan infotip, balon juga memiliki ekor yang mengidentifikasi sumbernya. Biasanya sumber adalah kontrol jika demikian, itu disebut sebagai kontrol pemilik.

Meskipun balon memberi tahu pengguna tentang masalah non-kritis, mereka tidak mencegah masalah meskipun kontrol pemilik mungkin. Setiap masalah yang tidak tertangani harus ditangani oleh antarmuka pengguna pemilik (UI) ketika pengguna mencoba berkomitmen pada tindakan.

Balon biasanya digunakan dengan kotak teks, atau kontrol yang menggunakan kotak teks untuk mengubah nilai, seperti kotak kombo, tampilan daftar, dan tampilan pohon. Jenis kontrol lain cukup terkendala dengan baik, dan tidak memerlukan balon umpan balik tambahan. Selain itu, jika ada masalah dengan jenis kontrol lain, sering kali melibatkan ketidakkonsistensian antara beberapa kontrol situasi yang balonnya tidak cocok. Hanya kontrol entri teks yang tidak dibatasi dan sumber umum kesalahan titik tunggal.

Pemberitahuan adalah jenis balon tertentu yang ditampilkan oleh ikon area pemberitahuan.

Catatan: Panduan yang terkait dengan pemberitahuan, tipsalat, dan infotip, dan pesan kesalahan disajikan dalam artikel terpisah.

Apakah ini kontrol yang tepat?

Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:

  • Apakah informasi tersebut menjelaskan masalah atau kondisi khusus? Jika tidak, gunakan kontrol lain. Jangan gunakan balon untuk menampilkan informasi tambahan untuk kontrol; pertimbangkan untuk menggunakan teks statis, infotip, pengungkapan progresif, atau perintah sebagai gantinya.
  • Dapatkah masalah atau kondisi khusus segera terdeteksi baik pada input atau ketika kontrol pemilik kehilangan fokus input? Jika tidak, gunakan pesan kesalahan yang ditampilkan dalam dialog tugas atau kotak pesan.
  • Untuk masalah, apakah masalahnya kritis? Jika demikian, gunakan pesan kesalahan yang ditampilkan dalam dialog tugas atau kotak pesan. Pesan kesalahan tersebut memerlukan interaksi (yang cocok untuk kesalahan penting), sedangkan balon tidak.
  • Untuk kondisi khusus, apakah kondisi tersebut valid namun kemungkinan tidak diinginkan? Jika demikian, balon sesuai. Untuk kondisi yang tidak valid, lebih baik mencegahnya dari awal. Untuk kondisi yang mungkin dimaksudkan, tidak perlu melakukan apa pun.
  • Dapatkah masalah atau kondisi khusus diekspresikan secara ringkas? Jika tidak, gunakan kontrol lain. Balon tidak dapat memiliki penjelasan terperinci atau memberikan informasi tambahan.
  • Apakah informasi menjelaskan kontrol yang saat ini sedang diarahkan ke atas? Jika demikian, gunakan tip sebagai gantinya, kecuali pengguna mungkin perlu berinteraksi dengan pesan.
  • Apakah informasi terkait dengan aktivitas pengguna saat ini? Jika tidak, pertimbangkan untuk menggunakan pemberitahuan atau kotak dialog sebagai gantinya. Pengguna cenderung mengabaikan balon di luar aktivitas saat ini, dan, secara default, balon kehabisan waktu setelah 10 detik.
  • Apakah informasi berasal dari satu sumber tertentu? Jika masalah atau kondisi memiliki beberapa sumber atau tidak ada sumber tertentu, gunakan pesan di tempat atau kotak dialog sebagai gantinya.

Salah: cuplikan layar balon: masuk tidak berhasil

Dalam contoh ini, masalahnya bisa dengan nama pengguna atau kata sandi, tetapi melaporkan masalah dengan balon secara visual menunjukkan bahwa hanya kata sandi yang menjadi masalah. Akibatnya, umpan balik dari memasukkan nama pengguna yang salah menyesatkan.

Balon adalah alternatif untuk infotip, kotak dialog, dan pesan di tempat. Berbeda dengan tipsalat dan infotip:

  • Balon dapat ditampilkan secara independen dari lokasi penunjuk saat ini, sehingga mereka memiliki ekor yang menunjukkan sumbernya.
  • Balon memiliki judul, teks isi, dan ikon.
  • Balon bisa interaktif, sedangkan tidak mungkin untuk mengklik tip.

Berbeda dengan kotak dialog modal:

  • Balon tidak mencuri fokus input atau memerlukan interaksi.
  • Balon mengidentifikasi satu sumber tertentu. Dialog modal dapat memiliki beberapa sumber, atau tidak ada sumber tertentu sama sekali.

Berbeda dengan pesan di tempat:

  • Balon lebih terlihat.
  • Balon tidak memerlukan ruang layar yang tersedia atau tata letak dinamis yang diperlukan untuk menampilkan pesan di tempat.
  • Balon menghapus dirinya secara otomatis setelah batas waktu.

Pola penggunaan

Balon memiliki pola penggunaan ini:

Penggunaan Contoh
Masalah input Masalah input pengguna non-kritis yang berasal dari kontrol pemilik tunggal, biasanya kotak teks.
menggunakan balon untuk pesan kesalahan tidak mencuri fokus input, namun masih sangat terlihat jika kontrol pemilik memiliki fokus input. untuk memperbaiki masalah, pengguna mungkin harus mengubah atau memasukkan kembali input; tetapi jika kontrol pemilik mengabaikan input yang salah, pengguna mungkin tidak perlu membuat perubahan sama sekali. karena masalahnya tidak penting, tidak ada ikon kesalahan yang diperlukan.
Cuplikan layar yang memperlihatkan balon yang menunjukkan karakter yang salah.
Balon yang digunakan untuk melaporkan masalah input pengguna yang tidak penting.
Kondisi khusus Kontrol pemilik dalam keadaan yang memengaruhi input. Status ini kemungkinan tidak diinginkan dan pengguna mungkin tidak menyadari input terpengaruh.
gunakan balon untuk mencegah frustrasi dengan memperingatkan pengguna tentang kondisi khusus segera setelah terjadi (misalnya, melebihi ukuran input maksimum atau mengatur kunci batas secara tidak sengaja). penting untuk memberikan umpan balik tersebut tanpa mencuri fokus input atau memaksa interaksi karena kondisi ini mungkin disengaja. balon ini sangat penting untuk kata sandi dan kotak pin, di mana pengguna bekerja dengan umpan balik minimal. balon ini memiliki ikon peringatan.
Cuplikan layar yang memperlihatkan balon yang menunjukkan Caps Lock aktif dan karakter yang salah dimasukkan.
Balon digunakan untuk melaporkan kondisi khusus.

Panduan

Kapan harus ditampilkan

  • Tampilkan balon segera setelah masalah atau kondisi khusus terdeteksi, bahkan jika berulang kali, tanpa penundaan yang terlihat.
    • Untuk masalah yang melibatkan karakter individual atau ukuran input maksimum, segera tampilkan balon pada input.
    • Untuk masalah yang melibatkan nilai input (termasuk memerlukan nilai tidak kosong), tampilkan balon saat kontrol pemilik kehilangan fokus input. Jika tidak, menampilkan balon saat pengguna memasukkan input yang berpotensi valid dapat mengganggu dan mengganggu.
  • Hanya menampilkan satu balon pada satu waktu. Menampilkan beberapa balon bisa luar biasa. Jika satu peristiwa menghasilkan beberapa masalah, sajikan semua masalah sekaligus atau laporkan hanya masalah yang paling penting.

Salah: cuplikan layar dua balon yang menunjuk ke satu kotak

Dalam contoh ini, dua masalah salah disajikan pada saat yang sama.

Berapa lama untuk ditampilkan

  • Hapus balon saat:
    • Masalah diselesaikan atau kondisi khusus dihapus.
    • Pengguna memasukkan data yang valid (untuk masalah input).
    • Balon waktu habis. Secara default balon menghapus diri mereka sendiri setelah 10 detik, meskipun pengguna dapat mengubah ini dengan memodifikasi parameter sistem SPI_MESSAGEDURATION.
  • Hapus batas waktu jika pengguna tidak dapat melanjutkan hingga masalah diselesaikan. Pengembang: Di Win32, Anda dapat mengatur waktu tampilan dengan pesan TTM_SETDELAYTIME.

Cara menampilkan

  • Tampilkan balon di bawah kontrol pemiliknya. Melakukannya memungkinkan pengguna untuk melihat konteks, termasuk kontrol pemilik dan labelnya. Microsoft Windows secara otomatis menyesuaikan posisi balon sehingga benar-benar di layar. Perilaku defaultnya adalah menampilkan balon di atas kontrol pemiliknya, seperti yang dilakukan dengan pemberitahuan.

Benar: cuplikan layar balon ditampilkan di bawah kontrolnya

Salah: cuplikan layar balon yang ditampilkan di atas kontrolnya

Dalam contoh yang salah, balon ditampilkan dengan canggung di atas kontrol pemiliknya.

Kotak teks Kata Sandi dan PIN

  • Gunakan balon untuk menunjukkan bahwa Caps Lock aktif, menggunakan teks dalam contoh berikut:

cuplikan layar balon yang menunjukkan kunci tutup menyala

Dalam contoh ini, balon menunjukkan bahwa Caps Lock aktif dalam kotak teks PIN.

  • Gunakan balon untuk menunjukkan kapan pengguna mencoba melebihi ukuran input maksimum. Mencapai ukuran input maksimum jauh kurang jelas dalam kotak teks kata sandi dan PIN daripada kotak teks biasa.

cuplikan layar balon yang menunjukkan batas kode pin

Dalam contoh ini, balon menunjukkan bahwa pengguna mencoba melebihi ukuran input maksimum.

  • Gunakan balon untuk menunjukkan kapan pengguna memasukkan karakter yang salah. Namun, lebih baik tidak memiliki batasan tersebut karena mengurangi keamanan kata sandi atau PIN. Untuk mencegah pengungkapan informasi, balon hanya boleh menyebutkan fakta yang didokumenkan tentang kata sandi atau VPN yang valid.

cuplikan layar balon yang menunjukkan input yang salah

Dalam contoh ini, balon menunjukkan bahwa PIN memerlukan angka.

Kotak teks lainnya

  • Pertimbangkan untuk menggunakan balon untuk menunjukkan kapan pengguna mencoba melebihi ukuran input maksimum untuk kotak teks penting dan pendek yang ditujukan untuk pengguna pemula. Contohnya termasuk nama pengguna dan nama akun. Kotak teks berbunyi bip saat pengguna mencoba melebihi input maksimum, tetapi pengguna pemula mungkin tidak memahami arti bip.

cuplikan layar balon yang menunjukkan batas karakter

Dalam contoh ini, balon menunjukkan bahwa pengguna mencoba melebihi ukuran input maksimum.

Interaksi

  • Ketika pengguna mengklik balon, cukup tutup balon tanpa menampilkan UI lain atau memiliki efek samping lainnya. Tidak seperti pemberitahuan, balon seharusnya tidak memiliki tombol tutup.

Ikon

  • Pilih ikon berdasarkan pola penggunaan:

    Pola Ikon
    Masalah input Tidak ada ikon. Tidak menggunakan ikon kesalahan di sini konsisten dengan panduan nada Windows.
    Kondisi khusus Ikon peringatan piksel 16x16 standar.

Aksesibilitas

Saat digunakan dengan benar, balon meningkatkan aksesibilitas. Agar balon dapat diakses:

  • Hanya menampilkan balon yang terkait dengan aktivitas pengguna saat ini.
  • Pertahankan teks balon ringkas. Melakukannya membuat teks balon lebih mudah dibaca untuk pengguna dengan penglihatan rendah, dan meminimalkan gangguan saat dibaca oleh pembaca layar.
  • Putar ulang balon setiap kali masalah atau kondisi berulang.

Teks

Teks judul

  • Gunakan teks judul yang secara singkat meringkas masalah input atau kondisi khusus dalam bahasa yang jelas, polos, ringkas, spesifik. Pengguna harus dapat memahami tujuan balon dengan cepat dan dengan upaya minimal.
  • Gunakan fragmen teks atau kalimat lengkap tanpa tanda baca akhir.
  • Gunakan kapitalisasi gaya kalimat. Untuk informasi selengkapnya, lihat glosarium.
  • Gunakan tidak lebih dari 48 karakter (dalam bahasa Inggris) untuk mengakomodasi pelokalan. Judul memiliki panjang maksimum 63 karakter dan harus dapat diperluas setidaknya 30 persen untuk mengakomodasi pelokalan.

Teks isi

  • Gunakan kalimat pertama teks isi untuk menyatakan masalah atau kondisi dengan cara yang jelas relevan dengan pengguna. Jangan ulangi informasi dalam judul. Hilangkan ini jika tidak ada lagi yang perlu ditambahkan.
  • Gunakan kalimat kedua untuk menyatakan apa yang dapat dilakukan pengguna untuk mengatasi masalah atau mengembalikan status. Sesuai dengan pedoman Gaya dan Nada , tidak perlu menggunakan kata Silakan dalam pernyataan ini. Letakkan dua pemisah baris di antara kalimat pertama dan kedua.

cuplikan layar balon dengan judul dan teks isi

Contoh ini menunjukkan tata letak teks balon standar.

  • Jelaskan cara mengatasi masalah atau mengembalikan status bahkan jika penjelasan itu jelas, tetapi hilangkan redundansi antara pernyataan masalah dan resolusinya. Pengecualian:
    • Hilangkan resolusi jika tidak dapat diekspresikan secara ringkas atau tanpa redundansi yang signifikan.
    • Hilangkan resolusi jika tidak ada yang dapat dilakukan pengguna, seperti ketika karakter yang salah diabaikan.
  • Gunakan kalimat lengkap dengan tanda baca akhir.
  • Gunakan kapitalisasi gaya kalimat.
  • Gunakan tidak lebih dari 200 karakter (dalam bahasa Inggris) untuk mengakomodasi pelokalan. Teks isi memiliki panjang maksimum 255 karakter dan harus dapat memperluas setidaknya 30 persen untuk mengakomodasi pelokalan.

Dokumentasi

Jika mengacu pada balon:

  • Gunakan teks judul yang tepat, termasuk kapitalisasinya.
  • Lihat komponen sebagai balon, bukan sebagai pemberitahuan atau pemberitahuan.
  • Jika memungkinkan, format teks judul menggunakan teks tebal. Jika tidak, letakkan judul dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.