Penerjemahan artikel oleh orang-orang dari NN-Group didorong oleh kebutuhan untuk memberikan instruksi yang sederhana dan mudah dimengerti untuk desainer dari tim produk, yang dapat dikonsultasikan jika perlu. Karena artikel itu diterbitkan beberapa hari yang lalu, saya memutuskan untuk menerjemahkan dan pada saat yang sama membagikan materi yang bermanfaat kepada semua orang. Terima kasih kepada Yura Vetrov untuk tipnya. Artikel asli dapat ditemukan di sini.
Spoiler: Kontrol yang beralih di antara dua status sistem yang berbeda harus menyampaikan dengan jelas kepada pengguna baik status saat ini maupun status yang akan dituju sistem jika pengguna mengklik kontrol itu.
Pada pertemuan WebEx baru-baru ini dengan klien, saya panik, mengira saya tidak dapat mengaktifkan mikrofon. Saya harus memberikan presentasi selama 6 jam - bagaimana saya melakukannya jika saya bahkan tidak dapat menyalakan suaranya? Saya terus mengklik ikon mikrofon yang dicoret, tetapi mikrofon tetap dicoret apa pun yang saya lakukan.
Berikut tangkapan layarnya:
Panel kontrol untuk aplikasi desktop WebEx:
Above - Silent;
Bawah - Kondisi dibungkam
Dalam kepanikan saya, saya sama sekali tidak melihat perubahan warna ikon! Terlepas dari kenyataan bahwa mikrofon disilangkan di kedua negara bagian - saya menemukan bahwa warna merah ikon seharusnya menandakan bahwa tombol itu aktif dan saya dinonaktifkan.
Saya telah melihat pengguna menjadi korban masalah ini berkali-kali. Tombol mute digunakan untuk beralih di antara dua status sistem (Mutes dan UnMuted), tetapi masalahnya adalah pengguna tidak dapat dengan mudah mengetahui status mereka saat ini dan ke status mana mereka sedang bertransisi. (Selain itu, bertentangan dengan praktik terbaik desain ikon , implementasi WebEx tidak memiliki teks label tombol bisu).
Dua bagian informasi, dua kontrol
Dalam situasi di mana pengguna dapat bernavigasi di antara dua kemungkinan status (sebut saja Hidup dan Mati, untuk kesederhanaan), ada dua bit informasi yang relevan bagi pengguna dan, meskipun terkait, tidak identik:
- Status sistem saat ini - Aktif atau Nonaktif; dalam contoh dengan mikrofon - Mute atau UnMute;
- , — , , ( Unmute Mute).
Cara yang jelas untuk menerapkannya adalah dengan memiliki dua elemen UI yang berbeda: indikator status dan tombol ubah status.
Misalnya, di aplikasi Tesla, layar Kontrol menggunakan pendekatan ini: Anda memiliki indikator status yang menunjukkan bahwa mobil terkunci dan tombol buka kunci. Mengklik lampu status tidak melakukan apa pun, tetapi mengklik kontrol akan membuka kunci kendaraan.
Tesla untuk iPhone:
(Kiri) Ikon di atas tombol buka kunci berfungsi sebagai indikator status; Tombol Buka Kunci adalah tombol sakelar keadaan yang dengan jelas menyatakan apa yang terjadi jika pengguna mengekliknya.
(Kanan) Status dan label tombol berubah saat pengguna membuka kunci kendaraan.
Dua status informasi, satu kontrol
Namun, jika Anda memiliki sistem dengan dua status, status saat ini dan apa yang akan datang berikutnya - keduanya harus saling melengkapi. Dengan kata lain, dapat diasumsikan bahwa dua bagian informasi (status dan apa yang terjadi selanjutnya) dapat dikomunikasikan menggunakan satu kontrol - tombol sakelar status. Karena jika pengguna mengetahui satu status (setidaknya secara teori) mereka dapat menyimpulkan hasil dari sebuah klik;
Namun, ingatlah bahwa keputusan apa pun yang Anda buat membutuhkan waktu dan upaya kognitif , dan seringkali hanya ada sedikit waktu untuk merespons dengan cepat. Seperti pada contoh: Saya mencoba menyalakan mikrofon saya, dan semua orang menunggu saya, atau mengabaikan saya dan melanjutkan percakapan, yaitu, saya tidak punya waktu untuk berhenti dan memikirkan antarmuka atau menarik kesimpulan.
Terkadang kondisinya dapat dengan mudah diidentifikasi dari sinyal lain. Misalnya, di pemutar video, hanya ada satu kontrol (tombol "Putar") yang menunjukkan status masa depan. Namun, ada cukup sinyal untuk memahami bahwa video sedang diputar - pengguna dapat mendengar audio atau melihat perubahan pada gambar di layar.
YouTube: Ikon putar diganti dengan jeda saat video diputar. Ikon tersebut menunjukkan status bahwa sistem akan masuk saat tombol ditekan.
Jika Anda perlu menggunakan satu kontrol untuk menunjukkan status dan apa selanjutnya, bagaimana Anda harus menunjukkannya?
Dalam situasi ini, dua alternatif dapat dipertimbangkan:
- , , , , .
. , «», «» « ».
, , , Tesla OBS .
OBS Studio: «Start Recording» «Stop Recording» .
(, ), , . , YouTube . - .
/: , « ». , , , .
Word B () (), , , . .
Mari kembali ke contoh WebEx. Melihat ke belakang, kita dapat melihat bahwa WebEx menggunakan satu kontrol untuk menunjukkan status saat ini dan apa yang akan terjadi selanjutnya, dan menerapkan keputusan desain kedua - menandakan status aktif. Sayangnya, warna merah sebagai indikator aktif adalah pilihan yang tidak menguntungkan karena beberapa alasan:
- Merah digunakan secara sewenang-wenang di antarmuka - misalnya, tombol X (Keluar) juga berwarna merah, dan ini tidak berarti tombol tersebut aktif. (Jika merah mewakili keadaan aktif, apa arti palang merah? Bahwa saya telah meninggalkan rapat?)
- Warna lain (biru) digunakan untuk menunjukkan bahwa tombol lain, seperti Video dan Obrolan, sedang aktif (yaitu, ikon video biru menunjukkan bahwa video aktif).
Jika tidak ada indikator yang jelas dari status aktif, pengguna dibiarkan mengandalkan label tombol untuk memutuskan apa yang terjadi, dan dengan label ikon tidak berubah, ini hanya akan menyebabkan kebingungan.
Omong-omong, aplikasi Telepon di iPhone menggunakan implementasi yang sama, dengan satu-satunya perbedaan yang lebih konsisten daripada WebEx dan menggunakan isian putih untuk menunjukkan status aktif. Meskipun dengan pengaturan ini, sulit untuk menentukan status aktif tombol.
Aplikasi iPhone iPhone: Tombol Bisukan tidak mengubah ikonnya, tetapi menunjukkan status aktif dengan isian putih (kiri). Meskipun putih bisa dibilang merupakan warna yang lebih baik daripada warna acak, ini bukanlah indikator kuat dari keadaan aktif.
Rekomendasi
Jadi apa rekomendasi umum untuk tombol sakelar negara yang berfungsi sebagai indikator status? Solusi teraman adalah menggunakan 2 elemen UI, satu untuk status saat ini dan satu untuk tindakan pengalih status, seperti dalam contoh Tesla.
Jika mau, Anda dapat menggabungkan keduanya dalam satu kontrol, seperti halnya Zoom. Kontrol bisu terdiri dari dua komponen terpisah:
- Label teks yang menunjukkan apa yang terjadi jika pengguna mengklik kontrol ini.
- Ikon yang menunjukkan status sistem saat ini
Mengklik salah satunya akan mengubah status.
Dalam desain Zoom, ikon dimaksudkan untuk mewakili keadaan saat ini, dan label menunjukkan apa yang akan terjadi jika pengguna mengklik tombol tersebut. Mengklik ikon atau label mengubah status.
Ingat, tujuan Anda saat mengaktifkan / menonaktifkan adalah untuk memastikan pengguna dengan cepat memahami keduanya:
- Kondisi saat ini
- Apa yang terjadi jika mereka mengklik kontrol ini
Perkirakan dua kondisi yang akan dilalui sistem.
Apakah jelas bahwa ini adalah dua kondisi yang berlawanan?
- Jika tidak, itu mendukung desain dengan dua kontrol: satu untuk keadaan saat ini dan satu untuk tindakan untuk transisi ke keadaan lain.
- (, , ), , , .
(, , ), ?
- , , ( ) .
- , — .
( Mute)?
- , .
- , .
Terima kasih atas waktunya dan berlangganan saluran tg UXHorn , tempat saya secara konsisten memposting artikel paling menarik tentang UX dan penelitian.