Ana Sayfa Video Modülü

Ana sayfanın ilk saniyeleri, bir e-ticaret sitesinin en pahalı saniyeleridir. Ziyaretçi o aralıkta üç soruya cevap arar: burası ne satıyor, ciddi bir yer mi, bana uygun mu. Metinle verilen cevaplar okunmayı bekler; hareketle verilen cevaplar beklemez. Ana sayfa video kuşağı bu yüzden vardır. Aynı sebeple, yanlış kurulduğunda ilk saniyeleri kazanmak yerine harcayan bölüm de odur.

Bu sayfa iki şeyi bir arada anlatıyor: videonun ana sayfada ne işe yaradığı ve videoyu koyarken sayfayı yavaşlatmadan, ziyaretçiyi rahatsız etmeden, erişilebilirliği bozmadan nasıl kurulacağı. Üçü de teknik ayrıntılara bağlı ve üçünün de standart bir doğrusu var.

Video ana sayfada ne iş yapar?

Ana sayfaya konan videonun üç farklı işi olabilir ve bu işler birbirinin yerine geçmez:

• Marka tanıtımı. Atölye, üretim, ekip, mağaza. Ziyaretçiye arkada gerçek bir işletme olduğunu gösterir. Bu tip video sessiz izlendiğinde de anlamını korur ve kısa olmalıdır.
• Kampanya anlatımı. Bir indirimin veya koleksiyonun tek bakışta anlaşılmasını sağlar. Metinle üç satırda anlatılan bir mekanik, videoda birkaç saniyede geçer.
• Ürün gösterimi. Ürünün nasıl kullanıldığını veya nasıl durduğunu anlatır. Bu tip video aslında ürün sayfasına aittir; ana sayfada yalnızca tek bir öne çıkan ürün varsa anlamlıdır.

Üç işi tek videoda birleştirmeye çalışmak, en sık yapılan içerik hatasıdır. Markayı anlatırken kampanyaya geçen, sonra ürün gösteren bir video hiçbir sorunun cevabını net vermez. Amaç netleştiğinde videonun uzunluğu, kapak karesi ve yerleşimi de kendiliğinden belirlenir.

Otomatik oynatma ve sayfa hızı dengesi

Videonun sayfayı yavaşlatması bir kader değil, bir kurulum hatasıdır. Hatanın adı da bellidir: video dosyasını sayfa açılışında yükletmek. Bu yapıldığında ziyaretçi videoyu hiç izlemese bile büyük bir dosya indirilmeye başlar ve sayfanın geri kalanı bu indirmeyle bant genişliği paylaşır.

Modül yüklemeyi üç kademeye ayırır ve karar noktası ikinci kademededir.

Otomatik oynatmayı açmak, ikinci ve üçüncü kademeyi birleştirir. Bu, mobil ziyaretçide gerçek bir veri maliyetidir ve karar buna göre verilmelidir. Kullanışlı bir ayrım şudur: video sessiz izlendiğinde de anlaşılıyor ve kısaysa otomatik oynatın; konuşma içeriyor, anlatımlı veya uzunsa tıklamayı bekleyin. İkinci gruptaki bir videonun otomatik başlatılması, ziyaretçiye izleme kararını sormadan onun bant genişliğini harcamak anlamına gelir.

Kapak karesi neden video kadar önemli?

Kuşağın açılışta gösterdiği tek görsel, kapak karesidir. Videonun ilk karesini kapak olarak kullanmak yaygın bir kolaycılıktır ve genellikle kötü sonuç verir: ilk kare çoğu videoda siyah bir ekran, yarım bir hareket veya boş bir plandır. Kapak, videonun ne anlattığını tek bakışta söyleyen bir kare olmalıdır.

Kapağın teknik tarafı da önemlidir. Kuşak ana sayfanın üst bölümündeyse kapak görseli, sayfanın ilk boyamasında görünen en büyük öge olabilir ve bu, hız ölçümlerinde doğrudan takip edilen bir değerdir. Bu durumda kapağın tembel yüklemeden muaf tutulması, ölçeklenmiş servis edilmesi ve öncelikli olarak istenmesi gerekir. Otomatik oynatan bir video, bu ölçümde kapak görseliyle temsil edilir; videonun kendisi değil, kapağın ne kadar sürede geldiği sayılır.

Alan baştan ayrılır

Kuşağın kaplayacağı alan, içerik gelmeden önce ayrılır. Video veya kapak sonradan belirip altındaki içeriği aşağı iterse sayfanın üst kısmında bir düzen kayması oluşur. Sayfanın en üstündeki kayma, aşağıdakinden daha ağır sonuç doğurur çünkü altındaki her şeyi birden hareket ettirir. Bu yüzden kuşağın en-boy oranı önceden tanımlanır ve ekran boyutuna göre hesaplanır.

Erişilebilirlik: ses, altyazı ve hareket

Video, erişilebilirlik açısından bir sitenin en riskli bileşenidir çünkü aynı anda üç duyuya birden dokunur. Üç kural, tartışmaya açık olmayan kurallardır.

1. Ses kapalı başlar ve kontrol görünür durur. Kendiliğinden başlayan ve birkaç saniyeden uzun süren sesin durdurulabilir olması, yaygın erişilebilirlik ölçütlerinin doğrudan bir maddesidir. Tarayıcılar da sesli otomatik oynatmayı zaten engeller; kural iki taraftan birden gelir.
2. Konuşma içeren videoya altyazı eklenir. Önceden kaydedilmiş videolarda altyazı, işitme engelli ziyaretçi için tek erişim yoludur. Altyazı ayrı bir metin dosyası olarak eklenir; görüntünün üzerine gömülen yazı ekran okuyucular tarafından okunamaz ve küçük ekranlarda kırpılır.
3. Hareket azaltma tercihine uyulur. İşletim sisteminde bu tercihi açan ziyaretçilerde otomatik oynatma devreye girmez, kapak karesi görünür. Tercih, hareketli içerikten rahatsız olan veya baş dönmesi yaşayan kullanıcılar içindir.

Bu üçünün yanına pratik bir dördüncü eklenebilir: oynatıcı klavyeyle kullanılabilmelidir. Fareyle çalışan ama sekme tuşuyla ulaşılamayan bir oynat düğmesi, yalnızca engelli kullanıcıyı değil, o an faresi çalışmayan herkesi dışarıda bırakır.

Mobil davranış

Mobilde videonun asıl sorunu boyut değil, en-boy oranıdır. Masaüstü için çekilmiş yatay bir video, dikey tutulan bir telefonda ekranın küçük bir şeridine sıkışır ve içindeki yazılar okunamaz hâle gelir. Bunun iki çözümü vardır: mobil için ayrı bir dikey sürüm hazırlamak veya videodaki bilgiyi yatay sürümde de okunacak büyüklükte tutmak.

• Ayrı mobil sürümü. En temiz çözüm. Kuşak, ekran boyutuna göre hangi sürümü indireceğine karar verir; mobil ziyaretçi masaüstü için hazırlanmış büyük dosyayı hiç indirmez.
• Tam ekran geçişi. Ziyaretçi videoya dokunduğunda tam ekrana geçer. Kapatıldığında sayfada kaldığı yere döner, sayfa başa sarmaz.
• Sayfa içinde oynatma. Videonun kendiliğinden tam ekrana zorlanmaması gerekir; bu davranış ziyaretçiyi sayfadan koparır ve mobil tarayıcılarda geri dönüşü zorlaştırır.
• Veri tasarrufu. Cihaz veri tasarrufu modundaysa tarayıcı otomatik oynatmayı reddedebilir. Kuşak bu durumda kapak karesinde kalır ve kırık bir alan oluşmaz.

Video mu, kayan görsel mi?

Ana sayfanın üst bölümü çoğu mağazada kayan görsel alanına ayrılmıştır. Video kuşağı kurulurken sorulan ilk soru genellikle şudur: kayan görsel kalsın mı, yerini video mu alsın? İki bileşenin farkları, kararı kolaylaştıracak kadar nettir.

Tabloya bakınca ikisinin rakip olmadığı görülür. Kayan görsel alanı yönlendirir, video anlatır. Çok kampanyalı bir mağazada kayan görselin yerini videoya bırakmak, kampanyaların görünürlüğünü düşürür. Buna karşılık tek bir hikâyesi olan, üretim veya el işçiliği anlatan markalarda video, birbirini kovalayan görsellerden daha etkilidir.

Üçüncü bir yol da vardır: kayan görsel alanını korumak ve videoyu onun altına, ilk ürün bölümünden önce koymak. Bu kurgu iki bileşenin de işini yapmasına izin verir ve ilk açılış ölçümlerini videoya bağımlı kılmaz.

Video dosyasının hazırlanması

Kuşağın hız profilini belirleyen asıl şey, videonun kendisidir. Telefondan çekilmiş ham bir dosyayı doğrudan siteye koymak, en sık karşılaşılan ve en kolay çözülen sorundur. Videolar bize iletildiğinde sunum için hazırlanır:

• Çözünürlük düşürülür. Ana sayfada bir kuşakta oynayacak video için çok yüksek çözünürlük gereksizdir; ekranda kaplayacağı alandan büyük bir çözünürlük yalnızca dosya boyutunu artırır.
• Farklı ekran boyutları için ayrı sürümler üretilir. Mobil ziyaretçi küçük sürümü, masaüstü ziyaretçi büyük sürümü indirir.
• Sessiz kullanılacak videolarda ses kanalı çıkarılır. Otomatik oynayan ve zaten sessiz izlenecek bir videoda ses verisi taşımanın anlamı yoktur.
• Kapak karesi ayrı bir görsel olarak üretilir. Videodan bağımsız olarak sıkıştırılır ve ölçeklenir.

Gömülü oynatıcı yerine kendi kuşağınız

Videoyu bir video platformundan gömmek kolaydır ve bedelsiz görünür. Bedeli sayfada ortaya çıkar: gömülü oynatıcı harici betikler ve ek istekler getirir, kendi arayüzünü taşır, video bittiğinde başka içerikler önerir ve ziyaretçiyi kendi platformuna davet eder. Ana sayfanın ortasında, ziyaretçiyi siteden çıkarmaya çalışan bir bileşen bulunması iyi bir fikir değildir.

Modül videoyu kendi tarafımızdan servis eder ve sade bir oynatıcı kullanır. Videolarınızın bir video platformunda da yayında olması buna engel değildir; iki kanal ayrı çalışır ve platform tarafındaki izlenmeleriniz etkilenmez.

Kaç video, ne kadar uzun?

Ana sayfada tek video, çoğu durumda birden fazla videodan daha iyi çalışır. Seçenek sunmak ziyaretçiyi izlemeye değil karar vermeye zorlar ve karar vermek yorucudur. Birden fazla video gösterilecekse şerit düzeni kullanılır ve videolar aynı konu etrafında toplanmalıdır; birbiriyle ilgisiz üç video, üç ayrı bölüm gibi davranır.

Uzunluk, videonun taşıdığı bilgiye bağlıdır. Atmosfer videosu birkaç saniyede işini bitirir ve döngüye alınabilir. Anlatımlı bir kampanya videosu bir dakikaya yaklaşabilir, ancak o dakikanın ilk saniyelerinde neyin anlatılacağı söylenmelidir; ziyaretçi izlemeye devam edip etmeyeceğine orada karar verir.

SEO ve arama görünürlüğü

Videonun sıralamaya doğrudan bir etkisi yoktur ama iki dolaylı bağ vardır. Birincisi sayfa deneyimi tarafıdır: kötü kurulmuş bir video, ilk boyama süresini ve düzen kaymasını bozarak ölçülebilir bir zarar verir. İkincisi, video içeriğinin arama sonuçlarında ayrı bir alan olarak görünebilmesidir; bunun için videonun sayfada anlamlı bir başlık, açıklama ve altyazı metniyle birlikte bulunması gerekir.

Altyazı metninin ayrı bir dosya olarak eklenmesinin buradaki katkısı da yadsınamaz: görüntüye gömülü yazı arama motorları için görünmezken, altyazı dosyası videonun ne anlattığını metin olarak taşır. Site genelinde arama görünürlüğünü ele almak isterseniz e-ticaret SEO artırma yazısı teknik ve içerik tarafını birlikte anlatıyor.

Hangi altyapılarda çalışır?

Kuşak Ticimax, IdeaSoft, Ikas, T-Soft, Shopify, WooCommerce, Faprika, Akinon, Magento ve özel yazılımla geliştirilmiş sitelerde kurulabilir. Altyapı yalnızca bölümün nereye yerleşeceğini belirler; video dosyaları ve kapak görselleri bizim tarafımızdan servis edildiği için mağaza panelinizin dosya boyutu sınırları sorun çıkarmaz. Kurulumu STools yapar.

Sık yapılan hatalar

• Ham video dosyasını siteye koymak. Kuşağın sayfayı yavaşlatmasının açık ara en yaygın sebebi budur ve hazırlıkla tamamen çözülür.
• Videoyu sayfa açılışında yükletmek. İzlenmeyen video için ödenen bant genişliği, tamamen boşa giden bir maliyettir.
• Sesle otomatik başlatmayı zorlamak. Tarayıcı engeller, ziyaretçi rahatsız olur ve erişilebilirlik ölçütlerine aykırıdır.
• Videonun ilk karesini kapak olarak bırakmak. Siyah bir kapak, kuşağın hiç tıklanmamasının en sessiz sebebidir.
• Altyazısız konuşmalı video. Sessiz izleyen ziyaretçi için video anlamsız, işitme engelli ziyaretçi için erişilemezdir.
• Alanı baştan ayırmamak. Sayfanın en üstünde oluşan düzen kayması, altındaki tüm içeriği hareket ettirir.
• Masaüstü videosunu mobilde olduğu gibi göstermek. Yatay video dikey ekranda okunamaz hâle gelir; ayrı sürüm hazırlamak gerekir.
• Videoyu güncellememek. Geçen sezonun kampanyasını anlatan bir video, ana sayfada en görünür yerde durduğu için sitenin bakımsızlığını en çok belli eden unsurdur.

Ana sayfa kurgusunu bütün olarak ele almak isterseniz e-ticarette satış artırma rehberi bölümlerin sırasına giriyor. Sosyal medyada çektiğiniz videoları taşımak için Instagram Reels feed modülü, kampanyayı görsel bir alana çevirmek için kampanya kartı sayfalarına bakabilirsiniz.