Durum Geçiş Butonları: İkon Durumu mu, Eylemi mi Gösterir?

Bir toggle butona bakan kullanıcı iki soruyu aynı anda soruyor: sistem şu anda hangi durumda, basarsam ne olacak? Aynı ikon çoğu arayüzde bu iki sorudan yalnızca birine cevap verir, hangisine cevap verdiğini de tasarım değil alışkanlık belirler. Oynat/duraklat ile Word'ün kalın (B) butonu, tam olarak zıt iki kuralla çalışıyor ve ikisi de doğru sayılıyor.

Aynı görsel dil, iki zıt okuma

Medya oynatıcıda üçgen ikon "şu anda duraklatılmış" demek değil, "bas, oynatayım" demektir. Yani ikon eylemi gösterir, durumu gösterme işini ikinci dereceden üstlenir: kullanıcı, oynat ikonunu görünce videonun durduğunu çıkarımla anlar.

Word'de kalın butonu tam tersini yapar. Arka planı koyulaşmış B, "bas, kalınlaştırayım" değil "imlecin olduğu yer zaten kalın" demektir. İkon durumu gösterir, eylem çıkarıma kalır.

Peki kullanıcı bir arayüze girdiğinde hangi kuralın geçerli olduğunu nereden biliyor? Çoğunlukla bilmiyor, tahmin ediyor. Tahmin de bağlamdan geliyor: araç çubuğundaki bir düğme durum gösterir, oynatıcı çubuğundaki bir düğme eylem gösterir. Bu ayrım hiçbir yerde yazmaz, sadece yıllar içinde yerleşmiştir. Kendi arayüzünüzde ikon-durum eşlemesini keyfi seçtiğinizde, aslında kullanıcının bu yerleşik tahminine karşı bahse giriyorsunuz.

Mikrofon düğmesi bu belirsizliğin en pahalı örneği. Üzeri çizili mikrofon ikonu tek başına hem "susturuldun" hem "bas da sustur" diye okunabilir, ve toplantının ortasında yanlış tahmin eden kişi kapalı mikrofonla konuşur.

Etiket eklemek sorunu çözer, ama hangisini yazacaksınız?

İkonun yanına metin koymak doğru refleks. Ne var ki metin de aynı ikilemi devralıyor: "Sessiz" mi yazacak, "Sessize Al" mı? Birincisi durumu, ikincisi eylemi anlatır ve ikisini aynı butonda birden yazamazsınız.

Pratik kural: eylemin sonucu geri alınması kolaysa etiketi eyleme göre yazın ("Sessize Al"), çünkü kullanıcı zaten butona basmaya niyetlenerek bakıyor. Durumun kendisi sürekli izlenmesi gereken bir bilgiyse, etiketi duruma göre yazıp eylemi ayrı bir sinyale bırakın. Mikrofon ikinci gruba girer; bu yüzden ciddi toplantı uygulamaları etiketi değiştirmek yerine ikonun yanına kalıcı bir durum göstergesi koyar.

Etiket değişimi ile erişilebilirlik durumu çakışır

Burada metinlerin çoğunun atladığı bir sınır var. Toggle butonun durumunu ekran okuyucuya bildirmenin standart yolu aria-pressed (açık/kapalı anahtarlarda role="switch" ve aria-checked). Bu özniteliği kullandığınızda durum bilgisi butonun adının üstüne ayrıca okunur.

Bir de etiketi eyleme göre çevirdiğinizi düşünün. Buton "Duraklat" yazarken aria-pressed="true" taşıyorsa, kullanıcı "Duraklat, basılı" duyar. Bu cümle ne durumu ne eylemi anlatır; iki ayrı sistemin üst üste binmiş çıktısıdır. İkisinden birini seçin: ya etiket sabit kalsın ve durumu öznitelik taşısın, ya etiket değişsin ve durum özniteliği hiç kullanılmasın.

Uygulama tarafında bu bir bileşen mimarisi işi değil. Sabit etiketli bir butonda durumu üç satırda çözersin, ayrı gösterge bileşeni yazmaya gerek yok; asıl maliyet, etiketi her tıklamada çeviren kodun aynı anda erişilebilirlik durumunu da güncellemeye çalışmasından doğar.

İki ayrı kontrol ne zaman daha iyi

Durumu bir göstergede, eylemi ayrı bir butonda sunmak belirsizliği tamamen bitirir. Tesla'nın mobil uygulaması böyle çalışır: bir ikon aracın kilitli olduğunu söyler, ayrı bir düğme kilidi açar. Maliyeti ekranda yer kaplaması.

Peki bu maliyet ne zaman karşılığını verir? Üç koşuldan biri varsa: eylemin geri alınması zorsa, durum kullanıcının kendi eylemi dışında da değişebiliyorsa, ya da komut ile sonuç arasında gecikme varsa.

Son madde uzaktan kontrol edilen her şeyde geçerli. Butona basıldığında arayüzü hemen çevirip sunucudan onay beklemek, kullanıcıya olmamış bir durumu göstermek demektir. Araç kilidi ya da toplantı mikrofonu gibi yerlerde gösterge, isteğin gönderildiğini değil sistemin onayladığı durumu yansıtmalı. Ayrı gösterge burada ek süs değil, üçüncü bir hâli ("gönderiliyor") gösterebilecek tek yer.

Renk ve gölgeye ne kadar güvenilir

Aktif durumu yalnız renkle anlatan butonlar iki yerde kırılır. Kırmızı bir kullanıcıya "açık", diğerine "tehlike" der; renk körlüğü olan kullanıcıda ise ayrım tamamen kaybolur.

Gölge ve basılı görünüm daha güvenilir ama sınırlı. Düz tasarım alışkanlığının yerleştiği arayüzlerde gölge derinlik değil sadece vurgu olarak okunuyor, dolayısıyla "bu mod açık" mesajı zayıflıyor. Renk ve gölgeyi ikinci sinyal olarak tutun; birinci sinyal her zaman ikonun biçimi veya metin olsun.

Aynı uygulamada aktif durumu bir yerde renkle, başka yerde çerçeveyle göstermek de öğrenmeyi sıfırlar. Tutarlılık burada estetik bir tercih değil, kullanıcının bir kez kurduğu kuralı ikinci ekranda da kullanabilmesi meselesi.