Fitts yasası (Fitts kanunu)

Kısaca

Uzaktaki küçük bir hedefe basmak, yakındaki büyük bir hedefe basmaktan uzun sürer. Fitts yasası, İngilizce adıyla Fitts's law, bu sezgiyi ölçülebilir bir formüle çevirir.

İşaretçi fare imleci de olabilir, parmak ya da el de. NN/g yasayı bu yüzden masaüstü ve dokunmatik için birlikte anlatır.

Aşağıdaki oyunda bunu kendiniz ölçün. Önce küçük ve uzak hedefi, sonra büyük ve yakın hedefi birkaç kez deneyin.

Canlı demo: hedefe basın

Başla'ya basın. Arenada turuncu bir hedef çıkar, ona olabildiğince hızlı basın. Hedefin dışına basarsanız ıska sayılır.

Tıklama hızı oyunu

Bu oyun JavaScript ile çalışır. Kapalıysa aşağıdaki metin aynı fikri formül ve örneklerle anlatıyor.

Süre, Başla'ya bastığınız andan hedefe bastığınız ana kadar ölçülür. Zorluk, MacKenzie'nin Shannon formülüyle piksel cinsinden hesaplanır. Bu kontrollü bir deney değil, birkaç deneme yapıp ortalamaya bakın. Klavyede Başla'dan sonra Tab ile hedefe geçip Enter'a basın. O zaman mesafe süreyi neredeyse hiç değiştirmez.

Küçük ve uzak hedefte süreniz büyük olasılıkla daha uzun çıkar, ıskalarınız da artar. Laws of UX'in notuna göre küçük hedefe hızlı gitmek daha çok hata getirir. Hızlandıkça isabetten kaybedersiniz.

Formül: ne ölçülür?

Bu sayfada ve demoda MacKenzie'nin 1992'de savunduğu Shannon formülünü kullanıyorum.

MT = a + b × log₂(D / W + 1)

• MT: hareket süresi.
• D: hedefe olan mesafe. MacKenzie buna genlik (A) der.
• W: hedefin genişliği. MacKenzie, dikdörtgen hedeflerde bu genişliğin yaklaşma yönüne göre değiştiğini tartışır.
• a ve b: deneyle bulunan sabitler. NN/g'ye göre işaretçi türüne göre değişir.

log₂(D / W + 1) kısmına zorluk indeksi (ID) denir. Birimi bittir. Demodaki “Zorluk” kutusu bu değeri gösterir.

NN/g, hareketi iki parçada anlatır. Önce hedefe doğru hızlı ve kaba bir hamle gelir, mesafe en çok bunu etkiler. Sonra isabet için yavaş bir düzeltme gelir. Hedef küçüldükçe bu ikinci parça uzar.

Kökeni: Paul Fitts, 1954

Yasanın kaynağı Paul M. Fitts'in 1954 tarihli makalesidir: “The information capacity of the human motor system in controlling the amplitude of movement”. Makale Journal of Experimental Psychology'nin 47. cildinde, 381 ile 391. sayfalar arasında çıktı.

MacKenzie'nin aktardığına göre Fitts dört deney yaptı. İkisinde denekler iki hedef arasında kalemle ileri geri vurdu; birinde hafif, birinde ağır kalem kullanıldı. Diğer ikisi disk ve pim taşıma göreviydi.

Fitts'in kendi formülünde zorluk log₂(2D / W) idi. MacKenzie, 2 çarpanının Fitts'in keyfi bir düzeltmesi olduğunu yazar. Fitts bu formülü, Shannon'ın bilgi kuramındaki 17. teoremi yaklaşık olarak uyarlayıp kurmuştu.

MacKenzie 1992'de Human-Computer Interaction dergisinde Shannon formülünü savundu. Gerekçelerinden biri şu: eski formülde mesafe hedefe göre çok kısaysa zorluk eksiye düşebilir. Shannon formülü bunu önler, MacKenzie'ye göre veriye de biraz daha iyi oturur.

Yasa fareyle sınırlı kalmaz. MacKenzie, farklı uzuvlarda ve kas gruplarında da iyi sonuç verdiğini yazar. Makalesinin özeti şu cihazları sayar: fare, trackball, joystick, touchpad, kaska takılan nişangâh ve göz izleyici.

Arayüzde uygulama: Türkçe örnekler

Örnekler temsilidir, belirli bir uygulamayı hedef almaz. Her birinde iki soru sorarım: hedef ne kadar büyük, kullanıcının işaretçisi ona ne kadar uzak?

1. Ödeme sayfasındaki “Siparişi onayla” butonu

Bir e-ticaret sitesinde kart bilgilerini giren kullanıcı, son olarak güvenlik kodunu yazar. Onay butonu sayfanın en üstündeki özet kutusundaysa, kullanıcı bütün formu yukarı doğru geri gitmek zorunda kalır.

NN/g'nin önerisi açık: gönder butonu son form alanının yanında durmalı. Makale, butonu sayfanın en tepesine koyan mobil tasarımları da eleştirir.

Etiketli butonlar burada da kazanır. NN/g'ye göre ikon ile etiket birlikte daha büyük bir hedef oluşturur, yeter ki tüm alan tıklanabilir olsun. Sepette “Sil” yazısının yanında çöp kutusu ikonu varsa ama yalnızca çizim tıklanıyorsa, bu şart bozulur.

2. Mobil uygulamanın alt menüsü

Bir bankacılık uygulamasında “Para gönder” gibi sık kullanılan işler alt sekme çubuğundadır. Fitts açısından çubuğun gücü başparmağa yakın olmasından gelir. Ekranın kenarında durması dokunmatikte ek bir kazanç sağlamaz.

Sekmeler birbirine çok yakın dizilirse bu kez başka bir risk doğar. NN/g, sıkışık hedeflerin hedefi aşmaya ve yanlış seçime yol açtığını yazar, özellikle hedefler küçükse.

Bağlam menülerinde de mesafe önemlidir. NN/g'ye göre dokunulan öğeden uzakta açılan bir alt panel hareket süresini boşa harcar. Seçenekler, onları açan etiketin yanında çıkmalı.

3. Ekran kenarı ve köşesi

Fareyle çalışırken ekran kenarı bir duvar gibidir. İmleç kenarda durur, hedefin ötesine geçemez. NN/g bu yüzden kenar boyundaki hedeflere “sonsuz hedef” der. macOS'taki üst menü çubuğu ve Windows'taki alt görev çubuğu bu mantıkla oradadır.

NN/g, Windows'ta başlat düğmesinin en azından Windows 8'e kadar sol alt köşede durduğunu da hatırlatır. Tarayıcıdaki bir web sayfasında bu avantajı pek beklemem. Sayfanın kenarı çoğu zaman ekranın kenarı değildir.

Dokunmatik ekranda durum tersine döner. NN/g, Avrahami'nin çalışmasına dayanarak kenardaki hedeflerin dokunmatikte daha uzun sürdüğünü aktarır. Parmak bir imleç gibi kenarda durmaz, kenarın ötesine taşabilir.

Sınırları ve yanlış anlaşılmaları

Size piksel ölçüsü vermez. Yasa iki tasarımı karşılaştırır, “şu kadar büyük olsun” demez. NN/g'nin makalesi de sayısal bir boyut vermez. Web için alt sınırı WCAG 2.2'nin 2.5.8 kriteri koyar: AA seviyesinde hedefler en az 24 × 24 CSS piksel olur. Daha küçük hedefler için boşluk istisnası ve birkaç başka istisna vardır.

Büyütmenin bir tavanı var. Her butonu büyütürseniz ekran sıkışır, hedefler birbirine yaklaşır. NN/g'ye göre sıkışık hedefler yanlış seçimi artırır.

Görünmeyen dolgu yarım çözümdür. Tıklanabilir alanı görünen ikondan büyük tutmak yardımcı olur. NN/g yine de bir uyarı ekler: kullanıcı dolguyu fark etmezse görünen çizime nişan alır ve yine yavaşlar.

Kenar kuralı dokunmatiğe taşınmaz. Farede kenar avantajdır, telefonda değildir. Masaüstü kuralını mobil tasarıma kopyalamak bu yüzden yanıltır.

Klavye ve ekran okuyucu kullanıcısını kapsamaz. Yasa işaret etmeyi ölçer. Klavyeyle gezen biri için maliyet piksel değil, hedefe kadar kaç kez Tab'a bastığıdır. Demoda klavyeyle oynayınca bunu görürsünüz.

Tek açıklama değildir. Bir butona hızlı basılıyorsa bunun nedeni boyutu kadar yeri ya da adı da olabilir. Kullanıcının nereye bakacağını bilmesi ayrı bir konudur, Fitts bunu ölçmez.

Benim notum

Audit'lerde en sık gördüğüm Fitts hatası, birincil butonun formdan kopuk durmasıdır. Kullanıcı son alanı doldurur, butonu sayfanın başka bir yerinde arar. Butonu son alanın hemen altına taşımak çoğu zaman tek satırlık bir değişikliktir.

İkinci sıradaki hata, metin içi küçük ikon butonlardır. Düzenle ve sil gibi ikonlar küçük çizimlerdir, çoğu zaman tıklanabilir alan da çizimin kendisidir. Ben ikonu büyütmeden bu alanı en az 2.5.8 kriterinin istediği boyuta çıkarırım.

Yasayı tek başına bir tasarım kuralı gibi kullanmam. Bir ekranı incelerken bana iki soru sordurur. En sık basılan şey, basması en kolay şey mi? Tehlikeli butonlar sık basılanlara fazla mı yakın?

Kendi ürününüzde bu kontrolleri yaptırmak isterseniz UX Audit hedef boyutu ve yerleşimini de içerir. Yöntemi UX audit rehberinde anlattım.

İlgili sayfalar

Mobilde hangi boyutu seçeceğinizi mobil uygulama tasarımı rehberindeki dokunma hedefleri bölümünde Apple, Android ve WCAG ölçüleriyle anlattım.

Fitts bir sorunu nerede arayacağınızı söyler. Sorunun kullanıcıya ne kadar zarar verdiğini tartmak için Nielsen'in 10 kullanılabilirlik ilkesi iyi bir çerçeve verir. Diğer yasalar UX yasaları listesinde.

Kavramın daha geniş yeri için kullanılabilirlik tanımına bakabilirsiniz.