Hero Video Arka Plan Kullanmalı mı? Hız, Erişilebilirlik ve Mobil Rehberi

Biz Talha Aslan ve ekibi olarak bu soruyu neredeyse her web tasarım projesinde duyuyoruz. Çünkü video, ilk bakışta sitenin "canlı" görünmesini sağlıyor. Öte yandan aynı video sayfanın en ağır dosyası olabiliyor, mesajın okunmasını zorlaştırabiliyor ve bazı ziyaretçiler için rahatsız edici hareket üretebiliyor. Bu rehberde kararı nasıl verdiğimizi, kurulumu adım adım nasıl yaptığımızı ve hangi durumda vazgeçmenizi önerdiğimizi anlatıyoruz.

Genel olarak sitede video kullanımının dönüşüme etkisini ayrı bir yazıda ele aldık: web sitesinde video kullanımı ve dönüşüm oranı. Bu yazıda ise yalnız ilk ekrandaki arka plan videosunu ele alıyoruz.

Hero bölümünün asıl görevi nedir?

Hero bölümü, ziyaretçinin sayfayı açtığında kaydırmadan gördüğü ilk alandır. Bu alanın üç görevi var: "neredeyim" sorusunu cevaplamak, değer önerisini tek cümlede söylemek ve bir sonraki adımı göstermek. Dolayısıyla arka plan, bu üç görevin hizmetkârıdır; başrol oyuncusu değildir.

İlk ekranın nasıl kurgulanacağını above the fold tasarımı yazımızda ayrıntılı anlattık. Burada şunu hatırlatmak yeterli: başlık, alt başlık ve çağrı düğmesi okunmuyorsa arka planın ne kadar etkileyici olduğu önemini yitirir. Yani video, ancak bu üç öğeyi güçlendirdiğinde yerini hak eder.

• Başlık: ne sunduğunuzu açık bir dille söyler.
• Alt başlık: kime ve hangi sonuç için sunduğunuzu netleştirir.
• Çağrı düğmesi: teklif alma, randevu ya da ürünü inceleme gibi tek bir eylemi öne çıkarır.
• Arka plan: bu mesajı destekleyen atmosferi ya da kanıtı gösterir.

Hangi durumda hero video arka plan gerçekten işe yarar?

Video, hareketin kendisinin bilgi taşıdığı durumlarda işe yarar. Örneğin bir mekânın atmosferi, bir üretim sürecinin hassasiyeti ya da bir hizmetin sahadaki hali tek karede anlatılamayabilir. Böyle durumlarda kısa bir döngü, uzun bir paragraftan daha hızlı güven kurabilir.

Örnek senaryo: bir butik otel, odaların ve terasın gün batımındaki halini gösteren sekiz saniyelik sessiz bir döngü kullanıyor. Burada video "burası nasıl bir yer" sorusunu cevaplıyor. Buna karşılık bir muhasebe bürosunun klavyeye yazan eller videosu hiçbir yeni bilgi vermiyor; üstelik sayfayı yavaşlatıyor.

• Mekân ve deneyim satan işletmeler: otel, restoran, etkinlik alanı.
• Hareketli ürünler: araç, spor ekipmanı, makine.
• Süreç gösteren hizmetler: üretim, inşaat, atölye işi.
• Marka filmi olan ve bunu kısa bir kesitle tanıtmak isteyen markalar.

Hangi durumda vazgeçmek daha doğru?

Ziyaretçinin hızlı karar verdiği, form doldurduğu ya da fiyat karşılaştırdığı sayfalarda video çoğu zaman dikkat dağıtır. Ayrıca stok görüntülerden oluşan, markaya özgü olmayan videolar güven yerine "şablon site" izlenimi bırakabilir. Bu yüzden kararı estetikten değil, sayfanın görevinden başlatıyoruz.

Bir başka işaret de sayfanın ziyaretçiyi nereye yönlendirdiğidir. İlk ekranın asıl görevi bir formu doldurtmaksa, hareket gözü formdan uzaklaştırabilir. Bu tür sayfalarda sade bir arka plan, çağrı düğmesini daha belirgin kılar ve ziyaretçinin kararını kolaylaştırır. Kısacası, ilk ekranda dikkat için yarışan öğe sayısını azaltmak çoğu zaman en etkili tasarım adımıdır.

Öte yandan teknik koşullar da belirleyicidir. Ziyaretçilerinizin büyük kısmı mobil veriyle geliyorsa ve sunucu ya da içerik dağıtım altyapınız video için hazır değilse, özenle seçtiğiniz bir fotoğraf daha iyi sonuç verir. Kısacası, video bir zorunluluk değil, gerekçesi olan bir tercihtir.

Hero video arka plan LCP değerini nasıl etkiler?

LCP (Largest Contentful Paint), ilk ekrandaki en büyük içerik öğesinin ne zaman göründüğünü ölçen Core Web Vitals metriğidir. web.dev belgesine göre video öğeleri de LCP adayı olabilir ve videolarda poster görselinin yüklenme süresi ya da ilk karenin gösterilme süresi, hangisi önceyse esas alınıyor.

Dolayısıyla tam ekran bir hero videosu çoğu zaman sayfanın LCP öğesi olur. Poster yoksa tarayıcı ilk kareyi bekler; bu da videonun indirilip çözülmesine bağlıdır. Aynı belge iyi bir LCP değerini 2,5 saniye ve altı olarak tanımlıyor. Metriğin tamamını LCP nedir ve nasıl iyileştirmeli yazımızda anlattık.

Pratikte şunu görüyoruz: poster görselini iyi sıkıştırıp erken yüklerseniz LCP büyük ölçüde postere göre belirlenir. Böylece video arkadan gelse bile ilk ekran hızlı açılır. Bu nedenle posteri bir yedek değil, ilk ekranın asıl görseli gibi hazırlıyoruz.

Poster görseli neden ilk ekranın asıl görselidir?

Poster, video oynamadan önce gösterilen sabit görseldir. MDN'nin video etiketi belgesine göre poster yoksa tarayıcı ilk kare hazır olana kadar alanı boş bırakır. Yani poster yoksa ziyaretçi bir süre boş ya da düz renkli bir alan görür.

Biz posteri her zaman videonun ilk karesiyle uyumlu seçiyoruz. Böylece video başladığında ani bir görüntü sıçraması olmaz. Ayrıca poster, video hiç oynamadığında da tek başına anlamlı olmalıdır; çünkü hareket azaltma tercihi olan ziyaretçiler ya da düşük bağlantılı cihazlar yalnız posteri görebilir.

• Videonun ilk karesine yakın bir kare seçin.
• Modern bir görsel biçimi (WebP ya da AVIF) ve uygun bir boyut kullanın.
• Posteri öncelikli yükleyin; tembel yüklemeye bırakmayın.
• Metnin okunacağı bölgede sakin, düşük ayrıntılı bir alan bırakın.

Görsel sıkıştırmanın genel kurallarını web sitesi görsel optimizasyonu yazımızda bulabilirsiniz.

Otomatik oynatma neden mutlaka sessiz olmalı?

Tarayıcılar sesli otomatik oynatmayı kısıtlar. Chrome'un otomatik oynatma politikası açıkça sessiz otomatik oynatmanın her zaman izinli olduğunu söylüyor; sesli oynatma ise kullanıcının siteyle etkileşimi gibi koşullara bağlı. MDN de modern tarayıcıların sesli videoların kendiliğinden oynamasını engellediğini belirtiyor.

Bu nedenle hero videosunda muted özelliği isteğe bağlı değildir. Üstelik arka plan videosunda ses zaten bir anlam taşımamalı; mesajı başlık ve metin taşır. Ses gerekiyorsa o artık arka plan değil, izleyici için ayrı kurgulanan bir videodur ve oynatma kontrolleriyle ayrı bir bölümde yer almalıdır.

Chrome belgesindeki bir uyarı da önemli: videonun oynayacağını asla varsaymayın. Oynatma reddedilirse sayfa yine eksiksiz durmalı, yani poster tek başına işi görmelidir. Biz kurulumda oynatma başlamazsa durdurma düğmesini de gizliyoruz, çünkü oynamayan bir video için "durdur" göstermek kafa karıştırır.

Hangi video özelliklerini birlikte seçmelisiniz?

Arka plan videosunda dört özellik neredeyse her zaman birlikte gelir: autoplay, muted, loop ve playsinline. web.dev'in video tembel yükleme rehberi, iOS'ta otomatik oynatmanın gerçekleşmesi için playsinline özelliğinin gerekli olduğunu belirtiyor. Ayrıca preload özelliği, tarayıcıya ne kadar veri indirmesi gerektiği konusunda ipucu verir.

MDN, preload değerinin yalnız bir ipucu olduğunu ve autoplay özelliğinin preload üzerinde öncelik taşıdığını hatırlatıyor. Kısacası autoplay varsa tarayıcı videoyu indirmek zorundadır. Bu yüzden dosya boyutunu küçültmek, özellik ayarından daha belirleyicidir.

Video dosyası ne kadar kısa ve hafif olmalı?

Burada evrensel bir rakam vermiyoruz, çünkü doğru boyut kitlenize, cihazlara ve altyapıya bağlıdır. Ancak saha tecrübesine dayalı başlangıç aralığımız şöyle, garanti değildir: 6 ile 15 saniye arası bir döngü, ses parçası olmayan, ekranda gerçekten görünen boyuta göre kodlanmış bir dosya.

Ses parçasını dosyadan silmek basit ama sık atlanan bir adımdır. Ayrıca arka plan videosunda yüksek ayrıntıya gerek yoktur, çünkü üstünde metin ve çoğu zaman yarı saydam bir katman yer alır. Bu sayede daha düşük bit hızıyla da iyi görünen bir sonuç elde edersiniz.

1. Videoyu en fazla birkaç sahneyle sınırlayın; hızlı kurgu yerine yavaş hareket seçin.
2. Ses parçasını tamamen kaldırın.
3. Masaüstü ve mobil için ayrı çözünürlükte iki sürüm hazırlayın.
4. Modern bir biçim ile geniş uyumlu bir biçimi birlikte sunun.
5. Döngünün başı ile sonunu, geçiş fark edilmeyecek şekilde birleştirin.

Örnek hesap: aylık ziyaretlerin çoğu mobilden geliyor ve hero videosu birkaç megabayt ise, her ziyaret sadece ilk ekran için bu veriyi indirir. Aynı alanı tek bir hafif poster görseliyle çözerseniz indirilen veri belirgin şekilde azalır. Bu nedenle mobilde ayrı karar vermenizi öneriyoruz.

Mobilde hero video arka plan için alternatif ne olmalı?

Mobilde üç seçenek var: daha küçük bir video sürümü, yalnız poster görseli ya da tamamen farklı bir dikey kompozisyon. Biz çoğu projede mobilde posterle başlıyor, videoyu yalnız gerçekten anlam kattığı durumlarda daha küçük bir sürümle sunuyoruz.

Dikey ekranda yatay bir videoyu kırpmak çoğu zaman ana nesneyi kadrajdan çıkarır. Örneğin masaüstünde ortada duran bir ürün, mobil kırpmada kenara kayabilir. Bu yüzden mobil için ayrı bir kadraj seçmek, sadece dosya boyutu değil anlatım açısından da önemlidir. Mobil öncelikli düşünmenin genel mantığını mobil öncelikli tasarım yazımızda anlattık.

Ayrıca mobil tarayıcılar, düşük güç modu ya da veri tasarrufu gibi durumlarda otomatik oynatmayı farklı ele alabilir. Dolayısıyla mobilde posterin tek başına eksiksiz bir ilk ekran sunması şarttır.

Hareket azaltma tercihi olan ziyaretçilere ne sunmalısınız?

İşletim sistemlerinde "hareketi azalt" benzeri bir erişilebilirlik ayarı yer alır. MDN'nin prefers-reduced-motion belgesi, bu tercihin web sayfasına bir medya özelliği olarak yansıdığını ve vestibüler (denge ve hareket algısıyla ilgili) rahatsızlığı olan kişiler için hareketi azaltmanın önemini anlatıyor.

Bu tercih açıkken biz videoyu hiç başlatmıyor, yalnız posteri gösteriyoruz. Yani ziyaretçi aynı mesajı, aynı görsel dili ama hareketsiz biçimde alıyor. Böylece tasarım bütünlüğü bozulmuyor ve kimse rahatsız edici bir hareketle karşılaşmıyor.

Bunu yalnız CSS ile gizlemek yeterli olmayabilir, çünkü video yine indirilebilir. Bu yüzden oynatmayı ve gerekiyorsa video kaynağını, tercih okunduktan sonra eklemeyi tercih ediyoruz. Erişilebilirliğin genel çerçevesi için web erişilebilirliği ve WCAG standartları yazımıza bakabilirsiniz.

Durdurma düğmesi zorunlu mu?

Evet, döngüdeki bir video için pratikte zorunludur. WCAG'nin 2.2.2 Duraklat, Durdur, Gizle başarı ölçütü, kendiliğinden başlayan, beş saniyeden uzun süren ve başka içerikle birlikte sunulan hareketli içerik için kullanıcıya durdurma imkânı verilmesini ister. Bu ölçüt A düzeyindedir, yani en temel seviyededir.

Düğmeyi belirgin, klavyeyle erişilebilir ve anlamlı bir etiketle tasarlıyoruz. Örneğin yalnız bir simge değil, ekran okuyucunun "arka plan videosunu durdur" diye okuyacağı bir etiket ekliyoruz. Ayrıca kullanıcının tercihi sayfa yenilendiğinde de hatırlanırsa deneyim daha tutarlı olur.

• Düğme metnin üstüne binmemeli, ama kolayca göze çarpmalı.
• Klavyeyle odaklanınca belirgin bir odak çerçevesi çıkmalı.
• Durdurulunca video ilk karede ya da posterde kalmalı.
• Oynatma hiç başlamadıysa düğmeyi gizleyin.

Metni video üzerinde nasıl okunaklı tutarsınız?

Hareketli bir arka plan, metnin kontrastını sürekli değiştirir. Bir karede koyu olan bölge, bir sonraki karede açık olabilir. Bu nedenle metnin arkasına yarı saydam koyu bir katman ya da yumuşak bir geçiş koymak, okunabilirliği korumanın en güvenli yoludur.

Biz kontrastı videonun en açık ve en koyu karesinde ayrı ayrı kontrol ediyoruz. Ayrıca poster görselinde de aynı kontrolü yapıyoruz, çünkü bazı ziyaretçiler yalnız posteri görecek. Kontrastın tasarımdaki genel kullanımını tasarımda kontrast yazımızda anlattık.

Bir de çekim tarafında önlem alabilirsiniz: metnin geleceği bölgede sade bir gökyüzü, duvar ya da odak dışı bir alan bırakmak. Böylece katmanı daha hafif tutar, videonun karakterini korursunuz.

Hero video arka plan SEO'yu doğrudan etkiler mi?

Arka plan videosu tek başına bir sıralama avantajı sağlamaz. Etkisi dolaylıdır: sayfa deneyimi, hız ve içeriğin anlaşılırlığı üzerinden. Örneğin video LCP'yi kötüleştirirse ya da başlık metnini görselin içine gömerseniz, arama motoru ve kullanıcı açısından kayıp yaşarsınız.

Bu yüzden başlığı ve değer önerisini her zaman gerçek HTML metni olarak yazıyoruz; videonun içine metin koymuyoruz. Ayrıca arka plan videosu seyir amaçlı bir içerik olmadığı için video yapılandırılmış verisi eklemek genellikle anlamlı değildir. Sayfa hızının sıralamayla ilişkisini Core Web Vitals yazımızda daha geniş anlattık.

Video sayfadaki diğer öğeleri yavaşlatır mı?

Evet, yanlış kurulursa yavaşlatabilir. Video, ilk ekranın bant genişliğini kullanırken font, stil dosyası ve kritik görseller beklemek zorunda kalabilir. Ayrıca büyük bir video kaynağı, yavaş cihazlarda çözme (decode) sırasında işlemciyi de meşgul eder.

Bu nedenle sıralamayı şöyle kuruyoruz: önce metin, stil ve poster; ardından video kaynağı. Böylece ziyaretçi sayfayı okuyup etkileşime geçebilirken video arka planda iner. Sayfanın aşağısındaki videolar ise ekrana yaklaşana kadar hiç inmemeli; bu konuyu lazy load yazımızda anlattık. Ancak ilk ekrandaki posteri tembel yüklemeye bırakmamak gerekir.

Video yerine hangi seçenekler var?

Her hareket ihtiyacı video gerektirmez. Bazen hafif bir CSS animasyonu, yavaş kayan bir fotoğraf ya da birkaç görselden oluşan sakin bir geçiş aynı hissi çok daha düşük maliyetle verir. Öte yandan hiç hareket olmadan, güçlü bir fotoğraf ve net bir başlık da çoğu zaman en iyi sonucu getirir.

Özellikle "tıkla oynat" yaklaşımı, videoyu izlemek isteyene tam deneyim sunarken herkesin ilk ekranını hafif tutar. Ayrıca bu yöntemde sesli oynatma da mümkündür, çünkü kullanıcı etkileşimi vardır.

Stok video mu, özel çekim mi tercih etmelisiniz?

Stok video hızlı ve ekonomik bir başlangıçtır; ancak aynı görüntüyü başka sitelerde de görme ihtimaliniz yüksektir. Ziyaretçi bunu fark ettiğinde video güven yerine sıradanlık hissi verir. Bu yüzden markanın gerçek mekânını, ürününü ya da ekibini gösteren kısa bir özel çekimi çoğu zaman daha değerli buluyoruz.

Özel çekimin pahalı olması da şart değil. Örneğin sabit bir tripod, doğal ışık ve yavaş bir kamera hareketiyle çekilen birkaç sahne, arka plan için fazlasıyla yeterlidir. Üstelik arka plan videosunda keskin ayrıntıya ihtiyaç yoktur, çünkü üstünde metin ve katman yer alır.

• Stok video: hızlı, düşük bütçeli; ama markaya özgü değil ve lisans koşullarını ayrıca kontrol etmeniz gerekir.
• Özel çekim: markaya özgü ve güven verici; ama planlama ve çekim günü ister.
• Mevcut marka filminden kesit: zaten elinizde varsa en verimli seçenek; yalnız kurguyu döngüye uygun hale getirin.

Hangisini seçerseniz seçin, lisans ve kullanım haklarını yazılı olarak kontrol edin. Özellikle insan yüzü içeren görüntülerde izin konusunu atlamayın.

Çekim ve kurgu sırasında nelere dikkat etmelisiniz?

Arka plan videosu bir reklam filmi gibi kurgulanmamalı. Hızlı kesmeler, ani zoom ve yoğun renk değişimleri metni okumayı zorlaştırır. Bunun yerine yavaş, sakin ve tek yönlü hareketler seçiyoruz; örneğin bir mekânda yavaş ilerleyen kamera ya da bir ürünün etrafında hafif bir dönüş.

Kadrajı da metin alanına göre planlıyoruz. Masaüstünde metin çoğu zaman sol tarafta ya da ortada durur; dolayısıyla ana nesneyi diğer tarafa yerleştirmek, katmanı hafif tutmanıza izin verir. Mobilde ise kadraj dikeye döner, bu yüzden ana nesnenin ortada kalması daha güvenlidir.

Ayrıca döngü noktasını kurgu aşamasında düşünün. Son kare ile ilk kare arasında belirgin bir sıçrama varsa ziyaretçi bunu her döngüde fark eder. Kısa bir geçiş ya da başı ve sonu benzer iki an seçmek, bu sorunu çözer. Son olarak renk düzenini sitenin genel paletiyle uyumlu tutun; böylece video, tasarımın bir parçası gibi durur.

Altyapı tarafında nelere dikkat etmelisiniz?

Video dosyasını nereden sunduğunuz, en az dosyanın kendisi kadar önemlidir. Paylaşımlı bir barındırma paketinde büyük medya dosyaları, aynı anda gelen ziyaretçilerde sunucuyu zorlayabilir. Bu nedenle videoyu bir içerik dağıtım ağı (CDN) üzerinden ya da medya için uygun bir depolama çözümünden sunmayı öneriyoruz.

Ayrıca tarayıcı önbelleği için uygun süreler tanımlamak, geri dönen ziyaretçinin aynı videoyu yeniden indirmesini önler. Öte yandan üçüncü taraf video platformlarının gömülü oynatıcıları arka plan için genellikle uygun değildir; çünkü ek komut dosyaları, oynatıcı arayüzü ve kendi yükleme süreleriyle gelirler.

1. Videoyu kendi alan adınızdan ya da bir CDN üzerinden doğrudan dosya olarak sunun.
2. Önbellek sürelerini uzun tutun; dosyayı değiştirdiğinizde adını da değiştirin.
3. Gömülü oynatıcı yerine yalın video etiketi kullanın.
4. Yayından sonra sunucu yükünü ve hata kayıtlarını birkaç gün izleyin.

Üç örnek senaryoda karar nasıl değişir?

Aynı soru, farklı işletmelerde farklı cevaplar üretir. Aşağıdaki üç örnek senaryo, kararı nasıl verdiğimizi somutlaştırıyor. Rakamlar ya da sonuçlar değil, düşünme biçimi önemli.

Birinci senaryo: kıyıda bir restoran. Ziyaretçi "burada yemek yemek nasıl bir his" sorusunun cevabını arıyor. Bu durumda akşam ışığında masaları ve deniz manzarasını gösteren kısa bir döngü güçlü bir seçim. Ancak mobilde rezervasyon düğmesi ilk ekranda kalmalı, bu yüzden mobil için posterle başlıyoruz.

İkinci senaryo: bir hukuk bürosu. Ziyaretçi güven, uzmanlık ve iletişim bilgisi arıyor. Hareketli bir arka plan burada mesaja bir şey katmıyor; üstelik ciddiyet algısını zayıflatabiliyor. Dolayısıyla net bir başlık, sade bir fotoğraf ve belirgin bir iletişim düğmesi öneriyoruz.

Üçüncü senaryo: endüstriyel makine üreten bir firma. Makinenin çalışırken nasıl hareket ettiği, alıcı için önemli bir bilgi. Bu yüzden videoyu kullanıyoruz, ama kısa ve sessiz tutuyor, ayrıntılı ürün demosunu ise sayfanın aşağısında tıkla oynat biçiminde sunuyoruz. Böylece ilk ekran hafif kalıyor, ilgilenen ziyaretçi ise tam videoya ulaşıyor.

Kurulumu adım adım nasıl yapıyoruz?

Aşağıdaki sıra, bizim projelerde izlediğimiz akıştır. Kod örneği vermiyoruz; mantığı anlatıyoruz, çünkü uygulama kullandığınız altyapıya göre değişir.

1. Amacı yazın: video hangi soruyu cevaplıyor? Cevap yoksa fotoğrafla devam edin.
2. Çekimi ya da kurguyu metin alanını düşünerek planlayın.
3. Kısa bir döngü hazırlayın, ses parçasını silin.
4. Masaüstü ve mobil için ayrı sürümler kodlayın.
5. İlk kareyle uyumlu, hafif bir poster hazırlayın ve öncelikli yükleyin.
6. Videoyu sessiz, döngüde ve sayfa içinde oynayacak şekilde ayarlayın.
7. Hareket azaltma tercihini okuyun; açıksa yalnız posteri gösterin.
8. Belirgin ve klavyeyle erişilebilir bir durdurma düğmesi ekleyin.
9. Oynatma başlamazsa sayfanın posterle eksiksiz göründüğünü test edin.
10. LCP ve genel hızı gerçek cihazlarda ölçün.

Bu adımların tamamını sitenizde biz kurarız; tasarımdan ölçüme kadar süreci web tasarım hizmetimiz kapsamında yürütüyoruz.

Yayın öncesi kontrol listesi neleri içermeli?

Yayından önce aşağıdaki listeyi tek tek işaretlemenizi öneriyoruz. Böylece estetik bir karar, teknik bir sorun ya da erişilebilirlik eksiği olarak geri dönmez.

• Video, fotoğrafın anlatamadığı bir şeyi anlatıyor mu?
• Başlık ve çağrı düğmesi en açık ve en koyu karede okunuyor mu?
• Poster var mı, ilk kareyle uyumlu mu, öncelikli yükleniyor mu?
• Video sessiz mi ve ses parçası dosyadan çıkarıldı mı?
• playsinline özelliği ekli mi?
• Hareket azaltma tercihinde video duruyor mu?
• Durdurma düğmesi belirgin, etiketli ve klavyeyle kullanılabilir mi?
• Mobil için ayrı sürüm ya da poster çözümü var mı?
• Oynatma reddedilince sayfa eksiksiz duruyor mu?
• LCP değeri gerçek cihazlarda kabul edilebilir aralıkta mı?

Sonuçları nasıl ölçmeli ve ne zaman geri dönmeli?

Video eklemeyi bir deney olarak ele alın. Önce mevcut ilk ekranın hız ve dönüşüm verilerini kaydedin, ardından videolu sürümü yayına alın ve aynı ölçütleri karşılaştırın. Mümkünse iki sürümü aynı dönemde test etmek, mevsimsel farkları ayıklamanıza yardım eder.

İzlediğimiz başlıca sinyaller şunlar: LCP ve genel sayfa hızı, ilk ekranda çağrı düğmesine tıklama, sayfada kalma süresi ve mobil ile masaüstü arasındaki fark. Örnek senaryo: masaüstünde etkileşim artarken mobilde hızın düştüğünü görürseniz, videoyu yalnız masaüstünde bırakıp mobilde postere dönmek mantıklı bir orta yoldur.

Kısacası, hero video arka plan seçimi bir kez verip unutacağınız bir karar değildir. Veriler videonun katkı sağlamadığını gösteriyorsa vazgeçmek de başarılı bir tasarım kararıdır.

Hero videosu konusunda sık yapılan hatalar nelerdir?

Gördüğümüz hataların çoğunun kökünde videoyu "süs" saymak yatıyor. Oysa ilk ekrandaki her öğe bir görev taşımalı. Aşağıdaki liste, projelerde en sık karşılaştığımız sorunları özetliyor.

• Poster olmadan yayına almak ve ilk saniyelerde boş alan göstermek.
• Ses parçasını dosyada bırakıp gereksiz veri indirtmek.
• Başlığı videonun içine gömmek, HTML metni yazmamak.
• Durdurma düğmesi koymamak.
• Mobilde yatay videoyu kırpıp ana nesneyi kadrajdan çıkarmak.
• Markayla ilgisi olmayan stok görüntü kullanmak.

Bu hataların hepsi tasarım aşamasında kolayca önlenebilir. Sitenizin ilk ekranını birlikte ele almak isterseniz, ihtiyacınızı yazın, size uygun kapsamı ve web tasarım teklifimizi paylaşalım.