Gambar dari Miro 's blog



Kinneret Ifra, seorang ahli dalam mikrofotokopi untuk UI dan penulis dari mikrofotokopi: Panduan Lengkap, memberikan nasihat tentang bagaimana membuat dialog konfirmasi singkat, jelas dan tidak mengganggu, dan karena itu lebih berguna bagi pengguna. ... Kami memberikan perhatian Anda pada terjemahan artikel, dan setelah itu kami akan menambahkan beberapa ide dari pengalaman kami sendiri.



***

Terjemahan artikel "Anda yakin ingin melakukan ini?" Mikroteks dalam dialog konfirmasi "

Biasanya, kotak dialog konfirmasi muncul saat pengguna mencoba melakukan tindakan penting. Pesan tersebut meminta pengguna untuk memikirkan kembali apakah dia benar-benar ingin melakukan tindakan tersebut dan menyadari konsekuensinya.



Dengan kata lain, dialog konfirmasi membawa pengguna kembali ke momen pilihan dan memaksanya untuk melakukan tindakan lagi. Kami sengaja membuat gangguan ini - yang pada akhirnya memberikan keuntungan bagi pengguna.

Konfirmasi atau pembatalan tindakan

Terkadang kami dapat memberikan kebebasan bertindak kepada pengguna, dengan asumsi mereka tahu apa yang mereka lakukan. Dalam kasus seperti itu, daripada dialog konfirmasi, lebih baik memberi pengguna kesempatan untuk membatalkan tindakan dalam beberapa detik setelah selesai.



Pengguna dapat membatalkan tindakan di pesan pop-up yang muncul di bagian atas atau bawah layar. Jika pengguna tidak akan membatalkan aksinya, maka dia tidak perlu melakukan apa-apa, pesan tersebut secara otomatis akan hilang setelah beberapa detik.



Seperti inilah tampilan pesan popup di Google Kalender. Ini muncul setelah menghapus acara yang tidak mengundang peserta lain.





Seorang pengguna melihat pesan ini di Google Foto saat memindahkan gambar ke sampah:





Dan inilah pesan pop-up di Dropbox:





Contoh lainnya dapat ditemukan di artikel Keren Rijensky tentang opsi lain untuk antarmuka pencopotan pemasangan.

Kapan menggunakan dialog konfirmasi dan kapan harus membatalkan?

Saya menanyakan pertanyaan ini di grup WE - Women Experience Facebook dan mendapatkan jawaban yang bagus (terima kasih perempuan!). Berdasarkan jawaban ini, saya telah mengidentifikasi empat faktor utama untuk dipertimbangkan:

1. . , , , . , , . , , , , .
2. . / , . , . , , , .
3. . , , , . , . , , .
4. Frekuensi . Jika pengguna secara teratur melakukan tindakan yang sama, misalnya, saat bekerja dengan email, dia akan cepat bosan meminta konfirmasi di setiap langkah. Selain itu, pengguna cenderung tidak secara tidak sengaja melakukan tindakan yang dilakukannya setiap hari. Sebaliknya, jika pengguna jarang melakukan suatu tindakan dan mungkin lupa fitur-fiturnya, lebih baik menggunakan dialog konfirmasi daripada pesan pembatalan (yang juga mudah terlewatkan).

Selain itu, beberapa produk menawarkan pengguna opsi tambahan untuk tindakan , selain pembatalan lengkap (terima kasih atas tip Efri Eltan). Di bawah ini saya akan memberikan beberapa contoh.

Anatomi dialog konfirmasi

Dialog konfirmasi mencakup dua atau tiga elemen:

1. Judul.
2. Penjelasan satu atau dua baris (opsional).
3. Tombol.

Elemen 1. Judul

Dalam judul, Anda perlu bertanya kepada pengguna atau memberi tahu dia tentang satu tindakan utama yang perlu dikonfirmasi.



Judul harus sesederhana mungkin, dan yang terpenting - jelas dan tidak ambigu .



Dalam kebanyakan kasus, judul harus berupa pertanyaan dengan dua opsi jawaban yang saling eksklusif yang mudah dibedakan dan pilih salah satu yang Anda inginkan: “Ya / Tidak”, “Tetap / Keluar”, “Lanjutkan / Kembali”.



Pada tahap ini, ada baiknya memikirkan tentang tombol: rumuskan pertanyaan di judul sehingga Anda dapat memberikan dua opsi jawaban yang tidak ambigu dan mudah dibedakan. Kami akan menggunakan opsi ini untuk tombol nanti.



Jangan gunakan judul yang terlalu umum seperti "Peringatan" atau "Anda yakin".



Sebutkan tindakan saat ini - semakin spesifik, semakin baik.



Hindari frasa pengantar yang tidak mengandung beban semantik. Misalnya, "Apakah Anda ingin ...", "Tindakan ini akan mengarah ke ..." dan semua yang sama terkenal "Anda benar-benar ..."



Ceritakan hal utama dari awal .









Berikut adalah contoh bagus dari Twitter - kiriman sederhana dan jelas:





Mengapa perlu menghapus perkenalan yang tidak perlu dari pesan?

1. Pesan akan singkat dan bahasanya sederhana serta mudah dimengerti. Kami sudah memaksa pengguna untuk menghabiskan waktu untuk tindakan tambahan. Frasa "kamu benar-benar ..." menambah kerumitan yang tidak perlu pada pesan, termasuk pada tingkat emosional.
2. . , . – , – .
3. . .
4. «» – .

« »

Harap dicatat bahwa kata "Batal" dapat diartikan dengan cara yang berbeda dalam hal tindakan yang berkaitan dengan penghapusan.



Hal ini terutama terlihat pada pesan di mana kata "Urung" dan "Hapus" saling terkait. Negasi ganda membuat lebih sulit untuk memahami apakah tindakan tersebut sedang diusulkan atau dibatalkan. Lebih baik memilih kata yang berbeda, seperti Kembali, Tetap, Tidak, Keluar, atau tindakan lain yang sesuai konteksnya.



Kata "Lanjutkan" juga bisa terlalu umum dan abstrak. Berusaha keras untuk presisi dan tunjukkan tindakan spesifik .

Item 2 (opsional). Penjelasan

Jika Anda tidak memiliki apa-apa untuk ditambahkan pada apa yang telah dikatakan dalam judul, Anda tidak perlu menambahkan penjelasan .





Sayangnya, banyak sistem menggunakan satu template untuk dialog konfirmasi yang menyertakan ketiga elemen tersebut. Dalam kasus seperti itu, Anda harus menambahkan penjelasan, meskipun tidak diperlukan. Buat dua template, dengan dan tanpa penjelasan, dan gunakan template yang sesuai dengan pesan Anda. Jika sistem tidak dapat diubah, setidaknya cobalah untuk tidak mengulanginya sendiri. Contohnya:

Saat penjelasan dibutuhkan

Saat pengguna mencoba melakukan tindakan yang akan memicu tindakan lain, mereka perlu diberi tahu. Contohnya:

• — , .
  
  
  
  
  
• — , .
  
  
  
  
  
• — , , . ( , , . True story.)
  
  
  
  
  
• Tindakan yang bertentangan - pengguna ingin mengubah pengaturan, dan tindakan ini bertentangan dengan pengaturan lain dan akan mengubahnya juga.
  
  
  
  
  

Contoh umum lainnya adalah keluar atau menutup jendela tanpa menyimpan perubahan . Jika pengguna menutup formulir yang tidak diisi lengkap atau jendela pembuatan elemen, Anda perlu memperingatkannya bahwa semua pekerjaan yang telah dilakukan akan sia-sia, dan harus dimulai dari awal.



Misalnya, untuk bekerja dengan aplikasi berita, pengguna harus memilih setidaknya lima topik. Jika dia memilih kurang dari lima dan mencoba keluar dari aplikasi, tema yang sudah dipilih tidak akan disimpan. Dalam kasus ini, Anda harus memperingatkan pengguna tentang ini:





Semakin penting tindakannya dan semakin sulit untuk membatalkannya, semakin hati-hati Anda perlu memikirkan penjelasannya. Jangan lupa tentang elemen desain (seperti warna dan padding) yang akan membantu menarik perhatian pengguna ke informasi utama.



Inilah contoh bagus dari Typeform:





Secara umum, klarifikasi adalah elemen opsional dari dialog konfirmasi. Tambahkan jika konsekuensi tindakan yang ingin dilakukan pengguna mungkin tidak terlihat jelas baginya.

Menggabungkan judul dan penjelasan

Asumsikan bahwa pengguna hanya membaca label judul dan tombol. Jika tindakan tersebut memiliki konsekuensi yang serius dan Anda khawatir pengguna tidak dapat membaca penjelasannya, masukkan dalam teks judul. Pilihan lainnya adalah menukar mereka dan langsung memulai dengan penjelasan. Contohnya:

• ?
• . ?
• , . ?

,

Jika tindakan tersebut tidak dapat diubah, laporkan. Pengguna terbiasa dengan keranjang belanja dan fitur serupa lainnya yang melindungi mereka dari konsekuensi keputusan yang terburu-buru. Jika peluang seperti itu tidak diberikan, langsung beri tahu bahwa tindakan tersebut tidak dapat diubah, dan tidak mungkin untuk membatalkannya, kembali, atau memulihkan yang dihapus. Ini harus dikatakan sudah dalam judul dengan bantuan ungkapan yang tidak ambigu seperti "Tidak ada kemungkinan untuk pulih".



Contoh di atas dari Typeform dengan sempurna menunjukkan prinsip ini.



YouTube bahkan memerlukan konfirmasi tambahan untuk menghapus video: hingga pengguna mencentang kotak khusus, tombol hapus tetap tidak dapat diakses.

Apakah ada pilihan yang lebih baik? Saatnya menceritakan tentang dia

Jika Anda merasa bahwa pengguna akan menghapus sesuatu yang tidak perlu atau melakukan tindakan lain yang tampaknya tidak dapat menyelesaikan masalah mereka, dialog konfirmasi adalah tempat yang tepat untuk memperingatkan mereka tentang hal ini.



Inilah contoh dari Facebook:

Elemen 3. Tombol

Ikuti panduan ini saat mengerjakan tombol untuk dialog konfirmasi:

1. Buat tombol mudah dibedakan dan semudah mungkin dipahami
   
   
   
   Tombol harus merupakan dua opsi yang jelas dan mudah dibedakan sehingga tidak membingungkan. Setiap opsi harus sangat jelas. Jika judul ditulis dengan baik, akan lebih mudah untuk menemukan dua jawaban yang berlawanan dari pertanyaan yang ditanyakan tentang tombol.
   
   
   
   Berikut adalah contoh dari program AVG yang dengan sempurna mendemonstrasikan ide ini:
   
   
   
   
   
2. 
   
   
   
   «» «» «» «», , / , , , . , ( – ), .
   
   
   
   , , : «, »; « »; «, »; « »; «, » .
   
   
   
   , «» «», «» («, ») « » (« »). , («»).
   
   
   
   
   
   
   
   
   
   
   
   Forest, Chrome. : , , , , .
   
   
   
   , , , . , ? , – , .
   
   
   
   
   
   , . , .
   
   
   
   , Galaxy. , , :
   
   
   
   
   
   
   
   , , «/» «/», «» , . , . «» «», , .
3. Gunakan kata kerja yang sama dalam judul dan tombol sehingga pengguna dapat dengan mudah melacak hubungan di antara mereka
   
   
   

Contoh dari Foto Google berikut menunjukkan dua prinsip lagi untuk mendesain teks untuk dialog konfirmasi:

1. Bersikaplah konsisten - ingat label pada tombol yang akan memunculkan dialog konfirmasi saat diklik, dan gunakan kata yang sama. Pada contoh, pengguna mengklik tombol Empty Trash, sehingga dialog konfirmasi juga menggunakan kata Trash.
2. Laporkan hal utama - dalam tindakan ini, yang utama bukanlah keranjang akan dikosongkan, tetapi isinya akan dihapus selamanya. Oleh karena itu, dalam teks pada tombol, penting untuk menarik perhatian pengguna untuk menghapus data, bukan mengosongkan sampah. Solusi yang bahkan lebih elegan dimungkinkan: kata-katanya dapat digabungkan dan disebut tombol bukan "Kosongkan Sampah", tetapi "Hapus konten sampah".

Mari kita simpulkan

Di bawah ini adalah contoh terakhir yang menyempurnakan ketiga elemen dialog konfirmasi.



Di judul baru, kami mengajukan pertanyaan langsung tentang tindakan tertentu.



Dalam klarifikasi baru, kami memberi tahu pengguna tentang konsekuensi dari tindakan ini.



Di tombol baru, kami menawarkan opsi yang mudah dibaca dengan konteks.



***

Penerapan dalam praktik

Jadi, retasan hidup apa pada teks dalam dialog konfirmasi yang dapat Anda ambil dari artikel ini? Mari kita rangkum:



Header:

• Buat judul Anda tetap pendek dan sederhana, idealnya ajukan pertanyaan dengan dua pilihan jawaban yang saling eksklusif.
• Hapus frasa pengantar seperti "Kamu benar-benar ..." adalah "air" yang tidak perlu.
• Hindari ambiguitas, sebutkan tindakan tertentu. Kata "Batal" dan "Lanjutkan" membutuhkan penanganan yang sangat hati-hati.

Penjelasan:

• Jangan menambahkan klarifikasi jika Anda tidak memiliki apa pun untuk ditambahkan ke pertanyaan di judul.
• Tambahkan penjelasan untuk tindakan yang akan memicu tindakan lain dan tindakan yang tidak dapat diubah.
• Jika tindakan tersebut tampaknya tidak pantas, sarankan opsi lain.
• Gunakan warna dan bantalan untuk menarik perhatian ke informasi utama.
• Penjelasannya bisa digabungkan dengan judul. Banyak juga yang tidak membacanya.

Tombol:

• Dalam teks tombol, gunakan jawaban dari pertanyaan di judul.
• Tambahkan nama tindakan ke tombol utama - misalnya, "Ya, keluar." Lebih baik jika cocok dengan kata kerja heading.

Dan selanjutnya:

• Untuk tindakan non-kritis dan tindakan yang dapat dibatalkan, lebih baik mengganti dialog konfirmasi dengan jendela pop-up urungkan.

Tips ini menggemakan prinsip yang digunakan dalam pengembangan UI untuk produk kami. Misalnya, di Directum RX, untuk menghapus tautan, kami mengganti dialog konfirmasi dengan "pop-up":





Dan di salah satu versi, kami menyingkirkan formulasi rumit dalam dialog:

Bonus: ide dari pengalaman pribadi

Kami dapat menambahkan beberapa peretasan kehidupan lagi ke rekomendasi dari artikel, yang kami gunakan sendiri. Di sini mereka:

• , . RX 3.5. . .
  
  
  
  
  
  
  
  , : , «». .
• – , , .
  
  
  
  
  
  
  
  , – , .
• , . : «» «», «» – «». «».
• :
  
  
  • «», «» «», «» ;
  • abort, kill, terminate – end;
  • failed, unable – cannot;
  • bad – incorrect;
  • invalid – is not valid.
  
  
  , : « …» – , . , ?

Tentu saja, kami tidak ingin - dan, setelah mengadopsi pengalaman kami sendiri dan pengalaman orang lain, kami kembali menempuh jalur tanpa akhir menuju UI yang ideal.



Manakah dari asas berikut yang Anda gunakan? Mungkin Anda memiliki sesuatu untuk ditambahkan ke daftar ini? Tulis komentar, ajukan pertanyaan - kami akan dengan senang hati bertukar pengalaman.