Slider Ne Zaman Yanlış Kontrol: Hassasiyet, Etiket ve Klavye
Slider'ın en çok tartışılan yanı görünümü, oysa asıl sorun aritmetiği. Bir slider parmağın kat ettiği piksel sayısını değere çeviriyor ve bu çevrimin oranı çoğu arayüzde hiç hesaplanmıyor. Hesabı yaptığınız anda kontrolün nerede işe yarayıp nerede kullanıcıyı zorladığı kendiliğinden ortaya çıkıyor.
Piksel başına kaç birim düşüyor
Mobilde tipik bir slider yolu 300 piksel civarında. Bu yola 0-1000 aralığında birer birimlik adımlar yerleştirirseniz her adıma 0,3 piksel düşer. Parmağın ekranla temas alanı ise 40 pikselin altına inmiyor, platform kılavuzları da dokunma hedefi için 44 ile 48 piksel arasını öneriyor. Yani kullanıcı tek dokunuşta yüz kadar değeri aynı anda kapsıyor ve hangisinin seçileceğine parmağın merkezini hesaplayan formül karar veriyor.
E-ticaretteki fiyat filtreleri bunun en yaygın örneği. 320 piksellik bir yol üzerine 0-10.000 TL aralığı koyduğunuzda bir piksel 31 TL ediyor. Kullanıcı 2.500 TL'yi hedefliyor, eli 2.470'te duruyor, farkı gördüğünde de düzeltmek için aynı hassasiyetsiz kontrole geri dönmek zorunda kalıyor.
Kaynak metinlerde bu genelde steering law ile açıklanır. Doğru referans Fitts yasası: hedefe varış süresi mesafenin hedef genişliğine oranıyla birlikte artar ve burada hedef genişliği tek bir adımın piksel karşılığıdır. Adım 0,3 piksel olduğunda süre uzamıyor, hedef fiziksel olarak vurulamıyor.
Çıkarım basit: slider'ı seçenek sayısı yolun piksel uzunluğunu geçmeyecek şekilde kurun. Geçiyorsa ya adımı büyütün (0-1000 yerine 50'şerli adımlar), ya kontrolü değiştirin.
Etiketin yeri ve düzeltme yolu
Seçili değerin slider'ın altında durması dokunmatik ekranda işe yaramaz, çünkü değeri değiştiren parmak tam da onu okumanız gereken anda üstünü kapatır. Değer üstte dursun, bu kadarı doğru.
Ama etiketi taşımak asıl sorunu çözmüyor. Kullanıcı yanlış değere denk geldiğinde ihtiyacı olan şey değeri görmek değil, düzeltmek. Bunun çözümü seçili değeri salt okunur bir etiket yerine düzenlenebilir bir sayı alanı yapmak: kabaca yaklaşmak için slider, tam sayıyı yazmak için alan. Fiyat filtrelerinde bu ikili çok işe yarıyor, çünkü kullanıcıların bir kısmı zaten aklındaki sayıyı doğrudan yazmak istiyor.
Klavye ve ekran okuyucu tarafı
Erişilebilirlik başlığı çoğu yazıda genel bir çeşitlilik çağrısına dönüşüyor, oysa slider'da mesele oldukça somut. Kontrolün klavyeyle çalışması gerekiyor: yön tuşlarıyla birer adım, Page Up ve Page Down ile daha büyük sıçrama, Home ve End ile uçlar. Ekran okuyucunun da o anki değeri, alt ve üst sınırı duyurabilmesi lazım.
Tarayıcının kendi input type="range" öğesi bunların hepsini kutudan çıktığı gibi veriyor. Görünümünü CSS ile değiştirmek de mümkün; sınırlı ama çoğu tasarım için yeterli. Kendi slider'ını div ve fare olaylarıyla yazmak ise klavye desteğini, odak halkasını, role="slider" ve aria-valuenow gibi durum bildirimlerini elle yeniden üretmek demek (bu işin faturası tasarım aşamasında değil, ilk erişilebilirlik denetiminde kesiliyor).
Değer ham sayı olarak anlamsızsa aria-valuetext kullanın. Ekran okuyucu "3" demek yerine "orta seviye" diyebiliyorsa kullanıcı kaçıncı adımda olduğunu saymak zorunda kalmıyor.
Animasyon çoğu slider'da zarar veriyor
Slider'ın tutamağına geçiş animasyonu eklemek yaygın bir süsleme ve doğrudan manipülasyon hissini bozuyor. Parmak hareket ediyor, tutamak arkadan geliyor; kullanıcı kontrolün kendisinde bir gecikme olduğunu düşünüp fazladan sürüklüyor. Sürükleme sırasında tutamak parmağı gecikmesiz izlemeli. Animasyon ancak değer sürükleme dışında değiştiğinde, mesela yola tıklandığında ya da bir ön ayar seçildiğinde anlamlı; orada gözün sıçramayı takip etmesine yardım ediyor.
Slider'ın gerçekten doğru olduğu yer
Slider, sonucu anında görülen ve kesin sayısı olmayan ayarlarda rakipsiz: ses seviyesi, parlaklık, bir görselin doygunluğu. Buralarda kullanıcı sayıya bakmıyor, sonuca bakıyor ve geri bildirim eş zamanlı geliyor.
Sonucun gecikmeli görüldüğü ya da kullanıcının aklında zaten bir sayı olduğu her yerde slider gereksiz bir dolaylama katmanı ekliyor. Fiyat, yaş, adet, tarih. Bunlar için giriş alanı, adım düğmeleri ya da hazır aralık seçenekleri hem daha hızlı hem daha az hata üretiyor.
Kaynaklar