Fitts Yasası: Buton Boyutu, Mesafe ve Ekran Kenarları
Fitts Yasası 1954'te bir insan hareketi deneyinden çıktı, arayüzler için değil. Tasarıma taşınınca da tek bir cümleye indi: butonu büyüt, yakına koy. Formül bundan fazlasını söylüyor, birkaç yerde de tam tersini.
Formül gerçekte neyi ölçüyor
Paul Fitts'in ölçtüğü şey sade: bir hedefe uzanma süresi, hedefin genişliği ve ona olan mesafeyle ilişkili. İfadesi T = a + b log2(2D / W). T süre, D mesafe, W hedefin hareket yönündeki genişliği. a ile b deneyle bulunan sabitler, girdi aygıtına göre değişir; fareyle trackpad aynı değeri vermez.
Özetlerde ilk düşen şey logaritma oluyor, oysa asıl bilgi orada. 400 piksel uzaktaki 40 piksellik bir butonu 80 piksele çıkarın: log2(800/40) = 4,32 iken log2(800/80) = 3,32 olur. Genişliği ikiye katlamak zorluk terimini tam 1 bit düşürür, süreyi yarıya indirmez. Bir kez daha ikiye katlarsanız kazanç yine 1 bit, ama bu sefer ekranda dört katı yer harcamış olursunuz. Büyütmenin doyum noktası var, ve o nokta 24 pikselden 44 piksele çıkarken değil, 44'ten 88'e çıkarken geliyor.
Ekran kenarı meselesi, ve yaygın bir yanlış
Türkçe özetlerin çoğunda köşeler için "ulaşması zor, daha fazla efor ister" deniyor. Tersi doğru. İmleç ekran sınırında durur, dolayısıyla kenara dayalı bir hedefin hareket yönündeki genişliği pratikte sonsuzdur: nişan almadan, hızlı bir hareketle vurursunuz. macOS'un menü çubuğunu ekranın en üstüne yapıştırması, Windows'un her pencereye ayrı menü koymasından bu yüzden daha hızlıdır.
Peki bu web'e taşınır mı? Kısmen. Sayfa ekranın kenarına değil, görüntü alanının kenarına dayanır. Pencere tam ekran değilse o sınır zaten imleci durdurmaz. Tam ekranda bile üstte tarayıcı arayüzü, sağda kaydırma çubuğu var. Alt kenara yapışık sabit bir çubuk bu avantajı gerçekten alır, ama araya 8 piksellik bir boşluk koyduğunuz anda etki tamamen kaybolur; yarısı kalmaz, biter. Tasarımı teslim ederken "kenara yaslı" ile "kenara yakın" arasındaki farkın piksel düzeyinde konuşulması gereken yer burası.
Menü biçimleri arasında seçim
Radyal menüde her seçenek merkeze eşit uzaklıktadır ve dilimler dışa doğru genişlediği için W büyür. Doğrusal menüde altıncı öğe, birincinin altı katı uzaklıktadır; genişlik de yalnızca satır yüksekliği kadardır. Kâğıt üzerinde radyal menü açık ara önde.
Buna rağmen içerik sitelerinde doğrusal menüyü tercih ederim. Radyal menü, elin zaten bir konumda beklediği tuvale benzer arayüzlerde (tasarım araçları, oyunlar) kazandırıyor; sekiz seçeneği geçtiğinde ise dilimler daralıyor ve avantajı kendi kendine yiyor. Bir de öğrenme maliyeti var, ziyaretçi sitenizde bunu öğrenmeye niyetli değil.
Dokunmatikte D neye dönüşür
İmleç yoksa mesafe de imlecin bulunduğu yerden ölçülmez. Başparmak ekranın alt yarısında bekler, dolayısıyla D pratikte alt kenardan yukarı doğru artar. Alt navigasyonun yaygınlaşması moda değil, bunun sonucu. iOS'un 44 pt, Android'in 48 dp'lik dokunma hedefi tavsiyeleri de aynı formülün W tarafına denk düşüyor.
Küçük dokunma hedeflerini genelde butonu büyüterek değil, görünmez bir dokunma alanıyla çözerim: ikon 24 pikselde kalır, ::after ile üstüne 44 piksellik saydam bir alan eklenir. Görsel yoğunluk bozulmaz, W yine de büyür. Yan yana duran ikonlarda bu alanların çakışmadığını kontrol etmek gerekir, çünkü çakışan hedeflerde kullanıcı doğru yere basar ve yanlış olay tetiklenir.
Yasanın sustuğu yer
Fitts, hedefin nerede olduğunu bilen bir eli ölçer. Kullanıcının hangi butona basacağına karar verme süresini ölçmez; o kısım Hick yasasının alanı ve toplam sürede çoğu zaman daha ağır basar. Peki ya klavyeyle gezen kullanıcı? Orada mesafe piksel değil, Tab sayısıdır ve bu formülün söyleyeceği hiçbir şey yoktur.
Bu yüzden Fitts'i bir tasarım ilkesi olarak değil, bir teşhis aracı olarak kullanmak daha verimli. "Bu ekranda dönüşüm neden düşük" sorusuna cevap vermez. "Kullanıcı bu butonu neden ıskalıyor" sorusuna verir.