Haruskah Tombol Toggle Menampilkan Status Saat Ini, atau Status yang Akan Diubah? (2010)

 (ux.stackexchange.com)
3 poin oleh GN⁺ 2024-02-13 | 1 komentar | Bagikan ke WhatsApp
  • Jika aksi yang langsung dijalankan seperti Play/Pause dan pengaturan yang dipertahankan seperti Shuffle diperlakukan sebagai toggle yang sama, pengguna dapat bingung antara status saat ini dan tindakan berikutnya
  • About Face 2.0 menyarankan untuk menghindari flip-flop button yang menempatkan dua pilihan dalam satu kontrol, dan menganggap penyampaian status saat ini lebih penting daripada penghematan ruang
  • Solusinya lebih dekat ke menulis tindakan sebagai frasa verba seperti Switch to portrait mode, atau memisahkan status dan transisi dengan radio button, checkbox, label status + tombol aksi
  • Jika teks berada di dalam tombol seperti switch ala iOS, ON bisa ambigu apakah itu status saat ini atau status berikutnya; jika teks status ditempatkan di luar tombol seperti gaya OS X dan Windows Metro, ambiguitas berkurang
  • Konvensi Play/Pause secara pengecualian dapat menampilkan tindakan berikutnya, tetapi untuk opsi seperti Shuffle, Like, dan Auto save, lebih aman menekankan status saat ini dan melengkapinya dengan tooltip, warna, status tertekan, atau label terpisah

Benturan antara Menampilkan Status dan Menampilkan Aksi

  • Pada tombol yang berpindah antara dua status seperti Play/Pause dan Shuffle/Regular Play, isu utamanya adalah apakah harus menampilkan status saat ini atau status transisi yang akan terjadi setelah diklik
  • Play/Pause mudah diterima pengguna sebagai aksi “mulai memutar” atau “jeda”, sehingga konvensi menampilkan Play saat berhenti dan Pause saat sedang memutar sudah familier
  • Shuffle/Regular Play lebih mirip status opsi untuk cara pemutaran, sehingga jika menampilkan status yang akan diaktifkan, pengguna bisa bingung apakah saat ini sedang shuffle atau memutar berurutan
  • Pemutar musik bawaan Xbox 360 dibahas sebagai contoh yang menimbulkan kebingungan karena ketika mode shuffle aktif ia menampilkan ikon pemutaran langsung, dan pada kondisi sebaliknya juga menampilkan kebalikannya

Rekomendasi About Face: Hindari flip-flop button

  • About Face 2.0 mengklasifikasikan tipe ini sebagai flip-flop button, “idiom pilihan yang harus dihindari”
  • Jika satu tombol mengendalikan dua opsi yang saling eksklusif, ruang memang dihemat, tetapi sulit memenuhi kewajiban kedua sebuah kontrol, yaitu menyampaikan status saat ini
  • Ketika tombol bertuliskan ON padahal status saat ini mati, status pengaturan menjadi tidak jelas; jika pada status mati tombol bertuliskan OFF, pengguna bisa bingung di mana tombol ON berada
  • Solusi yang direkomendasikan ada dua
    • Uraikan aksi tombol sebagai frasa verba seperti Switch to portrait mode
    • Gunakan teknik UI lain yang memperlihatkan pilihan status, seperti dua radio button

Membedakan Tombol Aksi dan Tombol Status

  • action button dan state button harus dirancang secara berbeda
    • Jika berupa aksi seperti Play/Pause, tampilkan apa yang akan terjadi saat diklik
    • Jika berupa opsi seperti Shuffle/Linear, tampilkan status saat ini
  • Untuk tombol Shuffle yang hanya berupa ikon, pendekatan yang tepat adalah mempertahankan satu ikon shuffle dan membuatnya tampak aktif/nonaktif sesuai status
    • Saat aktif, buat lebih terang atau terlihat seperti tombol yang sedang ditekan
    • Saat nonaktif, pengguna harus bisa langsung mengetahui bahwa pemutaran berurutan sedang berlaku
    • Di lingkungan yang mendukung hover, tooltip dapat ditambahkan agar lebih jelas
  • Ada pendapat bahwa Play/Pause pun bisa mengurangi kebingungan jika label tidak diubah dan tombol Play ditampilkan dalam status tertekan

Ambiguitas yang Dibuat oleh Teks di Dalam Tombol

  • ON dan OFF dalam bahasa Inggris dapat dibaca baik sebagai status maupun tindakan transisi, sehingga jika diletakkan di dalam tombol, apakah itu status atau perintah bisa menjadi kabur
  • Pasangan kata yang lebih jelas berikut ini diusulkan
    • Enable / Disable
    • Enabled / Disabled
    • Start / Stop
    • Running / Stopped
  • Pemilihan kata saja tidak sepenuhnya menghilangkan masalah
    • Pengguna mungkin tetap harus menilai apakah teks tombol adalah status atau perintah
    • Perbedaan antara Enable dan Enabled mungkin tidak cukup jelas di dalam UI

Label di Luar Tombol dan Pemisahan Status+Aksi

  • Jika teks tidak dimasukkan ke tombol itu sendiri, melainkan ditempatkan di luar tombol, status saat ini dan status yang dapat dituju bisa ditampilkan bersama
  • Switch ala OS X tidak mengatakan ON atau OFF pada tombolnya; teks di sekitar switch menunjukkan status, sehingga mengurangi pertanyaan “apakah tombol ini status saat ini atau aksi berikutnya”
  • Pendekatan Windows Metro UI menampilkan status saat ini melalui warna tombol, lalu mengonfirmasi kembali status saat ini dengan teks On/Off di bawah teks opsi
  • Pendekatan label status + tombol aksi seperti Online [Go offline] juga mungkin digunakan
    • Online adalah label status saat ini yang tidak bisa diklik
    • Go offline adalah aksi transisi yang bisa diklik
    • Setelah diklik, berubah menjadi Offline [Go online]
  • Pendekatan ini lebih ringkas daripada radio button, sekaligus dapat memisahkan peran visual status dan aksi

Checkbox, Radio Button, dan Status Tertekan

  • Opsi seperti Shuffle akan lebih sedikit menimbulkan kebingungan jika direpresentasikan sebagai checkbox berlabel Shuffle
  • Jika menggunakan satu kata dan menampilkan aktif/tidak aktif melalui status centang, beban untuk menafsirkan makna di antara beberapa kata akan berkurang
  • Sebaiknya hindari ungkapan dengan awalan negatif
    • Awalan seperti Not, Non-, Un-, Dis-, Im-, Mis-, In-, Il-, Ir- dapat terbaca seperti negatif ganda ketika dikombinasikan dengan status tidak dicentang
  • Tombol Like di aplikasi Facebook Android adalah contoh yang diberi penekanan warna abu-abu saat nonaktif dan biru saat aktif
    • Namun warna saja mungkin tidak cukup bagi pengguna dengan gangguan penglihatan warna

Contoh UI Nyata dan Hal yang Perlu Diperhatikan

  • Ada kompromi seperti tombol Shuffle di web app Spotify yang menggunakan warna netral saat nonaktif dan warna penekanan saat aktif
  • Transisi hover ala Twitter adalah pendekatan yang menampilkan status saat ini, lalu menampilkan aksi ketika kursor diarahkan ke atasnya
    • Ini bisa bekerja di lingkungan dengan hover, tetapi pendekatan yang sama mungkin tidak berlaku pada touchscreen
  • Switch ala iOS menampilkan dua status dalam satu kontrol, tetapi juga dikritik karena ON ambigu apakah itu status saat ini atau status yang akan berubah ketika ditekan
  • UI pengaturan Discord adalah contoh toggle bergaya checkbox yang membuat status saat ini dan status masa depan lebih jelas
  • Ada juga contoh yang memperlihatkan status dan kemungkinan pengoperasian sekaligus, seperti toggle mouseover Evernote dan switch pegangan ala toilet pesawat

Prinsip Desain

  • Jika satu kontrol sekaligus bertugas menyampaikan status dan menyampaikan aksi, ambiguitas muncul
  • Status saat ini harus selalu disampaikan dalam bentuk apa pun
    • Pada Play/Pause, umpan balik eksternal seperti musik yang terdengar atau waktu yang berjalan dapat melengkapi status saat ini
    • Pada Shuffle, status sulit diketahui sebelum melihat bagaimana lagu berikutnya benar-benar dipilih, sehingga penanda status pada tombol itu sendiri lebih penting
  • Pendekatan yang menggilir beberapa status dengan satu tombol dapat memadatkan UI dan mengelompokkan pengaturan yang saling eksklusif, tetapi pengguna harus bisa memahami status saat ini dengan cepat
  • Karena konvensinya kuat, Play/Pause bisa menjadi pengecualian yang menampilkan aksi berikutnya; untuk toggle opsi umum, menekankan status saat ini lebih konsisten

Bacaan terkait

1 komentar

 
GN⁺ 2024-02-13
Pendapat di Hacker News

  • Belakangan ini saya benar-benar frustrasi karena Microsoft Teams. Di aplikasi desktop, saat dalam kondisi mute terlihat ikon mikrofon dengan garis coretan, lalu saat mute dimatikan ikonnya berubah menjadi mikrofon tanpa garis, jadi mudah dipahami
    Namun kalau bergabung lewat aplikasi ponsel, ikon mikrofon bergaris yang sama berarti “saat ini tidak mute, tekan tombol ini untuk mute”. Setelah ditekan pun ikonnya tetap mikrofon bergaris, hanya latarnya yang berbalik
    Saya jadi bertanya-tanya apakah di satu sisi itu tombol “nyalakan mikrofon”, sementara di sisi lain tombol “nyalakan mute”, sehingga memakai ikon yang sama. Pada akhirnya, untuk menilai status saat ini kita harus tahu seperti apa tampilan tombol pada status sebaliknya, jadi saya selalu menekan beberapa kali untuk memastikan aplikasi ini memakai pendekatan yang mana
    Saya penasaran apakah ini harga yang harus dibayar dari flat UI yang kehilangan acuan dunia nyata

    • Menurut saya sebagian kebingungan ini berasal dari pola pikir bahwa mikrofon pada dasarnya menyala secara default. Pola yang menganggap “mikrofon aktif” sebagai default dan mute sebagai penyimpangan dari keadaan itu berlanjut dari UI sistem konferensi telepon, telepon analog, bahkan lebih jauh lagi sampai masa ketika benar-benar ada kabel fisik yang tersambung di antara para pihak
      Mixer audio untuk musik live atau rekaman biasanya juga memakai pola yang sama. Ada tombol “Mute” yang lampu merahnya menyala saat channel dimatikan, dan hanya sebagian perangkat yang menampilkan channel aktif dengan tombol “ON” di atas fader yang menyala
      Saya rasa sekarang sudah waktunya aplikasi rapat beralih ke pendekatan audio mati secara default. Ini sudah mulai terlihat sedikit demi sedikit dari cara elemen UI menyala saat pembicara berbicara
    • Ini tombol yang benar-benar tidak boleh membingungkan
    • Di Plex juga bikin frustrasi dengan cara yang mirip karena UI berbeda-beda antar aplikasi. Kalau melihat season serial TV di ponsel, episode yang sudah ditonton diberi centang biru, tetapi kalau melihat season yang sama di TV, tidak ada centang biru dan episode yang belum ditonton diberi segitiga kuning
      Setiap berpindah perangkat, otak saya selalu sempat tersendat
    • Discord lebih buruk lagi. Tombol mute mikrofon dan tombol mematikan kamera bekerja dengan cara yang saling berlawanan
    • Masalah tampilan/kontrol mikrofon punya sisi yang cukup menarik. Jika tidak ada umpan balik visual langsung, kita tidak tahu mikrofon berada di mode apa sampai orang lain bereaksi atau tidak bereaksi
      Bahkan saat menyala pun, ini adalah alat dengan jeda umpan balik yang besar. Lawan bicara mungkin saja berhenti, atau sedang berpikir sebelum menjawab, sehingga sering kali harus dites dua-tiga kali sebelum yakin
      Ini berbeda dari mode gelap yang langsung terlihat saat dinyalakan atau dimatikan. Karena itu, apa pun aksi tombolnya, indikator visual yang menunjukkan status saat ini sangat membantu, dan tidak mengherankan kalau khusus pada mikrofon ada banyak upaya mencampur “status” dan “kontrol”

  • Kalau Anda pemilik Tesla, pasti bisa relate. Tombol toggle di UI mobilnya terlalu beragam, tanpa konsistensi maupun standar
    Misalnya tombol AC adalah satu tombol yang menampilkan suhu, tetapi responsnya berbeda tergantung bagaimana dan berapa lama ditekan. Tekan singkat memunculkan popup kecil, tekan agak lama memunculkan panel kontrol AC penuh, dan kalau ditahan beberapa detik, AC yang sedang menyala bisa saja mati. Masalahnya, semua ini harus dilakukan saat mengemudi, ketika Anda harus melihat jalan
    Kalau koordinasi tangan-mata meleset sedikit saja—terutama saat melewati jalan bergelombang ketika mengemudi, yang kemungkinannya besar—meleset 1 mm saja bisa menekan tombol lain dan memicu tindakan yang tidak diinginkan
    Bencana lain adalah UX koneksi perangkat Bluetooth. Setidaknya pada implementasi Model S 2012–2022, itu salah satu campur aduk UI terburuk yang pernah saya lihat pada produk yang dirilis. Tombol kanan bawah tetap bertuliskan “Connect” bahkan setelah sudah tersambung, sementara di sisi layar yang berlawanan, kiri atas, tertulis “Connecting...” lalu menampilkan bahwa koneksi selesai
    Ini juga UI di dalam mobil, jadi kalau sedang mengemudi Anda hanya bisa melihatnya sekilas. UI Bluetooth Tesla saja sudah cukup untuk mengisi satu bab buku UI, karena buruknya luar biasa

    • Di aplikasi mobile Tesla, toggle yang tepat berdampingan pun tidak konsisten satu sama lain
      Gembok tertutup berarti pintu terkunci, dan jika ditekan pintu akan terbuka
      Kata “Open” pada bagasi berarti bagasi tertutup, dan jika ditekan bagasi akan terbuka
    • Saya berharap tulisan seperti ini dibuat langsung. Analisis semacam ini selalu menarik, dan kalau topiknya Tesla, apalagi melibatkan Elon, sepertinya akan mendapat lebih banyak perhatian
    • Cara saya memakai tombol AC seperti ini: pertama saya melihat tombolnya; kalau agak transparan dan saya ingin menyalakannya, cukup klik maka akan menyala. Jika diklik lagi, kontrol penuh terbuka, dan kalau digeser ke bawah akan tertutup
      Saat ingin mematikannya, saya tekan lagi tombolnya untuk membuka kontrol penuh lalu menekan tombol mati. Suhu dinaikkan atau diturunkan dengan mengklik tombol lalu menggesernya ke kiri atau kanan
      Bagi saya ini terlihat cukup intuitif. Saat mengemudi berikutnya saya akan mencoba cara mematikan dengan menekan lama; kelihatannya cukup berguna
    • Pada Model Y tahun 2023, Bluetooth sebenarnya bekerja dengan baik. Saya puas karena di Audi dan Ford lama saya tidak begitu
      Melihat implementasinya yang selalu seburuk ini, saya jadi bertanya-tanya apakah spesifikasi Bluetooth itu sendiri punya bagian yang sangat ruwet
    • Ini seharusnya ilegal

  • Dulu saya pernah punya beberapa push-button switch NASA, dan di dalamnya ada dua bohlam. Saat switch mati, keduanya mati; saat tombol ditekan, bohlam kuning menyala untuk menunjukkan bahwa operasi switch sudah diterima
    Ketika perangkat yang memang ingin dinyalakan benar-benar menyala, lampu hijau menyala dan lampu kuning mati. Jadi status kuning adalah konfirmasi bahwa switch telah di-toggle, sedangkan hijau adalah konfirmasi bahwa aksi yang diinginkan benar-benar terjadi; ini mekanisme umpan balik status yang menarik

    • Ini cara yang bagus, dan pesawat juga melakukannya seperti ini[1]. Masalah seperti ini sudah dipecahkan oleh orang-orang yang sangat mementingkan kegunaan, tetapi industri komputer lambat mengadopsi hal semacam ini dari bidang lain
      Cara menaruh label di luar switch juga bekerja dengan baik[2]
      [1]: https://my737ng.com/wp-content/uploads/2014/08/cp_mcp_header...
      [2]: https://i.pinimg.com/originals/2c/37/0a/2c370a3f4018cfa9c3ef...
    • Sebagian besar karier awal saya dihabiskan menulis software GUI untuk mengendalikan hardware jarak jauh dan menampilkan statusnya, dan tak lama kemudian saya menyingkirkan semua elemen UI yang menyimpan statusnya sendiri. Elemen seperti toggle, switch, checkbox, dan radio button, yang mengubah perilakunya bergantung pada statusnya sendiri, tidak jarang membuat status interface dan hardware tidak sinkron
      Sebagai gantinya, saya menaruh tombol untuk setiap pilihan, dan membuat tombol yang sesuai dengan status saat ini menyala. Misalnya toggle on/off saya ubah menjadi dua tombol, “on” dan “off”. Awalnya keduanya abu-abu; jika dari hardware diterima SOH bahwa statusnya menyala, tombol on menjadi hijau, dan jika mati, tombol off menjadi merah
      Jika komunikasi terputus selama beberapa waktu, semua warna dibuat pudar untuk menunjukkan bahwa statusnya sudah usang. Saat tombol ditekan, status sebelumnya tetap ditampilkan sampai status baru kembali, tetapi hanya kelompok tombol itu yang ditampilkan pudar
      Pengguna bisa kapan saja secara langsung memerintahkan on atau off, terlepas dari status apa yang menurut UI sedang berlaku. Sebaliknya, toggle hanya bisa mengubah ke “status lain”
      Radio button juga diubah menjadi kelompok tombol yang berisi nama-nama status, dan hanya item yang menurut UI sedang aktif yang diberi warna. Sebagian besar status netral berwarna biru; jika ada makna baik/perhatian/buruk yang ingin ditekankan operator, digunakan hijau/kuning/merah
      Desainnya tidak biasa, tetapi para operator umumnya memahaminya tanpa pelatihan khusus. Tombol terlihat seperti tombol sehingga tampak bisa diklik, jaraknya menunjukkan bahwa mereka satu kelompok, dan pada UI era 90-an abu-abu adalah default, sehingga tombol yang warnanya berbeda secara alami menonjol sebagai status saat ini
      Saya tidak tahu apakah itu masih berlaku di lingkungan sekarang, ketika elemen UI memakai warna apa saja untuk alasan estetika atau untuk mendorong transisi, dan hanya sesekali menyampaikan informasi. Kami juga bereksperimen dengan menampilkan status perintah dan status yang diterima secara bersamaan seperti tombol NASA, tetapi semuanya justru lebih membingungkan
    • Saya suka. Saya tidak tahu mengapa industri kita tidak lebih sering merujuk ke bidang penerbangan/militer, tempat salah paham bisa membunuh orang

  • Wahai checkbox, 1990–2009. Sempurna dan tidak ambigu, tetapi entah mengapa dibenci para desainer smartphone

    • Yang lebih lucu, sesuatu yang pada dasarnya adalah checkbox bisa dibuat cukup cantik dan terlihat seperti toggle. Ini bukan contoh yang bagus, tetapi menunjukkan bahwa tidak harus berupa kotak dengan tanda centang: https://www.ranecommercial.com/legacy/hal/MobileHelp/Advance...
    • Sistem konsultasi video medis/telemedisin yang saya pakai merusak checkbox. Di interface pesan langsung, label field checkbox berubah tergantung apakah dicentang atau tidak
      Jika tidak dicentang tertulis “Not Urgent”, jika dicentang tertulis “Urgent”. Saya beberapa kali mencentangnya dengan cepat, mengira sudah menandai bahwa itu tidak mendesak, lalu menekan kirim
    • Saya setuju bahwa checkbox itu sempurna. Namun sebagian alasannya juga karena orang tidak ingin mengisi form di smartphone
      Checkbox bawaan browser terlalu kecil untuk ditekan dengan ibu jari di smartphone, sehingga sulit sering dipakai
    • Siapa yang membuat widget checkbox? Di System 1 (1984) ada “x box” yang setara dengan tanda centang di menu, tetapi sejauh yang saya tahu itu bukan checkbox itu sendiri
    • Apakah Jony Ive adalah Thomas Midgley Jr di dunia desain? Ia memopulerkan flat design yang kurang usable lewat iOS 7, dan juga bertanggung jawab atas mouse iMac berbentuk bulat serta keyboard MacBook yang rapuh

  • Contoh terburuk yang pernah saya lihat adalah UI layar dashboard Tesla. Di atas gambar mobil ada label yang tidak terlihat seperti tombol, dan tertulis “Open”
    Ini jelas terbaca sebagai berarti bagian itu sedang terbuka, tetapi makna sebenarnya bukan itu. Label tersebut adalah tombol untuk membuka bagian itu, dan pengguna tidak punya cara untuk tahu

    • Betul. Akhir pekan ini saya mengemudikan Tesla sewaan, dan beberapa kali bingung serta panik karena mengira bagasi depan dan belakang sama-sama terbuka
    • 100% setuju. Itu hal kedua paling menyebalkan dari UX bagasi Tesla. Yang pertama adalah animasi yang terlalu panjang yang harus ditunggu setelah beralih ke parkir agar bisa membuka bagasi
      Secara keseluruhan UX Tesla jauh lebih maju daripada mobil lain, tetapi hal-hal kecil seperti ini sangat menyebalkan
    • Menurut saya sama sekali tidak membingungkan. Rendering mobilnya jelas menunjukkan status terkini bagasi, dan saat tombol buka ditekan, ada animasi bagasi terbuka juga
      Sepertinya tiap orang merasakannya berbeda
    • Menariknya, ini masalah bahasa Inggris. Dalam bahasa Inggris, kata kerja dan kata sifat sering sama. Kalau dalam bahasa Spanyol, “Abrir” (infinitif verba) dan “Abierto” (adjektiva) berbeda, jadi hal seperti ini tidak terjadi
      Sepertinya bisa dihindari dengan menulis “Do open” atau “Is open”, tetapi apakah itu terdengar canggung bagi penutur asli?
    • Apakah ini ciri yang hanya ada dalam bahasa Inggris? Misalnya dalam bahasa Spanyol, kata kerja dan kata sifat adalah kata yang berbeda

  • Masalah inti tombol toggle adalah satu objek memuat status sistem sekaligus aksi untuk mengubahnya
    Karena itu, “ON” yang terlihat pada tombol tidak jelas apakah menunjukkan status saat ini atau aksi yang akan dijalankan saat ditekan
    Solusinya adalah memisahkan status dan aksi sampai batas tertentu. Ada beberapa cara, misalnya seperti salah satu jawaban di tautan itu: menulis label di luar tombol
    Jika ini bukan switch, melainkan tombol toggle seperti contoh Teams, ikon bisa dibiarkan apa adanya dan atribut tombol yang lain diubah. Misalnya, seperti yang sudah dilakukan tanpa masalah selama puluhan tahun, tombol dibiarkan dalam keadaan tertekan untuk menunjukkan status “ON”

    • Di properti suara sistem Windows 11 ada opsi “Allow apps and Windows to use this device for audio”, dan di sebelahnya ada tombol “Don't allow”. Jadi sama sekali tidak jelas status saat ini apa

  • Saya setuju dengan kesimpulannya, tetapi status saat ini dan status apa yang akan terjadi jika toggle diubah harus sama-sama jelas. Terlalu sering kita baru tahu bahwa sebenarnya tidak perlu mengubahnya setelah mencoba men-toggle
    Poin soal play/pause menarik, karena tampaknya bertentangan dengan kesimpulan. Namun itu mengikuti preseden fisik yang sudah dipahami dengan baik, dan biasanya juga jelas apakah musik atau video sedang diputar. Jadi meskipun ikon tombol tidak berubah, pengguna bisa memahami apa yang akan terjadi saat menekannya
    Kembali ke toggle dan UI, mengubah warna toggle dari abu-abu muda ke abu-abu yang sedikit lebih muda itu sama sekali tidak membantu. Tolong beri label. Kalau label tidak cocok dengan motif desain, cari desainer yang lebih baik

    • Jika mengikuti preseden fisik, gambar pada tombol seharusnya menunjukkan aksi, yaitu play, dan status visual tertekan/tidak tertekan menunjukkan apakah aksi itu aktif
      Desainer perangkat lunak tidak mengikuti ini dan membuat cara mengganti ikon play/pause satu sama lain, sehingga menimbulkan kebingungan baru. Alasannya mungkin bukan demi ramah pengguna, melainkan karena tombol 3D skeuomorphic sudah tidak populer
      Satu-satunya kelebihan penunjuk status adalah saat ada masalah. Terutama pada audio, ini sangat umum: mute, headphone terlepas, driver audio Linux rusak lagi, dan sebagainya
      Sampai sekarang pun, saat melihat tombol play/pause saya masih sedikit mengalami disonansi kognitif, dan saat ada masalah saya tidak bisa 100% yakin apa tepatnya arti tombol pause, jadi kadang saya menekannya dua kali saja
    • Saya setuju bahwa status saat ini harus jelas. Pada sakelar lampu, kita tidak perlu tahu arah mana yang berarti “menyala”, dan memang biasanya tidak tahu. Karena cukup melihat apakah lampunya menyala
    • Pernyataan “beri label; kalau label tidak cocok dengan motif desain, cari desainer yang lebih baik” tidak membantu dan tidak realistis, terutama di mobile
      Misalnya, di Spotify tidak ada ruang untuk menempelkan label di belakang setiap tombol. Ruang untuk menampilkan album art juga dibutuhkan, dan saya menginginkannya
      Ini bukan soal desainer yang lebih baik; keterbatasan ruang memang nyata. Beberapa fungsi harus bisa langsung dilakukan dengan satu ketukan. Saya tidak ingin shuffle disembunyikan di balik menu pop-up

  • Tombol toggle harus menunjukkan status saat ini. Checkbox adalah contoh yang baik
    Muted [] dan Muted [x] cukup jelas
    Yang menjadi sulit adalah ketika desainer membuat UI yang hubungan antara kata dan desain visualnya tidak jelas. Misalnya Mute Off [---( )], Mute On [( )---] seperti ini mencampurkan aksi ke dalam deskripsi status, sehingga tidak jelas artinya

    • Jika ruang cukup, tiruan toggle dengan label di kedua sisi bekerja dengan baik
      Loudspeaker [()---] Crossed-out loudspeaker
    • Tanda centang adalah tick[1]. Di halaman status[2], tick berarti “beroperasi” dan silang berarti gagal. Dari sudut pandang “jelas”, Muted [x] bisa terbaca sebagai sesuatu yang gagal
      Untuk memahaminya secara berbeda diperlukan pembelajaran UX komputer, dan itu kebalikan dari kejelasan. Atau bisa juga berarti objek yang harus diklik saat ingin mute, seperti “X marks the spot”
      [1] Unicode U+2714 https://www.compart.com/en/unicode/U+2714
      [2] mis. https://www.githubstatus.com/
    • Checkbox menampilkan status saat ini dan pilihan yang tersedia bersama-sama dalam bentuk ya/tidak yang sederhana
      Tombol toggle membingungkan karena kita tidak bisa tahu maksud desainer. Sulit mengetahuinya kecuali kedua pilihan ditampilkan bersama
      Mute On[---()]Off
    • Tombol harus memberi tahu apa yang akan dilakukannya saat diklik. Jika ingin menampilkan status saat ini, itu adalah indikator terpisah, bukan tombol
      Tombol ada untuk diklik, jadi harus menyampaikan apa yang akan terjadi saat diklik
    • Pada sistem tulisan dari kanan ke kiri, apakah kedua sisinya juga harus dibalik?

  • Seperti sakelar analog, keduanya harus ditampilkan. Status saat ini harus ditampilkan dengan jelas dan tanpa salah paham, sekaligus status yang akan berubah ke sana juga harus ditampilkan
    Toggle slider kiri-kanan Apple melakukan ini dengan sangat baik. Terlihat jelas posisi toggle saat ini, ke mana ia akan berubah, dan apakah pengaturan saat ini mengaktifkan fungsi lewat latar biru atau menonaktifkannya lewat latar abu-abu

  • Salah satu desain yang saya sukai adalah adanya lampu status di sebelah switch, dan lampu itu menyala ketika statusnya aktif, tetapi sekarang saya tidak bisa menemukannya
    Hal terbaiknya adalah desain itu juga menyelesaikan jeda pada pekerjaan asinkron. Saat switch ditekan, switch-nya berubah, lalu beberapa saat kemudian lampunya menyala. Interaksi itu memberi keyakinan bahwa sesuatu benar-benar terjadi, sehingga sangat memuaskan

    • Tanpa melihat desain aslinya, ini juga tampak seperti contoh ambiguitas yang dibahas dalam tulisan. Tidak jelas apakah ikon berarti sesuatu yang akan terjadi nanti, atau sesuatu yang sedang terjadi sekarang
      Masalahnya adalah apakah itu status atau aksi. Desain tertentu mungkin saja tidak ambigu, tetapi dari penjelasannya saja tidak demikian
    • Jika setelah lama tidak mengunjungi halaman itu lalu melihat lampunya menyala, bagaimana kita tahu apakah itu berarti status saat ini ON atau klik akan mengubahnya menjadi ON? Apakah ada cara untuk langsung membedakannya hanya dengan melihat lampu menyala?
    • Kedengarannya seperti fitur antarmuka yang terlihat pada perangkat “smart”. Saya hanya familier dengan switch TP-Link Kasa, tetapi di UI aplikasinya juga ada ikon berwarna serupa dengan beberapa status, dan seingat saya status yang paling mendekati “menyala” berarti sudah dikonfirmasi dengan switch bahwa memang menyala
    • Sepertinya ini contoh penggunaan yang bagus untuk layar HDR. “Lampu indikator” bisa dibuat jauh lebih terang daripada bagian layar lainnya, sehingga sangat jelas bahwa lampunya sekarang menyala
      Tentu saja ini hanya akan berhasil kalau pengguna sejak awal tidak mengatur kecerahan layar terlalu tinggi