it-swarm.asia

Haruskah "Ya, hapus itu" merah, atau hijau?

Merancang antarmuka untuk CMS (Content Management System), saya menemukan paradoks dan saya agak bingung tentang apa untuk dilakukan dan mengapa untuk melakukannya ..

Konteks

Sebelum menghapus album, pengguna diminta untuk mengkonfirmasi tindakan.

Hijau "ya"

First option

Merah "ya"

Second option

Opsi mana yang lebih intuitif bagi pengguna?

787
Diéssica

Kedua cara tersebut tampaknya memiliki paradigma positif palsu. Ini bisa lebih sederhana dan tidak harus memaksa pengguna untuk menghabiskan waktu dengan memahami asosiasi warna-ke-label.

Cukup buat tombol "Hapus" lebih menonjol. Jadikan tombol "Batal" kurang menonjol. Sehubungan dengan pelabelan di dalam tombol, tidak perlu menempatkan banyak konteks ke dalam apa yang pada dasarnya adalah tindakan sederhana (tidak/ya? Atau membatalkan/menghapus) karena itu membutuhkan lebih banyak pemrosesan pada bagian pengguna.

enter image description here

Pengguna biasanya akan mengaitkan tindakan seperti "Hapus" atau "Hapus" untuk merah. Dan, seperti biasa, berikan cara untuk "membatalkan" tindakan.

1358
jnmnrd

Saya tidak begitu yakin Anda harus berpikir hanya dalam hal merah dan hijau. Merah biasanya terkait dengan bahaya , berpotensi dating kembali ke abad pertengahan (rujukan?). Quick pencarian gambar Google untuk "delete" menghasilkan hampir semua gambar merah.

Bagi saya (dan untuk bootstrap ) hijau menunjukkan keberhasilan, merah menunjukkan bahaya.

Bootstrap buttons

Karena menghapus adalah tindakan berbahaya, saya akan merekomendasikan agar tombol delete tetap merah. Apakah Anda dibatasi menggunakan hijau/merah? Jika demikian saya akan merekomendasikan menggunakan gambar kedua Anda. Lampu berhenti AS menunjukkan kepada saya bahwa hijau berarti "melanjutkan." Menggunakan dasar pemikiran ini Anda bisa mengatakan hijau "Tidak, simpan tombol" berarti "Tidak, simpan dan lanjutkan" dan merah "Ya, hapus itu" berarti "Ya, hapus itu meskipun berbahaya." Bagaimanapun, saya akan mempertimbangkan untuk membuat tombol "Tidak, simpan" biru karena itu adalah warna aksi yang cukup standar (misalnya itu adalah warna default dari tautan yang tidak ditata).

Edit : Saya pikir @ JNMNRD memiliki jawaban terbaik untuk ini. Ini adalah gambar @ JNMNRD tanpa kata-kata. Bisakah Anda tahu tombol mana yang berarti hapus?

Delete

321
circuitry

Melihat ini dari sudut yang sedikit berbeda, di mana mungkin Anda dapat mempertimbangkan menghapus konfirmasi sepenuhnya dan beralih ke proses "Lakukan/Undo".

Metode ini sering digunakan di seluruh layanan Google:

enter image description here

Ini memiliki keuntungan yang netral secara budaya dan lebih efisien bagi pengguna (satu klik daripada dua untuk menghapus).

Kerugiannya adalah tautan sementara, dan diganti ketika tindakan lain diambil - misalnya saat melaporkan email lain sebagai spam. Itu juga akan dibuang begitu Anda keluar, kehilangan fokus atau menyegarkan.

Untuk membantu menghindari kerugian ini, Anda dapat mempertimbangkan untuk memasukkan semacam fungsi daur ulang di situs seperti halnya SharePoint.

221
Graham Wager

Dengan segala hormat, saya pikir setiap jawaban sejauh ini agak meleset dari sasaran.

Pertama-tama, berdasarkan bagian Konteks dari pertanyaan Anda ...

Konteks

Sebelum menghapus album, pengguna diminta untuk mengkonfirmasi tindakan.

... kita dapat menyimpulkan bahwa ini bukan modal sukses atau kesalahan, tetapi ini adalah modal konfirmasi modal, yang menyiratkan warning atau hati-hati warna seperti - kuning, bukan hijau atau red, seperti sukses dan error warna menyiratkan masing-masing. Dan karena itu adalah modal konfirmasi, kata-katanya mungkin akan berubah menjadi sesuatu seperti:

Harap konfirmasikan penghapusan album ini:

Untuk memajukan usability dari modal konfirmasi, Anda dapat embolden the = Konfirmasikan tombol untuk membuatnya sedikit lebih menonjol. Dan bagi mereka yang memiliki buta warna atau masalah membaca, saya biasanya meletakkan ikon cocok dengan apa yang sedang dikonfirmasi. Dalam hal ini, --- tong sampah cocok.

Ketika Anda menambahkan semua itu bersama-sama, ini adalah contoh dari apa yang Anda dapatkan:

confirmation modal


Perbarui berdasarkan komentar tentang kata-kata tombol ...

Saya sudah memikirkan kata-kata ini untuk beberapa waktu sekarang. Komentar condong ke arah penggunaan Hapus daripada Konfirmasikan, tapi saya pikir ada sesuatu yang lebih baik. Karena ikonnya adalah tempat sampah dan kita berbicara tentang menyingkirkan album, Saya pikir kata-katanya harus cocok itu sebagai gantinya.

Jadi, saya memikirkannya dan muncul dengan Keep dan Trash sebagai gantinya. Mereka berdua bertepatan dengan pertanyaan apakah seseorang harus menghapus album atau membatalkan tindakan, belum lagi warna masih berfungsi untuk pengguna buta warna, Keep yang berani memperjelas apa tindakan defaultnya, dan bersama-sama, kata-katanya membuatnya menjadi 100 % jelas tentang tindakan apa yang dikonfirmasikan seseorang.

updated confirmation modal

132
Code Maverick

Pengguna lebih cenderung berpikir dua kali sebelum mengklik sesuatu yang berwarna merah. Untuk salah satu dari dua opsi manakah Anda ingin mereka berpikir dua kali sebelum mengklik?
Yang mana dari dua pilihan yang berpotensi memicu lebih banyak peristiwa yang tidak dapat diubah?

Sumber: http://en.wikipedia.org/wiki/Red#Warning_and_danger

43
Rolf

Saya melakukan sedikit riset setelah membaca pertanyaan Anda dan jawaban saat ini, dan menemukan bahwa ada beberapa bukti yang menunjukkan bahwa preferensi untuk warna merah pada manusia, seperti pada primata bukan manusia lainnya, tergantung pada apakah konteksnya ramah atau tidak bersahabat. ( Maier et al., 2009 dan studi tindak lanjut).

Seperti yang dirangkum dalam abstrak (penekanan tambang):

Tiga percobaan dilakukan pada preferensi warna menggunakan paradigma seleksi spontan dengan peserta bayi.

Eksperimen 1 menunjukkan bahwa peserta lebih suka merah daripada hijau di lingkungan laboratorium yang ramah.

Eksperimen 2 menunjukkan bahwa preferensi peserta untuk merah bervariasi dengan konteks di mana warna disajikan: Merah lebih disukai dalam konteks ramah (mengikuti wajah bahagia), tetapi tidak dalam konteks yang bermusuhan ( mengikuti wajah marah). Pola yang berlawanan ditemukan untuk warna kontrol hijau.

Eksperimen 3 menggunakan manipulasi konteks yang sama, tetapi warna kontrol kedua, abu-abu, ditambahkan untuk memeriksa dengan jelas apakah konteks memengaruhi preferensi untuk warna merah saja. Seperti yang diperkirakan, diberi pilihan alternatif kedua, preferensi tergantung konteks untuk merah, tetapi tidak hijau atau abu-abu, ditemukan. Hasil ini merupakan bukti pertama dari moderasi konteks dalam literatur preferensi warna.

(Catatan Basis Data PsycINFO (c) APA 2012, semua hak dilindungi undang-undang)

Orang bertanya-tanya apakah konteks tindakan ini - menghapus sesuatu - akan cukup untuk mendorongnya ke wilayah 'bermusuhan'. Intuisi saya adalah bahwa jika penghapusan itu tidak disengaja (pengguna mengklik 'delete', menyadari bahwa mereka tidak bermaksud melakukannya, dan sedang diberikan kesempatan terakhir untuk menyelamatkan pekerjaan mereka), dan mungkin masih tetap demikian bahkan jika itu disengaja (pengguna frustrasi harus membersihkan rintangan lain di jalan tujuan?).

28
Jessica Yang

Apa standar yang ada di sisa aplikasi Anda? Apakah Anda menggunakan tombol merah untuk menunjukkan "Saya ingin menyelesaikan tindakan ini" dan yang hijau berarti "membatalkan tindakan ini"? Atau sebaliknya?

Jika itu seperti, well, hampir semua perangkat lunak yang pernah saya lihat, maka uang saya ada di hijau untuk "teruskan dan lakukan itu" dan merah untuk "batalkan! Batalkan!".

Sementara "merah" untuk "peringatan" adalah titik yang adil, tempatnya adalah sebelum mencapai tahap ini - membuat asli "hapus" tombol merah. Tapi Anda bertanya di sini tentang tahap konfirmasi, yang seharusnya selal memperlakukan "melanjutkan" dan "membatalkan" secara konsisten, terlepas dari apa operasi yang sedang dilanjutkan atau dibatalkan mungkin. Jika merah biasanya "batal", tetapi kadang-kadang "terus", maka Anda hanya mengundang kebingungan pengguna.

18
Dave Sherohman

Anda dapat memilih untuk mengatur ajakan bertindak primer dan sekunder.

Contoh dari LinkedIn:

example

Ini memberikan tindakan konfirmasi yang jelas dan tunggal yang dapat diambil pengguna tanpa kekhawatiran akan aksesibilitas, bias budaya, dan kebingungan keputusan yang dapat datang dari pemisahan opsi dengan warna saja.

Juga, bagaimana itu ditulis dalam contoh di atas sangat jelas. Bagaimana pertanyaan itu bisa diulangi tanpa ambiguitas:

Apakah Anda yakin ingin menghapus album ini? YA/Batal

Juga pikirkan aliran pengguna untuk ini. Ini bukan praktik yang baik untuk memberikan tindakan absolut tanpa gagal-aman.

berikan undo

Sumber: Apa beberapa alternatif untuk frasa "Apakah Anda yakin ingin XYZ" dalam dialog konfirmasi?

Berikut ini juga cara lain untuk menyediakan kemampuan untuk menghapus:

example

Pengguna dapat membuat kesalahan pada jendela konfirmasi. Jika pengguna akan menghapus sesuatu yang penting bahwa mereka tidak akan pernah kembali, penting bagi Anda untuk memastikan pengguna benar-benar yakin sebelum mereka melanjutkan. Alih-alih memberi pengguna tombol konfirmasi yang bisa mereka tekan secara keliru, beri mereka bidang teks dan minta mereka mengetikkan kata "hapus" untuk mengonfirmasi. Ketika pengguna mengetik "hapus" di bidang teks, tidak ada keraguan bahwa mereka ingin menghapus. Tidak ada penekanan yang tidak disengaja dari tombol hapus. Tidak ada penyesalan ketika pengguna menghapus, karena bidang teks konfirmasi membuat mereka yakin tentang apa yang akan mereka lakukan sebelum mereka melakukannya.

Sumber: http://uxmovement.com/buttons/how-to-make-sure-users-dont-accidentally-delete/

17
Pdxd

Solusi saya untuk menghapus sesuatu adalah tombol dengan ikon tempat sampah yang membuka sedikit popover. Saya pikir ini adalah solusi yang baik karena:

  • tidak ada dialog yang menggangg, semua orang membenci dialog konfirmasi!
  • diperlukan konfirmasi. tidak ada klik rahasia
  • pengguna hanya membaca dua kata, tidak ada pertanyaan yang menggangg
  • warna merah menunjukkan bahwa itu benar-benar dihapus, Anda dapat empasize dengan menambahkan "tidak dapat diubah" untuk menghapus
  • minimum gerakan mouse dan mata
  • ruang minimum yang terbuang
  • tidak ada saklar konteks

screenshot## Heading ##

13
daniel

Hijau biasanya digunakan di antarmuka dan tempat untuk menandakan "pergi", "lanjutkan", atau "ya". Dalam kasus Anda, itulah tepatnya yang coba dilakukan pengguna. Mereka melanjutkan tindakan masa lalu mereka (yang menekan tombol hapus). Red dipandang sebagai berhenti, seperti "berhenti, aku berubah pikiran!"

Dalam kasus Anda, saya akan menggunakan apa yang digunakan pengguna: hijau untuk melanjutkan dan merah untuk membatalkan.

10
Mike

Mengapa mereka harus dua warna berbeda? Tampaknya ini membuat hal-hal menjadi lebih rumit karena perbedaan budaya dan masalah lain yang telah diangkat (walaupun, saya tidak yakin apa yang dimaksud dengan penonton untuk aplikasi atau situs web ini. Jadi mungkin perbedaan budaya, sebagian besar, tidak relevan jika itu adalah basis pengguna yang sangat spesifik untuk suatu aplikasi).

Seperti yang disebutkan orang lain, mengapa tidak membuat tombol tindakan utama lebih menonjol dan tombol Batal kurang menonjol? Di iTunes misalnya, ketika Anda menghapus file musik, jendela Prompt memiliki tombol abu-abu untuk tombol Batal, dan tombol tindakan utama berwarna biru. Selain menjadi biru, warna berdenyut untuk menarik perhatian.

Juga, dalam contoh awal Anda, label tombol tampak bertele-tele. Anda sudah bertanya kepada mereka, "Apakah Anda benar-benar ingin menghapus album ini?" Mengapa tidak memberi label tombol "Tidak" dan "Ya" atau "Batal" dan "Hapus"?

9
Dmacatude

Hijau harus selalu positif, berkaitan dengan opsi "Ya, silakan", jadi itu harus hijau. Fakta bahwa Anda menghapus sesuatu daripada membuatnya itu tidak penting.

Red terbiasa dengan "Tidak, saya berubah pikiran" atau "Tidak, saya tidak ingin Anda melakukan itu", apa pun "itu".

7
Dave Murray

Tombol digunakan untuk mengirim/mengirim informasi atau mengambil tindakan, bukan untuk tidak bertindak Prompt. Satu-satunya tombol harus menjadi salah satu yang mengalir melalui aliran. Tindakan lain apa pun harus diwakili oleh tautan. Dalam konteks ini, saya akan menganjurkan penggunaan warna tombol yang tidak digunakan di tempat lain di situs, atau yang disediakan hanya untuk tindakan yang paling serius. Saya menganggap ini akan menjadi merah. Intinya adalah untuk memaksa pengguna keluar dari keadaan mental pasif dengan mengklik tombol warna X di posisi Y (hijau, kanan bawah) dan membuat mereka bertanya secara eksplisit "apa yang akan dilakukan?"

7
Matt Langan

Jangan gunakan warna apa pun untuk tindakan seperti itu. Kedua tindakan memiliki kepentingan yang sama. Mungkin pengguna tidak sengaja mengklik 'Hapus', atau pengguna benar-benar ingin 'Hapus' Album.

Warna adalah gangguan yang tidak perlu dalam skenario seperti itu dan tidak membantu konteksnya.

Izinkan teks pada label tombol untuk mengonfirmasi tindakan: "Batal", dan "Hapus Album"

4
Sumi

@JNMNRD memiliki solusi terbaik.

Biasanya, tindakan yang Anda ingin pengguna lakukan harus ditempatkan di sebelah kanan, dan karena ini adalah pesan konfirmasi, maka tindakan hapus harus ditempatkan di sebelah kanan.

Juga, dengan memberi dua warna pada aksi yang berbeda, Anda dengan cara memberi mereka hierarki yang sama. Sedangkan jika pengguna sudah melakukan tindakan untuk menghapus, dan ini hanya konfirmasi, tindakan tidak boleh bersaing. Ini seharusnya berfungsi hanya untuk tujuan validasi.

Itu sebabnya membiarkan opsi pembatalan netral adalah hal yang paling dapat digunakan karena pengguna Anda akan membaca instruksi yang langsung fokus pada tombol hapus, tetapi tetap saja, jika mereka menyesal, mereka akan memiliki kesempatan untuk membatalkan.

1
Miguel Fernandez

Sebenarnya saya sangat menyukai pengalaman pengguna Github saat menghapus proyek, warna tipografi bersama dengan perbatasan diubah menjadi merah yang menunjukkan dengan jelas bahwa sesuatu bahaya sedang terjadi.

enter image description here

Github menampilkan sembulan untuk memastikan bahwa pengguna benar-benar ingin menghapus proyek atau repositori.

enter image description here

0
Pir Abdul