Haruskah tombol toggle menampilkan status saat ini, atau status yang akan diubah? (2010)

Haruskah tombol toggle menampilkan status saat ini, atau status yang akan diubah?

• Tombol toggle juga harus berperan memberi tahu pengguna tentang status saat ini.
• Saat tombol toggle berada dalam keadaan 'aktif', menampilkan 'nonaktif' dapat menimbulkan kebingungan.
• Hindari penggunaan kontrol flip-flop pada tombol atau menu.

Toggle switch dapat menampilkan status saat ini dan status yang akan diubah sekaligus

• Ada cara untuk menampilkan status saat ini dan status yang akan diubah sekaligus dengan menempatkan teks di luar tombol.
• Sebagai contoh, desain switch iOS ditampilkan berwarna biru saat statusnya 'aktif', sedangkan 'nonaktif' tidak demikian.
• Desain switch OS X tidak ambigu, dan pengguna dapat mengetahui status saat ini dengan jelas.

Penggunaan tombol toggle Twitter sebaiknya dihindari

• Tombol toggle Twitter memberikan informasi saat mouse diarahkan ke atasnya, tetapi di layar sentuh hal ini dapat menimbulkan kebingungan.

Dalam bahasa Inggris, "on" dan "off" bisa menjadi adverbia maupun adjektiva

• Sebaiknya gunakan kata kerja atau adjektiva pada tombol untuk memberikan label yang jelas.
• Contoh: "aktifkan/nonaktifkan", "mulai/berhenti"

Penting untuk membedakan status dan tindakan

• Saat toggle merepresentasikan tindakan (misalnya: putar/jeda), tombol harus menampilkan tindakan yang akan terjadi saat diklik.
• Saat toggle merepresentasikan opsi (misalnya: acak/pemutaran normal), tombol harus menampilkan status saat ini.

Bisa mempertimbangkan penggunaan checkbox

• Jika pergantian status dapat diringkas sebagai pertanyaan 'ya/tidak', penggunaan checkbox mungkin cocok.

Gunakan cara yang menampilkan status dan tindakan sekaligus, alih-alih tombol toggle

• Saat dalam keadaan nonaktif, tombol tidak ditegaskan; saat dalam keadaan aktif, tombol ditegaskan untuk menampilkan status.

Bisa mempertimbangkan untuk tidak menggunakan tombol toggle

• Misalnya, untuk acak/pemutaran normal, dapat digunakan checkbox berlabel 'Acak'.

Tombol 'Suka' Facebook adalah contoh tombol toggle yang baik

• Di aplikasi Android Facebook, tombol 'Suka' ditampilkan abu-abu saat nonaktif dan biru saat aktif.

Menampilkan status saat ini dan tindakan sekaligus adalah yang paling jelas

• Sebaiknya sediakan label untuk status nonaktif bersama tombol yang dapat diklik untuk mengubah ke status aktif.

Pendapat GN⁺:

• Desain tombol toggle dapat sangat memengaruhi pengalaman pengguna, dan penting untuk menampilkan dengan jelas status saat ini serta status yang akan diubah.
• Desain switch OS X adalah contoh yang baik karena memungkinkan pengguna memahami status saat ini secara intuitif tanpa menimbulkan kebingungan.
• Tulisan ini dapat membantu para pengembang perangkat lunak menciptakan pengalaman pengguna yang lebih baik dengan memberikan elemen-elemen penting yang perlu dipertimbangkan saat merancang antarmuka pengguna.

[GN⁺]

Opini Hacker News

• Kebingungan soal tombol mute di Microsoft Teams

  • Di aplikasi Teams, tombol mute menampilkan ikon mikrofon yang dicoret, dan saat mute aktif itu berarti mikrofon dalam keadaan mati.
  • Di aplikasi telepon, ikon yang sama justru menunjukkan tidak mute, lalu berubah menjadi latar belakang terisi untuk menandakan status mute.
  • Tidak masalah jika tombol menunjukkan status saat ini, tetapi pengguna perlu tahu seperti apa tampilannya ketika status berubah.
  • Kebingungan seperti ini mungkin muncul dari desain 'flat UI', ketika elemen desain harus dipahami tanpa acuan dari dunia nyata.

• Masalah tombol toggle yang tidak konsisten di UI mobil Tesla

  • Tombol pada sistem HVAC merespons secara berbeda tergantung cara sentuh dan lamanya ditekan.
  • Saat mengemudi dan hanya bisa melirik layar sebentar, kesalahan sentuhan kecil bisa menyebabkan operasi yang tidak diinginkan.
  • UI koneksi Bluetooth Tesla sangat membingungkan, dan ini jadi lebih bermasalah saat sedang mengemudi.

• Mekanisme umpan balik status pada push button switch NASA

  • Saat sakelar mati, semua lampu mati. Ketika sakelar ditekan, lampu kuning menyala, lalu saat perangkat yang diinginkan benar-benar menyala, lampu kuning mati dan lampu hijau menyala.
  • Ini memberi konfirmasi bahwa sakelar sudah ditekan sekaligus konfirmasi bahwa perangkat benar-benar berfungsi.

• Penyesalan atas menghilangnya checkbox

  • Checkbox itu sempurna dan tidak ambigu, tetapi tidak disukai para desainer smartphone.

• Desain yang membingungkan pada UI layar dashboard Tesla

  • Label bertuliskan 'Open' memang jelas menunjukkan bahwa bagian itu terbuka, tetapi pengguna tidak bisa tahu bahwa itu sebenarnya tombol untuk membuka komponen tersebut.

• Masalah toggle button dan cara mengatasinya

  • Toggle button bisa membingungkan karena sekaligus memuat status sistem dan tindakan untuk mengubah status tersebut.
  • 'ON' yang menunjukkan status saat ini pada praktiknya bisa berarti tindakan untuk mengubahnya menjadi 'OFF'.
  • Solusinya adalah memisahkan status dan tindakan, misalnya dengan menaruh label di luar tombol atau membiarkan ikon tetap sama lalu mengubah atribut lain pada tombol.

• Masalah asinkron pada toggle button

  • Saat tombol ditekan, status sistem mungkin tidak langsung berubah, sehingga pengguna perlu menekannya beberapa kali untuk memastikan berubah ke status yang diinginkan.
  • Jika ada tombol terpisah untuk masing-masing status, menekannya berulang kali tidak akan menjadi masalah.

• Kelebihan desain slider toggle Apple

  • Slider toggle Apple dengan jelas menunjukkan status saat ini dan status yang akan berubah.
  • Fitur yang aktif dibedakan dengan latar belakang biru, sedangkan fitur nonaktif dengan latar belakang abu-abu.

• Perlunya penandaan yang jelas untuk status saat ini dan status yang akan berubah pada toggle button

  • Harus jelas apa status saat ini, dan akan berubah menjadi status apa ketika toggle diubah.
  • Tombol play/pause mengikuti preseden perangkat fisik, dan karena apakah media sedang diputar itu jelas, pengguna tetap memahaminya meski ikon tidak berubah.
  • Sedikit mengubah warna toggle tidak banyak membantu; label tetap diperlukan.