Responsive UI Tasarımı

Her şey alt alta dizilince sıra bir karar haline geliyor

Dar ekranın asıl sorunu öğelerin küçülmesi değil, yan yana duran her şeyin alt alta geçmesi. Geniş ekranda aynı anda görünen bir filtre paneli ile sonuç listesi, dar ekranda birbirinin arkasına düşüyor. Hangisinin önce geleceği artık bir tasarım kararı.

Bu karar atlandığında sonuç hemen görünüyor. İçerikten önce gelen uzun bir filtre bloğu, kullanıcıyı asıl aradığı şeye ulaşmak için uzun uzun kaydırmaya zorluyor. Yan sütundaki ikincil bilgiler ana metnin ortasına giriyor. Ürün sayfasında açıklama, fiyatın ve düğmenin üstüne çıkıyor.

Bu yüzden dar ekran düzenini yeniden sıralama işi olarak ele alıyoruz. Her bölüm için tek bir soru soruyoruz: kullanıcı bu ekrana ne yapmaya geldi ve o işi yapması için önce neyi görmeli. İkincil bloklar ya aşağı iniyor ya da açılır bir başlığın altına giriyor. Sıra tasarım dosyasında yazılı oluyor, çünkü kod tarafında kendiliğinden doğru çıkması beklenmiyor.

Sıralama kararı erişilebilirlik tarafını da ilgilendiriyor. Ekranda görünen sıra ile sayfanın kendi sırası ayrıştığında, klavyeyle gezen ya da ekran okuyucu kullanan kişi başka bir düzenle karşılaşıyor. Bu yüzden iki sıranın örtüşmesini şart koşuyoruz.

Telefonda imleç yok, başparmak var

Dar ekran tasarımında gözden kaçan kısım genellikle ölçü değil, elin kendisi. Kullanıcı telefonu tek elle tutuyor ve ekranın üst köşesine zor uzanıyor. Alt bölge en rahat, üst köşeler en zor bölge oluyor. Buna rağmen en sık kullanılan işlem birçok arayüzde üst köşede duruyor.

Bunun yanında imleçle çalışan her şey telefonda karşılıksız kalıyor. Üzerine gelince açılan bir menü, yalnız fare imlecini bekleyen bir ipucu ya da imleç durunca beliren bir açıklama dokunmatik ekranda hiç görünmüyor. Bu öğelerin dar ekranda ayrı bir karşılığı olması gerekiyor.

Ekranı kaplayan sabit öğeler de ayrı bir başlık. Üstte duran bir çubuk, altta duran bir düğme ve açılan klavye birlikte ekranın yarısını alabiliyor. Bu yüzden sabit öğeleri tek tek değil, hepsi aynı anda göründüğünde ne kadar yer kapladığını ölçerek kararlaştırıyoruz.

Bu ölçüm cihaz üzerinde yapılıyor. Tarayıcı penceresini daraltmak bazı sorunları gösteriyor ama klavyenin kapladığı alanı, adres çubuğunun kaybolup geri gelmesini ve tek elle kullanımı göstermiyor. Kritik ekranları bu yüzden gerçek telefonda deniyoruz.