Fitts Yasası: önemli olanı büyütün ve yaklaştırın.
Fren pedalı hızlı erişim için daha büyük ve yakındır. Aynı yasa, düğmelerinizin kolay mı zor mu kullanılacağını belirler.
Bu sayfada
Herhangi bir arabaya oturup aşağıya bakın. Fren pedalı gaz pedalından büyüktür, biraz daha yakın ve aşağıdadır. Ayağınız onu hızla bulur. Bu bir stil tercihi değildir. Psikolog Paul Fitts’in 1954’te tanımladığı Fitts Yasası’dır. Arayüzünüzün nasıl hissettirdiğini de aynı yasa belirler.
Kural basittir. Bir hedefe ulaşma süresi, hedefin uzaklığına ve büyüklüğüne bağlıdır. Yakın ve büyük hedefe daha hızlı ve kolay ulaşılır. Uzak ve küçük hedef daha yavaştır, hata olasılığı daha yüksektir. İki milyondan fazla kişinin kullandığı arayüzleri tasarlarken bu kurala dayandım. Çünkü belirsiz bir kolaylık hissini, yerleştirilebilir ve ölçülebilir bir şeye dönüştürür. Nasıl kullanılacağını anlatalım.
Temel çıkarımlar
- Hedefe ulaşma süresi uzaklıkla artar, boyutla azalır (Fitts, 1954). Önemli işlemler büyük ve yakın olmalıdır.
- Parmak en az 1 by 1 cm hedef ister (Nielsen Norman Group). Dokunma hedeflerini Apple platformlarında 44pt, Material’da 48dp, WCAG 2.5.5 için 44 CSS pixels olarak boyutlandırın.
- Ana işlemi elin zaten durduğu yere koyun. Telefonda bu yer, üst köşedeki bağlantı değil, alttaki başparmak alanıdır.
- Seyrek kullanılan ve yıkıcı işlemleri küçültüp ayırın. Dikkatsiz bir dokunuş pişmanlığa dönüşmesin.
- Ekran kenarı imleci durdurur. Kenara dayalı hedef, o yönde sonsuz büyüklükteymiş gibi davranır. Tam genişlikte bir alt düğmeye basmak kolaydır.
Fitts Yasası nedir?
1954’ten gelen, bir şeyi işaret etmenin ne kadar süreceğine ilişkin bir öngörüdür. Paul Fitts, hedefe hareket süresinin uzaklık ve boyut olmak üzere iki şeye bağlı olduğunu buldu. Uzaklığı iki katına çıkarınca süre uzar. Boyutu iki katına çıkarınca kısalır. Yakın ve büyük her zaman kazanır.
Fren pedalı, Fitts Yasası’nın çelikteki karşılığıdır. Gazdan büyük, biraz yakın ve aşağıdadır. Çünkü ihtiyaç duyduğunuz anda ona hemen ulaşmanız gerekir. Ekranlarınız da aynı kuralla çalışır. Kullanıcının yapmasını istediğiniz işlem kolay hedef olmalıdır. Düzen ya ele yardımcı olur ya da ona karşı çalışır.
Dokunma hedefi ne kadar büyük olmalıdır?
Bir parmağa yetecek kadar, yani çoğu tasarımcının çizdiğinden büyük. Nielsen Norman Group, yanlış dokunmaları önlemek için etkileşimli öğelerin en az 1 by 1 cm olmasını önerir. Daha küçük hedefler nişan almayı gerektirir. Dokunuşlar tam burada kaçar.
Platformlar da aynı fikirde ve ölçüleri veriyor.
| Platform | Hedef boyutu | Kaynak |
|---|---|---|
| iOS ve iPadOS | 44 × 44 pt, varsayılan kontrol boyutu | Apple İnsan Arayüzü Yönergeleri |
| Android, Material Design | 48 × 48 dp, aralarında 8 dp | Material Design erişilebilirlik |
| Web, WCAG 2.5.5 (AAA) | 44 × 44 CSS px | WCAG 2.1, Hedef Boyutu |
Emin değilseniz 44’ü hedef değil, alt sınır sayın. En önemli işlem için daha büyüğünü kullanın.
Ana işlem nereye yerleştirilmelidir?
Elin zaten durduğu yere. Tek elle tutulan telefonda bu yer ekranın altındaki başparmak alanıdır. Uzanmayı ve göz kısmayı gerektiren üst köşedeki küçük bağlantı değildir. Ana eylem çağrısını başparmağın düştüğü yere koyun. Böylece erişmek çaba gerektirmez.
Alt çubukların, tam genişlikte düğmelerin ve alttan açılan panellerin mobil tasarımda yaygınlaşmasının nedeni budur. Bu bir moda değildir. Fitts Yasası’nın başparmağa uygulanmasıdır. Hedef, dinlenen ele ne kadar yakın ve büyükse arayüz o kadar yardımcı hissettirir.
Tehlikeli işlemler ne olacak?
Onlara ulaşmayı bilinçli olarak zorlaştırın. Kural iki yönde de işler. İyi tasarım ikinci yönünde belli olur. Silme, ödeme, geri alınamayan onay. Bunları biraz küçük tutun, ayırın ve araya mesafe koyun. Dikkatsiz bir dokunuş sonradan düzeltmeniz gereken bir pişmanlığa dönüşmesin.
Sürtünme genellikle düşmandır, ama burada yerini hak eder. Biraz küçük, biraz uzak veya ikinci adımla korunan yıkıcı bir düğme saniyenin küçük bir bölümüne mal olur ve bazen büyük bir hatayı önler. Neyin önemli olduğunu ve nerede durup düşünülmesi gerektiğini boyut ve mesafeyle anlatın.
Kenarlar ve köşeler neden bu kadar rahat gelir?
Çünkü ekran kenarı imleci veya başparmağı durdurur. Hedefi geçemezsiniz. Fitts açısından kenara dayalı hedef, o yönde sonsuz büyüklükteymiş gibi davranır. Bakmadan bile ulaşmak kolaydır. Ekranın altını dolduran düğmenin ve masaüstünde köşeye dayanan menünün ardındaki fikir budur.
Elinizdeki kenarları kullanın. Telefonun alt kenarına sabitlenmiş tam genişlikte ana işlem, oluşturabileceğiniz en kolay hedeflerden biridir. Ekranın çerçevesi işin yarısını sizin için yapar.
İki dakikalık denetim
Bunların hiçbiri yeniden tasarım gerektirmez. Ürününüzü açıp ana işlemi bulun. En büyük, en yakın ve ulaşması en kolay öğe olup olmadığını sorun. Sonra en yıkıcı işlemi bulun ve onun böyle olmadığından emin olun. Yanıtlar tersse öğleden sonra ne yapacağınız bellidir.
Boyut ve mesafe süs değildir. Arayüzün ele neyin önemli olduğunu anlatma biçimidir. Doğru ayarlandığında kimse nedenini söyleyemese de ürün kolay hissettirir. Bunu geliştirdiğiniz bir ürüne uygulamak isterseniz ne üzerinde çalıştığınızı anlatın.
Sıkça sorulan sorular
Fitts Yasası nedir?
Fitts Yasası, bir hedefe hareket etme süresinin uzaklığa ve hedef boyutuna bağlı olduğunu söyler. Yakın ve büyük hedeflere daha hızlı ve kolay ulaşılır. Bu yüzden önemli işlemler büyük ve erişilebilir olmalıdır.
Fitts Yasası arayüz tasarımına nasıl uygulanır?
Ana işlemi büyütün ve elin zaten bulunduğu yere, örneğin telefon ekranının altındaki başparmak alanına koyun. Seyrek kullanılan veya yıkıcı işlemleri küçültüp ayırarak yanlışlıkla etkinleştirmeyi zorlaştırın.
Ekran kenarları düğmeler için neden uygundur?
Kenar imleci veya başparmağı durdurur. Böylece kenara dayalı hedef o yönde sonsuz büyüklükteymiş gibi davranır. Ekranın alt kenarını dolduran bir düğmeye basmak kolaydır. Fitts Yasası burada sizin yararınıza çalışır.
Kaynaklar
- 1954’te doi.org
- Nielsen Norman Group nngroup.com
- Apple İnsan Arayüzü Yönergeleri developer.apple.com
- Material Design erişilebilirlik m2.material.io
- WCAG 2.1, Hedef Boyutu w3.org