E-ticaret ana sayfası nasıl tasarlanmalı?

E-ticaret ana sayfası nasıl tasarlanmalı?

İyi bir e-ticaret ana sayfası ziyaretçiye üç soruyu hızla yanıtlar: burası ne satıyor, aradığım şey burada var mı ve nereden başlamalıyım? Bunun için net bir değer önerisi, ürün çeşitliliğini gösteren kategori görselleri, belirgin bir arama kutusu ve hızlı yüklenen sade bir düzen gerekir. Gösterişli animasyonlar ve pop-uplar bu üç soruyu geciktirir.

Reklam trafiğinin büyük kısmı ürün veya kategori sayfalarına düşse de ana sayfa; marka aramalarından, organik trafikten, e-posta ve sosyal medya profillerinden gelen ziyaretçilerin ilk durağıdır. Kararsız ziyaretçinin siteyi "anlamlandırdığı" yer de burasıdır.

Ana sayfanın e-ticarette asıl görevi nedir?

Nielsen Norman Group (NN/g), ana sayfa tasarımını beş temel ilkeye bağlar: ana sayfaya kolay erişim, kim olduğunuzu ve ne yaptığınızı anlatmak, içeriği örneklerle göstermek, eyleme ve gezinmeye yönlendirmek ve sayfayı sade tutmak. E-ticarete çevirdiğimizde bu, ana sayfanın bir "satış sayfası" değil, ziyaretçiyi doğru kategoriye veya ürüne en kısa yoldan ulaştıran bir yönlendirme sayfası olduğu anlamına gelir.

Baymard Institute'un ana sayfa kıyaslamasında sitelerin %32'si vasat veya zayıf performans göstermiş; temel neden kötü ilk izlenim ve yanlış beklenti yaratmak olarak açıklanmıştır. Yani sorun çoğu zaman tasarımın çirkinliği değil, ziyaretçiye mağazanın kapsamını doğru anlatamamaktır.

Ana sayfada hangi bölümler olmalı ve hangi sırayla?

Her marka için tek doğru sıra yoktur, ancak aşağıdaki iskelet çoğu mağaza için sağlam bir başlangıçtır:

1. Üst alan (header): Logo, belirgin arama kutusu, ana kategori menüsü, hesap ve sepet.
2. Hero alanı: Tek cümlelik değer önerisi ve tek bir ana eylem. "Keşfet" yerine "Yeni sezon keten gömlekleri" gibi ne bulacağını söyleyen bir buton.
3. Kategori vitrini: Ana ürün tiplerini görselli kutularla gösterin.
4. Öne çıkan ürünler: Çok satanlar veya yeni gelenler gibi gerçek ürün örnekleri.
5. Güven ve hizmet şeridi: Kargo süresi, iade koşulu, ödeme seçenekleri gibi kısa, doğrulanabilir bilgiler.
6. Sosyal kanıt: Gerçek müşteri yorumlarından seçkiler.
7. Footer: İletişim, iade ve kargo politikaları, sık sorulan sorular.

Değer önerisi nasıl yazılır?

NN/g, ana sayfayı bir "asansör konuşması" gibi ele almayı ve marka adı ne sattığınızı kendiliğinden anlatmıyorsa kısa bir slogan eklemeyi önerir. Jargondan ve özellik odaklı dilden kaçının; müşterinin kendi kelimeleriyle konuşun. "Premium yaşam deneyimi" bir şey anlatmaz; "Organik pamuk bebek kıyafetleri, 2 iş gününde kargoda" anlatır (örnek).

Kategori vitrini neden bu kadar önemli?

İlk kez gelen ziyaretçi, mağazanın ürün çeşitliliğini ana sayfadaki görsellerden anlar. Baymard, geniş ürün yelpazesi olan sitelerin ana sayfada ürün tiplerinin en az %40'ını göstermesini öneriyor. Sadece üç kampanya banner'ı gösteren bir ana sayfa, ziyaretçiye "burada sadece bunlar var" mesajı verebilir. Baymard ayrıca sitelerin %62'sinin kullanıcının doğrudan ana sayfadan iyi tanımlanmış bir kapsam (kategori) seçmesine yardım etmediğini tespit etmiş.

Slider (carousel) kullanmalı mıyım?

Kısa cevap: genellikle hayır, kullanıyorsanız doğru kurun. Baymard'ın verisine göre sitelerin %36'sı ana sayfada carousel kullanıyor ve bunların yaklaşık %75'i hatalı uyguluyor. Testlerde slaytın, kullanıcı tıklamadan milisaniyeler önce değişip yanlış sayfanın açıldığı görülmüş. NN/g'nin bir çalışmasında ise kullanıcı, sayfanın en büyük öğesinde duran kampanyayı, panel otomatik döndüğü için bulamamış.

Carousel kullanacaksanız:

• Otomatik geçişi yavaş tutun, fareyle üzerine gelindiğinde durdurun ve kullanıcı etkileşiminden sonra tamamen kapatın.
• Manuel kontrolleri görünür yapın.
• Her slayda tek, net bir mesaj ve eylem verin.

Baymard'a göre çoğu e-ticaret sitesi için statik içerik bölümleri daha iyi bir tercihtir: geliştirmesi ve bakımı çok daha kolaydır ve kullanıcılarla en az carousel kadar iyi çalışır.

Pop-up, animasyon ve video ana sayfada sorun olur mu?

NN/g, pop-up ve açılış ekranlarını web'de en çok nefret edilen öğeler arasında sayar ve ziyaretçi henüz değer görmeden açılan pop-uplardan kaçınmayı önerir. Sayfa yüklenmeden önce gösterilmesi kabul edilebilir tek durum, çerez onayı veya yaş doğrulaması gibi yasal zorunluluklardır. E-posta toplama pop-up'ını tamamen kaldırmak zorunda değilsiniz; ama girişte değil, ziyaretçi birkaç sayfa gezdikten veya çıkış niyeti gösterdikten sonra açmak daha az rahatsız edicidir.

Otomatik oynayan videolar da benzer bir sorundur. NN/g, WCAG 2.1 yönergelerine göre beş saniyeden uzun süren hareketli içerikte duraklatma veya durdurma seçeneği sunulması gerektiğini hatırlatır. Reklam gibi görünen hareketli bannerlar da risklidir: Baymard sitelerin %59'unda ana sayfada "reklam görünümlü" içerik sorunu tespit etmiş; kullanıcılar bu alanları reklam sanıp görmezden gelebiliyor.

Ana sayfa hızı dönüşümü nasıl etkiler?

NN/g'nin aktardığı Google araştırmasına göre sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında hemen çıkma olasılığı %32 artıyor. Ana sayfalar büyük hero görselleri ve videolar yüzünden genellikle sitenin en ağır sayfasıdır. Hero görselini sıkıştırın, gerektiği boyutta sunun ve ekranın üst kısmındaki içeriği tembel yüklemeye (lazy load) bırakmayın. En büyük içerikli boyama (LCP) metriği çoğu ana sayfada tam olarak bu hero görselidir. Hız ve dönüşüm ilişkisini Core Web Vitals ve dönüşüm oranı yazımızda ayrıntılı anlattık.

Ana sayfa kontrol listesi

Alan	Doğru uygulama	Sık yapılan hata
Değer önerisi	Ne sattığınızı tek cümlede anlatan slogan	Sadece logo ve soyut bir sezon görseli
Arama	Üstte, geniş ve her zaman görünür kutu	Sadece büyüteç ikonu
Kategoriler	Ürün tiplerinin büyük kısmı görselli kutularla	Yalnızca 2-3 kampanya banner'ı
Slider	Statik bölümler veya yavaş, durdurulabilir carousel	Hızlı ve kontrolsüz otomatik geçiş
Pop-up	Gezinme sonrası veya çıkış niyetinde	Sayfa açılır açılmaz indirim pop-up'ı
Butonlar	"Kadın sneaker'ları gör" gibi açıklayıcı etiket	"Keşfet", "Daha fazla"
Hız	Sıkıştırılmış hero, hızlı LCP	Otomatik oynayan ağır video
Güven	Kargo, iade, ödeme bilgisi görünür	Bu bilgiler sadece footer'da

Ana sayfa değişikliğinin işe yarayıp yaramadığını nasıl ölçersiniz?

Ana sayfa başarısını dönüşüm oranıyla değil, yönlendirme kalitesiyle ölçün. GA4'te ana sayfaya giriş yapan oturumların ikinci sayfaya geçme oranına, hangi kategori kutularının tıklandığına ve ana sayfadan aramaya geçen kullanıcı oranına bakın. Büyük bir yeniden tasarımı tek seferde canlıya almak yerine bölümleri ayrı ayrı test etmek daha güvenlidir; A/B testi rehberimiz bu süreci adım adım anlatıyor.

Örnek: Bir kozmetik markası ana sayfasındaki dört slaytlık carousel'i kaldırıp yerine altı kategori kutusu koyuyor. Değerlendirirken "ana sayfadan kategoriye geçiş oranı" ve "ana sayfa oturumlarının sepete ekleme oranı" önceki dönemle karşılaştırılmalı, kampanya dönemleri ise ayrı tutulmalıdır.

Ana sayfanızın ziyaretçiyi doğru yere yönlendirip yönlendirmediğinden emin değilseniz, Performetic ekibiyle iletişim sayfamızdan ücretsiz bir büyüme analizi planlayabilirsiniz.

Özet

• Ana sayfa bir vitrin değil, yönlendirme sayfasıdır: ne sattığınızı anlatın ve doğru kategoriye götürün.
• Ürün çeşitliliğini görselli kategori kutularıyla gösterin; birkaç banner yetmez.
• Arama kutusunu üstte ve görünür tutun.
• Carousel yerine statik bölümleri tercih edin; kullanacaksanız yavaş ve durdurulabilir olsun.
• Girişte açılan pop-uplardan ve otomatik oynayan videolardan kaçının.
• Hero görselini optimize edin; hız, ilk izlenimin parçasıdır.
• Başarıyı ana sayfadan kategoriye ve aramaya geçiş oranlarıyla ölçün.