Tüm Yazılar
6 dk okuma

Hızlı görünen değil, hızlı hissettiren arayüzler

Teknik hız ölçülebilir; ama kullanıcı asıl 'hızlı hissettiren' arayüzü hatırlar. Kararlı yerleşim, erken geri bildirim ve dürüst bir performans bütçesi üzerine notlar.

Bir sayfanın kaç milisaniyede yüklendiğini ölçebilirim; ama kullanıcı için asıl soru bu değil. Sayfa açılıp içerik gözümün önünde oraya buraya kayıyorsa, ya da bastığım düğme sessiz kalıyorsa, o teknik hız bana hız gibi gelmiyor. Algılanan performans çoğu zaman beklemeyi gizlemek değil, ne olduğunu anlaşılır kılmaktır.

Kullanıcı puanı değil, sırayı yaşar

Performans raporları iyi bir başlangıç. Ama kimse ekranda bir puan görmez; olayların sırasını yaşar. Önce sayfanın iskeleti gelir, sonra ana içerik, en sonda ayrıntılar. Bu sıra doğru kurulursa ekran daha tamamlanmadan kullanılabilir görünür. Yanlış kurulursa her yeni parça bir öncekini bozar, göz sürekli yeniden yön arar.

Ben de bu yüzden içerik gelmeden yerini ayırırım. Kapak görselinin oranı, başlığın satır uzunluğu, kartların yüksekliği elimden geldiğince baştan bellidir. Yükleme sırasında bu boşlukları korumak bana yalnızca bir optimizasyon gibi gelmiyor; sayfanın en baştan verdiği sözü tutması gibi geliyor.

Aynı web sayfası iskeletinin içerik yüklenirken yer değiştirmeden üç aşamada tamamlanmasını gösteren editoryal şema
01 / İSKELETEkran değişmedi; içerik yerine oturdu.Alanlar baştan ayrıldığında yükleme, kompozisyonu yeniden kurmak yerine onu tamamlar.

Bir işlem başladığında

Kullanıcı bir işlem başlattığında arayüzün ilk işi sonucu hemen üretmek değildir — isteği aldığını göstermektir. Düğmenin durumu değişebilir, seçilen satır belirginleşebilir, yeni panelin yeri hazırlanabilir. Küçük ama anlık bir geri bildirim, uzun süren bir işlemi bile anlaşılır tutar.

Burada dikkat ettiğim şu: sahte bir hız duygusu üretmeye çalışmıyorum, gerçek durumu görünür kılıyorum. İşlem sürüyorsa “bitti” gibi davranmam; kullanıcının neyi başlattığını ve sırada ne olduğunu anlatan bir ara durum tasarlarım. İyi bir geri bildirim süreyi kısaltmayabilir. Ama kullanıcının aynı şeyi tekrar tekrar denemesini, bir de sistemden şüphe etmesini engeller.

Bir dokunma eyleminin anlık geri bildirim sinyaline ve ardından tamamlanan içeriğe dönüştüğünü gösteren üç aşamalı şema
02 / TEPKİSonuç gecikebilir; cevap gecikmemeli.Eylem, geri bildirim ve tamamlanma birbirinden ayrıldığında bekleme anlaşılır hale gelir.

En hızlı kaynak, hiç yüklenmeyendir

Hız için yaptığım en etkili işler çoğu zaman bir şey eklemekle değil, çıkarmakla başlıyor. Kullanılmayan bir font ağırlığı, ilk ekranda görünmeyen kocaman bir görsel, tek bir efekt için gelen bütün bir kütüphane, tekrar eden üçüncü taraf kodu — her biri sayfanın sırtında taşıdığı görünmez bir yük. Performans bütçesini de bu yükleri sonradan temizlemek için değil, en baştan sorgulamak için tutuyorum.

Bir kaynağın maliyetini yalnızca dosya boyutuyla ölçmem. Ağdan gelmesi, çözülmesi, çalışması ve ekranda yerini alması ayrı ayrı maliyetler. Bu yüzden kritik içeriği öne alan, görselleri gerçek kullanım boyutunda sunan ve istemcide yalnızca gerçekten etkileşim gereken kodu çalıştıran yalın bir düzeni tercih ediyorum.

Çok sayıdaki ağır arayüz parçasının bir filtreden geçerek daha yalın ve dengeli bir web sayfasına dönüştüğünü gösteren şema
03 / BÜTÇEHer parça, taşıdığı değeri açıklamalı.Gereksiz yük dışarıda kaldığında içerik, görsel hiyerarşi ve temel etkileşim daha erken hazır olur.

Ölçüm, bağlam ister

Son adım ölçmek. Ama tek bir güçlü bilgisayarda ve hızlı bağlantıda alınan sonuç yeterli değil. Dar bir ekran, yavaş bir ağ, önbelleksiz ilk giriş ve düşük işlem gücü bambaşka sorunları görünür kılar. Laboratuvar ölçümü karşılaştırma verir; gerçek kullanım ise hangi gecikmenin gerçekten hissedildiğini gösterir.

Sonuçta hızlı hissettiren bir arayüz tek bir optimizasyondan doğmuyor. Kararlı yerleşim, erken geri bildirim, doğru kaynak sırası ve ölçülü bağımlılıklar aynı anda çalıştığında ortaya çıkıyor. Performans da böylece sonda alınan bir puan değil, bütün tasarım kararlarının ortak niteliği oluyor.

Bu Yazıyı Paylaş