Web Tasarımında Animasyon, Video ve Ses: Hareketin Maliyeti

Animasyon, video ve ses bedava değil: her biri bant genişliğinden, işlemciden ve okuyucunun dikkatinden harcar. Karşılığında bir şey vermeleri gerekir, yani ya bilgi taşımalı ya da arayüzde yol göstermeli. İkisi de değilse o öge sayfadan çıkar.

Hareket ne zaman bilgi taşır

Bir animasyonun sayfada kalmayı hak etmesinin tek ölçütü var: durağan bir görsel ya da iki cümle aynı şeyi anlatabiliyorsa animasyon fazlalıktır. Hareketin kendisinin içerik olduğu durumlar sayılı. Bir ormanın yirmi yılda nasıl küçüldüğünü gösteren harita bunlardan biri, çünkü değişimin hızı ve yönü tam olarak anlatılmak istenen şey. Üç boyutlu bir parçanın yavaşça dönmesi de öyle, iki boyutlu ekranda derinliği başka türlü veremezsin.

Arayüz tarafında hareketin ikinci meşru işi yön göstermek. Menü açılırken ya da bir panel kayarak gelirken o 200 milisaniye, içeriğin nereden geldiğini söyler ve geri dönüş yolunu hatırlatır. Bu kadarı yeter. Sayfanın köşesinde sürekli dönen logo ne öğretir ne yol gösterir.

"Kullanıcı başlatsın" kuralının kırıldığı yer

Yaygın tavsiye şu: animasyon kendiliğinden başlamasın, tıklamayla ya da imleç üzerine gelince çalışsın. Bu kural dekoratif hareket için doğru, bilgi taşıyan hareket için yanlış. Deforestasyon haritası ana içerikse ve yalnızca :hover ile oynuyorsa, dokunmatik ekranda o içerik hiç yok demektir, çünkü imleç üzerine gelme diye bir olay yaşanmaz. Bilgi taşıyan animasyona görünür bir oynat düğmesi, bir ilerleme kaydırıcısı ve mümkünse kare kare gezinme gerekir.

Otomatik başlayan hareketin sınırı ise bir tercih değil, ölçüt. WCAG, kendiliğinden başlayıp beş saniyeden uzun süren hareketli içeriğe durdurma, duraklatma ya da gizleme yolu zorunlu tutuyor (Pause, Stop, Hide). Buna bir de işletim sistemi ayarından hareketi azaltmayı seçmiş kullanıcılar eklenir: prefers-reduced-motion sorgusunu bir kez yazıp geçişleri kapatmak kısa bir iştir, atlandığında bedeli vestibüler rahatsızlığı olan ziyaretçinin sayfayı terk etmesi olur.

Ağırlığın büyük kısmı videoda

Sayfa ağırlığı konuşulurken görseller tartışılır, oysa tek bir arka plan videosu sayfadaki bütün görsellerin toplamını rahatça geçer. Bir kurumsal sitede ana sayfa ağırlığının yarısından fazlasının arka planda sessizce dönen bir tanıtım videosundan geldiğini gördüm, videoyu poster görseline çevirince en büyük içerik ögesinin yüklenme süresi yarıya indi.

Uygulamada en sık üç yerde hata yapılıyor.

• loading="lazy" yalnızca <img> ve <iframe> için çalışır. <video> bu niteliği tanımaz, oradaki karşılığı preload="none" ile bir poster görselidir.
• Sesli otomatik oynatmayı tarayıcılar yıllardır kendiliğinden engelliyor, dolayısıyla "otomatik başlatma" uyarısının yarısı boşa gidiyor. Geçerli kalan kısım şu: sessiz otomatik video indirilmeye ve çözülmeye devam eder, pili ve bant genişliğini harcar.
• Altyazı sadece videoyu izleyemeyen kullanıcı için değil. Sayfada metin olarak duran bir döküm, videonun içeriğini aranabilir yapan tek şey.

Ses: dar bir alan

Web'de sesin gerçekten işe yaradığı yerler az: telaffuz örnekleri, işitsel kanal gerektiren eğitim içerikleri, uzun bir işlem bittiğinde çalan kısa bildirim. Arka plan müziği bu listede yok. WCAG burada üç saniyeyi sınır koyuyor, kendiliğinden çalan ve üç saniyeden uzun süren sesin durdurulabilir ya da sayfanın geri kalanından bağımsız olarak kısılabilir olması gerekiyor (Audio Control). Kapatma düğmesinin yeri de belli: sayfanın altı değil, sesin başladığı nokta.

Multimedyanın aramaya katkısı dolaylı

Sayfaya video gömmek sıralama getirmez. Sıralamaya giren şey videonun etrafındaki metindir: başlık, özet, döküm, yapılandırılmış veri. Alt metinler de benzer biçimde çalışır, erişilebilirlik için gerekli ve görsel aramada karşılığı var, ama sayfanın kendi sıralaması için kaldıraç değil. Arama tarafındaki en belirgin etki tersi yönde: ağır medya yüzünden yavaşlayan sayfa Core Web Vitals üzerinden doğrudan ölçülüyor, yani multimedyayı optimize etmeden eklemek SEO'ya yatırım değil, ondan kesinti.

Ölçmeden karar verme

Yanıt süresi eşikleri yeni değil, Nielsen bunları 1993'te derledi: 0,1 saniye anında tepki hissi verir, 1 saniye düşünce akışını bozmaz, 10 saniyede kullanıcı başka işe geçer (Response Times: The 3 Important Limits). Multimedya kararları bu eşiklere göre sınanır, ama kendi makinendeki fiber bağlantıda değil. Geliştirici araçlarından ağı yavaş 4G'ye kısıp orta sınıf bir Android cihazda açmak, hangi ögenin kalacağını tartışmadan önce cevaplar. Pratikte ögelerin yarısı o testi geçmez.