Bagikan melalui


Ikon Standar

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.

Ikon standar adalah ikon kesalahan, peringatan, informasi, dan tanda tanya yang merupakan bagian dari Windows.

cuplikan layar empat ikon standar

Ikon kesalahan standar, peringatan, informasi, dan tanda tanya.

Ikon standar memiliki arti ini:

  • Ikon kesalahan. Antarmuka pengguna (UI) menyajikan kesalahan atau masalah yang telah terjadi.
  • Ikon peringatan. UI menyajikan kondisi yang dapat menyebabkan masalah di masa mendatang.
  • Ikon informasi. UI menyajikan informasi yang berguna.
  • Ikon tanda tanya. UI menunjukkan titik entri Bantuan.

Ikon standar terkenal karena dibangun ke dalam banyak antarmuka pemrograman aplikasi (API) Windows, seperti dialog tugas, kotak pesan, balon, dan pemberitahuan. Mereka juga umumnya digunakan pada pesan di tempat dan bilah status.

Catatan: Panduan yang terkait dengan ikon disajikan dalam artikel terpisah.

Konsep desain

Ada beberapa faktor dalam memilih ikon standar yang sesuai yang sebagian menjelaskan mengapa mereka sering digunakan dengan tidak benar. Kesalahan yang paling umum adalah:

  • Menggunakan ikon peringatan untuk kesalahan kecil. Peringatan tidak kesalahan "dilembutkan".
  • Menggunakan ikon standar ketika lebih baik tidak menggunakan ikon apa pun. Tidak setiap pesan membutuhkan ikon.
  • Mengkhawatirkan pengguna dengan memberikan peringatan untuk masalah kecil atau menyajikan pertanyaan rutin sebagai peringatan. Melakukannya membuat program tampak rentan terhadap bahaya, dan mengurangi masalah yang benar-benar signifikan.

Sisa bagian ini menjelaskan cara memikirkan ikon standar untuk menghindari kesalahan umum ini.

Jenis pesan vs. tingkat keparahan

Pilih ikon standar berdasarkan jenis pesan, bukan tingkat keparahan masalah yang mendasar. Jenis pesannya adalah:

  • Kesalahan. Terjadi kesalahan atau masalah.
  • Peringatan. Kondisi yang dapat menyebabkan masalah di masa mendatang.
  • Informasi. Informasi yang berguna.

Akibatnya, pesan kesalahan mungkin mengambil ikon kesalahan tetapi tidak pernah menjadi ikon peringatan. Jangan gunakan ikon peringatan sebagai cara untuk "melunakkan" kesalahan kecil. Jadi terlepas dari perbedaan tingkat keparahannya, "Ukuran font yang salah" adalah kesalahan, sedangkan "Melanjutkan operasi ini akan membuat rumah Anda terbakar" adalah peringatan.

Menentukan jenis pesan yang sesuai

Beberapa masalah dapat disajikan sebagai kesalahan, peringatan, atau informasi, tergantung pada penekanan dan pembuatan frasa. Misalnya, halaman Web tidak dapat memuat kontrol ActiveX yang tidak ditandatangani berdasarkan konfigurasi Windows Internet Explorer saat ini:

  • Kesalahan. "Halaman ini tidak dapat memuat kontrol ActiveX yang tidak ditandatangani." (Diungkapkan sebagai masalah yang ada.)
  • Peringatan. "Halaman ini mungkin tidak berulah seperti yang diharapkan karena Windows Internet Explorer tidak dikonfigurasi untuk memuat kontrol ActiveX yang tidak ditandatangani." atau "Izinkan halaman ini menginstal Kontrol ActiveX yang tidak ditandatangani? Melakukannya dari sumber yang tidak tepercaya dapat membahayakan komputer Anda." (Keduanya diungkapkan sebagai kondisi yang dapat menyebabkan masalah di masa mendatang.)
  • Informasi. "Anda telah mengonfigurasi Windows Internet Explorer untuk memblokir kontrol ActiveX yang tidak ditandatangani." (Diungkapkan sebagai pernyataan fakta.)

Untuk menentukan jenis pesan yang sesuai, fokus pada aspek terpenting dari masalah yang perlu diketahui atau ditindak lanjuti pengguna. Biasanya, jika masalah memblokir pengguna untuk melanjutkan, masalah tersebut disajikan sebagai kesalahan; jika pengguna dapat melanjutkan, ini adalah peringatan. Buat instruksi utama atau teks terkait lainnya berdasarkan fokus tersebut, lalu pilih ikon (standar atau sebaliknya) yang cocok dengan teks. Teks dan ikon instruksi utama harus selalu cocok.

Tingkat keparahan

Meskipun tingkat keparahan bukan pertimbangan saat memilih di antara ikon kesalahan, peringatan, dan informasi, tingkat keparahan adalah faktor dalam menentukan apakah ikon standar harus digunakan sama sekali.

Ikon berfungsi paling baik saat digunakan untuk berkomunikasi secara visual. (Perhatikan bahwa untuk alasan aksesibilitas, komunikasi visual ini harus selalu berlebihan dengan formulir lain, seperti teks atau suara.) Pengguna harus dapat mengetahui sekilas sifat informasi dan konsekuensi dari respons mereka, jadi kita harus membedakan kesalahan dan peringatan penting dari rekan-rekan biasa mereka. Kesalahan dan peringatan penting memiliki karakteristik ini:

  • Mereka melibatkan potensi kehilangan satu atau beberapa hal berikut:
    • Aset berharga, seperti kehilangan data atau kerugian finansial.
    • Akses atau integritas sistem.
    • Privasi atau kontrol atas informasi rahasia.
    • Waktu pengguna (jumlah yang signifikan, seperti 30 detik atau lebih).
  • Mereka memiliki konsekuensi yang tidak terduga atau tidak diinginkan.
  • Mereka memerlukan penanganan yang benar sekarang, karena kesalahan tidak dapat dengan mudah diperbaiki dan bahkan mungkin tidak dapat dibatalkan.

Untuk membedakan kesalahan dan peringatan non-kritis dari yang penting, pesan non-kritis biasanya ditampilkan tanpa ikon. Melakukannya menarik perhatian pada pesan penting, membuat pesan penting dan non-kritis secara visual berbeda, dan konsisten dengan nada Windows.

Tidak setiap pesan membutuhkan ikon. Ikon bukanlah cara untuk menghias pesan.

Berikut ini adalah contoh peringatan kritis yang baik karena memenuhi karakteristik yang ditentukan sebelumnya.

cuplikan layar peringatan untuk mencadangkan data

Dalam contoh ini, peringatan penting memperingatkan pengguna tentang potensi kehilangan data yang tidak dapat dibatalkan.

Namun, contoh berikutnya tidak penting karena kemungkinan disengaja dan hasilnya mudah dibatalkan.

Salah:

cuplikan layar penggunaan ikon peringatan yang menyesatkan

Dalam contoh ini, konfirmasi ini tidak penting karena kemungkinan disengaja dan mudah dibatalkan.

Dalam UI umum, sebagian besar kesalahan terkait dengan kesalahan input pengguna. Sebagian besar kesalahan input pengguna tidak penting karena mudah dikoreksi, dan pengguna harus memperbaikinya sebelum melanjutkan. Selain itu, menarik terlalu banyak perhatian pada kesalahan pengguna kecil bertentangan dengan nada Windows. Akibatnya, kesalahan input pengguna kecil biasanya ditampilkan tanpa ikon kesalahan. Untuk memperkuat sifat non-kritis mereka, kami menyebutnya sebagai masalah input pengguna.

cuplikan layar yang memberi tahu pengguna tentang input yang benar

Dalam contoh ini, masalah input pengguna kecil ini tidak penting, sehingga tidak memerlukan ikon saat disajikan dalam kotak dialog.

Hindari overwarning

Kami mengesampingkan program Windows. Program Windows yang khas memiliki ikon peringatan yang tampak di mana-mana, memperingatkan tentang hal-hal yang memiliki sedikit signifikansi. Dalam beberapa program, hampir setiap pertanyaan disajikan sebagai peringatan. Overwarning membuat penggunaan program terasa seperti aktivitas berbahaya, dan mengurangi masalah yang benar-benar signifikan.

Hanya potensi kehilangan data saja tidak cukup untuk memanggil ikon peringatan. Selain itu, setiap hasil yang tidak diinginkan harus tidak terduga atau tidak diinginkan dan tidak mudah dikoreksi. Jika tidak, hampir semua pertanyaan yang salah dijawab dapat ditanyakan untuk mengakibatkan hilangnya data dari beberapa jenis dan menggunakan ikon peringatan.

Untuk memfokuskan ikon peringatan pada masalah yang benar-benar penting:

  • Pastikan bahwa masalah ini menjamin perhatian pengguna yang lebih tinggi. Konfirmasi dan pertanyaan rutin seharusnya tidak memiliki ikon peringatan.
  • Apakah pengguna cenderung bersifat berbeda sebagai akibat dari ikon peringatan? Apakah pengguna cenderung mempertimbangkan keputusan dengan lebih hati-hati?

Salah:

cuplikan layar ikon peringatan yang digunakan secara tidak perlu

Dalam contoh ini, apakah pengguna cenderung menjawab pertanyaan ini secara berbeda karena ikon peringatan?

  • Apakah ada beberapa tindakan signifikan yang harus dilakukan atau keputusan untuk dibuat? Peringatan tanpa tindakan hanya membuat pengguna merasa paranoid.

Salah:

cuplikan layar ikon peringatan yang digunakan dengan pengingat

Mengapa pemberitahuan ini menjadi peringatan? Apa yang harus dilakukan pengguna (selain khawatir)?

Konteks

Konteks juga merupakan pertimbangan dalam menggunakan ikon standar karena konteks itu sendiri mengomunikasikan informasi. Khususnya:

  • Meskipun kotak dialog (termasuk dialog tugas dan kotak pesan) dan pemberitahuan tidak memerlukan ikon untuk kesalahan non-kritis, kesalahan di tempat selalu memerlukan ikon kesalahan. Jika tidak, umpan balik non-modal seperti itu akan terlalu mudah diabaikan.
  • Peringatan di tempat selalu memerlukan ikon peringatan untuk membedakannya dari teks biasa.
  • Kotak dialog, pemberitahuan, dan balon tidak memerlukan ikon informasi karena menyajikan informasi dengan jelas. Sebaliknya, banner membutuhkan informasi piksel 16x16 atau ikon lain karena umpan balik non-modal tersebut akan terlalu mudah diabaikan.

Karena konteks adalah faktor signifikan dalam penggunaan ikon, panduan ikon standar dalam artikel ini diberikan dalam hal konteksnya.

Mengevaluasi kelayakan ikon standar

Saat mengevaluasi teks UI Anda, baca ikon standar apa pun juga. Baca ikon kesalahan sebagai "error!", ikon peringatan sebagai "peringatan, berhati-hatilah di sini!", dan ikon informasi sebagai "perhatian!". Kemudian lanjutkan membaca konteks yang tersisa, seperti instruksi utama, area konten, dan tombol penerapan. Pastikan arti dan nada setiap ikon standar cocok dengan arti dan nada konteksnya. Jika tidak, Anda telah menemukan masalah.

Jika Anda hanya melakukan satu hal ...

Pastikan arti dan nada setiap ikon standar cocok dengan arti dan nada konteksnya. Jika tidak cocok, ubah atau hapus ikon.

Panduan

Catatan: Untuk panduan berikut, "di tempat" berarti pada permukaan jendela normal apa pun, seperti di dalam area konten wizard, lembar properti, atau halaman item panel kontrol.

Umum

  • Pilih ikon standar berdasarkan jenis pesannya, bukan tingkat keparahan masalah yang mendasar:
    • Kesalahan. Terjadi kesalahan atau masalah.
    • Peringatan. Kondisi yang dapat menyebabkan masalah di masa mendatang.
    • Informasi. Informasi yang berguna.
  • Jika masalah mengalihkan jenis pesan yang berbeda, fokuslah pada aspek terpenting yang perlu ditindak lanjuti pengguna.
  • Ikon harus selalu cocok dengan instruksi utama atau teks terkait lainnya.

Benar:

cuplikan layar ikon kesalahan yang digunakan dengan teks kesalahan

Salah:

cuplikan layar ikon peringatan yang digunakan dengan teks kesalahan

Dalam contoh yang salah, ikon peringatan standar tidak cocok dengan instruksi utama (yang memberikan kesalahan).

Ukuran ikon

  • Pilih ukuran ikon standar berdasarkan konteks:

    Konteks Waktu menggunakan
    Kotak dialog
    Gunakan 32x32 piksel untuk ikon area konten; 16x16 piksel untuk ikon area catatan kaki.
    Lokal
    Gunakan 32x32 piksel untuk halaman kesalahan; Ikon piksel 16x16 untuk yang lain.
    Pemberitahuan
    Gunakan ikon piksel 16x16.
    Balon
    Gunakan ikon piksel 16x16.
    Banner
    Gunakan ikon piksel 16x16.

Ikon kesalahan

  • Gunakan ikon kesalahan hanya ketika terjadi kesalahan atau masalah:

    Konteks Waktu menggunakan
    Kotak dialog
    Gunakan hanya untuk kesalahan kritis. (jangan gunakan ikon standar untuk kesalahan non-kritis.)
    Cuplikan layar yang memperlihatkan ikon kesalahan yang digunakan dengan pesan kesalahan
    Kesalahan di tempat
    Gunakan untuk semua kesalahan.
    cuplikan layar ikon kesalahan yang digunakan dengan pesan kesalahan.
    Pemberitahuan
    Gunakan hanya untuk kesalahan kritis. (untuk kegagalan tindakan.)
    Cuplikan layar yang memperlihatkan ikon kesalahan yang digunakan dengan pesan kesalahan pemberitahuan.
    Balon
    Jangan gunakan. Balon tidak boleh digunakan untuk kesalahan kritis, dan tidak memerlukan ikon kesalahan untuk kesalahan non-kritis.
    Banner
    Jangan gunakan. Spanduk tidak boleh digunakan untuk kesalahan.
  • Umumnya, ikon kesalahan tidak diperlukan untuk masalah input pengguna yang tidak penting. Namun, ikon diperlukan untuk kesalahan di tempat, karena jika tidak, umpan balik kontekstual tersebut akan terlalu mudah diabaikan.

  • Untuk dialog tugas, jangan gunakan ikon catatan kaki kesalahan. Ikon kesalahan harus disajikan di area isi saja.

Ikon peringatan

  • Gunakan ikon peringatan hanya ketika kondisi dapat menyebabkan masalah di masa mendatang:

    Konteks Waktu menggunakan
    Kotak dialog
    Gunakan untuk semua peringatan.
    peringatan cuplikan layar perubahan ekstensi nama file
    Peringatan di tempat
    Gunakan untuk mengidentifikasi teks sebagai peringatan.
    cuplikan layar peringatan tidak cukup ruang kosong
    Pemberitahuan
    Gunakan untuk semua peringatan. (untuk peristiwa sistem yang tidak penting.)
    cuplikan layar pemberitahuan peringatan baterai rendah
    Balon
    Gunakan untuk kondisi khusus.
    cuplikan layar peringatan balon kunci tutup pada
    Banner
    Gunakan untuk menarik perhatian pada spanduk.
    cuplikan layar banner dengan peringatan hilangnya tpm
  • Jangan gunakan ikon peringatan untuk "melunakkan" kesalahan non-kritis. Kesalahan bukan peringatan yang menerapkan panduan ikon kesalahan sebagai gantinya.

  • Untuk dialog pertanyaan, gunakan ikon peringatan hanya untuk pertanyaan dengan konsekuensi signifikan. Jangan gunakan ikon peringatan untuk pertanyaan rutin.

Benar:

peringatan cuplikan layar untuk tidak menghentikan pemulihan sistem

Salah:

cuplikan layar peringatan tentang mematikan pengingat

Dalam contoh yang salah, ikon peringatan salah digunakan untuk pertanyaan rutin.

  • Untuk dialog tugas, Anda bisa menggunakan ikon catatan kaki peringatan untuk memperingatkan pengguna tentang konsekuensi berisiko. Namun, gunakan ikon peringatan baik di area konten atau area catatan kaki, tetapi tidak keduanya.

peringatan cuplikan layar dari file yang berpotensi tidak aman

Dalam contoh ini, perisai keamanan kuning digunakan dalam catatan kaki.

Ikon informasi

  • Gunakan ikon informasi hanya jika konteksnya tidak menyajikan informasi dengan jelas:

    Konteks Waktu menggunakan
    Kotak dialog
    Jangan gunakan.
    Lokal
    Jangan gunakan. Gunakan teks statis biasa atau banner sebagai gantinya.
    Pemberitahuan
    Jangan gunakan.
    Balon
    Jangan gunakan.
    Banner
    gunakan untuk menarik perhatian pada spanduk.
    cuplikan layar banner dengan informasi pengaturan
  • Ikon informasi tidak diperlukan dalam kotak dialog, pemberitahuan, dan balon karena konteksnya cukup berkomunikasi bahwa mereka memberi pengguna informasi.

  • Untuk dialog tugas, jangan gunakan ikon catatan kaki informasi. Catatan kaki cukup terlihat dan tidak perlu dikatakan bahwa catatan kaki tersebut adalah informasi.

Ikon tanda tanya

  • Gunakan ikon tanda tanya hanya untuk titik entri Bantuan. Untuk informasi selengkapnya, lihat panduan titik entri Bantuan .
  • Jangan gunakan ikon tanda tanya untuk mengajukan pertanyaan. Sekali lagi, gunakan ikon tanda tanya hanya untuk titik entri Bantuan. Tidak perlu mengajukan pertanyaan menggunakan ikon tanda tanya, cukup untuk menyajikan instruksi utama sebagai pertanyaan.
  • Jangan secara rutin mengganti ikon tanda tanya dengan ikon peringatan. Ganti ikon tanda tanya dengan ikon peringatan hanya jika pertanyaan memiliki konsekuensi yang signifikan. Jika tidak, jangan gunakan ikon apa-apa.