Toggle Switch Ne Zaman Doğru Bileşen, Ne Zaman Değil

Toggle switch'i checkbox'tan ayıran şey iki durumlu olması değil, kullanıcı dokunduğu anda sistemin durumunu değiştirme sözü vermesi. Bu söz arayüzde tek bir satır, arkada ise bir yazma isteği ve o isteğin başarısız olma ihtimali demek. Bileşenin problemlerinin çoğu tam burada başlıyor.

Toggle iki durumu gösterir, üçüncüsünü gösteremez

Bir ayarın pratikte üç durumu olur: açık, kapalı ve henüz bilinmiyor. Sayfa açıldığında sunucudan cevap gelene kadar arayüz o değeri bilmez, ama toggle her koşulda bir taraf gösterir. Kullanıcı yanlış tarafa bakar, düzeltmek için dokunur ve doğru olan değeri kendi eliyle bozar.

Çoklu seçimde aynı sorun daha da belirgin. Otuz satırı seçip bir ayarı değiştirmek istiyorsanız ve satırların bir kısmı zaten o durumdaysa, doğru gösterim ne açık ne kapalı. Checkbox'ın bunun için tarayıcı düzeyinde indeterminate durumu var, toggle'ın yok. Böyle ekranlarda checkbox'a dönmek gerileme değil, doğru bileşeni seçmek.

Değer gelene kadar anahtarı pasif gösterin, kullanıcıya tahmin ettirmeyin.

"Anında uygula" kuralının faturası arkada kesilir

Toggle'ın kaydet düğmesinin olmaması arayüz tarafında sadelik, uygulama tarafında her dokunuşa karşılık bir yazma isteği demek. Her istek de başarısız olabilir. Bu yüzden anında uygulanan bir anahtarın üç şeye ihtiyacı var: iyimser güncelleme, isteğin sonucuna göre geri alma ve hata durumunda kullanıcının gözünün olduğu yerde beliren bir mesaj.

Bir ayar ekranında değiştirilen anahtarların sayfa yenilendikten sonra sessizce eski değerine döndüğünü izlemiştim, üstelik tek bir hata mesajı bile çıkmadan.

Hatanın ekranın köşesinde beliren bir bildirimle verilmesi çoğu durumda yetmez, çünkü kullanıcı o sırada dokunduğu kontrole bakıyordur. Mesaj kontrolün yanında durmalı ve anahtar geri döndüyse sebebini söylemeli.

İşlem yavaşsa ya da geri alınması pahalıysa toggle zaten yanlış bileşendir. Hesap kapatma bir anahtarla yapılmaz.

Etiket eylemi değil durumu anlatır

Toggle etiketlerinde en sık görülen hata olumsuz ifade. "Bildirimleri kapat" yazan bir anahtar açık konumdayken bildirimler kapalı mı, yoksa kapatma özelliği mi etkin? Etiketi olumlu ve durum bildiren biçimde yazın: "Bildirimler" yeter. Açık mı kapalı mı olduğunu anahtarın kendisi zaten söylüyor.

Etiketin buton diliyle yazılması da aynı karışıklığı üretir. Buton eylem ister, anahtar durum gösterir.

Rengin tek başına anlattığı bir şey yok

Kaynaklarda sık geçen "kapalı durumu kırmızıyla gösterin" tavsiyesi hatalı. Kırmızı arayüzde hata ve yıkıcı işlem anlamı taşır; kapalı bir bildirim ayarını kırmızıyla göstermek kullanıcıya bir şeyin bozulduğunu ima eder. Kapalı durumun rengi nötr gridir.

Asıl mesele renk seçimi de değil. Durum yalnızca renkle ayırt ediliyorsa, renk körlüğü olan bir kullanıcı ya da güneş altında telefona bakan herkes anahtarın hangi tarafta olduğunu okuyamaz. Topuzun konumu, gerekiyorsa küçük bir ikon ve doğru işaretlenmiş bir durum metni bu işi renkten daha güvenilir yapıyor.

Kod tarafındaki karşılığı kısa: kontrole role="switch" ve aria-checked verin, klavyeyle odaklanıp boşluk tuşuyla değiştiğinden emin olun. Dokunma hedefini de görsel anahtarın boyutuna hapsetmeyin, 44 piksel civarı yaygın kabul gören alt sınır.

Karar kuralı

Değişiklik anında uygulanıyor, ucuz ve geri alınabiliyorsa toggle. Değişiklik bir formun parçasıysa, kaydet düğmesiyle birlikte gönderiliyorsa ya da ikiden fazla seçenek varsa checkbox veya radio. Arada kaldığınız yer genelde ilk kuralın çiğnendiği yerdir: kaydet düğmesi olan bir ekranda toggle kullanıyorsanız, kullanıcıya aynı sayfada iki farklı kaydetme modeli öğretiyorsunuz.