Geçiş düğmesi mevcut durumu mu göstermeli, yoksa değişeceği durumu mu? (2010)

Geçiş düğmesi mevcut durumu mu göstermeli, yoksa değişeceği durumu mu?

• Geçiş düğmesi, kullanıcıya mevcut durumu bildirme işlevi de görmelidir.
• Geçiş düğmesi açık durumundayken kapalı göstermesi kafa karışıklığına yol açabilir.
• Düğmelerde veya menülerde flip-flop kontrol kullanımından kaçınılmalıdır.

Geçiş anahtarı hem mevcut durumu hem de değişeceği durumu gösterebilir

• Düğmenin dışına metin koyarak hem mevcut durumu hem de değişeceği durumu gösterme yöntemi vardır.
• Örneğin iOS anahtar tasarımı, durum açık olduğunda bunu mavi renkle gösterir; kapalı olduğunda ise göstermez.
• OS X anahtar tasarımı belirsizlik içermez; kullanıcı mevcut durumu açıkça anlayabilir.

Twitter'ın geçiş düğmesi kullanımından kaçınılmalı

• Twitter'ın geçiş düğmesi mouse-over sırasında bilgi verir, ancak dokunmatik ekranlarda kafa karışıklığı yaratabilir.

İngilizcede "on" ve "off" hem zarf hem de sıfat olabilir

• Düğmede daha net bir etiket sağlamak için fiil ya da sıfat kullanmak iyi olur.
• Örnek: etkinleştir/devre dışı bırak, başlat/durdur

Durum ile eylemi ayırmak önemlidir

• Geçiş eylemi temsil ettiğinde (ör. oynat/duraklat), tıklandığında gerçekleşecek eylemi göstermelidir.
• Geçiş bir seçeneği temsil ettiğinde (ör. karıştır/normal oynatma), mevcut durumu göstermelidir.

Onay kutusu kullanımı düşünülebilir

• Durum değişimi bir evet/hayır sorusuna indirgenebiliyorsa, onay kutusu kullanmak uygun olabilir.

Geçiş düğmesi yerine hem durumu hem eylemi gösteren yöntem kullanın

• Devre dışı durumda düğme vurgulanmaz, etkin durumda ise vurgulanarak durum gösterilir.

Geçiş düğmesi kullanmamayı düşünebilirsiniz

• Örneğin karıştır/normal oynatma için Karıştır etiketli bir onay kutusu kullanılabilir.

Facebook'un "Beğen" düğmesi iyi bir geçiş düğmesi örneğidir

• Facebook Android uygulamasında Beğen düğmesi devre dışıyken gri, etkinken ise mavi gösterilir.

Hem mevcut durumu hem de eylemi göstermek en net yaklaşımdır

• Devre dışı durum etiketi ile etkin duruma geçirebilen tıklanabilir bir düğmeyi birlikte sunmak iyi olur.

GN⁺ görüşü:

• Geçiş düğmesi tasarımı kullanıcı deneyimini büyük ölçüde etkileyebilir; mevcut durumun ve değişeceği durumun açıkça gösterilmesi önemlidir.
• OS X'in anahtar tasarımı, kullanıcıyı şaşırtmadan mevcut durumu sezgisel biçimde anlamasını sağlayan iyi bir örnektir.
• Bu yazı, yazılım geliştiricilerin kullanıcı arayüzü tasarlarken dikkate alması gereken önemli unsurları sunarak daha iyi bir kullanıcı deneyimi oluşturmaya yardımcı olabilir.

[GN⁺]

Hacker News görüşleri

• Microsoft Teams’in sessize alma düğmesiyle ilgili kafa karışıklığı

  • Teams uygulamasında sessize alma düğmesi, üstü çizili bir mikrofon gösteriyor ve sessize alma etkinken mikrofonun kapalı olduğu anlamına geliyor.
  • Telefon uygulamasında ise aynı simge sessizde olunmadığını gösteriyor; arka plan rengi dolu hale gelerek sessiz durumunu belirtiyor.
  • Düğmenin mevcut durumu göstermesinde tek başına sorun yok, ancak durum değiştiğinde nasıl görüneceğini de bilmek gerekiyor.
  • Bu tür karışıklık, 'flat UI' tasarımında gerçek dünyadaki referanslar olmadan tasarım öğelerini anlamaya çalışmaktan kaynaklanan bir sorun olabilir.

• Tesla araç arayüzünde tutarsız toggle düğmesi sorunu

  • HVAC sistemindeki düğmeler, dokunma biçimine ve basılı tutma süresine göre farklı tepki veriyor.
  • Sürüş sırasında ekrana ancak kısa süreli bakılabildiği durumlarda, küçük dokunma hataları istenmeyen işlemlere yol açabiliyor.
  • Tesla’nın Bluetooth bağlantı arayüzü son derece kafa karıştırıcı bir tasarıma sahip ve bu durum sürüş sırasında daha da sorunlu hale geliyor.

• NASA’nın push-button switch durum geri bildirimi mekanizması

  • Anahtar kapalıyken tüm ışıklar sönük oluyor; anahtara basılınca sarı ışık yanıyor ve gerçekten istenen cihaz açıldığında sarı ışık sönüp yeşil ışık yanıyor.
  • Bu, hem anahtara basıldığına dair onay hem de gerçek çalışmanın gerçekleştiğine dair onay sağlıyor.

• Checkbox’ların ortadan kaybolmasına duyulan üzüntü

  • Checkbox’lar kusursuzdu ve belirsizlik taşımıyordu, ancak akıllı telefon tasarımcıları bunları tercih etmedi.

• Tesla gösterge paneli ekran arayüzünün kafa karıştırıcı tasarımı

  • 'Open' etiketi, ilgili bölümün açık olduğunu net biçimde gösteriyor gibi görünse de, kullanıcı bunun aslında parçayı açan bir düğme olduğunu anlayamayabiliyor.

• Toggle düğmelerinin sorunları ve çözüm yolları

  • Toggle düğmeleri, sistem durumu ile bu durumu değiştiren eylemi aynı anda içerdiği için kafa karıştırıcı olabilir.
  • Mevcut durumu gösteren 'ON', gerçekte 'OFF' durumuna geçirme eylemi anlamına gelebilir.
  • Çözüm, durum ile eylemi ayırmaktır; bunun için düğmenin dışına etiket koymak veya simgeyi olduğu gibi bırakıp düğmenin başka özelliklerini değiştirmek mümkündür.

• Toggle düğmelerinde eşzamansızlık sorunu

  • Düğmeye basıldığında sistem durumu hemen değişmeyebilir; bu yüzden istenen duruma kesin olarak geçmek için birkaç kez basmak gerekebilir.
  • Her durum için ayrı bir düğme varsa, birkaç kez basılması sorun yaratmaz.

• Apple’ın slider toggle tasarımının avantajları

  • Apple’ın slider toggle tasarımı, mevcut durumu ve geçilecek durumu açıkça gösteriyor.
  • Etkin özellikler mavi arka planla, devre dışı özellikler ise gri arka planla ayırt ediliyor.

• Toggle düğmelerinde mevcut durumun ve değişecek durumun açık biçimde gösterilmesi gereği

  • Mevcut durumun ne olduğu ve toggle değiştirildiğinde hangi duruma geçileceği açık olmalıdır.
  • Oynat/duraklat düğmesi, fiziksel dünyadaki önceki örnekleri takip eder ve medyanın oynatılıp oynatılmadığı açık olduğu için simge değişmese bile kullanıcı bunu anlayabilir.
  • Toggle’ın rengini hafifçe değiştirmek pek yardımcı olmaz; etiket gerekir.