Minimalist Tasarımda Hız: Neyi Kesmeli, Neyi Bırakmalı

Minimalist tasarım "az görsel koy" demek değil; her öğenin sayfaya kaça mal olduğunu bilmek demek. Sayfayı yavaşlatan şey çoğu zaman göze çarpan büyük fotoğraf değil, kimsenin saymadığı küçük isteklerdir. Bu yüzden sadeleştirme kararı göz kararıyla değil, sayfanın istek ve bayt bütçesine bakarak verilir.

Sadelik bir görünüm değil, bir bütçe

Bir sayfanın açılma süresi üç şeyin toplamıdır: kaç ayrı istek yapıldığı, bu isteklerin toplam kaç bayt getirdiği, bir de bunlardan hangilerinin ilk çizimi beklettiği. Minimalist bir tasarım bu üç sayıyı birden düşürdüğü için hızlıdır, sade göründüğü için değil. Ayrım işe yarıyor, çünkü bol beyaz alanlı ve tek büyük fotoğraflı bir sayfa gayet minimalist görünüp yine de ağır olabilir.

Pratik karşılığı şu: bir öğeyi kaldırmadan önce hangi kaleme yazıldığına bak. Dekoratif bir ayraç görseli bayt getirir ama çizimi bekletmez. Web fontu ise metnin çizilmesini bekletir; iki bağlantı turu sonra gelir, o ana kadar yazılar ya hiç görünmez ya da yedek fontla çizilip font yüklenince yerinden oynar.

Ağırlık nerede toplanıyor

Ölçmeden sadeleştirmek insanı yanlış yerden kesmeye götürüyor. Sık rastlanan üç kalem:

• Kapak görseli: sayfanın en büyük tek dosyası genelde budur. WebP ya da AVIF'e geçmek aynı görselde ciddi kazanç verir, srcset ile mobile daha küçük bir kopya sunmak ondan da fazlasını.
• İkon fontu: altı ikon için tüm glif setini indirirsin. Aynı ikonlar inline SVG olarak gömüldüğünde yalnızca kullandığın kadarı gider, üstelik ek bir istek de kalmaz.
• Boyutsuz görseller: width ve height yazılmamış her görsel, yüklendiği anda altındaki içeriği aşağı iter. Bu bir hız sorunu değil, kararlılık sorunudur; kullanıcı okuduğu satırı kaybeder.

Bir kurumsal sitede sayfanın ilk görünür halini bekleten şeyin altı ikonluk bir ikon fontu olduğunu görüp hepsini inline SVG'ye çevirmiştik.

Kullanıcı gecikmeyi nasıl yaşar

Jakob Nielsen'in yanıt süresi eşikleri burada hâlâ iyi bir çerçeve veriyor. 0,1 saniyenin altı anlık algılanır, kullanıcı sonucu doğrudan kendi eyleminin devamı sanar. 1 saniyeye kadar düşünce akışı bozulmaz; gecikme fark edilir ama iş kesilmez. 10 saniye ise dikkatin sayfada kaldığı üst sınırdır, ötesinde kullanıcı başka bir şeye geçer ve geri dönmesi için ayrı bir neden gerekir.

Buradan çıkan tasarım kararı şu: bir saniyenin altına inemediğin yerlerde beklemeyi gizlemeye çalışma, ilerlemeyi göster. Dönen çark ne kadar beklendiğini söylemez. İçeriğin yerini tutan iskelet bloklar, sayfanın neye dönüşeceğini baştan gösterdiği için aynı süreyi daha kısa hissettirir.

Sadeleştirmenin durması gereken yer

Navigasyon, minimalizmin en çok zarar verdiği yer. İkonların yanından etiketleri kaldırmak tasarımı temizler ve kullanıcıyı tahmin etmeye zorlar; herkesin tanıdığı birkaç ikon dışında (arama, kapat, menü) etiketi bırakmakta fayda var.

Breadcrumb da her sitenin ihtiyacı değil. Derin hiyerarşisi olan, kullanıcının arama sonucundan ortadaki bir sayfaya düştüğü sitelerde yolu gösterir ve üst kategoriye çıkmayı kolaylaştırır. Üç sayfalık düz bir sitede ise her sayfada tekrar eden bir satırdan ibarettir, kaldır.

Kaynaklar

Response Times: The 3 Important Limits | Nielsen Norman Group