it-swarm.asia

Haruskah tombol sakelar menunjukkan statusnya saat ini atau status yang akan diubahnya?

Saya punya pertanyaan singkat tentang tombol yang berganti antara dua negara. (Pikirkan Mainkan/Jeda, atau Acak/Bermain Reguler.) Seperti yang tertulis dalam judul, haruskah sakelar menampilkan status saat ini atau keadaan yang akan ditransisikan?

Saya pikir orang sudah terbiasa dengan konvensi Play/Pause. Tetapi permainan Acak/Reguler mungkin lebih membingungkan jika Anda menunjukkan status transisi alih-alih saat ini. Sebagai contoh, pemutar musik bawaan pada Xbox 360 melakukannya dengan cara ini: ketika berada dalam mode acak, itu menunjukkan ikon untuk pemutaran langsung dan sebaliknya dan itu selalu membingungkan saya (apakah saya dalam mode acak atau putar langsung).

Saya melihatnya seperti ini: Mainkan/Jeda lebih seperti aksi seperti dalam mulai bermain atau berhenti bermain. Ya di belakang layar itu adalah transisi negara tetapi untuk pengguna, ada tindakan. Sedangkan Shuffle/Straight Play adalah sebuah opsi dan yang terbaik untuk menunjukkan keadaan saat ini (dan mungkin hanya memiliki satu ikon dan tombol perubahan untuk menunjukkan bahwa opsi ini diaktifkan/dinonaktifkan). Pikiran?

461
Michael Brown

Dalam Tentang Face 2. (ada v3 tapi saya belum mendapatkannya) Cooper dan Reimann (2003, hlm. 341-2) memperlakukan subjek ini di bawah heading "Tombol flip-flop: Sebuah idiom pilihan yang harus dihindari". Saya sangat menyarankan untuk membaca buku ini karena saya hanya akan memberikan kutipan:

Kontrol tombol flip-flop sangat efisien. Mereka menghemat ruang dengan mengendalikan dua opsi yang saling eksklusif dengan kontrol tunggal. Masalah dengan kontrol flip-flop adalah bahwa mereka gagal memenuhi tugas kedua dari setiap kontrol - untuk memberi tahu pengguna tentang keadaan mereka saat ini. Jika tombol mengatakan ON saat negara mati, tidak jelas apa pengaturannya. Namun, jika MATI ketika negara mati, di mana tombol ON? Jangan gunakan itu. Tidak pada tombol dan tidak pada menu!

Para penulis (dan saya menganggap ini sebagai otoritas pada subjek) menyajikan dua solusi yang mungkin: Anda harus mengeja tindakan tombol sebagai frase kata kerja (misalnya, Beralih ke mode potret, dengan demikian mengorbankan beberapa ruang yang disimpan) atau menggunakan beberapa teknik lain seluruhnya ( misalnya, dua tombol radio).

268
jensgram

Jawaban Singkat:

Jawaban yang terlambat, tapi saya terkejut tidak ada seorang pun di sini yang menunjukkan ini sebelumnya - adalah mungkin untuk sakelar sakelar untuk menunjukkan statusnya saat ini dan keadaan di mana ia akan berubah cukup dengan memiliki teks di luar tombol, bukan di atasnya.

Real Life Switches

Jawaban Panjang:

Seperti yang ditunjukkan dotancohen:

Masalahnya adalah bahwa dalam bahasa Inggris "on" dan "off" adalah kata keterangan dan kata sifat.

Tombol-tombol yang memiliki teks di luar tubuh mereka menggunakan fakta ini untuk keuntungan mereka! Baca terus ...


iOS On-Off Switch

Mari kita fokus pada keadaan yang berwarna biru dan mengatakan PADA misalnya.

iOS ON

Bisakah Anda tahu apakah sakelar AKTIF saat ini, atau jika sakelar akan menyala jika Anda memindahkan/mengklik/mengetuk penggeser? Apakah teksnya jelas? Apakah "AKTIF" di sini adalah status (kata sifat) atau tindakan (kata kerja)? Tidak jelas. Apakah warna berguna untuk membantu Anda memutuskan ini? Mungkin, tetapi tidak pasti - pengguna iOS mungkin terbiasa dengan keadaan desain ini, tetapi tidak ada yang tahu bagaimana pengguna non-iOS akan menafsirkan ini. Untuk melihat apa yang saya maksud, ambil sakelar perjalanan kehidupan nyata ini, yang memiliki desain yang sama dengan sakelar iOS - dapatkah Anda memberi tahu dengan pasti apakah sakelar perjalanan saat ini AKTIF?

Ambiguous Trip Switch

Pergantian di bawah ini sesuai dengan desain iOS, tetapi jauh lebih buruk ...

Ambiguous On-Off Switch

... itu bahkan tidak jelas yang setengah dari pegangan slide/klik!


Unambiguous On-Off Switch

Pertanyaan dari kutipan jensgram ...

Jika tombol mengatakan ON ketika keadaan mati, tidak jelas apa pengaturannya. Jika MATI ketika negara mati, bagaimanapun, di mana tombol ON?

... tidak pernah muncul di sini karena tombol tidak mengatakan ON atau OFF - itu hanya berdiri sendiri. Juga, tidak ada kebingungan tentang konteks kata ON dan OFF - mereka sangat jelas menyatakan (kata sifat) karena mengkliknya (dalam desain normal) tidak akan melakukan apa-apa!

Mungkin menarik untuk dicatat bahwa modifikasi pada desain ini akan memungkinkan teks pada sisi jauh dari tombol dibuat menjadi click-mampu/tap-mampu. Jika demikian, Word yang lebih dekat ke gagang saklar adalah status, sedangkan yang lain adalah aksinya, dan peran dibalik ketika sakelar diaktifkan.

Modded On-Off Switch

Meski begitu, perspektif pengguna dari sakelar tidak diubah - tidak ada titik di mana pengguna bingung tentang keadaan sakelar saat ini. Bahkan, desain dapat lebih ditingkatkan untuk keramahan pengguna dengan menyoroti kondisi saat ini:

Highlighted On-Off Switch


Win8 On-Off Switch

Warna tombol menunjukkan status saat ini (menyala = ON, seperti dalam kehidupan nyata), dan kata-kata Nyala/Mati di bawah teks opsi meyakinkan pengguna keadaan saat ini.

414
SNag

Apa pun yang Anda putuskan - tolong jangan lakukan apa yang Twitter lakukan.

Aargh don't change the button when I'm about to click it!

60
Daniel Alexiuc

Masalahnya adalah bahwa dalam bahasa Inggris "on" dan "off" adalah kata keterangan dan kata sifat. Karenanya, cari kata-kata pengganti yang kata kerja atau kata sifat untuk melabeli tombol dengan:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

suntingan sangat terlambat: Lihat perubahan hebat yang dirancang oleh rekan kerja saya, yang berhasil menjaga terminologi "hidup/mati" namun melakukannya dengan jelas:

on off switch

35
dotancohen

Sebuah kompromi yang masuk akal adalah memiliki tombol yang tidak disorot (mungkin memiliki warna latar belakang netral) ketika sedang dalam keadaan mati, dan menyorotnya (mengubah warna latar belakang) ketika sedang dalam keadaan on.

Misalnya, dengan melihat tangkapan layar aplikasi Spotify (web) ini, menurut Anda apakah shuffle menyala atau mati?

Shuffle is most certainly on

26
Marks Polakovs

Saya pikir Anda sudah benar dalam pertanyaan Anda.

Jika toggle adalah tindakan - Mainkan/Jeda - maka itu akan menunjukkan hal yang akan terjadi. Jadi sementara berhenti itu akan menampilkan Mainkan dan kemudian saat bermain menunjukkan Jeda.

Jika toggle adalah opsi - Shuffle/Linear - maka harus menunjukkan keadaan saat ini.

Bagaimana Anda menunjukkan bahwa kepada pengguna bahwa satu tombol adalah tindakan dan yang lainnya adalah opsi yang saya tidak yakin ...

25
ChrisF

Saya akan mengatakan bahwa itu tergantung pada kasusnya, seperti kata ChrisF, penting untuk memiliki perbedaan antara tombol aksi dan a tombol negara.

Jika tombol Anda memiliki teks, Anda dapat mengubah teks untuk menunjukkan bahwa mengkliknya akan melakukan sesuatu (mis: "Aktifkan putar acak"). Namun, dalam kasus Anda, karena ini hanya sebuah ikon, saya akan menggunakan hanya ikon acak yang terlihat diaktifkan/dinonaktifkan tergantung pada keadaan. Jika dinonaktifkan, maka harus jelas bagi pengguna bahwa itu adalah permainan langsung. Anda dapat menyalakannya atau menunjukkan tombol saat ditekan.

Pertimbangkan untuk menambahkan tooltip pada hover untuk membuatnya lebih jelas.

20
mbillard

Saya terkejut melihat tidak disebutkan teknik yang digunakan di iOS (dan di tempat lain), tombol tindakan/keadaan gabungan, di mana kedua opsi terlihat, dikelompokkan dan yang aktif disorot dengan jelas.

Seni ascii yang mengerikan untuk diperagakan:

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

Saya akan berhenti sebentar "jangan menggunakannya."

Saya sarankan tombol sakelar dapat diterima dalam kasus di mana ada yang jelas dan mematikan. Ini dapat terjadi, misalnya, ketika Anda memiliki garis tombol berwarna abu-abu yang menjadi berwarna saat Anda mengkliknya.

Inilah alasan Main/Pause berfungsi dalam banyak kasus. Tombol putar tidak begitu banyak beralih antara dua negara sebagai mengaktifkan/menonaktifkan. Itu berubah menjadi hijau terang saat dinyalakan (saya sedang bermain!), Berubah menjadi abu-abu dan menunjukkan || saat off (saya tidak bermain!).

Tombol-tombol lain melakukan hal yang sama, sehingga konsistensi menambah keterjangkauan. Itu mungkin juga didasarkan pada persepsi historis kita tentang tape deck atau VCR, yang memiliki tombol yang Anda tekan (yaitu pada keadaan) atau tertekan (yaitu off state) dan saya pikir ini adalah model mental yang bagus untuk diingat ketika mempertimbangkan beralih .

Tetapi bagaimanapun juga mereka tidak hanya "diaktifkan", di mana Anda tidak bisa mengganti toggle dengan kotak centang yang lebih buruk, saya akan default untuk "tidak menggunakannya," untuk semua alasan yang telah disebutkan.

PENAMBAHAN

Saya baru memperhatikan hari ini bahwa Evernote memiliki tombol yang cukup efektif. Mereka mengambil pendekatan mouseover, yang sebenarnya bekerja cukup baik. Perhatikan bahwa ini adalah kasus lain dari kontrol gaya on/off.

toggled off

toggled on

TAMBAHAN TAMBAHAN

Saya menemukan sakelar yang menarik ini hari ini dan diingatkan akan Tanya Jawab UX ini. Perhatikan bagaimana keadaannya segera jelas, dan fakta bahwa itu akan beralih ketika Anda menyentuhnya juga diperjelas oleh "pegangan" bertekstur (yaitu keterjangkauan) - Saya hanya tahu bahwa ketika saya mengambil kenop yang diangkat itu, itu akan beralih ke sisi yang berlawanan dan mengatakan kebalikan dari apa yang dikatakannya sekarang; itu seperti toilet pesawat terbang.

Jadi itu bisa dilakukan dengan baik.

toggled offtoggled on

20
Kato

Sudah ada 18 jawaban di sini jadi ini mungkin terlambat ke pesta, tetapi masuk akal untuk menggunakan kotak centang dalam situasi seperti itu. Beberapa contoh:

enter image description here

Dan ketika dipilih:

enter image description here

Ini mirip dengan pendekatan "redup/menyala" yang ("Suka" Facebook gunakan , tetapi dikombinasikan dengan kotak centang untuk visibilitas yang lebih baik. Bagaimanapun, poin kuncinya adalah hanya menggunakan satu kata (atau set kata) daripada mencoba membuat pengguna memutuskan antara beberapa kata.

Selain itu, buat poin untuk menghindari penggunaan awalan negatif (" Tidak", " Non -", " Batalkan - = "," Dis - "," Im - "," Mis - "," Dalam - "," Il - "," Ir - ") jika tidak maka pengguna harus melakukan" negatif ganda " dalam benaknya ketika dia punya  uncentang kotak centang:

enter image description here

20
Pacerier

Saya telah menggunakan Tombol Toggle untuk "Tambah" dan "Hapus" elemen ke koleksi menggunakan Tombol Toggle sederhana (satu dengan negara terlihat pada suatu waktu) yang memiliki status berikut.

  • ADD (jika tombol tidak pernah diklik)

  • HAPUS (jika tombol sebelumnya diklik dan item sekarang menjadi bagian dari koleksi)

TETAPI ini selalu mencubit saya sebagai pengguna awam (usia 50+), awalnya sulit untuk memahami apa yang telah terjadi dan mengapa tombol meminta "Hapus" bahkan sebelum saya mengetahui bahwa item itu sekarang menjadi bagian dari koleksi. Bit yang hilang dalam kasus ini adalah pesan notifikasi yang bertuliskan "Item Berhasil Ditambahkan". Saya menggunakan Pesan Status Berbasis Javascript yang muncul di bagian atas layar (menggunakan http://Twitter.github.com/bootstrap/javascript.html#alerts ) tetapi karena secara visual dipindahkan dari Unsur interaksi, saya hanya memecahkan sebagian masalah bagi beberapa pengguna.

Masalah Lain

Tombol Anda mengubah "Posisi" atau "Membalikkan sisi" setelah setiap klik. Kadang-kadang dikatakan "Saya adalah tombol add" dan beberapa kali tombol yang sama (di kolom yang sama antara tombol add lainnya) ia mengatakan "Saya menghapus tombol". Mengubah warna membantu tetapi ini masih dua peran yang berlawanan diambil oleh satu tombol. BUKAN SO KANAN.

Solusi Saya:

Solusi saya untuk masalah kecil dan dibahas dengan baik ini adalah mengganti tombol sakelar dengan sesuatu seperti itu.

Tombol yang memiliki Caption "Add" ketika tidak diklik Setelah Click, Button mengganti dirinya dengan pesan "Successfully Added" dan menunjukkan tombol 24x24 kecil yang berlabel "X" dan yang memungkinkan Anda untuk membatalkan tindakan terakhir Anda yang selalu "Add" . Dengan demikian Anda tidak pernah mengklik tombol "Hapus" tetapi hanya "batalkan" "Tambahkan Operasi" Anda sebelumnya. Anda juga tidak perlu menampilkan notifikasi "Berhasil Ditambahkan" secara terpisah pada halaman. Sisi buruk dari pendekatan ini adalah bahwa Anda memerlukan lebih banyak ruang untuk menempatkan label "Berhasil ditambahkan" dan "Tombol untuk Membatalkan" tetapi menurut saya ini adalah salah satu pendekatan yang kurang membingungkan.

enter image description here

12
Salman Ehsan

Dalam banyak kasus mungkin berguna atau mungkin untuk menghindari tombol seperti itu.

Misalnya. dalam kasus bermain acak/acak: cukup gunakan kotak centang dengan label "acak" di sebelahnya, dan tidak ada yang akan bingung ...

Dan dalam hal tombol play/shuffle, mungkin juga tidak perlu mengubah label pada tombol tersebut. Anda dapat menggunakan tombol "ditekan" untuk menunjukkan "sedang diputar", dan tombol "naik" untuk menunjukkan "tidak diputar". Atau Anda bisa meletakkan indikator di tempat lain di UI tentu saja (itulah yang dilakukan sistem stereo saya ...).

Bukan karena beberapa perusahaan mulai menggunakan widget tertentu yang tiba-tiba harus digunakan untuk semuanya ...

11
JanC

Di Facebook, tombol suka adalah contoh yang baik untuk tombol sakelar.

Di Facebook aplikasi Android, sejenisnya ada pada tombol dan berwarna abu-abu saat mati dan disorot biru saat menyala. Lihat tangkapan layar di bawah ini.

Pada dasarnya, saya setuju dengan mereka - tekankan yang positif dan jangan main-main dengan otak pengguna (perubahan minimum).

Saya tidak yakin apakah itu cara yang baik untuk buta warna. Mungkin mereka seharusnya melakukan indikasi lebih berani.

enter image description hereenter image description here

Di Facebook web-app, polanya berbeda. Teks tombol berubah untuk menunjukkan tindakan - apa yang terjadi pada klik. Ini membingungkan. TAPI, ini masuk akal karena mereka memiliki banyak ruang dan memiliki indikasi terpisah bahwa pengguna menyukai posting.

enter image description hereenter image description here

9
AlikElzin-kilaka

Saya akan merekomendasikan menonton video berikut (dari 1991!) Yang seminal untuk desain beralih iOS saat ini misalnya: https://www.youtube.com/watch?v=wFWbdxicvK

Dan makalah yang sesuai: http://dl.acm.org/citation.cfm?id=143079

Berikut adalah toggle yang mereka bandingkan: The toggles they compared Dan hasilnya dalam preferensi: Results of the preference test

7
Riche Design

Tombol berlabel (tombol sakelar) seringkali membingungkan atau bahkan ambigu, seperti yang Anda tunjukkan. Sebagai gantinya,
tampilkan status dan , seperti ini:

Online Go offline

Jadi kami memiliki label yang tidak dapat diklik dengan jelas menunjukkan status saat ini, dan tombol yang dapat diklik untuk melakukan tindakan untuk mengubah status.

Jika Anda mengklik tombol "Go offline", maka label berubah menjadi "Offline" dan tombol berubah menjadi "Go online".

Menampilkan status saat ini dan tindakan pada saat yang sama adalah satu-satunya cara untuk sepenuhnya jelas. Tombol radio akan melakukan ini, tetapi solusi label + tombol lebih baik karena menawarkan perbedaan visual yang jelas antara keduanya. Juga secara alami lebih kompak daripada tombol radio.

Adapun alternatif, saya pikir itu setuju bahwa tombol toggle bisa bermasalah. Bahkan kotak centang dapat membingungkan:

 Online

Kotak centang tidak dicentang, sehingga aplikasi offline. Tapi ini tidak terlalu jelas. Jika Anda meliriknya, hal pertama yang Anda lihat adalah Word "Online", jadi mudah untuk menarik kesimpulan yang salah.

Masalahnya adalah yang bisa Anda lihat hanyalah satu label. Anda harus berpikir sebentar sebelum memutuskan apakah label menunjukkan status atau perintah. Masalah ini biasa terjadi pada kotak centang dan tombol, dan mencoba untuk secara konsisten menggunakan kata sifat (atau kata kerja atau apa pun) dapat meningkatkan hal-hal tetapi tidak akan membuat masalah hilang.

6
Bennett McElwee

Sebagai contoh Putar/Jeda, saya akan menunjukkan keadaan saat ini secara normal dan sebaliknya pada mouse-over (saat yang sesuai i.e tidak pada layar sentuh). Item itu memiliki 2 keadaan alami dan tidak ada kata kerja pemersatu. Nyala/Mati di sisi lain dapat disederhanakan menjadi Kekuasaan dengan keadaan Nyala dinyalakan dan kondisi mati, yah, tidak.

4
Rob Allen

Saya akan selalu pergi dengan keadaan saat ini. Saya pikir idiom play/pause adalah pengecualian daripada aturan. Saya pikir bermain/jeda seperti itu, mungkin peninggalan dari hari-hari kaset rekaman lama. Ketika play/pause digabungkan pada CD player, saya ingat berpikir betapa keren & inovatifnya itu.

Bagaimanapun, satu cara untuk memperjelas bahwa keadaan saat ini "dipilih" adalah dengan membuat tombol cahaya sedikit, atau menguraikannya dengan beberapa sihir yang tampak biru.

enter image description here

Biru ajaib biasanya berarti beberapa keadaan "aktif"

Jadi, tombol di atas sebenarnya adalah tombol tri-state dari iTunes. Ini memiliki 3 status: ulangi, ulangi semua, dan ulangi 1. Cukup jelas apa yang terjadi di sini dari wajah tombol. Ulangi 1 adalah pada .

Sebagai contoh lain, saya memiliki 3 pengaturan kamera yang berbeda yang diaktifkan oleh satu tombol: ortografi 1-up, ortografi 4-up, dan perspektif. Satu tombol menggilir melalui 3 status ini , dan saya menunjukkan keadaan saat ini di bagian muka tombol.

Tombol tunggal untuk banyak status tidak yang membingungkan setelah Anda terbiasa. Mereka hebat karena mereka grup pengaturan yang saling eksklusif, dan mereka menyimpan berantakan UI dengan banyak tombol berbeda. Di satu sisi, mereka seperti tombol radio yang ringkas.

Pilihan lain yang bisa saya pikirkan adalah:

  • Perlihatkan keadaan saat ini, dan semburkan menu untuk mengubah keadaan (bahkan jika hanya ada 2 pilihan)

Contoh dari ini adalah bagaimana Mac os menunjukkan kepada Anda keadaan BlueTooth atau Bandara Anda - bahkan memiliki popout dengan kalimat lengkap tentang apa yang akan dilakukan setiap tindakan:

enter image description here

Ini menunjukkan statusnya saat ini (abu-abu pudar berarti mati), dan itu menunjukkan status berikutnya melalui menu sembulan dengan kalimat penuh.

3
bobobobo

Label pada tombol sakelar seperti Play/Pause seharusnya tidak berubah. Tombol itu sendiri harus secara visual menunjukkan bahwa itu ditekan (meninggalkan label 'Main'). Ini menghilangkan semua kebingungan.

2
Denzo

Gambar jawaban @ Kato dari Evernote menjelaskan: ada label yang mengomunikasikan apa yang dikontrol oleh toggle ("Auto save"), dan toggle, yang berfungsi ganda sebagai indikator status (O | I).
Masalah dengan beberapa matikan adalah mencoba menggunakan bit yang sama untuk dua tujuan yang berbeda: mengkomunikasikan keadaan, dan mengkomunikasikan tindakan.
Lampu rumah saya, misalnya, memiliki toggle anonim dan indikator terang, yang merupakan cahayanya sendiri (ketika bohlam gagal kita biasanya tidak tahu apakah toggle dalam posisi hidup atau mati) .
Drama | pengaturan jeda juga memiliki indikator yang jelas, suara musik itu sendiri. Sakelar memenuhi satu fungsi (kontrol), musik memenuhi fungsi lainnya (keadaan berkomunikasi).
Shffle vs. linear toggle mengontrol keadaan, tetapi tidak mengomunikasikannya. Anda harus mengambil wadah CD, menunggu tema selesai, dan memeriksa apakah yang dimulai setelah yang berikutnya dalam daftar atau tidak (dan ulangi untuk memastikan). Tetapi jika Anda menganggapnya sebagai shuffle | opsi non-shuffle binary, maka Anda dapat memberi label setelah perilaku yang dikontrolnya ("shuffle" sebagai kata kerja) dan mengomunikasikan status dengan meneranginya.
Seperti yang saya lihat, dalam hal apa pun Anda perlu berkomunikasi dengan negara.
Seorang teman saya marah dengan remote control kunci mobilnya. Ini memiliki keadaan dicetak dan dia tidak tahu apakah itu tindakan atau umpan balik.

1
Juan Lanus

Untuk mengurangi ambiguitas saya sarankan:

  1. Gunakan tindakan sebagai teks dari tombol sakelar, bukan status.

  2. Pastikan tombol tidak disorot.

  3. Sorot tindakan pada mouse/fokus untuk menekankan apa yang akan terjadi.

  4. Sorot keadaan saat ini dan letakkan di sebelah tombol.

Misalnya...

enter image description here

(contoh lain: "nyalakan" + "mati", "matikan" + "nyala")


Atau Anda dapat menggunakan slider dan

  1. Sorot keadaan saat ini, yang seharusnya muncul di kontrol ibu jari

  2. Tempatkan tindakan yang mentransisikan status di dalam area kosong (jangan sorot)

Misalnya...

enter image description here

(Bayangkan kontrol jempol terlihat seperti kontrol jempol dan tidak seperti tombol)


Diambil dari jawaban saya ke pertanyaan rangkap tertutup dengan beberapa peningkatan.

0
Danny Varod