Mobil Arayüzde Tap Hedefleri: 44 pt ve 48 dp Gerçekte Kaç Milimetre?
Dokunmatik ekranda bir düğmenin çalışıp çalışmadığını belirleyen şey nasıl göründüğü değil, parmağın değdiği alanın büyüklüğüdür. Çoğu tasarımda bu ikisi birbirine karışır: 24 piksellik bir ikon 24 piksellik bir hedef sanılır, kullanıcı da üçüncü denemede tutturur. Tap hedefi ölçüleri tam olarak bu ayrımla başlar.
Tıklanabilir olan ile tıklanabilir görünen
İki kavramı ayırmakta fayda var. Affordans, bir öğenin ne işe yaradığını biçimiyle sezdirmesidir: yükseltilmiş bir yüzey basılabilir görünür, altı çizili metin gidilecek bir yer olduğunu söyler. Signifier ise o sezgiyi açıkça işaretleyen şeydir; ok, ikon, renk vurgusu, kenarlık.
Mobilde hata genelde ikincisinin kurban edilmesinden çıkar. Arayüz sadeleştirilirken kenarlıklar kalkar, gri tonlar birbirine yaklaşır, geriye hangi metnin bağlantı hangisinin başlık olduğunu ayırt edemeyen bir ekran kalır. Kullanıcı deneme yanılmaya başladığı anda tasarım işini yapmayı bırakmıştır.
Hedef boyutu: dp, pt ve gerçekte kaç milimetre
Birimler bu konuda sürekli karıştığı için en baştan kuralım. Android'de dp (density-independent pixel) 160 ppi'lik bir ekranı taban alır, yani 1 dp = 1/160 inç. iOS'ta point'in tabanı ilk iPhone ekranının yoğunluğudur, 163 ppi, yani 1 pt = 1/163 inç. Her iki durumda da cihazın gerçek piksel yoğunluğu ne olursa olsun fiziksel boyut sabit kalır; ölçekleme çarpanı işletim sistemi tarafında halledilir. Ayrıntı için Android çoklu ekran dokümantasyonu hâlâ en net kaynak.
Buradan iki platformun önerdiği asgari hedefin fiziksel karşılığı doğrudan çıkar:
| Platform | Taban yoğunluk | Önerilen asgari hedef | Fiziksel karşılığı |
|---|---|---|---|
| Android (dp) | 160 ppi | 48 x 48 dp | 7,6 mm |
| iOS (pt) | 163 ppi | 44 x 44 pt | 6,9 mm |
Bu rakam sık sık "48 dp yaklaşık 9 mm" diye aktarılır, ama hesap tutmuyor: 48 / 160 inç 0,3 inçtir, o da 7,62 mm eder. 9 mm'ye çıkmak için hedefin yaklaşık 57 dp olması gerekirdi. Aradaki 1,4 mm kulağa önemsiz gelebilir; yan yana dizilmiş beş ikonda toplam 7 mm'lik bir kayma demek ve tam da yanlış tuşa basmaların çıktığı yer orası.
Tek tasarımı iki platforma birden veriyorsan 48 dp'yi taban almayı 44 pt'ye tercih ederim. Büyük olan küçüğü kapsar, tersi kapsamaz; iOS tarafında 48'e çıkmanın hiçbir maliyeti yokken 44'te kalmak Android'de asgarinin altına düşmek olur.
Görsel küçük olabilir, hedef olamaz
Hedefin büyümesi ikonun büyümesi anlamına gelmez. 24 dp'lik bir ikonun etrafına 12 dp dolgu verirsen dokunma alanı 48 dp olur, görünen boyut değişmez. Web tarafında aynı şeyi bağlantının kendisine padding vererek ya da ::after ile görünmez bir katman uzatarak yaparsın; üçüncü parti bir bileşene ihtiyaç duymadan.
Hedefler arasındaki boşluk
Boyut kadar aralık da belirleyicidir. "Sil" ile "Düzenle" bitişik durduğunda her ikisi de 48 dp olsa bile parmak ucunun temas alanı iki hedefe birden yayılır ve sistem hangisini seçeceğine dokunuşun merkezine göre karar verir. Aralarında en az 8 dp bırakmak bu belirsizliği büyük ölçüde kapatır.
Yıkıcı eylemler için mesafeyi daha da açmak gerekir. Geri alınamayan bir işlemi, sık kullanılan bir işlemin hemen yanına koymak boyutla düzeltilebilecek bir sorun değildir; konum sorunudur. Ekranın alt kenarına yakın bölge başparmakla en kolay erişilen yer olduğu için birincil eylem oraya, silme gibi işlemler daha uzağa ya da kaydırma jestinin arkasına gider.
Dokunulabilirliği belli etmek
Mikro animasyonlar, basılınca oluşan dalga efekti, renk geçişi gibi geri bildirimler kullanıcının dokunuşunun kaydedildiğini anlamasını sağlar. Bunlar olmadığında insan aynı düğmeye iki kez basar, uygulama da iki istek gönderir.
Süre burada belirleyici. 100 ms altındaki bir tepki anlık algılanır, 300 ms üstü gecikme gibi hissedilir. Sürekli yanıp sönen, dikkat çekmek için hareket eden öğeler ise ters teper: göz onları reklam sanıp atlamayı öğrenir. Hareketi yalnızca kullanıcının eylemine cevap olarak kullanmak, dikkat çekmek için kullanmaktan daha iyi sonuç verir.
Erişilebilirlik ve gerçek koşullarda test
Motor kontrol farklılıkları, titreme, tek elle kullanım, otobüste ayakta durmak; hepsi hedef isabetini düşürür. Material Design erişilebilirlik rehberi ve Apple'ın erişilebilirlik yönergeleri asgari ölçüleri bu yüzden ısrarla tekrarlar. Kontrast da aynı denklemin parçası: hedefi bulamayan kullanıcı için boyutun bir anlamı yok.
Ölçüleri tarayıcı geliştirici araçlarındaki cihaz simülasyonunda doğrulamak yanıltıcıdır, çünkü fare imleci parmaktan çok daha hassastır. Gerçek cihazda, tek elle, yürürken denemek beş dakika sürer ve masaüstünde hiç görünmeyen sorunları anında ortaya çıkarır. Dokunma isabetsizliğini ölçmek isteyen için basit bir yol da var: analitikte aynı öğeye 500 ms içinde gelen tekrar dokunuşları saymak. O sayı yüksekse sorun hedefin boyutunda ya da geri bildiriminde demektir.