Web Tasarımında Hız ve Hız Algısı

Kusursuz ve akıcı bir tasarıma dahil edilmesi gereken hız unsurları ve son ürüne katkıları.

-99 design studio
Jan 3 · 5 min read

Türkiye ve dünyada mobil internet kullanımının her geçen gün daha da arttığı bir çağda kullanıcıların dikkatini çekmek ve web sitesinde kalmalarını sağlamak oldukça güç bir hal aldı. Bu sorunun üstesinden gelebilmek adına tasarımcılar mobil erişimin ve mobile has kullanıcı deneyimlerinin ön planda tutup, akıcılık hissinin daha ilk saniyelerden vermeye çalışmakta.

Peki tüm hepsinin ortak noktası nedir? Bu yazı dizisinde kullanıcıların hız algılarına, mobil tasarıma yönelik etkin çözümlere ve görsel içerik stratejilerine değineceğiz.

Sunumu YouTube’dan takip etmek isteyen için.

Mobil dünyanın mobil kullanıcıları ve en kısıtlı kaynakları: Zaman…

StatCounter Eylül 2018 verilerine göre mobil internet trafiği dünya genelinde %52,36 iken Türkiye’de mobil internet erişim oranı %64,45’te. Gerek servis sağlayıcı kotaları gerekse hareket halinde olmanın getirmiş olduğu zaman kısıtı, kullanıcıların içeriklere çok daha hızlı erişme isteğini de beraberinde getiriyor.

Think with Google 2016, ziyaretçilerin %53’ünün 3 saniyeden uzun sürede açılan siteleri terk ettiğinin altını çiziyor. Bununla bağlantılı olarak da arama sonuçlarını ve sıralama algoritmalarını değiştiren firma, içeriklerin yüklenme hızını ve kullanıcıya yansıtılan verisel yükünü temel kıstasları olarak belirledi.

Bu noktaya kadar web tasarımında hızın neden önemli olduğunu şu maddeler ile özetleyebiliriz:

  • Kullanıcıları kaybetmemek: Uzun yükleme süreleri ve verimsiz içeriğe sahip web siteleri, kullanıcılara itici gelmekte ve onları içeride tutamamaktadır.
  • Dönüşüm oranını artırmak: Hız algısının ön planda olduğu ortamlarda kullanıcı dönüşüm oranları ve geçirilen süre büyük bir ölçüde artmakta, sekme oranları düşmektedir.
  • İyi bir kullanıcı deneyimi sunmak: Yapılan her tasarım, temelinde son kullanıcıya hizmet etmek üzere geliştirilmekte. Sunduğumuz deneyimin akıcı olması, kullanıcıda her daim pozitif bir etki bırakacaktır.
  • Etik olarak sorumluluk almak: Özellikle veri tüketimi konusunda Google’ın getirmiş olduğu yeni kıstaslar, kullanıcıların mobil internet kotalarına en az etki edecek siteler üzerinden şekillenmekte. Unutulmamalıdır ki hızlı web sitesi güven inşa eder.

Hızlı web sitesi güven inşa eder.

2GB mobil internet kotasına yavaş bir sitenin etkisi.

İnsanın hız algısı

Google ve Awwwards iş birliği ile yayımlanan web tasarım rehberinde 4 saniye ve altındaki sürede yüklenen web sitelerinin ziyaretçilerin %71’i tarafından hızlı olarak algılandığına ve %29’u tarafından ise yavaş olarak algılandığına değiniliyor.

Yapılan deneyde kullanıcıların seçimlerini ve algılarını etkileyen 4 temel unsurdan bahsediliyor: Etkin kullanım, Yaş, Ruhsal Durum, Fiziksel Durum.

  • Etkin kullanım: İçeriğin tam yüklenmesini bekleme süresi ile hemen kullanıma hazır hale gelmesi arasındaki dinamiği ele alıyor. Kullanıcılar hemen kullanıma hazır hissiyatı veren siteleri daha hızlı olarak algılarken, bekleme süresi algıda yavaş hissiyatını tetikliyor.
  • Yaş: Genç ve yaşlı kırılımı olarak genç kullanıcılarda 4 saniye ve üzerinin yavaş algılanmasına, yaşlılarda ise bu sürenin tahammül edilebilir olmasına değiniyor.
  • Ruhsal Durum: Kişinin huzurlu ya da huzursuz ruh hali ile orantılı olarak sitenin algısını değiştirmekte. Huzur içinde ziyaret edilen bir site, yükleme süresi 4 saniyenin üzerine çıksa dahi hızlı algılanabilirken, huzursuz ruh halinde tersi şekilde sonuçlanabiliyor.
  • Fiziksel Durum: Ruhsal durum ile bağlantılı olarak kişinin durağan ya da hareket halinde olması ile bağlantılıdır. Sabit konumda iken yüklenme süreleri fazla gelirken, hareket halinde bu algı değişmektedir.

İnsan beyni ve olaylara yaklaşım biçimleri

Hız ve hız algısını derinlemesine anlayabilmek adına insan beyni ve insan beyninin algılama biçimlerine biraz değinmekte fayda var.

Aktif ve pasif mod olmak üzere insan beyninin iki modu zaman ve mekan algılarımızı etkiler. Aktif mod, beynin aktif olarak çalıştığı (sevilen bir hobi, sosyalleşmek vb.) anlarda zamanın, yani web deneyimindeki sürelerin çok önemli olmadığı bir moddur. Pasif ise tam tersine bekleme durumunda iken beynin zaman ve mekan algısının daha yüksek olması, dolayısı ile dikkatinin dağılmasının daha muhtemel olduğu moddur.

İnsan beyni olayları algılama sürecinde aktif ve pasif mod arasında geçiş yapar.

Bu bağlamda ziyaretçileri aktif modda tutabilmek, web sitelerinin yüklenme süreleri ve ilk etapta karşılaşılan içerik ile doğrudan bağlantılıdır. Aşağıdaki landing page’in açılış aşamaları yüklenme sürecini en verimli kullanmaya örnek teşkil etmektedir.

Web sayfasının yüklenme süreçleri

First paint: Sayfa ile ilgili ilk yüklenme ya da içerik belirtisidir. Marka kimliğinin rengi ya da header’ın iskeleti dahil first paint olabilir.

First Contentful Paint (FCP): Ziyaretçiye bir içeriğin gelmekte olduğunu, sayfanın menüleri ve panelleri ile ilgili ilk paylaşımın yapıldığı süreçtir.

First Meaningful Paint: Pek çok sosyal medya platformlarında görmeye alışkın olduğumuz paylaşım, içerik ya da panellerin ilk anlamlı halleridir.

DOM Content Loaded (DCL): Spesifik olarak içeriklerin detaylarının belirlendiği, büyük ölçüde sayfanın yüklenmeyi tamamladığı aşamadır. Bu aşamada ürün adları, navigasyon butonları ve isimleri kullanıcıya açılmıştır.

Time to Interactive (TTI): Yüklenmenin tamamlandığı ve sayfanın etkileşime hazır hale geldiği aşamadır.

Yüklenme süreleri ve etkileşim gecikmeleri ile ilgili olarak birkaç istatistik paylaşmak gerekirse:

100–200ms: Anlık etkileşim hissiyatı verir.

1 saniye: Akıcı performanslı site hissiyatı.

5 saniye: Dayanılır bir site akışı hissiyatı.

8 saniye: Kullanıcının siteyi terk etme noktasına geldiği yüklenme süresidir.

Unutulmamalıdır ki 1860’lardan günümüze değin geçerliliğini koruyan Weber-Fechner Kanunu, bir kullanıcının deneyimindeki değişikliği fark edilebilmesi için deneyim şiddetinin orantısal olarak sabitle çarpılması gerektiğine değinir. Günümüz tasarım ve deneyim trendlerinde ise bu kanun özetle minimum değişimin %20 ya da üzerinde olması gerektiğine değinir. Yani sitenizin 5 saniyeden daha hızlı açıldığını ziyaretçilerin algılamasını istiyorsanız, hedefiniz minimum 4 saniye ya da altı olmalıdır.


Performans Algısı, Çoğu Durumda Gerçek Performans Kadar Etkilidir.

— Apple

Apple’ın geliştiriciler için rehberleri içerisinde bulunabilen bu söz, performans hissiyatının önemine ve hız algısına işaret eder. Dünyanın en büyük teknoloji firması dahi hemen hemen her cihazında ve yazılımında kullanıcıya hissettirdiği hız algısını her daim ön planda tutuyor. Yazı dizimizin ikinci bölümünde görsel örnekler ile desteklediğimiz etkin mobil deneyimi için hız odaklı çözümlere değineceğiz.

Kaynakça

-99 design studio

Written by

-99 design studio is a multi-disciplinary digital agency, run by a group of creative design addicts who live and breathe UI/UX.