Web Sitesinde Slider Kullanmalı mı? Dönüşüm, Hız ve Erişilebilirlik

Web sitesinde slider kullanmalı mı?

Slider, birden fazla görseli ya da mesajı aynı alanda sırayla gösteren kayan bileşendir. Çoğu işletme sitesinde otomatik dönen bir ana sayfa slider'ı yerine tek, net bir ana görsel ve tek bir mesaj daha iyi çalışır. Web sitesinde slider ancak galeri gibi sıralı içeriklerde ve kullanıcı kontrolüyle anlamlıdır.

Bu bir zevk meselesi değil, çünkü W3C erişilebilirlik rehberi, Nielsen Norman Group araştırmaları ve web.dev belgeleri aynı yöne işaret ediyor. Hareket dikkat dağıtıyor, ilk slayttan sonrası çoğu zaman gözden kaçıyor ve kötü kurulan bir slider sayfayı yavaşlatıyor. Bu yüzden önce kısa bir karar sırası verelim.

1. İlk olarak slider'daki her mesajı tek tek yazın ve ziyaretçiyi eyleme geçiren tek mesajı seçin. Çoğu işletmede cevap aslında tek bir mesajdır.
2. Ardından içeriğin aynı türden bir koleksiyon olup olmadığına bakın, örneğin ürün, proje ya da mekân fotoğrafları. Öyleyse kullanıcının kendi gezdiği bir karusel düşünün.
3. Otomatik dönmeyi kapatın. Kapatamıyorsanız belirgin bir durdurma düğmesi ekleyin.
4. İlk slayt görselinin hızlı yüklendiğinden emin olun, çünkü bu görsel çoğu sayfada LCP (sayfanın en büyük içeriğinin ekranda çizilme süresi) öğesidir.
5. Son olarak hangi slayta tıklandığını ölçün ve kararı kendi verinizle verin.

Aşağıda her adımın gerekçesini resmi ve birincil kaynaklarla anlatıyoruz. Önce slider'ın tam olarak ne olduğuna bakalım.

Web sitesinde slider nedir, hangi türleri vardır?

W3C Web Erişilebilirlik Girişimi karuseli şöyle tanımlar: öğelerden oluşan bir koleksiyonu, her seferinde yalnızca bir öğe göstererek sunan bileşen. W3C'nin karusel eğitimi, aynı bileşenin slayt gösterisi ve slider adlarıyla da anıldığını belirtir. Tipik kullanımlar arasında kayan haber başlıkları, ana sayfada öne çıkan makaleler ve görsel galerileri yer alır.

Pratikte karşınıza beş tür çıkar:

• Otomatik dönen ana sayfa slider'ı: ilk ekranda kendiliğinden değişen büyük görsellerdir.
• Kullanıcı kontrollü karusel: yalnızca ok, nokta ya da parmakla kaydırma ile değişir.
• Ürün ya da proje galerisi: aynı türden görselleri sırayla gösterir.
• Referans döndürücü: kısa müşteri yorumlarını sırayla gösterir.
• Yatay kaydırmalı kart sırası: mobilde kategori ya da hizmet kartlarını yan yana dizer.

Bu yazıdaki sorunların çoğu ilk türden çıkıyor, çünkü hareketi ziyaretçi değil, sayfa başlatıyor. Öte yandan diğer türler doğru kurulursa çok daha az risk taşır. Dolayısıyla "slider" derken çoğunlukla otomatik dönen ana sayfa slider'ını kastediyoruz.

İşletmeler web sitesinde slider'ı neden ister?

Slider'ın bu kadar yaygın olmasının üç sıradan nedeni var. Birincisi, birçok tema ve site oluşturucu ana sayfa şablonunu hazır bir slider bölümüyle sunar. İkincisi, hareket ilk bakışta etkileyici bir izlenim verir. Üçüncüsü ve en önemlisi, herkes kendi mesajının ilk ekranda yer almasını ister.

Nielsen Norman Group'un karusel kullanılabilirliği yazısı bu noktayı açıkça söylüyor: karusel birden fazla içeriğin aynı değerli alanı paylaşmasını sağlar ve kimin içeriğinin öne çıkacağı tartışmasını yatıştırabilir. Yani slider çoğu zaman bir tasarım kararından çok, kurum içi tartışmayı yatıştıran bir çözümdür.

Talha Aslan ve ekibi olarak kurumsal web tasarım hizmetimizde bu tartışmayı tasarımdan önce çözüyoruz. İlk olarak ziyaretçinin ilk ekranda hangi eylemi yapmasını istediğinizi yazıyoruz, ardından tek bir mesajı seçiyoruz. Böylece diğer mesajlar ilk ekranın altında kendi bölümlerine yerleşiyor.

Araştırmalar otomatik dönen slider hakkında ne söylüyor?

Nielsen Norman Group (NN/g), otomatik ilerleyen paneller üzerine bir kullanılabilirlik çalışması yayımladı. Bir katılımcı, bir ev aleti markasının ana sayfasında çamaşır makinesi kampanyası arıyordu. Kampanya sayfanın en büyük kutusundaydı, ancak kutu beş saniyede bir yeni panel gösteriyordu. Katılımcı teklifi bulamadı ve sonunda vazgeçti; okumaya vakit bulamadığını ve panelin çok hızlı değiştiğini söyledi.

NN/g bu örnekten otomatik ilerlemenin neden zarar verdiğini sıralıyor:

• Hareketli öğeler, özellikle motor becerisi kısıtlı olup öğe kaybolmadan tıklamakta zorlanan kullanıcılar için erişilebilirliği düşürür.
• Okuryazarlığı düşük kullanıcılar bilgiyi okuyacak zamanı bulamayabilir.
• Siteyi ana dilinde okumayan kullanıcılar daha yavaş okur, dolayısıyla kısa süren bir paneli anlayamayabilir.
• Öğeler sırayla ekrana geldiği için her birinin fark edilme olasılığı düşer; örnekte indirim teklifi zamanın yalnızca %20'sinde ekrandaydı.
• Hareket eden bir öğeyi insanlar reklam sanır, bu yüzden daha kolay yok sayar.

NN/g'nin çözümü net: yeni paneli yalnızca kullanıcı isterse göstermek, aksi halde içeriği sabit bırakmak. W3C de benzer bir tespit yapıyor: karuseller kullanılabilirlik açısından tartışmalıdır, çünkü içeriklerini keşfetmek zor olabilir.

Ziyaretçiler slider'daki mesajı neden kaçırır?

NN/g'nin karusel yazısına göre insanlar karuselin yanından çoğu zaman hemen kaydırıp geçiyor. Bu yüzden ilk kare dışındaki içeriği kaçırıyorlar. Yazı, bazı karusellerin göz izleme çalışmalarında ve tıklama verisinde ilgi çektiğini de kabul ediyor. Yine de en önemli uyarı şu: insanlar karuselleri sık sık gözden kaçırıyor.

İkinci sorun algı farkıdır. Tasarımcı karuseli görsellerden oluşan bir koleksiyon sayar, ziyaretçi ise yalnızca o an gördüğü tek görseli görür. NN/g'ye göre kişi koleksiyondan yalnızca tek bir görsel görürse işletme hakkında yanlış fikir edinebilir.

Örnek hesap: her slayt 5 saniye ekranda kalıyorsa dördüncü slayta ulaşmak için ziyaretçinin ilk ekranda en az 15 saniye beklemesi gerekir (3 × 5). Ziyaretçi bu süreden önce kaydırırsa son slayttaki mesaj hiç ekrana gelmez.

Bu nedenle NN/g şunu öneriyor: ana görselde ya da karuselde yer alan önemli bilgiyi arayüzün başka bir yerinde de verin. Böylece slaytı görmeyen ziyaretçi de bilgiye ulaşır.

Web sitesinde slider erişilebilirliği nasıl etkiler?

Erişilebilirlikte asıl sorun otomatik harekettir. W3C'nin karusel eğitimi bunu ilk kural olarak koyar: kullanıcılar karusel hareketini duraklatabilmeli, çünkü hareket çok hızlı ya da dikkat dağıtıcı olabilir ve metni okumayı zorlaştırır. Eğitim ayrıca hareketten rahatsız olanları ve okumak için daha fazla zamana ihtiyaç duyanları özellikle sayıyor.

Bu kuralın dayanağı, WCAG (Web İçeriği Erişilebilirlik Yönergeleri) 2.2'deki 2.2.2 numaralı "Pause, Stop, Hide" (duraklat, durdur, gizle) başarı ölçütüdür ve A düzeyindedir. W3C'nin açıklayıcı belgesine göre ölçüt, kendiliğinden başlayan, beş saniyeden uzun süren ve sayfadaki diğer içerikle birlikte sunulan hareket için kullanıcıya duraklatma, durdurma ya da gizleme imkânı ister. Aynı belge, otomatik ilerleyen sunumları ve mesajları da otomatik güncellenen içerik örnekleri arasında sayar.

Hareketi yalnızca odak karuselin üzerindeyken durdurmak yetmez. Açıklayıcı belge, odak sürdükçe duran ve odak gidince yeniden başlayan bir animasyonu duraklatma mekanizması saymaz. Bu nedenle W3C iki şeyi birlikte önerir: belirgin bir oynat ve durdur düğmesi, ayrıca fare ya da klavye odağı karusele geldiğinde otomatik duraklama.

W3C'ye göre erişilebilir bir karusel şunları sağlar:

• Kullanıcı hareketi duraklatabilir ve yeniden başlatabilir.
• Slaytlar arasında gezinme dahil her işlev klavyeyle çalışır.
• Slayt değiştiğinde ekran okuyucu kullanan ziyaretçi de bunu duyar.
• Klavye odağı mantıklı ve izlenebilir bir sırayla ilerler.

WCAG ölçütleri slider'dan tam olarak ne ister?

Tablo, slider'ı doğrudan ilgilendiren WCAG 2.2 ölçütlerini ve resmi metindeki eşik değerlerini özetliyor. Parantezdeki A ve AA, ölçütün uyum düzeyini gösterir. Ayrıca CSS pikseli, ekran yoğunluğundan bağımsız mantıksal piksel birimidir.

WCAG tanımına göre büyük metin, en az 18 punto ya da 14 punto kalın metindir. Yazıyı görselin üstüne koyduysanız oranı ücretsiz renk kontrast kontrolü aracımızla ölçebilirsiniz. Genel çerçeve için ise web erişilebilirliği ve WCAG standartları yazımıza bakın.

Web sitesinde slider sayfa hızını ve LCP'yi nasıl bozar?

LCP (Largest Contentful Paint), ekranda görünen en büyük görselin ya da metin bloğunun ne zaman çizildiğini ölçer. Ana sayfada slider varsa en büyük öğe çoğu zaman ilk slayt görselidir. web.dev iyi LCP eşiğini 2,5 saniye ya da daha kısa olarak tanımlar ve ölçüm için sayfa yüklemelerinin 75. yüzdelik dilimine bakmanızı önerir. Ayrıntı için LCP nedir yazımıza bakabilirsiniz.

web.dev'in LCP iyileştirme rehberi slider'ı doğrudan ilgilendiren dört uyarı veriyor:

• LCP görseli sayfanın ilk HTML yanıtında bulunabilmeli. Görseli JavaScript ekliyorsa ya da bir kütüphane görselin adresini sonradan doldurduğu bir özellikte saklıyorsa tarayıcı görseli geç keşfeder.
• CSS arka plan görseli de HTML taranırken keşfedilemez. Böyle bir görseli önceden yüklemeniz (preload) gerekir.
• LCP görselini asla geç yüklemeye (lazy loading) bırakmayın. web.dev bunu açık bir uyarı olarak yazıyor.
• Yüksek öncelik ipucunu (fetchpriority) yalnızca bir iki görsele verin. İlk açılışta görünmeyen karusel slaytlarına ise düşük öncelik verebilirsiniz.

Yani doğru kurulum şöyle: ilk slayt görselini HTML'e gerçek bir görsel olarak koyun ve tarayıcı onu hemen indirsin, sonraki slaytlar sırasını beklesin. Ayrıca web.dev, büyük JavaScript dosyalarının, görsel çoktan inmiş olsa bile çizimi geciktirebildiğini belirtiyor. Slider kütüphanesi de bu dosyalara katkı yapabilir. Görsel ölçüleri ve ağırlığı için web sitesi görsel ölçüleri rehberimize göz atın.

Slider SEO'yu etkiler mi, görselleri nasıl eklemelisiniz?

SEO (arama motoru optimizasyonu) açısından belirleyici olan slider'ın varlığı değil, nasıl kurulduğudur. Google Search Central'ın görsel belgesine göre Google, görsel etiketinin (img) src özelliğindeki görselleri bulur, CSS ile eklenen görselleri ise dizine eklemez. Bazı slider kurulumları ise slaytları CSS arka plan görseli olarak ekler. Bu durumda slayt görselleri görsel aramada hiç çıkmayabilir.

Alt metin (görselin yazıyla tarifi) de önemlidir. Aynı belge, Google'ın alt metni bilgisayarlı görü algoritmaları ve sayfa içeriğiyle birlikte görselin konusunu anlamak için kullandığını söyler. Dolayısıyla slayt görseli bir mesaj taşıyorsa alt metin o mesajı anlatsın. Anahtar kelime yığını yazmayın.

Başlık yapısı da sık görülen bir hata alanıdır. Her slayta ayrı bir H1 (ana başlık etiketi) koymak sayfanın ana başlığını bulandırır. Nitekim W3C'nin örnek yapısında karusel kendi etiketli bölgesinde durur ve slayt başlıkları alt düzey başlıklardır. Tartışmanın ayrıntısını bir sayfada birden fazla H1 olur mu yazımızda işledik. Burada kuralımız basit: sayfayı tanımlayan başlığı slider'ın dışında, tek ve sabit tutun.

Slider mobilde neden daha kırılgandır?

Telefonda ekran küçük, dokunma alanları sınırlı ve sayfa kısadır. Bu yüzden slider daha çabuk sorun çıkarır. NN/g mobilde otomatik ilerlemeyi önermiyor ve iki gerekçe veriyor: otomatik ilerleme sayfayı yavaşlatır, ayrıca sayfa kısa olduğu için kullanıcılar hızlı kaydırır ve slayt değiştiğinde çoğu zaman sayfanın daha aşağısına bakar.

Gösterge noktaları da mobilde zayıf bir ipucudur, çünkü NN/g'ye göre insanlar onları sık fark etmez. Öte yandan düğmeler yeterince büyük olmalı. WCAG 2.5.8 işaretçi hedefleri için en az 24 × 24 CSS pikseli ister. AAA düzeyindeki 2.5.5 ise 44 × 44 CSS pikseli bekler. NN/g ayrıca gezinti kontrollerinin karuselin altında değil, içinde durmasını öneriyor.

Parmakla kaydırma doğal bir harekettir, ama tek yol olmamalı. WCAG 2.5.1, kaydırma gibi yol izleyen hareketlerin yanında basit bir dokunuşla çalışan alternatif ister. Örneğin W3C'nin açıklayıcı belgesindeki haber karuseli hem hızlı kaydırma hareketini hem de ileri ve geri düğmelerini sunuyor.

Sayfanızın telefonda nasıl göründüğünü ücretsiz mobil uyumluluk testi aracımızla kontrol edin. Araç meta viewport etiketini (sayfanın mobil ekrana uyum ayarı), yazı boyutunu ve dokunma alanlarını denetler.

Web sitesinde slider dönüşümü artırır mı?

Bu soruya evrensel bir yüzde veremeyiz; kaynaksız oranlara da güvenmeyin. Birincil kaynaklardaki bulgu kullanılabilirlik düzeyinde: NN/g, insanların karuselleri sık sık gözden kaçırdığını söylüyor. Aynı yazı, bazı karusellerin göz izleme çalışmalarında ve tıklama verisinde dikkat çektiğini de kabul ediyor.

Dönüşüm (ziyaretçinin form doldurma, arama ya da satın alma gibi hedef eylemi yapması) sitenizde şu etkenlere bağlıdır: teklifin ilk slaytta olup olmadığı, ziyaretçinin ilk ekranda ne kadar kaldığı, mesajın netliği ve sayfanın hızı. Bu nedenle üç olası zarara dikkat edin:

• Teklifiniz ilk slayt değilse birçok ziyaretçi onu hiç göremeyebilir.
• Hareket dikkati dağıtır; NN/g, sabit bir ana görselin dönen bir öğeden daha az dikkat dağıtabileceğini belirtiyor.
• İlk görsel geç açılırsa eylem düğmesi de geç ekrana gelir.

Kısacası kanıt, "slider dönüşümü düşürür" gibi tek yönlü bir iddia değil; riskin nerede olduğunu gösteriyor. Dolayısıyla etkiyi kendi sitenizde ölçmeniz gerekir, yöntemi aşağıda anlatıyoruz.

Slider, tek ana görsel, karusel ve ızgara arasında nasıl seçersiniz?

Tablo dört seçeneği beş ölçütle karşılaştırıyor. Değerlendirmeler yukarıdaki W3C, WCAG, NN/g ve web.dev bulgularının yorumudur; bu yüzden sizin sitenizde kesin sonuç vermez.

Tablodan çıkan sonuç şu: ana sayfa için en dengeli seçenek çoğu işletmede tek ana görseldir. Karusel ve ızgara ikinci sıradadır. Otomatik slider ise en çok risk taşıyan seçenektir.

Web sitesinde slider yerine ne koymalısınız?

Çoğu işletme için cevap, ilk ekranda tek bir ana görsel alanı (hero) kurmaktır. Hero, ana sayfanın en üstündeki büyük başlık, görsel ve eylem düğmesi alanıdır. NN/g, yalnızca tek görsel seçmek zorunda kalan tasarımcının daha güçlü bir görsel seçebileceğini, ziyaretçinin de dikkatini tek görsele verebileceğini söylüyor.

Güçlü bir ana görsel alanı beş parçadan oluşur:

• Ne yaptığınızı ve kime yaptığınızı anlatan tek cümlelik, somut bir başlık.
• Başlığı destekleyen kısa bir alt cümle.
• Tek bir birincil eylem düğmesi, örneğin teklif alın ya da arayın.
• Teklifinizi gösteren gerçek bir görsel.
• Gerçek bir referans ya da belge gibi küçük bir güven işareti.

Diğer mesajlarınızı slayt yapmayın; ilk ekranın altında ayrı bölümler olarak sıralayın. Böylece ziyaretçi her mesajı kendi yerinde, hareketsiz okur. İlk ekranın nasıl kurulacağını kıvrım üstü (above the fold) tasarım yazımızda, ana sayfanın bütün akışını ana sayfa tasarımı yazımızda, eylem düğmesini ise CTA (eylem çağrısı) yazımızda anlattık.

Üstelik aynı ilke reklam sayfalarında da geçerlidir. Reklamdan gelen ziyaretçi için kurduğumuz landing page tasarımı çözümümüz tek mesaj, tek hedef mantığına dayanır. Ana sayfada da aynı disiplini uygulamak ilk ekranı sadeleştirir.

Arka plan videosu da kendiliğinden bir çözüm değildir. WCAG 2.2.2'nin açıklayıcı belgesi hareketli görüntüleri ve animasyonları aynı ölçüte dahil eder, yani kendiliğinden başlayan video da durdurulabilmelidir. Ayrıca web.dev, videonun poster görselini LCP adayları arasında sayar.

Hangi durumlarda web sitesinde slider yine de mantıklıdır?

Slider her yerde yanlış değildir. İçerik gerçekten sıralı bir koleksiyonsa ve hareketi kullanıcı yönetiyorsa karusel iyi çalışır. Nitekim W3C de tipik kullanımlar arasında görsel galerilerini sayar. Şu durumlar uygundur:

• Ürün fotoğrafları: aynı ürünün farklı açıları, ziyaretçinin kendi hızında gezdiği bir galeride durur.
• Proje ve önce-sonra galerisi: iş örneklerini sıralı göstermek istediğinizde işe yarar.
• Mekân ve emlak fotoğrafları: ziyaretçi karar vermeden önce birden fazla kare görmek ister.
• Adım adım anlatım: kurulum ya da süreç adımlarını sırayla gösterir.
• Mobilde yatay kart sırası: kategori ya da hizmet kartlarını yan yana dizer.

Koşul hep aynı: hareket kullanıcıdan gelmeli. NN/g, otomatik ilerlemeyen karuseller için iki öneri veriyor. Gezinti bağlantıları ve simgeleri kullanın, ayrıca bir sonraki görselin bir kısmını kesik göstererek devamı olduğunu hissettirin.

Mevcut slider'ınızın işe yarayıp yaramadığını hangi sırayla kontrol edersiniz?

Önce en sık sebebi kontrol edin: ilk slayt. Çünkü birçok ziyaretçi yalnızca onu görür. Sahada zaman zaman rastladığımız bir durum şu: asıl kampanya üçüncü slayttadır, ilk slayt ise yalnızca marka adı ve slogan taşır. Sırayla şunlara bakın:

1. İlk slayt: Tek başına teklifinizi anlatıyor mu? Anlatmıyorsa sorun burada başlar.
2. Hareket: Otomatik dönme açık mı, durdurma düğmesi var mı?
3. Klavye: Tab tuşuyla oklara ve slayt bağlantılarına gidip Enter ile çalıştırabiliyor musunuz, odak çerçevesini görebiliyor musunuz?
4. Telefon: Metni rahat okuyabiliyor musunuz, düğmelere parmağınızla kolay basabiliyor musunuz, kaydırmanın alternatifi var mı?
5. Hız: İlk slayt görseli sayfayla birlikte mi geliyor, yoksa sonradan mı?
6. Veri: Son dönemde ziyaretçiler hangi slayta tıkladı, hiç tıklamadıkları slayt var mı?

İlk üç maddede iki ya da daha fazla sorun varsa slider'ı onarmak yerine tek ana görsele geçmek çoğu zaman daha sade bir çözüm olur.

Otomatik dönmeyi kapatamıyorsanız süre ve slayt sayısını nasıl ayarlarsınız?

Yönetim ya da ortaklar otomatik dönmede ısrar edebilir. O zaman riski küçültün. Önce WCAG 2.2.2 gereği durdurma düğmesini ekleyin. Ardından W3C'nin önerdiği gibi fare ya da klavye odağı karusele geldiğinde hareketi duraklatın.

NN/g iki durumda otomatik ilerlemeyi hiç önermiyor: süreyi doğru ayarlayacağınızdan emin değilseniz ve içerik reklama benziyorsa. Süre için kural yok, kılavuz var. NN/g, metnin okunması için saniyede 3 kelimeyi kılavuz olarak kullanıyor. Örnek hesap: 15 kelimelik bir slayt metni yalnızca okuma için 15 ÷ 3 = 5 saniye ister. Görseli kavramak için ek süre gerekir. Yavaş okuyan ziyaretçiler için süre daha da uzar.

Slayt sayısı için NN/g beş ya da daha az kare öneriyor, çünkü kullanıcıların bundan fazlasıyla ilgilenmesi pek olası değil. Ayrıca son slaytta durmayın, başa dönün. Mobilde ise otomatik ilerlemeyi hiç kullanmayın. Bunlar kural değil kılavuzdur; bu yüzden kendi içeriğinizle deneyin.

Slider kullanacaksanız kontrol listeniz ne olmalı?

Slider'ı yayınlamadan önce aşağıdaki maddelerin hepsini işaretleyin. Böylece en sık hataların çoğunu baştan elersiniz.

• İlk slayt tek başına teklifinizi ve eylem düğmenizi taşıyor.
• Otomatik dönme kapalı; açıksa belirgin bir durdurma düğmesi var ve odak karusele gelince hareket duruyor.
• Slayt sayısı beşi geçmiyor ve önemli bilgi sayfanın başka bir yerinde de yazıyor.
• İleri ve geri düğmeleri ile slayt göstergesi karuselin içinde, belirgin ve yeterince büyük.
• Tüm düğmelere klavyeyle ulaşabiliyorsunuz ve odak çerçevesini net seçebiliyorsunuz.
• Parmakla kaydırmanın yanında dokunuşla çalışan ileri ve geri düğmeleri var.
• Yazı görselin içinde değil, gerçek metin olarak duruyor; görselin üstündeki metin kontrast ölçütünü karşılıyor.
• Slayt görselleri HTML'de gerçek görsel olarak duruyor ve anlamlı alt metin taşıyor.
• İlk görseli geç yüklemeye bırakmıyorsunuz; sonraki slaytların görsellerine düşük öncelik veriyorsunuz.
• Görsellerin ölçüsü doğru ve dosya boyutu küçük.
• Slayt başına ayrı H1 yok; sayfanın tek ana başlığı slider'ın dışında duruyor.
• Her slayt bağlantısını ayrı etiketle ölçüyorsunuz ve sonuçlara düzenli bakıyorsunuz.

Slider'ın etkisini kendi sitenizde nasıl ölçersiniz?

Ölçüm kavramsal olarak dört adımdır. Araç menüleri sık değiştiği için buton adlarını yazmıyoruz; ilgili ayarı aracın yardım sayfasında bulun.

1. Her slayt bağlantısına ayrı bir etiket verin, örneğin slayt sırası ve mesaj adı. Böylece analiz aracınız tıklamaları slayt bazında ayırır.
2. Isı haritası ve oturum kaydıyla ziyaretçilerin slider'ı kaydırıp kaydırmadığını izleyin. Isı haritası ve oturum kaydı yazımızda bu araçların mantığını anlattık.
3. Sonra iki sürümü karşılaştırın (A/B testi): slider'lı sürüm ve tek ana görselli sürüm. Aynı dönemi, aynı trafik kaynağını ve aynı hedefi kullanın.
4. Farkın şansa mı bağlı olduğuna A/B testi hesaplama aracımızla bakın. Trafik azsa kısa bir testten kesin sonuç çıkarmayın.

Örnek hesap: bir ayda slider bağlantılarına 200 tıklama geldiyse ve etiketler bunların 170'inin ilk slayttan geldiğini gösteriyorsa ilk slayt tıklamaların %85'ini alıyor demektir. Bu rakamlar örnektir; amaç hesabın mantığını göstermek. Böyle bir dağılım diğer slaytların süs işlevi gördüğünü düşündürür, ancak tek ayın verisiyle karar vermeyin ve mevsim etkisini hesaba katın.

Slider'dan tek ana görsele geçişi adım adım nasıl yaparsınız?

Bu bir örnek senaryodur, gerçek bir müşteriyi anlatmaz. Küçük bir mobilya atölyesinin ana sayfasında dört slayt olsun: kampanya, sergi salonu, katalog ve referanslar.

1. Dört mesajı yazın ve ziyaretçinin ilk ekranda yapmasını istediğiniz tek eylemi seçin, örneğin teklif istemek.
2. O eyleme en çok hizmet eden mesajı ana görsel alanına taşıyın: tek başlık, tek alt cümle, tek düğme.
3. Diğer üç mesajı ilk ekranın altında üç ayrı bölüm ya da kart olarak yerleştirin.
4. Görsel için tek ve güçlü bir fotoğraf seçin; metni fotoğrafın içine değil HTML'e yazın.
5. Eski slayt bağlantılarını kaldırmadan önce hedef sayfalarına başka yerden de ulaşabildiğinizden emin olun.
6. Yeni ana sayfayı yayınlamadan önce telefonda ve klavyeyle deneyin, hızını ölçün.
7. Birkaç hafta sonra tıklama ve dönüşüm verisini eski dönemle karşılaştırın.

Slider'ı kaldırmak için en uygun zaman, sitenizi yeni bir platforma taşıdığınız dönemdir, çünkü tasarımı zaten baştan kurarsınız. Wix gibi bir site oluşturucudan çıkıyorsanız süreç için Wix sitesini taşıma ve alan adı transferi rehberimize bakın. Ancak taşıma ile tasarım değişikliğini aynı gün yayınlamayın, çünkü sorun çıkarsa nedenini ayırmak zorlaşır.

Ana sayfa kararını ve site yenilemeyi bizimle yapmak isterseniz nasıl ilerlersiniz?

Slider kararı, bir web sitesi projesinin yalnızca küçük bir parçasıdır. Talha Aslan ve ekibi olarak web sitenizi tasarlar, kurar, taşır ve yönetiriz. Ayrıca ana sayfa mesajını, görsel hiyerarşiyi, hızı, erişilebilirliği ve ölçümü birlikte ele alırız.

Mevcut ana sayfanızı gözden geçirmek ya da sıfırdan yeni bir site kurmak isterseniz web sitesi tasarımı için teklif alın. Fiyat, paket ya da teslim süresi sözü vermiyoruz; bunun yerine kapsamınıza göre teklif hazırlıyoruz. Teklif talebinize sitenizin adresini, hedefinizi ve ilk ekranda görmek istediğiniz tek eylemi yazarsanız süreç hızlanır.