E-ticaret Ana Sayfa Tasarımı: Bölüm Bölüm Plan

Bölüm bölüm e-ticaret ana sayfa tasarım planı: ekranın üst kısmında ne olmalı, bölüm sırası, yayın öncesi kontrol listesi ve mobil ipuçları.

Sıkça sorulan sorular

Bir e-ticaret ana sayfasında neler olmalı?

En azından şunlar: arama, sepet ve kategori gezinmesi içeren bir üst bilgi (header); ne sattığınızı söyleyen ve tek bir net sonraki adım sunan bir hero alanı; ana kategorilerinize giriş sağlayan bir bölüm; birkaç çok satan veya yeni gelen ürün; kargo, iade ve gerçek yorumlar gibi güven işaretleri; ve politikaları ile iletişim bilgilerini içeren bir alt bilgi (footer). Bunun dışındaki her şey (editoryal bloklar, e-posta kaydı, sosyal kanıt) isteğe bağlıdır ve yerini hak etmelidir.

E-ticaret ana sayfasında ekranın üst kısmında (above the fold) neler yer almalı?

Dört şey: arama ve sepeti içeren gezinme, ne sattığınızı adlandıran bir başlık, ürünlere götüren tek bir birincil harekete geçirici mesaj (CTA) ve mağazaya güvenmek için görünür bir neden; örneğin bir kargo veya iade satırı. Hero alanındaki güçlü ürün görselleri, ziyaretçilerin hiçbir şey okumadan kataloğu anlamasına yardımcı olur.

Ana sayfada kaç ürün göstermeliyim?

Herkes için geçerli bir sayı yok. Ürün çeşitliliğini temsil edecek kadar gösterin; genellikle kaydırıcısız tek bir sıra veya ızgara halinde çok satanlar ile kategori kutucukları yeterlidir, ardından tüm koleksiyona bağlantı verin. Birkaç ürün satıyorsanız hepsini gösterebilirsiniz. Binlerce ürün satıyorsanız ana sayfa kataloğu sergilemeye çalışmamalı, insanları kategorilere yönlendirmelidir.

E-ticaret ana sayfasında slider veya carousel olmalı mı?

Tek ve sabit bir hero alanı genellikle dönen bir alandan daha net iletişim kurar. Otomatik dönen slaytlar içeriği bir zamanlayıcının arkasına saklar, erişilebilir hale getirmesi daha zordur ve çoğu zaman sayfa ağırlığını artırır. Birden fazla şeyi öne çıkarmanız gerekiyorsa, her birine hero alanının altında ayrı bir kutucuk verin.

E-ticaret ana sayfamı nasıl daha hızlı yükletirim?

Görselleri sıkıştırın ve doğru boyutlandırın, WebP veya AVIF gibi modern formatlar kullanın, hero görselini öncelikli yükleyin ve altındaki her şeyi tembel yükleyin (lazy-load), üçüncü taraf betikleri (sohbet widget'ları, açılır pencereler, izleme kodları) sınırlayın ve sayfa yüklenirken düzen kaymasın diye görseller için yer ayırın. Google'ın PageSpeed Insights aracı ve Search Console'daki Core Web Vitals raporu, sayfanızda gerçekte neyin yavaş olduğunu gösterir.

Ana sayfa mı yoksa ürün sayfası mı daha önemli?

Satın alma kararlarının çoğu ürün ve koleksiyon sayfalarında verilir, ancak ana sayfa; doğrudan gelen, marka araması yapan ve geri dönen ziyaretçiler için çoğu zaman ilk izlenimdir. Görevi yönlendirmektir: her ziyaretçiyi hızla doğru kategoriye veya ürüne ulaştırmak. Nereye yatırım yapacağınıza karar vermeden önce, oturumların kaçının ana sayfada başladığını kendi analitik verilerinizden kontrol edin.

Kısa cevap: İyi bir e-ticaret ana sayfasının tek bir işi vardır: her ziyaretçiyi doğru ürünlere hızla ulaştırmak. Şu sırayla ilerleyin: net bir üst bilgi (arama, sepet, kategoriler), ne sattığınızı söyleyen ve tek bir birincil düğmesi olan bir hero alanı, kategori kutucukları, çok satanlardan oluşan kısa bir sıra, güven işaretleri (kargo, iade, yorumlar) ve işe yarar bir alt bilgi. Ekranın üst kısmındaki her şey “Bu mağaza ne ve nereye tıklamalıyım?” sorusuna cevap vermelidir.

Plana genel bakış

Bunu bir başlangıç sırası olarak kullanın. Gerçek içerikle dolduramayacağınız bölümleri kaldırın; boş bir “müşteri yorumları” bloğu, hiç blok olmamasından daha çok zarar verir.

#	Bölüm	Görevi	Sınır
1	Duyuru çubuğu	Zamanında tek bir mesaj: kargo limiti, indirim bitişi, teslimat son tarihi	Tek satır
2	Üst bilgi ve gezinme	Arama, sepet, hesap, ana kategoriler	5-7 üst düzey bağlantı
3	Hero	Ne sattığınızı söyleyin, tek bir sonraki adım verin	Bir başlık, bir düğme
4	Güven şeridi	Kargo, iade, ödeme, destek	3-4 kısa madde
5	Kategori kutucukları	Alışveriş yapanları istediklerine göre yönlendirin	4-8 kutucuk
6	Çok satanlar / yeni gelenler	Kataloğun gerçek olduğunu kanıtlayın	Bir sıra veya ızgara
7	Değer veya hikâye bloğu	Neden başka bir mağaza değil de siz	Kısa bir blok
8	Sosyal kanıt	Gerçek yorumlar, basın, kullanıcı fotoğrafları	Yalnızca gerçekse
9	E-posta kaydı	Henüz satın almaya hazır olmayan ziyaretçileri yakalayın	Tek alan
10	Alt bilgi	Politikalar, iletişim, ikincil bağlantılar	Düzenli sütunlar

Ekranın üst kısmında neler olmalı

“Above the fold”, bir ziyaretçinin kaydırmadan önce gördüğü alandır ve cihaza göre değişir. Taslak üzerinde tek bir çizgi çekmek yerine dizüstü ekranı ve telefonu ayrı ayrı tasarlayın. Hangi cihaz olursa olsun, şu dört şey kaydırmadan görünmelidir:

Arama ve sepet içeren gezinme. Ne istediğini bilen alışverişçiler önce aramayı kullanır. Masaüstünde aramayı bir simgenin arkasına saklamayın.
Ürünü adlandıran bir başlık. “El yapımı seramik kupalar, Portland’dan kargoda”, “Mağazamıza hoş geldiniz”den daha iyidir. Kategoriyi sade kelimelerle söyleyin.
Tek bir birincil harekete geçirici mesaj. “Kupaları keşfet” veya “Yeni gelenleri keşfet” gibi. İkinci, daha sönük bir bağlantı sorun değil; ancak eşit ağırlıkta üç düğme olmaz.
Size güvenmek için tek bir neden. Ücretsiz kargo limiti, iade süresi veya gerçekten kanıtlayabileceğiniz bir yorum sayısı. Yalnızca kanıtlayabileceğiniz iddiaları kullanın.

Hero alanında, herhangi bir mağazaya ait olabilecek bir stok fotoğraf yerine gerçek bir ürün veya yaşam tarzı fotoğrafı kullanın. Görsel, ziyaretçinin doğru yerde olduğunu anlamasının en hızlı yoludur.

Bölüm bölüm notlar

Üst bilgi ve gezinme

Üst düzey kategorileri, ilk kez gelen bir ziyaretçinin arayacağı şeylerle ve onların kullandığı kelimelerle sınırlı tutun. Aramayı görünür bir alana koyun, sepet sayısını güncel tutun ve logonun ana sayfaya bağlanmasını sağlayın. Kataloğunuz büyükse mega menü işe yarayabilir, ancak izleme dörtgeni (trackpad) ve klavyeyle kullanılabilir olduğunu test edin. Mağazanın geri kalanı için daha derin bilgi almak üzere e-ticaret web sitesi tasarımı en iyi uygulamaları yazımıza bakın.

Hero

Hero alanında tek bir mesaj olmalı. Sezonluk bir kampanya yürütüyorsanız, süresi boyunca onu hero yapın, sonra kalıcı mesajınıza dönün. Otomatik dönen slaytlardan kaçının: içeriği bir zamanlayıcının arkasına saklarlar ve erişilebilir hale getirmesi daha zordur. Birkaç kampanyanız varsa, her birine sayfanın aşağısında ayrı bir kutucuk verin.

Kategori kutucukları

Bu bölüm işin yükünü taşır. Her kutucuğun net bir fotoğrafa ve sade bir etikete ihtiyacı var (“Stride Koleksiyonu” değil, “Kadın koşu ayakkabıları”). Onları alfabetik değil, en çok satmak istediğiniz veya ziyaretçilerin en çok aradığı sıraya göre dizin.

Çok satanlar ve yeni gelenler

Genel bir ızgara yerine gerçek fiyatlı gerçek ürünler gösterin. Her kartta görsel, ad, fiyat ve bağlantı olsun; derecelendirmeleri yalnızca gerçek yorumlarınız varsa ekleyin. Izgara düzenli görünsün diye görsel en-boy oranlarını tutarlı tutun. Sırayı koleksiyon sayfasına giden bir “Tümünü gör” bağlantısıyla bitirin.

Güven ve sosyal kanıt

Alışveriş yapanlar kargo ücreti, iadeler ve mağazanın güvenilir olup olmadığı konusunda tereddüt eder. Bunları ana sayfada kısa ve somut satırlarla yanıtlayın: kargo süreleri, iade süresi, kabul edilen ödeme yöntemleri ve bir iletişim kanalı. Yorumlar için, platformunuzun desteklediği ölçüde isimli veya doğrulanmış etiketli gerçek yorumları gösterin. Asla uydurma müşteri yorumu veya puan kullanmayın; bu hem etik dışıdır hem de birçok yerde tüketici koruma kurallarına aykırıdır.

Alt bilgi

Alt bilgi, özenli alışverişçilerin politikaları aradığı yerdir. Kargo, iade, gizlilik, şartlar ve iletişim bilgilerini ekleyin; varsa beden rehberinize veya SSS sayfanıza da bağlantı verin. Düzenleri web sitesi alt bilgi tasarımı örnekleri yazımızda ele alıyoruz.

Mobil notları

Çoğu mağaza ziyaretlerinin büyük bir bölümünü telefonlardan alır; dağılımı kendi analitik verilerinizden kontrol edin. Mobil ana sayfayı sıkıştırılmış bir masaüstü sayfası olarak değil, kendi başına bir düzen olarak tasarlayın.

Hero alanını kısa tutun. Başlık, görsel ve düğmenin üçü de tipik bir telefon ekranında, üst bilginin ötesine kaydırmadan görünmelidir.
Dokunma alanlarını geniş tutun. Düğmeler, filtreler ve menü öğeleri parmaklar için yeterli boyuta ve aralığa sahip olmalı. Gerçek bir cihazda test edin.
Gezinmeyi akıllıca daraltın. Menü simgesi sorun değil, ancak arama ve sepeti üst bilgi çubuğunda görünür tutun.
Yatay kaydırmayı az kullanın. Yana kayan bir ürün sırası, daha fazla içerik olduğunu görünür biçimde ima ediyorsa kabul edilebilir; alt alta dizilmiş bir ızgara daha güvenlidir.
Girişte tam ekran açılır pencerelerden kaçının. Sayfayı engellerler ve hem kullanılabilirliğe hem de arama görünürlüğüne zarar verebilirler. Bunları geciktirin veya satır içi bir kayıt bloğuyla değiştirin.
Klavyeye dikkat edin. Ekran klavyesi açıldığında e-posta kayıt alanının gizlenmediğinden emin olun.

Hız ve erişilebilirlik temelleri

Yavaş yüklenen güzel bir ana sayfa, ziyaretçileri onu görmeden kaybeder. En büyük kaldıraçlar neredeyse her zaman görseller ve üçüncü taraf betiklerdir.

Görselleri sıkıştırın ve WebP veya AVIF gibi modern formatlar kullanın.
Görseller yüklenirken düzen kaymasın diye açık genişlik ve yükseklik değerleri verin.
Önce hero görselini yükleyin; altındaki görselleri tembel yükleyin.
Her üçüncü taraf betiği (sohbet, açılır pencereler, izleyiciler) gözden geçirin ve kullanmadıklarınızı kaldırın.
Ürün ve kategori görselleri için gerçek alternatif metin (alt text) yazın.
Metnin arka planına karşı yeterli kontrasta sahip olduğunu ve her etkileşimli öğenin klavyeyle çalıştığını kontrol edin.

Hangi dosyaların sizi yavaşlattığını görmek için canlı URL'nizde Google'ın PageSpeed Insights aracını kullanın.

Ana sayfa kontrol listesi

Bunu yayın notlarınıza kopyalayın:

[ ] Üst bilgide görünür arama, sepet ve 5-7 net kategori bağlantısı var
[ ] Hero başlığı ne sattığımızı sade kelimelerle söylüyor
[ ] Tek bir birincil düğme var; “Hakkımızda” sayfasına değil, ürünlere götürüyor
[ ] Hero görseli gerçek bir ürünü veya gerçek kullanımı gösteriyor
[ ] Kargo ve iade bilgisi ekranın üst kısmında veya hemen altında özetlenmiş
[ ] Kategori kutucukları müşterinin dilini kullanıyor ve ana ürün gruplarını kapsıyor
[ ] Çok satanlar gerçek fiyatları gösteriyor ve ürün sayfalarına bağlanıyor
[ ] Yorumlar ve basın yalnızca gerçekse gösteriliyor
[ ] E-posta kaydı, net bir fayda sunan tek bir alan
[ ] Alt bilgide politikalar, iletişim bilgileri ve ödeme yöntemleri var
[ ] Önemli içeriği gizleyen otomatik dönen carousel yok
[ ] Mobil düzen gerçek bir telefonda kontrol edildi
[ ] Görseller sıkıştırıldı, boyutlandırıldı ve alternatif metin verildi
[ ] Sayfa başlığı ve meta açıklaması özellikle ana sayfa için yazıldı

Sık yapılan hatalar

Her şeyi göstermeye çalışmak. Ana sayfa bir katalog değil, bir yönlendiricidir.
Belirsiz hero metni. Bir yabancı beş saniyede ne sattığınızı anlayamıyorsa, başlığı yeniden yazın.
Beş şeyi eşit derecede öne çıkarmak. Her şey vurgulandığında hiçbir şey vurgulanmış olmaz.
Sahte aciliyet. Her ziyarette sıfırlanan geri sayım sayaçları güveni aşındırır.
Geri dönen ziyaretçileri görmezden gelmek. Platformunuz destekliyorsa bir “alışverişe devam et” veya son görüntülenenler bloğu düşünün.

E-ticaretin ötesindeki genel ana sayfa ilkeleri için ana sayfa nasıl tasarlanır ve web sitesi ana sayfası tasarlama rehberlerimiz daha ayrıntılı bilgi veriyor; hâlâ bir platform seçiyorsanız e-ticaret için en iyi web sitesi oluşturucuları sayfasına bakın.

Uygulamaya geçirmek

Tasarımdan önce içeriği yazarak başlayın: başlığınız, kategori adlarınız, kargo ve iade satırlarınız ve en iyi altı ürününüz. Ardından bunları yukarıdaki sıraya yerleştirin. Yerleşimde hızlı bir başlangıç istiyorsanız, We.Inc'in ücretsiz planı hazır şablonlardan üç siteye kadar yayınlamanıza izin verir; bir istemden site taslağı hazırlayan yapay zekâ oluşturucu ise ayda $20 olan Starter planıyla başlar. Buradan kaydolabilirsiniz. Hangi aracı kullanırsanız kullanın, yayına almadan önce her bölümü kontrol listesine göre gözden geçirin.

Ücretsiz başlayın · Kredi kartı gerekmez

Umair Ali Sadaqat

We.Inc Kurucusu

Umair, We.Inc’in kurucusudur. Yapay zekâyla web sitesi oluşturma, ajanslar ve web stüdyosu işletmeciliği hakkında yazar.

Harika bir şey oluşturmaya hazır mısınız?

Tek platformdan başlamak, büyümek ve otomatikleştirmek için We.Inc kullanan 15,000+ işletmeye katılın.