Bir Site Testi Yaklaşık 40 Saniye Sürüyor. Bu Sürede Neye Bakıyoruz?
Sitelere verdiğimiz puanın nasıl üretildiğini adım adım anlatıyoruz. Testin her aşaması ne kadar sürüyor, sayfada neleri ölçüyoruz, hangi durumlarda puan vermiyoruz ve ölçümümüzün doğruluğunu neye göre sınıyoruz.
Bir site sayfamızda bir puan gördüğünüzde o puanın nasıl üretildiğini sorma hakkınız var. Bu yazıda tek bir testin başından sonuna neler olduğunu, ne kadar sürdüğünü ve hangi ölçümlere dayandığını anlatıyoruz. Şu anda 15 bini aşkın siteyi bu testle yeniden tarıyoruz, dolayısıyla anlattıklarımız her gün yaklaşık bin sitede yaşanan sürecin kendisi.
Test gerçek bir tarayıcıyla yapılıyor
Siteyi bir ziyaretçinin göreceği şekilde, gerçek bir Chromium tarayıcısında açıyoruz. Ekran genişliği 1440 piksel, yüksekliği 900 piksel. Kaynak koduna bakıp tahmin yürütmek yetmiyor, çünkü günümüzde pek çok site içeriğini tarayıcıda JavaScript ile oluşturuyor. Sayfanın gerçekte nasıl göründüğünü ve nasıl davrandığını ancak onu çalıştırarak görebiliyoruz.
40 saniye adım adım
Aşağıdaki süreler, adımları tek tek zamanladığımız örnek ölçümlerden geliyor. Parantez içindeki değerler her adıma tanıdığımız üst sınır. Bir adım bu sınırı aşarsa o adımı bırakıp sonrakilere geçiyoruz, böylece tek bir yavaş bölüm bütün testi düşürmüyor.
- Sayfanın açılması: genellikle 4 saniye civarı (en fazla 30 saniye).
- Kısa bir bekleme: sayfanın yerine oturması için 2 saniye.
- Açılış perdesi: bazı siteler tam ekran bir giriş animasyonuyla açılıyor. Böyle bir perde varsa kalkmasını bekliyoruz (en fazla 6 saniye). Çoğu sitede bu adım hiç süre almıyor.
- İlk ekranın görüntüsü: ziyaretçinin kaydırmadan gördüğü alanın kaydı, 1 saniyeden kısa.
- Sayfayı baştan sona gezmek: yaklaşık 15 saniye (en fazla 34 saniye). Testin en uzun ve en önemli kısmı bu, toplam sürenin yaklaşık yüzde 60'ı buraya gidiyor.
- Yerleşim ve piksel ölçümleri: 1 ile 2 saniye arası.
- Puanlama: ölçümler toplandıktan sonra saniyenin küçük bir kısmında tamamlanıyor.
Bu adımları ayrı bir ortamda zamanladığımızda toplam 24 saniye civarında kaldı. Canlı sunucumuz aynı anda başka işleri de yürüttüğü için orada aynı adımlar biraz daha uzun sürüyor ve ortalama 40 saniyeye çıkıyor. Hız ve erişilebilirlik için Google'ın Lighthouse ölçümlerini ve gerçek kullanıcı verisini (CrUX) de kullanıyoruz. Bu veri sitenin ilk denetiminde ayrıca alınıyor, 40 saniyelik tarayıcı testinin içinde yer almıyor.
İlk soru: Bu gerçekten yayında bir site mi?
Tasarım puanı vermeden önce sayfanın puanlanabilir olup olmadığına bakıyoruz. Aşağıdaki durumlarda tasarım puanı üretmiyoruz:
- Sayfa bulunamıyorsa (404) ya da sunucu hata veriyorsa.
- Alan adı satılık ya da park edilmiş durumdaysa.
- Sayfada yalnızca "çok yakında", "bakımdayız" yazıyorsa ya da sunucunun varsayılan sayfası duruyorsa.
- Sayfa boşsa ya da ziyaretçiye yalnızca bir giriş ekranı gösteriyorsa.
Bir de sayfayı açamadığımız durum var. Bazı siteler otomatik ziyaretleri engelliyor. Böyle bir sitenin puanını düşürmüyoruz. Siteye erişemememiz, sitenin kötü olduğunu göstermez. Bu kayıtları "doğrulanamadı" olarak işaretleyip daha sonra yeniden deniyoruz. Kısa süre önce bu ayrımı yeterince iyi yapamadığımız bir hata bulduk: içeriğini tarayıcıda oluşturan, çalışan bir site o turda açılamadığı için boş sanılmış ve puanı 70'ten 12'ye inmişti. Bunu düzelttik.
Sayfayı gezerken neye bakıyoruz
Sayfayı adım adım aşağı kaydırıyor ve her adımda ekranda ne değiştiğini kaydediyoruz. Baktığımız başlıca şeyler şunlar:
- Beliren içerik: ekrana girdikçe görünür hâle gelen bölümler ve bunların sayfa boyunca ne sıklıkta kullanıldığı.
- Paralaks: arka plan ile ön planın farklı hızlarda kayması. Tek bir ölçümde gördüğümüz sapmayı paralaks saymıyoruz, art arda iki adımda aynı yönde tekrarlanması gerekiyor. Aksi hâlde sıradan bir haber sitesinde yüzlerce sahte paralaks buluyorduk.
- Sabitlenen bölümler: kaydırırken yerinde duran ve içeriği değişen alanlar.
- Hareketin miktarı: ardışık iki ekran görüntüsü arasındaki fark. Bu yöntem hareketin hangi kütüphaneyle yapıldığından bağımsız çalışıyor ve WebGL ya da video ile çizilen sahneleri de görebiliyor.
- Etkileşim tepkisi: farenin bağlantı ve düğmelerin üzerine gelmesiyle ortaya çıkan değişim.
Hareketin miktarı tek başına kaliteyi göstermiyor. Otomatik dönen bir slayt gösterisi, özenle kurgulanmış bir kaydırma anlatısından daha fazla hareket üretebiliyor. Bu yüzden hareketin çok olmasını değil, sayfanın akışına uyumlu olmasını ödüllendiriyoruz.
Altı eksen ve ağırlıkları
Ölçümler altı başlık altında toplanıyor. Yanlarındaki oranlar genel puandaki payları:
- Deneyim ve Hareket, yüzde 43: kaydırma anlatısı, hareketin uyumu, etkileşim tepkisi.
- Teknik Sağlık, yüzde 15: erişilebilirlik, gerçek kullanıcı hız verisi, güvenlik.
- Görsel Kompozisyon, yüzde 13: ızgara düzeni, yazı boyutlarının tutarlılığı, boşluk kullanımı, renk paleti ve kontrast.
- Kod İşçiliği, yüzde 12: tasarım değişkenlerinin sistemli kullanımı, güncel CSS yetenekleri, görsel ve dosyaların düzenli yönetimi.
- İçerik Tözü, yüzde 10: sayfada gerçek içerik, medya ve yapı derinliği olup olmadığı.
- Modern Altyapı, yüzde 7: sayfanın nasıl sunulduğu, önbellekleme ve görsellerin iletim biçimi.
Deneyim ekseninin payı bilinçli olarak yüksek. Elle sınıflandırdığımız siteler üzerinde yaptığımız ölçümde, uluslararası ödül almış işleri yetkin ama sıradan işlerden ayıran tek eksenin bu olduğunu gördük. Hazır temalar genellikle düzenli, hızlı ve erişilebilir oluyor. Bu nitelikler önemli ama ayırt edici değil.
Bu yüzden Teknik Sağlık, Kod İşçiliği, İçerik Tözü ve Modern Altyapı eksenlerini taban ekseni olarak kullanıyoruz. Bu eksenlerde belli bir düzeyin altına düşen site puan kaybediyor, o düzeyi aşmak ise puanı ayrıca yükseltmiyor. Erişilebilirlik sorunları olan bir siteyi görmezden almıyoruz. Öte yandan kusursuz bir teknik altyapı tek başına bir siteyi tasarım açısından öne çıkarmıyor.
Her puanın yanında bir güven değeri var
Her test, ölçümlerinden ne kadar emin olduğunu da hesaplıyor. Sayfanın kaydırılamaması, sitenin kendi kaydırma sistemini kullanması, açılış perdesinin kalkmaması ya da ölçümün bir bölümünün süre sınırına takılması güveni düşürüyor. Güven değeri yüzde 70'in altında kalan bir site, puanı ne olursa olsun madalya almıyor.
Bu kuralı yakın zamanda sıkılaştırdık. Yeni test sürümüne geçmeden önce yaptığımız incelemede, hareketini ölçemediğimiz sitelerin ölçebildiklerimizden ortalama 11 puan daha yüksek aldığını fark ettik. Ölçemediğimiz yerde tahmin yürüten formül fazla iyimserdi. Bu tahmini artık ölçtüğümüz sitelerin gerçek sonuçlarından türetiyoruz. Tahmine ayrıca bir üst sınır koyduk, böylece ölçmediğimiz bir şey için hiçbir site en yüksek puanları alamıyor.
Testin yapmadığı şeyler
- Hiçbir yere tıklamıyor. Form doldurmuyor, üye olmuyor, giriş yapmıyor, satın alma denemiyor. Yalnızca sayfayı kaydırıyor ve fareyi bağlantıların üzerinde gezdiriyor.
- Dosya indirmiyor. Tarayıcı indirmeleri baştan reddedecek şekilde ayarlı.
- Tarayıcı tek kullanımlık bir profille çalışıyor. Bu profil tarayıcı kapandığında siliniyor ve tarayıcı düzenli aralıklarla sıfırdan başlatılıyor, bu yüzden çerez ya da önbellek kalıcı olarak birikmiyor.
- Tarayıcı, sunucunun geri kalanından yalıtılmış bir konteyner içinde ve yetkileri kısıtlı bir kullanıcıyla çalışıyor.
- Siteleri yormuyor. Tek bir tarayıcıyla, sırayla ve siteler arasında bekleyerek çalışıyoruz: gündüz 20 saniye, gece 6 saniye.
Puanı bir yapay zekâ modeli vermiyor. Sitenin puanı ve sıralaması ölçümlerden hesaplanıyor ve aynı ölçümler her seferinde aynı puanı üretiyor. Bir dil modelinin verdiği not ise ertesi gün değişebilir. Hangi işlerde yapay zekâ kullandığımızı analiz motorumuzu anlatan sayfada ayrıca açıkladık.
Ölçümümüzü neye göre sınıyoruz
Bir ölçüm sisteminin iyi olup olmadığını kendi içinden anlamak mümkün değil. Bu yüzden 49 siteyi uluslararası ödüllü işlerden zayıf örneklere kadar kademelere ayırdık ve testin bu sıralamayla ne kadar örtüştüğüne baktık.
Bunun için Spearman sıra korelasyonunu kullanıyoruz. Bu değer iki sıralamanın ne kadar benzediğini gösteriyor: 1 tam örtüşme, 0 hiçbir ilişki olmaması demek. Testimizin güncel sonucu 0,63. Ödül düzeyindeki siteler, yetkin düzeydeki sitelerden ortalama 19,2 puan daha yüksek alıyor.
Bu sonuçları okurken bir noktayı bilmenizi istiyoruz. Motoru ayarlarken de aynı 49 siteyi kullandık. Bir ölçümü ayarlandığı veri üzerinde sınamak sonucu olduğundan iyi gösterebilir. Bu yüzden 0,63 değerini iyimser bir tahmin olarak görüyoruz ve testi, ayarlarken hiç kullanmadığımız ayrı bir site grubunda da sınamayı planlıyoruz.
Sınırlarımızı da açıkça söylemek istiyoruz. Sayfasını tamamen WebGL ile çizen ya da kendi kaydırma sistemini kuran bazı ödüllü siteleri hâlâ tam olarak gezemiyoruz. Otomatik ziyaretleri engelleyen siteleri hiç ölçemiyoruz. Bu alandaki yayımlanmış araştırmalar da hesaplanabilir ölçütlerin insan beğenisini tamamen açıklayamadığını gösteriyor. Puanlarımızı bu nedenle gerekçesini gösterebildiğimiz bir ölçüm olarak sunuyoruz.
Yeniden tarama tamamlandığında site sayfalarındaki puanları bu teste geçirmeyi planlıyoruz. Süreci yeniden tarama duyurumuzda anlattık. Türk web sitelerinin ölçülebilir profiline dair bulgularımızı ise akademi çalışmamızda yayımladık.
Kaynaklar
- Hasler, D. ve Süsstrunk, S. (2003). Measuring colorfulness in natural images. Proceedings of SPIE 5007, 87-95. doi:10.1117/12.477378
- Lavie, T. ve Tractinsky, N. (2004). Assessing dimensions of perceived visual aesthetics of web sites. International Journal of Human-Computer Studies, 60(3), 269-298. doi:10.1016/j.ijhcs.2003.09.002
- Reinecke, K. ve diğerleri (2013). Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. CHI 2013, 2049-2058. doi:10.1145/2470654.2481281
- Miniukovich, A. ve De Angeli, A. (2015). Computation of interface aesthetics. CHI 2015, 1163-1172. doi:10.1145/2702123.2702575
- W3C (2018). Web Content Accessibility Guidelines (WCAG) 2.1.