Tablet Kullanılabilirliği: Ekran Genişliği Yanlış Ölçüt

Tablette bozulan arayüzlerin çoğunda hata tasarımda değil, kırılma noktasında. CSS ekran genişliğini ölçer, oysa belirleyici olan arayüzün parmakla mı fareyle mi kullanıldığı. Yatay tutulan bir iPad 1024 piksel CSS genişliğiyle çoğu grid sisteminde masaüstü sınıfına düşer ve masaüstü ölçülerinde hedefler alır. Ölçüt genişlik kaldığı sürece, responsive denen site tablette fare için tasarlanmış butonlar gösterir.

Ölçüt genişlik değil, giriş yöntemi

Yaygın grid sistemlerinin kırılma noktaları piksel genişliğine bakar. Bootstrap'te md 768, lg 992 pikselden başlar. Dikey tutulan bir iPad 768 piksellik genişliğiyle md'ye girer, kullanıcı cihazı çevirdiğinde 1024 piksel olur ve lg'ye geçer. Parmak değişmedi, arayüz sınıfı değişti.

Bunu genelde genişlik eşiğiyle değil, giriş yöntemini soran medya özellikleriyle çözerim:

@media (pointer: coarse) { .btn, .nav a { min-height: 48px; padding: 12px 16px; } } @media (hover: none) { .dropdown:hover > .menu { display: none; } }

İlki dokunmatik girişli her cihazı yakalar, ekranın kaç piksel olduğuna bakmadan. İkincisi üstüne gelince açılan menüleri kapatır. Dokunmatikte hover diye bir durum yok: ilk dokunuş menüyü açar, ikinci dokunuş menünün altındaki bağlantıya gider, kullanıcı da neye bastığını anlamaz.

Dokunma alanı: 44 ve 48

Burada tahmine gerek yok, iki ölçü de yazılı. Apple'ın kılavuzu en az 44x44 pt dokunulabilir alan ister, Material Design 48x48 dp ve hedefler arasında 8 dp boşluk. Aradaki farkı kovalamaya değmez; 48 pikseli tutarsan ikisini de geçersin.

Ölçülen şey butonun görünen boyutu değil, dokunmaya cevap veren alan. 24 piksellik bir ikonu padding ile 48'e çıkarabilirsin, görsel olarak küçük kalmaya devam eder. Tabletlerde en çok batan yer tablo satırlarının sonundaki sil ve düzenle ikonları oluyor: yan yana, 20 piksel, aralarında boşluk yok. Yanlış satırı silen kullanıcı bunu kendi hatası saymaz.

Bölünmüş ekranı kullanıcı açıyor

"Bölünmüş ekrandan uzak durun" tavsiyesi konuyu yanlış yere koyuyor. iPadOS'te Split View'i tasarımcı açmıyor, kullanıcı açıyor. 1024 piksellik bir cihazda siten 500 piksellik bir pencerede çalışabilir, Slide Over'da daha darında.

Bunun pratik karşılığı şu: cihaz tespitine dayanan hiçbir kural güvenilir değil. Düzen, ekranın değil pencerenin o anki genişliğine göre kurulmalı. Kendi kabının genişliğine göre davranması gereken bileşenlerde @container sorguları bu işi medya sorgularından temiz yapıyor ve güncel tarayıcıların hepsinde çalışıyor.

Jest, gizli buton demektir

Kaydırarak silme, kenardan çekip geri gitme. İkisi de ekranda görünmez, keşfedilmeyi bekler. Bir işlemin tek yolu jest ise, o işlemi kullanıcıların çoğundan saklamış olursun.

Kural iki maddeye sığıyor: her jestin görünür bir karşılığı olsun, geri dönüşü olmayan her jestin de geri alması. Düz tasarımda aynı sorunun görsel hali yaşanıyor. Tıklanabilir olanla olmayan arasında gölge ya da renk farkı bırakmayan bir arayüzde kullanıcı dokunarak yoklamaya başlar, dokunup hiçbir şey olmadığını görmek de arayüzü bozuk sanmakla aynı kapıya çıkar.