Dokunma alanı: mobilde minimum buton boyutu ne olmalı?

Kısaca

Dokunma alanı, İngilizce adıyla touch target, kullanıcının bir öğeyi çalıştırmak için basabildiği bölgedir. W3C hedefi, işaretçi hareketini kabul eden ekran bölgesi diye tanımlar. Yani ölçtüğünüz şey, çizilen ikonun çevresiyle birlikte basılabilen alandır.

Kaynak	Ölçü	Not
Apple (iOS, iPadOS)	44 × 44 pt	Varsayılan kontrol boyutu. En küçüğü 28 × 28 pt.
Android, Material	48 × 48 dp	Google'a göre yaklaşık 9 mm. Daha büyüğü daha iyi.
WCAG 2.2, 2.5.8 (AA)	24 × 24 CSS piksel	Aralık istisnası var.
WCAG 2.2, 2.5.5 (AAA)	44 × 44 CSS piksel	W3C önemli kontroller için bunu önerir.

Platform ayrıntılarını ve iOS ile Android farkını mobil uygulama tasarımı rehberinde anlattım. Bu sayfa kalıbın kendisine bakıyor. Önce görünen boyutla basılan alanı ayırıyorum, sonra aralığa ve ekranın kenarlarına geçiyorum.

Küçük hedef neden sorun çıkarır

Hedef küçüldükçe ona isabet etmek zorlaşır. Fitts yasası bunu süre olarak ölçer. Dokunmatik ekranda bir de ıska vardır: parmak hedefi kaçırır ve yanındaki öğeye basar.

NN/g'den Aurora Harley, MIT Touch Lab'in bulgusunu aktarır: parmak ucu genelde 1,6 ile 2 cm genişliğindedir. Başparmağın ekrana değen alanı ise ortalama 2,5 cm'dir. Harley'ye göre asıl suçlu küçük hedeflerdir.

W3C, 2.5.5 kriterinin kimlere yardım ettiğini de sayar. Listede eli titreyenler, ince hareketi zor yapanlar ve cihazı tek elle kullananlar var. Toplu taşımada sarsılan kullanıcılar da bu gruba girer.

Görsel boyut ile dokunma alanı farkı

Bir ikon 20 piksel görünüp 44 piksellik bir alana basıldığında çalışabilir. Kalıbın özü bu iki ölçüyü ayrı düşünmektir. Görünen boyutu düzen ve okunurluk belirler, dokunma alanını parmak.

Android'in Compose belgesi bir örnek verir: basılabilen bir Checkbox, çevresine dolgu ekleyerek en az 48 dp genişlik ve yüksekliğe ulaşır. Switch, RadioButton ve Slider da bu alt sınırı kendiliğinden uygular. Kendi etkileşimli öğenizi yazdığınızda boyutu sizin vermeniz gerekir.

Apple'ın butonlar için genel kuralı da aynı yöne bakar. Bir butonun dokunma bölgesi en az 44 × 44 pt olmalıdır. Apple bunu, kullanıcı parmak ucuyla da imleçle de butonu rahat seçebilsin diye ister.

Harley, görülecek kadar büyük ama rahat seçilemeyecek kadar küçük ya da sıkışık öğeler için "view–tap asymmetry" der. Görmek kolaydır, dokunmak zordur. Alan görünmediği için ikonun kendisi net bir işaretçi olmalı.

Aşağıdaki iki satırda adet butonları aynı boyda. Anahtara basınca basılabilen alanları görürsünüz.

Görünen boyut ve dokunma alanı

Önce: alan ikon kadar

Filtre kahve, 250 g

1

Görünen daire 20 px, dokunma alanı 20 × 20 px.

Sonra: ikon aynı, alan 44 px

Filtre kahve, 250 g

1

Görünen daire 20 px, dokunma alanı 44 × 44 px.

Kesikli çizgi, butonun basılabilen alanını gösterir. İki satırda ikonlar aynı boyda. Sağdaki satırda alan, görünmeyen bir katmanla 44 piksele genişletildi.

Sepetteki adet butonları iki satırda da 20 piksel görünür. Sağdakinin çevresinde görünmeyen bir katman var ve alanı 44 piksele çıkarır. JavaScript kapalıysa kesikli çizgiler hep açık durur.

Aralık: hedefler arasındaki boşluk

Harley'nin sırası net: hedefler önce yeterince büyük, sonra iyi aralıklı olmalı. Boşluk eklemek, zaten çok küçük olan bir hedefi kurtarmaz.

Ölçüler kaynağa göre değişir:

• Apple, çerçeveli öğelerin çevresinde yaklaşık 12 pt boşluk önerir. Çerçevesiz öğelerde görünen kenarın çevresine yaklaşık 24 pt bırakılır.
• Google'ın Android erişilebilirlik yardım sayfası, hedeflerin arasında 8 dp ya da daha fazla boşluk ister.
• WCAG 2.5.8, 24 pikselden küçük hedeflere aralık istisnasıyla izin verir.

W3C'nin aralık testi şöyle işler. Küçük hedefin sınır kutusunun ortasına 24 CSS piksel çapında hayali bir daire çizersiniz. Daire başka bir hedefe ya da başka bir küçük hedefin dairesine değmiyorsa hedef geçer.

Yine de W3C, aralık yetse bile 24 piksellik alt sınırı tutturmayı iyi uygulama sayar. Ben aralık istisnasını son çare olarak kullanırım.

Genişletilmiş alanlar birbirine binmemeli. Android'in Compose belgesi, çakışmayı önlemek için küçük öğeye baştan yeterli boyut vermenizi önerir.

Kenar ve köşeler

Ekranın her yeri aynı isabeti vermez. Steven Hoober'ın UXmatters'taki yazısına göre insanlar ekranın ortasına bakmayı ve dokunmayı tercih eder. Ortada isabetleri de daha yüksektir.

Hoober bu yüzden konuma göre ölçü önerir. Ortadaki hedef 7 mm kadar küçük olabilir, köşedeki hedef ise yaklaşık 12 mm olmalı. Hoober, önerdiği hedef ölçülerinin gözlenen dokunuşların %95'ini kapsadığını yazar.

Aynı yazıda tutuş verileri de var. Kullanıcıların %75'i ekrana yalnızca tek başparmakla dokunuyor. Telefonu tek elle tutanların oranı ise %50'nin altında.

Ben bunu şöyle uygularım: köşedeki kapat, geri ya da menü ikonuna ortadaki butonlardan daha geniş alan veririm. Silme gibi geri alınamayan bir eylemi de sık basılan bir butonun hemen yanına koymam.

Canlı örnek: parmak hedefi testi

Telefonunuzu alın ve turuncu daireye basın. Önce 16 piksel ve 2 piksel aralıkla birkaç kez deneyin, sonra 44 ya da 48 piksele geçin. Masaüstünde fareyle de çalışır, ama farkı en çok başparmakla hissedersiniz.

Parmak hedefi testi

Bu test JavaScript ile çalışır. Açık olduğunda 4 × 4 dizilmiş 16 daire görürsünüz. Biri turuncudur ve ona basarsınız. Daire boyutunu 16, 24, 44 ve 48 piksel, aralığı 2 ve 8 piksel arasında değiştirirsiniz.

Turuncu daireye basın, her isabette hedef yer değiştirir. Komşu daireye ya da boşluğa basmak ıska sayılır. Bu test ölçüm yapmaz, farkı hissettirir. Sonuç parmağa, telefona ve tutuşa göre değişir. Klavyede yalnızca turuncu daire odak alır.

Küçük ve sıkışık dairelerde komşuya basmak çok kolaydır. Tablo her ayarı ayrı sayar, böylece aynı parmakla farklı boyutları yan yana görürsünüz.

WCAG 2.5.8'in istisnaları

WCAG 2.2 içindeki 24 piksel kuralının beş istisnası var. Bunları bilirseniz audit'te gereksiz bulgu yazmazsınız.

• Aralık: küçük hedef, yukarıdaki daire testini geçiyorsa.
• Eşdeğer: sayfadaki başka bir kontrol aynı işi yapıyor ve kurala uyuyorsa.
• Satır içi: hedef bir cümlenin içindeyse ya da boyutunu metnin satır yüksekliği sınırlıyorsa.
• Tarayıcı kontrolü: boyutu tarayıcı belirliyor ve sayfayı yapan kişi değiştirmemişse.
• Zorunlu: hedefin o biçimde sunulması bilgi için şartsa ya da yasa gereğiyse.

Ben satır içi istisnayı dar okurum. Bir kartın altında tek başına duran "Detay" bağlantısı bir cümlenin parçası değildir. O bağlantı kurala tabidir.

Uygulama notu: CSS ile dokunma alanını genişletmek

Tasarımı bozmadan alanı büyütmenin iki yolu var. Birincisi butona görünmez bir katman eklemek. İkincisi butonun kendisine en az genişlik ve yükseklik verip ikonu ortalamak.

/* 1. Görünmez katman: ikon 20 px, basılan alan 44 px */
.ikon-buton {
  position: relative;
  width: 20px;
  height: 20px;
}
.ikon-buton::after {
  content: "";
  position: absolute;
  inset: -12px; /* 12 + 20 + 12 = 44 */
}

/* 2. Butonun kendisi büyür, ikon ortada kalır */
.ikon-buton--kutu {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}
.ikon-buton--kutu svg {
  width: 20px;
  height: 20px;
}

/* 3. Dokunmatik ekranda araya boşluk */
@media (pointer: coarse) {
  .arac-cubugu { gap: 8px; }
}

Birinci yolda ::after katmanı butonun parçasıdır, ona yapılan dokunuş butona gider. Üst öğede overflow: hidden varsa katman kesilir ve alan da onunla küçülür. Yukarıdaki adet örneği bu yolla yapıldı.

İkinci yol daha güvenlidir, çünkü alan düzende gerçekten yer kaplar ve komşusuna binmez. W3C'nin C42 tekniği de bu fikri kullanır: sayfa numarası bağlantılarını en az 24 × 24 piksellik kapsayıcılara koyar.

Ölçerken basılan alana bakın. Geliştirici araçlarında butonu seçince görünen ölçü, ::after katmanını içermez.

Benim notum

Audit'lerde küçük kalan hedefler hep aynı yerlerde çıkıyor. En sık sepetteki adet artısı ile eksisini ve bildirim kartındaki kapat çarpısını görüyorum. Hepsi tasarımda ikon olarak çiziliyor ve kodda da ikon kadar bırakılıyor.

Ben tasarım dosyasında dokunma alanını ayrı bir katman olarak çizerim. Geliştirici o katmanı görünce ölçüyü tahmin etmek zorunda kalmaz. Bunu tasarım sisteminde bir kural olarak tutmak, her ekranda yeniden konuşmaktan kolaydır.

Web için tabanım 24 piksel, hedefim 44. Mobil uygulamada 44 pt ve 48 dp'nin altına inmem.

Kendi ürününüzde bu ölçüleri kontrol ettirmek isterseniz UX Audit erişilebilirlik kontrolünü de içerir. Daha geniş bir tarama için erişilebilirlik denetimi rehberine bakabilirsiniz.

Kontrol listesi

1. Her etkileşimli öğede basılan alanı ölçün.
2. Web'de 24 × 24 CSS pikselin altında kalanlara aralık testini uygulayın.
3. Ana butonlarda ve sık kullanılan ikonlarda 44 pikseli hedefleyin.
4. Genişletilmiş alanların komşularına binmediğini kontrol edin.
5. Köşedeki hedeflere ortadakilerden fazla alan verin.
6. Geri alınamayan eylemi sık basılan bir butonun yanına koymayın.
7. Akışı gerçek bir telefonda, tek başparmakla bir kez baştan sona deneyin.