Ekran Alanında Neyi Büyütmek İşe Yarar, Neyi Yaramaz

Ekran alanı genelde pahalı bir gayrimenkule benzetilir. Benzetme kulağa doğru gelir, pratikte ise tek bir refleks üretir: ne varsa büyütmek. Oysa kıt olan kaynak piksel değil, kullanıcının tek bir ekranda vermeye razı olduğu karar sayısıdır.

Gayrimenkul benzetmesi nerede çuvallıyor

Gayrimenkulde boş alan kayıptır, doldurulmadıkça getirisi yoktur. Arayüzde boşluk tam tersine yanındaki öğenin okunmasını sağlayan şeydir. Benzetmeyi ciddiye alan tasarımcı ekranı doldurur ve umduğunun tersini elde eder: her şey aynı anda bağırdığı için hiçbiri öne çıkmaz.

Bir ekranda birbirine denk ağırlıkta üç eylem duruyorsa orada piksel sorunu yoktur, öncelik sorunu vardır. Alanı yeniden bölüştürmek bu sorunu çözmez, sadece daha büyük harflerle tekrar eder.

Büyütmenin faturası kaydırmaya çıkar

"Ekranı cömert kullanın, öğeleri büyütün" tavsiyesiyle "kullanıcıyı gereksiz kaydırmaya zorlamayın" tavsiyesi çoğu yazıda yan yana durur. İkisi aynı anda geçerli olamaz. Ekran yüksekliği sabittir, büyüttüğünüz her öğe bir sonrakini aşağı iter; kazandığınız okunaklılığı katlanarak artan kaydırmayla ödersiniz.

Dolayısıyla "büyük iyidir" bir kural değil, bütçe dağıtımı sorusudur: bu ekran ne için var? Ürün sayfasında görsel ile satın alma butonu bütçenin çoğunu hak eder. On iki maddelik bir menüde her satırın 64 piksel yüksekliğinde olması kimseye yardımcı olmaz, listenin sonunu ekranın dışına atar.

48 piksel nereden geliyor

Dokunmatik hedefler için tekrarlanan 48x48 rakamı bir doğa yasası gibi aktarılıyor, oysa platform kılavuzlarının birinden geliyor ve tek rakam da değil. Material Design 48dp der, Apple'ın insan arayüzü kılavuzu 44pt. WCAG 2.2 ise erişilebilirlik tarafında AA düzeyinde 24x24 CSS pikseli eşiğini koyar, 44x44 ölçüsü AAA düzeyinde kalır. Farklı sayılar, farklı amaçlar. Hangisine uyduğunuzu bilmeden "standartlara uygun" demek zor.

Bu ölçütlerin çoğunda aralık, boyuttan daha belirleyici. Yeterli boşlukla ayrılmış küçük hedefler, bitişik duran büyük hedeflerden daha az yanlış dokunma üretir. Bir de şu var: dokunma alanının görsel öğeyle aynı boyda olması gerekmiyor. Hedef küçük diye butonun görünen boyutunu büyütmem, çünkü padding ya da şeffaf bir ::after katmanı düzeni hiç bozmadan aynı sonucu veriyor.

Yoğunluk kendi başına kusur değil

"Bilgi yığmayın" uyarısı genel geçer kabul görüyor ama insanların gönüllü olarak en çok vakit geçirdiği arayüzlerin bir kısmı yoğun: uçuş arama sonuçları, borsa terminalleri, yönetim panelleri. Kullanıcı karşılaştırma yapıyorsa yoğunluk onun lehinedir, seyrek bir ekran karşılaştırmayı imkânsız kılar.

Kalabalık hissi miktardan değil ayrımsızlıktan doğuyor. Otuz satırlık bir tablo, hepsi aynı puntoda ve aynı renkteyse yorucudur; aynı otuz satır net bir hiyerarşiyle taranabilir. Çözüm silmek değil, hangi bilginin ikincil olduğuna karar vermek.

Ne ölçülür

Bu kararların çoğu tartışmayla değil, kendi ziyaretçi verinizle çözülür. Tasarımı 1920 piksellik bir monitöre göre kurup sonra mobilde sıkıştırmak yerine, analitikteki gerçek görüntü alanı yüksekliklerine bakın; çoğu sitede ilk ekranın nerede bittiği tahmin edilenden epey yukarıdadır.

• Gerçek cihaz dağılımınızdaki medyan görüntü alanı yüksekliği ve ana eylemin bu sınırın altında mı üstünde mi kaldığı.
• Aynı noktaya art arda yapılan dokunuşlar: küçük ya da bitişik hedeflerin en dürüst göstergesi budur.
• Kaydırma derinliği, özellikle bir öğeyi büyüttükten sonraki ve önceki değerin karşılaştırması.

Bu üçü elinizdeyken "daha büyük mü olsun" tartışması çabuk biter. Verisi olmayan yerde ise varsayılan tercih büyütmek değil, ekrandan bir şey çıkarmak olmalı.