İçeriğe geç

Mağaza tasarımı ve dönüşüm

Ana sayfa slaytı kullanmalı mısınız?

Ana sayfadaki dönen görseller güzel görünür ama ziyaretçilerin çoğu slaytların çoğunu hiç görmez. Bu yazıda araştırmanın ne söylediğini, slayt yerine neyi kullanabileceğinizi ve slayt kullanacaksanız hangi kuralların önemli olduğunu anlatıyoruz.

Sepetya Editör EkibiYayın tarihi: 7 dk okumaGüncellendi:

Bu yazıda

Ana sayfanın en üstünde dönen büyük görseller, yani slayt (karusel), e-ticaret sitelerinin en tanıdık öğelerinden biridir. Birçok mağaza sahibi onu varsayılan olarak ekler: "Hepsini göstereyim, kim neye bakarsa baksın." Sorun şu ki ziyaretçilerin çoğu o slaytların çoğunu hiç görmez.

Bu yazıda araştırmanın ne söylediğini, slayt yerine neyi kullanabileceğinizi ve slayt kullanacaksanız hangi kuralların önemli olduğunu anlatıyoruz. Kısa cevap şu: slayt yasak değil, ama varsayılan seçim de olmamalı.

Araştırma ne diyor?

E-ticaretin kullanılabilirliği üzerine çalışan Baymard Institute, ana sayfa slaytlarını büyük ölçekli kullanıcı testlerinde inceledi ve sonuçlarını 2019'da yayımladı. Öne çıkan bulgular şunlar:

  • ABD ve Avrupa'nın en büyük e-ticaret sitelerinin masaüstü sürümlerinin %33'ünde ana sayfa slaytı vardı.
  • Ana sayfa slaytı kullanan sitelerin %46'sında slaytın uygulaması kullanılabilirlik sorunları taşıyordu.
  • Test katılımcıları, slaytlar bir tur dönmeden başka bir sayfaya geçiyor ya da sayfayı aşağı kaydırıyordu. Yani çoğu ziyaretçi bütün slaytları görmez; ilk slayt diğerlerinden çok daha fazla görünür.
  • Slaytlar reklama benzediği için bazı ziyaretçiler onları hiç okumaz (banner körlüğü). Baymard, önemli bir özelliğe yalnızca slayt üzerinden ulaşılmaması gerektiğini söylüyor.
  • Aynı içeriği ana sayfada sabit bölümler olarak göstermek, Baymard'ın testlerinde slayt kadar iyi çalıştı ve doğru uygulaması çok daha kolay.

Sınırlarını bilin: Bu çalışma büyük ABD ve Avrupa sitelerini kapsıyor ve 2019 tarihli. Türkiye'deki ziyaretçilerinizi ya da bugünün alışkanlıklarını ölçmüyor. Kesin bir kural olarak değil, ciddi bir uyarı olarak okuyun.

Slayt mı, tek görsel mi, kutular mı?

Sepetya temalarında ana sayfanın üst kısmı için başlıca dört hazır bölüm var. Hangisini seçeceğiniz, ne anlatmak istediğinize bağlı.

DurumunuzUygun bölümNeden
Tek güçlü bir mesajınız var (yeni sezon, tek büyük kampanya)Ana görsel (Hero)Mesaj hemen görünür, dönen içerik yoktur.
Eşit önemde iki ila beş duyurunuz varKampanya kutularıHepsi aynı anda görünür; ziyaretçi ilgisini çekene gider.
Çok sayıda kategoriniz varVitrin açılışı (kategori menülü)Solda kategori listesi, ortada kampanya slaytı, sağda iki küçük kampanya kartı bulunur; kategorilere ulaşmak slayta bağlı kalmaz.
Aynı alanda sırayla göstermeniz gereken birkaç duyuru varSlayt gösterisiEn çok altı slayt koyabilirsiniz; aşağıdaki kurallarla kullanın.

Küçük ve orta ölçekli mağazalarda çoğu zaman ilk ikisi iş görür: bir ana görsel ve altında kampanya kutuları ya da öne çıkan kategoriler. Slayt, gerçekten birden çok duyuruyu aynı yerde taşımanız gerektiğinde mantıklıdır. Temalar bu bölümleri farklı yorumlar; sektörünüze göre tema seçimi için sektörünüze uygun tema nasıl seçilir yazımıza bakın.

Ana görselde video kullanmak

Ana görsel (Hero) bölümüne, görselin yerine MP4 bağlantısıyla bir arka plan videosu da ekleyebilirsiniz. Video sessiz ve döngülü oynar; işletim sisteminde hareket azaltma tercihi açık olan ziyaretçilere ise görsel gösterilir. Videoyu kısa ve hafif tutun: Baymard, ziyaretçilerin bir saniyeden uzun yüklenen, görsel ağırlıklı içerikten çabucak sıkıldığını bildiriyor.

Kampanya kutuları nasıl kurulur?

  1. Tema editöründe ana sayfaya "Kampanya kutuları" bölümünü ekleyin.
  2. Düzeni seçin: iki eşit kutu, üç eşit kutu, bir büyük ve iki küçük ya da bir büyük ve dört küçük.
  3. Her kutuya görsel, başlık, kısa metin, düğme etiketi ve bağlantı girin. Yazının kutudaki konumunu (üst, orta, alt) ve karartma oranını ayarlayın.
  4. En önemli duyuruyu büyük kutuya koyun ve her kutuda tek mesaj verin.

Bir bölümde en çok beş kutu olabilir. Telefonda farklı görünsün isterseniz her kutu için ayrı bir telefon görseli de yükleyebilirsiniz.

Slayt kullanacaksanız: Sepetya neyi sizin yerinize yapar?

Baymard, ana sayfa slaytları için on gereksinim sıralıyor. Aşağıdaki tablo, bunların hangisini Sepetya slaytlarının kendiliğinden yaptığını ve hangisini sizin üstlenmeniz gerektiğini gösteriyor.

GereksinimSepetya içinde
İlk slaytı özenle seçinSıralamayı siz belirlersiniz. İlk slayt en çok görülendir; en geniş kitleye hitap eden mesajı oraya koyun.
Önemli içeriğe yalnızca slayttan ulaşılmasınSizin sorumluluğunuzda: slayttaki her bağlantıya menüden ya da ana sayfadaki başka bir bölümden de ulaşılabilmeli.
Belirgin manuel kontrollerÖnceki ve sonraki okları ile her slayt için bir nokta bulunur. Otomatik geçiş çalışıyorsa görünür bir duraklat düğmesi de eklenir.
Makul geçiş süresi: 5–7 saniye, yazısı çok olan slaytlarda 10 saniyeye kadarVarsayılan 6 saniyedir; 4 ile 10 saniye arasında ayarlanır.
Fareyle üzerine gelince durmaFare slaytın üzerindeyken ya da klavyeyle odak slaytın içindeyken geçiş durur.
Etkileşimden sonra otomatik geçişi bırakmaOk, nokta ya da kaydırma kullanılınca otomatik geçiş durur. Ziyaretçi isterse oynat düğmesiyle yeniden başlatabilir.
Mobilde otomatik geçiş olmasınOtomatik geçiş yalnızca fareyle gezilen cihazlarda çalışır; dokunmatik cihazlarda slaytlar parmakla kaydırılır.
Mobil hareketleri destekleyinSlaytlar yana kaydırılarak gezilir.
Slayt yazısı okunaklı olsunBaşlık, yazı ve düğmeler görsele gömülü değil, ayrı alanlardır. Telefon için ayrı bir görsel yükleyebilir, karartma oranını ayarlayabilirsiniz.
İçerik hızlı yüklensinİlk slaytın görseli öncelikli yüklenir, diğerleri gerektikçe. Görseller AVIF ve WebP biçimlerinde, farklı genişliklerde sunulur.

Bu davranış, temanın slaytı nasıl göstereceğinden bağımsızdır: temalar slaytı kaydırma ya da yumuşak geçişle, nokta, çubuk ya da sayaçla gösterebilir, ama duraklatma ve durma kuralları aynı kalır. Ek olarak, işletim sisteminde hareket azaltma tercihi açık olan ziyaretçilerde otomatik geçiş hiç başlamaz.

Bu kurallar yalnızca iyi uygulama değil. Erişilebilirlik yönergesi WCAG 2.2, kendiliğinden başlayan ve başka içerikle birlikte sunulan hareketli ya da kendini güncelleyen içeriği kullanıcının duraklatabilmesini, durdurabilmesini veya gizleyebilmesini ister (2.2.2 ölçütü, A düzeyi). Otomatik geçen bir slayt bu kapsama girebilir; görünür bir duraklat düğmesi bu ihtiyacı karşılar.

Örnek kurgu: üç slayt

Aşağıdaki tablo yalnızca bir örnektir; kendi kataloğunuza göre değiştirin. Mantık şu: ilk slayt en geniş kitleye, sonrakiler daha dar ilgilere hitap eder ve her slaytın hedefi menüden de erişilebilir bir sayfadır.

SıraMesajDüğmenin gittiği yer
1Yeni sezon koleksiyonu"Yeni gelenler" kategorisi
2Seçili ürünlerde indirim (önceki fiyat kuralına uygun)İndirimli ürünlerin listesi
3Hediye önerileri"Hediye" kategorisi

Slayt hazırlarken kontrol listesi

  • Slayt sayısını az tutun. Çoğu ziyaretçi bütün slaytları görmediği için sonraki slaytların görülme şansı düşüktür; üç dört slayt çoğu mağaza için yeterlidir.
  • İlk slayta en geniş kitleye hitap eden mesajı koyun: genel kampanya, yeni ürünler ya da mevsim.
  • Her slaytta tek mesaj ve tek ana düğme olsun; başlığı kısa tutun.
  • Başlığı ve metni görselin içine gömmeyin, slayt alanlarına yazın. Böylece yazı okunur, çevrilebilir ve telefonda da net kalır.
  • Telefon için ayrı bir görsel yükleyin. Tek görsel kullanırsanız ürünü ya da konuyu merkeze yakın tutun; küçük ekranlarda kenarlar kırpılır.
  • Karartma oranını, yazı görselin en açık yerinde bile okunacak şekilde ayarlayın.
  • Masaüstü slayt görselini en az 1920 piksel genişlikte yükleyin. Sepetya, yüklediğiniz görselden 160 ile 2560 piksel arasında farklı genişlikte sürümler üretir ve tarayıcı ekrana uygun olanı seçer.
  • Slayttaki her hedefe menüden ya da ana sayfanın başka bir bölümünden de ulaşılabildiğini kontrol edin.
  • Slaytları masaüstünde, telefonda ve klavyeyle (Tab tuşuyla) deneyin.

Slayt metinlerinde dürüst kalın

Slayttaki başlık ve metinler reklam niteliğindedir. "Yüzde 30 indirim" ya da "Son 3 gün" gibi ifadelerin gerçeği yansıtması gerekir:

  • İndirim ve önceki fiyat: Ticari Reklam ve Haksız Ticari Uygulamalar Yönetmeliği'nin 14. maddesine göre, 1 Ağustos 2026'dan itibaren mal satışına ilişkin reklamlarda indirimden önceki fiyat, indirimin başlangıç tarihinden önceki on gün içinde uygulanan en düşük fiyattır. Ayrıntıyı dürüst aciliyet ve gerçek stok uyarıları yazımızda anlattık.
  • Geri sayım ve bitiş tarihleri: Gerçek bir kampanya bitişine bağlı olmayan geri sayım koymayın. Sahte geri sayım ve sahte stok azlığı mesajları karanlık tasarım örnekleridir (karanlık tasarımlar yazımıza bakın).
  • Fiyat notu: Slayta bir ürün bağladığınızda ("Fiyatı gösterilecek ürün" alanı) bazı temalar "… TL'den başlayan fiyatlarla" notunu ürünün güncel fiyatıyla gösterir. Fiyatı elle yazmak yerine bu alanı kullanırsanız slayttaki fiyat ürün sayfasındaki fiyattan ayrışmaz.
  • Kısa özellikler: "Su geçirmez, 2 yıl garanti" gibi kısa özellik etiketlerine yalnızca doğru ve belgeleyebileceğiniz bilgileri yazın.

Karar vermeden önce kendi mağazanızı izleyin

Baymard'ın bulguları yön gösterir, ama mağazanızın ziyaretçileri farklı davranabilir. Ana sayfanın üst bölümünü değiştirdiğinizde, birkaç hafta boyunca ana sayfadan ürün ve kategori sayfalarına geçişi ve satışları önceki döneminizle karşılaştırın. Aynı anda başka bir şeyi (fiyat, kampanya, reklam bütçesi) değiştirmemeye çalışın; aksi hâlde sonucun nedenini ayıramazsınız.

Ana sayfayı sade tutmak ve ziyaretçinin kategoriye, ürüne hızlıca ulaşmasını sağlamak çoğu zaman slaytın süsünden daha çok iş görür. Slayt ve kampanya kutularını tema editöründe kendi mağazanızda deneyebilirsiniz: ücretsiz deneyin.

Bu yazı hukuki/mali danışmanlık değildir.

  • slayt
  • ana-sayfa
  • tasarim
  • donusum

Tüm yazılar

  • Mobilde ürün sayfası: dönüşümü etkileyen 10 detay

    Ziyaretçileriniz telefondan geliyorsa ürün sayfasının telefonda rahat çalışması gerekir. Bu rehber, Baymard'ın ürün sayfası araştırmasındaki on bulguyu Sepetya içinde yapabileceğiniz ayarlarla eşleştiriyor.

    · Sepetya Editör Ekibi

  • Ödeme sayfası tasarımı: sepet terkini azaltan ayarlar

    Ödeme sayfası, sepete eklenen ürünün siparişe dönüşüp dönüşmeyeceğine karar verildiği yerdir. Bu rehber gereksiz alanları azaltmayı, misafir ödeme ile hızlı kaydı ve sözleşmelerin sipariş düğmesinin üstünde nasıl gösterildiğini anlatır.

    · Sepetya Editör Ekibi

  • Dürüst aciliyet: kargo çubuğu ve gerçek stok uyarıları

    Sahte geri sayım ve uydurma stok uyarısı kısa vadede sipariş getirebilir, ama hem reklam mevzuatı hem müşteri güveni açısından pahalıya patlar. Bu yazı ilgili kuralları sadeleştiriyor ve Sepetya içinde gerçek verilere dayanan aciliyet araçlarını anlatıyor.

    · Sepetya Editör Ekibi

Çerezleri nasıl kullandığımızı seçin

Sitenin çalışması için gerekli çerezleri kullanırız. Analitik çerezler yalnızca izin verirseniz etkinleşir; tercihinizi istediğiniz zaman sayfanın altındaki bağlantıdan değiştirebilirsiniz.