web-gelistirme-sc.com

Bir açma / kapatma düğmesi geçerli durumunu veya değiştirileceği durumu göstermeli mi?

İki durum arasında geçiş yapan düğmeler hakkında hızlı bir sorum var. (Oynat/Duraklat veya Karışık/Normal Oynatmayı düşünün.) Başlıkta belirtildiği gibi, geçiş geçerli durumunu veya geçiş yapacağı durumu göstermeli mi?

Sanırım insanlar Play/Pause kuralına alışkınlar. Ancak akım yerine geçiş durumunu gösterirseniz Karışık/Düzenli oynatma daha karmaşık olabilir. Örneğin, Xbox 360'taki yerleşik müzik çalar bunu şu şekilde yapar: karışık moddayken, doğrudan oynatma simgesini veya tam tersini gösterir ve her zaman beni karıştırır (karışık modda mı yoksa düz oynamış mıyım).

Bunu şu şekilde görüyorum: Oynat/Duraklat daha çok oynamaya başlarken veya oynatmayı duraklatır. Evet sahne arkasında bir durum geçişi ama kullanıcıya bir eylem var. Oysa Karışık/Düz Oynatma bir seçenektir ve mevcut durumu göstermek en iyisidir (ve muhtemelen seçeneğin etkinleştirildiğini/devre dışı bırakıldığını göstermek için sadece bir simgeye ve değiştirme düğmesine sahiptir). Düşünceler?

461
Michael Brown

About Face 2. (v3 var ama bende yok) Cooper ve Reimann (2003, s. 341-2) bu konuyu "Flip-flop düğmeleri: Kaçınılması gereken bir seçim deyimi" başlığı. Sadece bir alıntı sunacağım için bu kitaba başvurmanızı şiddetle tavsiye ediyorum:

Flip-flop düğmesi kontrolleri çok verimlidir. Tek bir kontrolle birbirini dışlayan iki seçeneği kontrol ederek yerden tasarruf sağlarlar. Flip-flop kontrolleriyle ilgili sorun, her kontrolün ikinci görevini yerine getirememeleri - kullanıcıyı mevcut durumları hakkında bilgilendirmektir. Durum kapalıyken düğme AÇIK yazarsa, ayarın ne olduğu net değildir. Ancak durum kapalıyken KAPALI ise AÇIK düğmesi nerede? Onları kullanma. Düğmelerde ve menülerde değil!

Yazarlar (ve bunları konuyla ilgili bir otorite olarak düşünüyorum) iki olası çözüm sunar: Ya düğmenin eylemini bir fiil ifadesi olarak yazmalısınız (örneğin, Portre moduna geçin, kaydedilen alanın bir kısmını feda ederek) veya başka bir teknik tamamen kullanın ( örneğin, iki radyo düğmesi).

268
jensgram

Kısa Cevap:

Oldukça geç bir cevap, ama burada kimse daha önce işaret etmediği için şaşırdım - bir geçiş anahtarının mevcut durumunu göstermesi mümkündür ve basitçe değişeceği durum metnin düğmenin dışında yerine değil.

Real Life Switches

zun Cevap:

Dotancohen'in belirttiği gibi:

Sorun şu ki, İngilizce'de "açık" ve "kapalı" hem zarflar hem de sıfatlar.

Vücudunun dışında metin olan düğmeler bu gerçeği kendi yararlarına kullanır! Okumaya devam etmek...


iOS On-Off Switch

Mavi olan ve örneğin yazan duruma odaklanalım.

iOS ON

Anahtarın şu anda AÇIK olup olmadığını veya kaydırıcıyı hareket ettirir/tıklar/dokunursanız devam edip etmeyeceğini söyleyebilir misiniz? Metin belli mi? Burada "AÇIK" bir durum (sıfat) veya eylem (fiil) mi? Belirsiz. Buna karar vermenize yardımcı olacak herhangi bir kullanımın rengi var mı? Muhtemelen, ancak kesin olarak değil - iOS kullanıcıları bu tasarımın durumlarına alışmış olabilirler, ancak iOS dışı kullanıcıların bunu nasıl yorumlayacağını söylemek mümkün değildir. Ne demek istediğimi görmek için, iOS anahtarıyla aynı tasarıma sahip olan bu gerçek hayat açma anahtarını alın - açma anahtarının şu anda AÇIK olup olmadığından emin olabilir misiniz?

Ambiguous Trip Switch

Aşağıdaki anahtar, iOS tasarımının çizgileri boyunca, ancak çok daha kötü ...

Ambiguous On-Off Switch

... slayt/tıklama tutamacının hangi yarısının olduğu belli değil!


Unambiguous On-Off Switch

Jensgram'ın alıntısından gelen soru ...

Durum kapalıyken düğme AÇIK yazarsa, ayarın ne olduğu net değildir. Durum kapalıyken KAPALI ise AÇIK düğmesi nerede?

... düğme ne AÇIK ne de KAPALI demediğinden burada asla ortaya çıkmaz - sadece kendi başına durur. Ayrıca, AÇIK ve KAPALI kelimelerinin bağlamı hakkında karışıklık yoktur - bunlar (normal tasarımda) üzerlerine tıklandığında hiçbir şey yapamayacağı için çok açık bir şekilde devletlerdir (sıfatlar)!

Bu tasarımda yapılan bir değişikliğin, düğmenin uzak tarafındaki metnin tıklanabilir/tıklanabilir hale getirilmesine izin vereceğini belirtmek ilginç olabilir. Öyleyse, anahtar-tutamağına daha yakın olan Word durumdur, diğeri ise eylemdir ve anahtar açıldığında roller ters çevrilir.

Modded On-Off Switch

Yine de, kullanıcının anahtarla ilgili perspektifi değişmez - hiçbir noktada kullanıcı anahtarın mevcut durumu hakkında karışmaz. Aslında, mevcut durumu vurgulayarak tasarım kullanıcı dostu olması için daha da geliştirilebilir:

Highlighted On-Off Switch


Win8 On-Off Switch

Düğmenin rengi geçerli durumu (yanan = AÇIK, gerçek hayatta olduğu gibi) ve seçenek metninin altındaki Açık/Kapalı kelimelerini kullanıcıya geçerli durumun güvencesini verir.

414
SNag

Kararınız ne olursa olsun - lütfen Twitter'ın yaptıklarını yapmayın.

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

60
Daniel Alexiuc

Sorun şu ki, İngilizce'de "açık" ve "kapalı" hem zarflar hem de sıfatlar. Bu nedenle, fiiller veya sıfatları olan düğmeleri:

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

Çok geç düzenleme: Bir iş arkadaşımın tasarladığı ve "açık/kapalı" terminolojisini korumayı başaran ancak bunu açıkça yaptığı bu müthiş anahtara bakın:

on off switch

35
dotancohen

Makul bir uzlaşma, düğmenin kapalı durumdayken vurgulanmaması (belki de nötr bir arka plan rengine sahip olması) ve açık durumdayken vurgulanması (arka plan rengini değiştir) olacaktır.

Örneğin, Spotify (web) uygulamasının bu ekran görüntüsüne bakarak, karışık çalmanın açık veya kapalı olduğunu düşünüyor musunuz?

Shuffle is most certainly on

26
Marks Polakovs

Sorunuzda hemen hemen doğru olduğunu düşünüyorum.

Geçiş bir eylemse - Oynat/Duraklat - gerçekleşecek olan şeyi göstermelidir. Böylece duraklatıldığında Çal ve ardından Duraklat gösterisi gösterilir.

Geçiş seçeneği bir seçenekse - Karışık/Doğrusal - geçerli durumu göstermelidir.

Kullanıcıya bir düğmenin bir eylem olduğunu ve diğerinin bir seçenek olduğunu nasıl belirlediğinizden emin değilim ...

25
ChrisF

ChrisF'nin dediği gibi, bir eylem düğmesi ve bir durum düğmesi arasında bir ayrım yapmak önemlidir.

Düğmenizde metin varsa, metni tıklatmanın bir şey yapacağını göstermek için değiştirebilirsiniz (ör: "Karışık oynatmayı aç"). Ancak, sizin durumunuzda, sadece bir simge olduğundan, duruma bağlı olarak yalnızca etkin/devre dışı görünen bir karıştırma simgesiyle giderdim. Devre dışı bırakılmışsa, kullanıcının düz oynattığı açık olmalıdır. Yanabilir veya düğmeyi basılı olarak gösterebilirsiniz.

Daha da net hale getirmek için fareyle üzerine gelindiğinde bir ipucu eklemeyi düşünün.

20
mbillard

Her iki seçeneğin görünür, gruplandırılmış ve aktif olanın açıkça vurgulandığı birleşik bir eylem/durum düğmesi olan iOS'ta (ve başka yerlerde) kullanılan teknikten bahsetmekten şaşırdım.

Göstermek için korkunç ascii sanatı:

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

"Onları kullanma."

Açık ve kapalı durumun açık olması durumunda geçiş düğmelerinin kabul edilebilir olmasını öneririm. Bu, örneğin, tıklattığınızda renkli hale gelen bir dizi gri düğmeniz olduğunda oluşabilir.

Birçok durumda Oynat/Duraklat'ın çalışmasının nedeni budur. Yürüt düğmesi iki durum arasında etkinleştirme/devre dışı bırakma olarak çok fazla geçiş yapmaz. Açıkken (yeşil renkte oynuyorum!), Gri renge döner ve bir || kapalı olduğunda (oynamıyorum!).

Diğer düğmeler de aynısını yapar, böylece tutarlılık uygunluğa katkıda bulunur. Muhtemelen, bastığınız (yani devlette) veya depresyonda (yani kapalı durumda) düğmelere sahip olan bir teyp destesi veya VCR hakkındaki tarihsel algılarımıza dayanmaktadır ve bence bu bir geçişi düşünürken akılda tutulması gereken harika bir zihinsel modeldir. .

Ancak, geçişi daha çirkin bir onay kutusuyla değiştiremediğiniz, yalnızca "etkin" olmadıkları her durumda, varsayılan olarak, daha önce belirtilen tüm nedenlerden dolayı "bunları kullanmayın".

EK

Bugün Evernote'un oldukça etkili bir geçişe sahip olduğunu fark ettim. Aslında oldukça iyi çalışan bir fareyle üzerine gelme yaklaşımını benimsediler. Bunun bir açma/kapama tarzı kontrolünün başka bir durumu olduğunu unutmayın.

toggled off

toggled on

EK EK İLAVE

Bugün bu ilginç geçişi buldum ve bu UX Q&A'yı hatırlattı. Devletin hemen nasıl açık olduğunu ve dokunduğunuzda değişeceği gerçeğinin de dokulu "tutamak" (yani, affordance) tarafından açık hale getirildiğine dikkat edin - sadece yükseltilmiş düğmeyi yakaladığımda, karşı tarafa ve şimdi söylediklerinin tam tersini söyleyin; tıpkı bir uçak tuvaleti gibi.

Böylece iyi yapılabilirler.

toggled offtoggled on

20
Kato

Burada zaten 18 cevap var, bu partiye geç olabilir, ancak bu gibi durumlarda onay kutularını kullanmak mantıklıdır. Bazı örnekler:

enter image description here

Ve seçildiğinde:

enter image description here

Bu Facebook'un "Beğen" i kullanan "loş/ışıklı" yaklaşıma benzer, ancak daha iyi görünürlük için bir onay kutusuyla birleştirilir. Her durumda, kilit nokta, kullanıcının birden çok kelime arasında karar vermesine çalışmak yerine yalnızca bir Kelime (veya kelime kümesi) kullanmaktır.

Ayrıca, negatif önek (" Değil ", " Olmayan - ", " Un - "," Dis - "," Im - "," Mis - "," In - "," Il - "," Ir - ") aksi takdirde kullanıcı,  un onay kutusunu işaretleyin:

enter image description here

20
Pacerier

Aşağıdaki durumlara sahip basit Geçiş Düğmesi (bir kerede görünür durumda olan) kullanarak bir koleksiyona "Ekle" ve "Kaldır" öğelerine Geçiş Düğmesi kullanıyorum.

  • EKLE (düğme hiç tıklanmadıysa)

  • KALDIR (düğme daha önce tıklanmışsa ve şimdi bir öğe koleksiyonun bir parçasıysa)

AMA bu acemi bir kullanıcı (50 yaş ve üstü) için beni her zaman sıkıştırdı, başlangıçta ne olduğunu anlamak ve neden bu öğenin koleksiyonun bir parçası olduğunu öğrenmeden önce düğme "Kaldır" sormak zordur. Bu durumda eksik olan bit, "Öğe Başarıyla Eklendi" diyen bir bildirim mesajıydı. Ekranın üstünde görünen bir Javascript Tabanlı Durum Mesajı kullanıyorum ( http://Twitter.github.com/bootstrap/javascript.html#alerts kullanarak ama görsel olarak yer değiştirmiş olduğundan Etkileşim unsuru, sorunun sadece bir kısmını bazı kullanıcılar için çözdüm.

Başka Bir Sorun

Her tıklamadan sonra düğmeniz "Duruş" veya "Kenarlarını çevirir" i değiştirir. Bazen "Ben Ekle düğmesi" yazıyor ve bazen aynı düğme (diğer ekleme düğmeleri arasında aynı sütunda) "Ben Kaldır düğmesi" yazıyor. Renkleri değiştirmek yardımcı olur, ancak bunlar hala bir düğme tarafından alınan iki zıt roldür. NOT SO SAĞ.

Çözümüm:

Bu küçük ve iyi tartışılan konuya benim çözümüm, geçiş düğmesini böyle bir şeyle değiştirmektir.

Tıklamadan sonra Altyazı "Ekle" olan düğme, Düğme "Başarıyla Eklendi" iletisiyle değiştirilir ve "X" etiketine sahip ve her zaman "Ekle" olan son işleminizi iptal etmenizi sağlayan küçük bir 24x24 düğmesi gösterir. . Böylece bir "Kaldır" düğmesini asla tıklatmazsınız, sadece önceki "Ekle İşleminizi" iptal edersiniz. Ayrıca sayfada ayrı bir "Başarıyla Eklendi" bildirimi göstermeniz gerekmez. Bu yaklaşımın aşağı tarafı, "Başarıyla Eklendi" etiketi ve bir "İptal Etme Düğmesi" koymak için daha fazla alana ihtiyaç duymanızdır, ancak bence bu daha az kafa karıştırıcı yaklaşımlardan biridir.

enter image description here

12
Salman Ehsan

Birçok durumda, bu tür düğmelerden kaçınmak faydalı olabilir veya mümkün olabilir.

Örneğin. Karışık/düzenli oynatma durumunda: yanında "karıştır" etiketi bulunan bir onay kutusu kullanın ve hiç kimse kafanız karışmayacak ...

Ve bir oynat/karıştır düğmesi durumunda, düğmedeki etiketi değiştirmek de gerekli olmayabilir. "Oynatmayı" belirtmek için bir "basılı" düğmesini ve "oynatılmıyor" u belirtmek için "yukarı" düğmesini kullanabilirsiniz. Ya da elbette kullanıcı arayüzünde başka bir yere bir gösterge koyabilirsiniz (stereo sistemim bunu yapar ...).

Bazı şirketler, her şey için aniden kullanılması gereken belirli bir widget'ı kullanmaya başladığı için değil ...

11
JanC

Facebook'ta, beğen düğmesi bir geçiş düğmesi için iyi bir örnektir.

Facebook'un Android uygulaması, benzeri bir düğme üzerinde ve kapalı olduğunda gri ve açık olduğunda mavi vurgulanır. Aşağıdaki ekran görüntülerine bakın.

Temel olarak, onlarla aynı fikirdeyim - olumlu olanı vurgulayın ve kullanıcıların beyinleriyle uğraşmayın (minimum değişiklik).

Kör renk için iyi bir yol olup olmadığından emin değilim. Belki de göstergeyi daha cesur yapmalıydılar.

enter image description hereenter image description here

Facebook'un web-app modelinde desen farklıdır. Düğmenin metni, işlemi göstermek için değişir - tıklandığında ne olur. Bu kafa karıştırıyor. ANCAK, bu çok mantıklı çünkü çok fazla alana sahipler ve kullanıcının bir gönderiyi sevdiğine dair ayrı bir göstergeye sahipler.

enter image description hereenter image description here

9
AlikElzin-kilaka

Örneğin, iOS geçişinin mevcut tasarımına seminal olan aşağıdaki videoyu (1991'den itibaren) izlemenizi tavsiye ederim: https://www.youtube.com/watch?v=wFWbdxicvK

Ve ilgili makale: http://dl.acm.org/citation.cfm?id=143079

Karşılaştırdıkları geçişler şunlardır: The toggles they compared Ve tercih edilen sonuçlar: Results of the preference test

7
Riche Design

Etiketli düğmeler (geçiş düğmeleri) işaret ettiğinizde genellikle kafa karıştırıcı veya belirsizdir. Yerine,
durumu göster ve eylem, şöyle:

Online Go offline

Dolayısıyla, mevcut durumu açıkça gösteren bir tıklanamaz etiket ve durumu değiştirmek için bir işlem yapmak için bir tıklanabilir düğme var.

"Çevrimdışı ol" düğmesini tıklarsanız, etiket "Çevrimdışı" olarak değişir ve düğme "Çevrimiçi ol" olarak değişir.

Hem mevcut durumu hem de eylemi aynı anda göstermek, tamamen net olmanın tek yoludur. Radyo düğmeleri bunu yapar, ancak etiket + düğme çözümü daha iyidir çünkü ikisi arasında net bir görsel ayrım sunar. Ayrıca doğal olarak radyo düğmelerinden daha kompakttır.

Alternatiflere gelince, sanırım geçiş düğmelerinin sorunlu olabileceği kabul edildi. Onay kutuları bile kafa karıştırıcı olabilir:

 Online

Onay kutusu işaretli değildir, bu nedenle uygulama çevrimdışıdır. Ancak bu çok açık değil. Eğer bakarsanız, ilk gördüğünüz şey "Çevrimiçi" kelimesidir, bu yüzden yanlış sonuç çıkarmak kolaydır.

Sorun şu ki, tek görebildiğiniz tek bir etiket. Etiketin bir durumu veya komutu gösterip göstermediğine karar vermeden önce biraz düşünmeniz gerekir. Bu sorun, onay kutuları ve düğmeler için yaygındır ve sıfatları (veya fiilleri veya herhangi bir şeyi) sürekli olarak kullanmaya çalışmak işleri iyileştirebilir, ancak sorunu ortadan kaldırmaz.

6
Bennett McElwee

Yürüt/Duraklat örneği için, geçerli durumu normalde ve tam tersi fareyle üzerine geldiğimde gösterir (uygun olduğunda (yani dokunmatik ekranlarda değil). Bu öğenin 2 doğal durumu vardır ve birleştirici fiil yoktur. Öte yandan Açık/Kapalı, Açık durumu yanıyor ve kapalı durumu ile Güç'e basitleştirilebilir, değil.

4
Rob Allen

her zaman şu anki durum ile giderdim. Oynat/duraklat deyim kural yerine istisna olduğunu düşünüyorum. Sanırım oynat/duraklat, olduğu gibi, muhtemelen eski kaset teyp günlerinden kalma bir engel. CD çalarlarda oynat/duraklat birleştirildiğinde, ne kadar havalı ve yenilikçi olduğunu düşündüğümü hatırlıyorum.

Her neyse, mevcut durumun "seçili" olduğunu açıkça göstermenin bir yolu, düğmeyi parıltı biraz yapmak veya maviye benzeyen bir sihirle özetlemektir.

enter image description here

Sihirli mavi genellikle bazı durumların "açık" olduğu anlamına gelir

Bu nedenle, yukarıdaki düğme aslında iTunes'dan bir üç durumlu düğmedir. 3 durumu vardır: tekrarlayın, hepsini tekrarlayın ve 1'i tekrarlayın. Burada düğmenin yüzünden neler olduğu çok açık. Tekrar 1 konumunda.

Başka bir örnek olarak, tek bir düğmeyle değiştirilen 3 farklı kamera ayarım var: ortografik 1-yukarı, ortografik 4-yukarı ve perspektif. Tek bir düğme bu 3 durumları arasında geçiş yapar ve geçerli durumu düğmenin yüzünde.

Birden çok durum için tek düğmeler alıştıktan sonra kafa karıştırıcı değildir. Onlar harika çünkü grup karşılıklı özel ayarlar ve onlar karmaşa UI kadar birçok farklı düğmeleri ile tasarruf. Bir bakıma kompakt bir radyo düğmesi gibidirler.

Düşünebileceğim diğer seçenekler:

  • Göster mevcut durum ve durumu değiştirmek için bir menü açın (yalnızca 2 seçenek olsa bile)

Bunun bir örneği, Mac os'un BlueTooth veya Havalimanı'nızın durumunu nasıl gösterdiğidir - her eylemin ne yapacağına dair tam cümleler içeren bir pop-up bile vardır:

enter image description here

Geçerli durumunu gösterir (soluk gri kapalı anlamına gelir) ve sonraki durumları tam cümleler içeren bir açılır menü aracılığıyla gösterir.

3
bobobobo

Oynat/Duraklat gibi açma/kapatma düğmesi üzerindeki etiket değişmemelidir. Düğmenin kendisi görsel olarak basıldığını göstermelidir ('Oynat' etiketini bırakarak). Bu, tüm karışıklığı ortadan kaldırır.

2
Denzo

@ Kato'nin Evernote'un cevap görüntüleri net bir şekilde ifade etti: Geçiş ("Otomatik kaydet") ve durum göstergesi (O | I) olarak ikiye katlanan geçiş tarafından kontrol edilen şeyi bildiren bir etiket var.
Bazı geçişlerle ilgili sorun, aynı biti iki farklı amaç için kullanmaya çalışıyor: devleti iletmek ve eylemi iletmek.
Örneğin, evimin ışıkları anonim bir geçişe ve parlak bir göstergeye sahiptir, bu da ışığın kendisidir (ampul başarısız olduğunda genellikle geçişin açık veya kapalı konumda olduğunu söyleyemeyiz) .
Oyun | duraklama düzenlemesi de müziğin kendisinin sesi üzerinde açık bir göstergeye sahiptir. Geçiş bir işlevi yerine getirir (kontrol), müzik diğerini yerine getirir (iletişim durumu).
Şffle ve doğrusal geçiş durumu kontrol eder, ancak bunu iletmez. CD kutusunu almanız, bir temanın bitmesini beklemeniz ve daha sonra başlayanın listede bir sonraki olup olmadığını kontrol etmeniz gerekir (ve emin olmak için tekrarlayın). Ama bir shuffle olarak düşünüyorsanız | İkili karıştırmama seçeneği varsa, kontrol ettiği davranıştan sonra (fiil olarak "karıştır") etiketleyebilir ve durumu aydınlatarak iletebilirsiniz.
Gördüğüm gibi, her durumda devletle iletişim kurmanız gerekiyor.
Bir arkadaşım arabasının kilit uzaktan kumandası için deli oluyor. Basılı bir durumu var ve eylem mi yoksa geri bildirim mi olduğunu bilmiyor.

1
Juan Lanus

Belirsizliği azaltmak için şunu öneririm:

  1. Eylemi durum değil, açma/kapatma düğmesinin metni olarak kullanın.

  2. Düğmenin vurgulanmadığından emin olun.

  3. Ne olacağını vurgulamak için fareyle üzerine gelince odaklanın/odaklanın.

  4. Geçerli durumu vurgulayın ve düğmenin yanına yerleştirin.

Örneğin...

enter image description here

(diğer örnekler: "+" kapat "," + "aç" kapat)


Veya kaydırıcıları ve

  1. Başparmak kontrolünde görünmesi gereken geçerli durumu vurgulayın

  2. Durumu geçiş yapan eylemi boş alana yerleştirin (vurgulamayın)

Örneğin...

enter image description here

(Başparmak kontrolünün düğme gibi değil parmak kontrolü gibi göründüğünü hayal edin)


Bazı iyileştirmelerle kapalı yinelenen sor yanıtımdan alındı.

0
Danny Varod