Ana sayfa, gezinme, kategori listeleri, arama, ürün sayfaları ve mobil deneyim için alışveriş yapan kişinin bulunduğu sayfaya göre düzenlenmiş e-ticaret tasarım uygulamaları; nelerin eklenmesi ve sık hatalardan kaçınma yolları.
Müşterilerin ürünlerinize göre düşündüğü biçimde açık gezinme, hızlı sayfalar, yakınlaştırılabilir büyük ürün fotoğrafları, Sepete Ekle düğmesinin yanında fiyat ve kargo bilgisi, görünür yorumlar, çalışan site içi arama ve misafir alışverişi sunan kısa ödeme akışı. Mağaza ziyaretlerinin çoğu telefondan geldiğinden önce telefon için tasarlayın.
Müşterilerin bitmek bilmeyen sayfaları çevirmeden karşılaştırabileceği kadar. Birçok mağaza sayfa başına 24–48 ürün gösterir veya Daha fazla yükle düğmesi kullanır. Müşterilerin seçim yaptığı beden, renk, fiyat ve stok durumu gibi niteliklere göre iyi filtreler daha önemlidir.
Ürün adı, ana görsel, fiyat, temel seçenekler (beden, renk), stok durumu, Sepete Ekle düğmesi ve kargo ya da teslimat süresini belirten bir satır. Yorumlarınız varsa yıldız puanı ve yorum sayısı da burada yer almalı.
Genellikle hayır. Kendiliğinden değişen kaydırıcılar çoğu zaman görmezden gelinir, erişilebilirliği ve yükleme süresini olumsuz etkileyebilir. Tek ve güçlü bir ana görsel, açık bir mesaj ve en iyi kategorilerinize bağlantılar çoğunlukla daha iyi çalışır.
İyi e-ticaret web tasarımı müşterinin üç işi hızlıca yapmasına yardımcı olur: doğru ürünü bulmak, satın alacak kadar güven duymak ve sürtünme yaşamadan ödeme yapmak. Uygulamada bu; müşterilerin düşünme biçimine uyan gezinme, hızlı mobil sayfalar, büyük ürün fotoğrafları, erken gösterilen fiyat ve kargo bilgisi, görünür yorumlar ve kısa ödeme akışı demektir.
Genel ilkeleri sıralamak yerine bu rehberi sayfa sayfa ele alıyoruz; çünkü müşterinin sorusu her sayfada değişir.
Ana sayfanız ne sattığınızı ve kime yönelik olduğunu birkaç saniyede anlatmalı.
Ekleyin:
Kaçının: kendiliğinden dönen slaytlardan, sayfa yüklenmeden açılan pencerelerden ve mobilde ilk görünümü geciktiren ana sayfa videolarından.
Karşılaştırmaların çoğu burada yapılır.
| Öğe | En iyi uygulama |
|---|---|
| Ürün kartları | Her üründe aynı görsel oranı, ad, fiyat, puan ve üzerine gelince ikinci görsel |
| Filtreler | Gerçek karar ölçütleri: beden, renk, fiyat, malzeme, stok. Sonuç sayısını gösterin. |
| Sıralama | Varsayılan "Öne çıkanlar" veya "Çok satanlar"; fiyat ve yeni ürün seçenekleri ekleyin |
| Stok | Tükenenleri gizleyin veya durumunu açıkça gösterin |
| Sayfalama | Daha fazla yükle veya numaralı sayfalar; geri dönünce filtre durumu korunsun |
| Mobil | "34 sonucu göster" düğmesi bulunan, yukarı kayan panelde filtreler |
Yaygın hata, müşteri ürünü açıp geri geldiğinde filtrelerin sıfırlanmasıdır. Geri düğmesini deneyin.
Arama yapan müşterilerin satın alma niyeti genellikle yüksektir; zayıf arama doğrudan satış kaybettirir.
Satışı ürün sayfası yapar. Yukarıdan aşağıya düzenleyin.
Önce ürünün müşteriye ne sağladığını, sonra teknik özellikleri anlatın. Ölçü, malzeme ve bakım bilgileri için kısa teknik özellikler tablosu kullanın. Beden rehberleri müşteriyi başka sayfaya göndermek yerine aynı sayfada panel olarak açılmalı.
Arama sonuçlarında fiyat ve puanların gösterilebilmesi için Product yapılandırılmış verisini (ad, görsel, fiyat, stok durumu, yorumlar) ekleyin.
Ödeme tasarımı başlı başına bir disiplindir. Kısa özet: toplam ücreti erkenden gösterin, misafir ödemesine izin verin, formu kısa tutun ve Apple Pay ile Google Pay gibi hızlı cüzdanları sunun. Her adımı ödeme optimizasyonu rehberimizde ayrıntılı ele alıyoruz.
Tasarım Öde düğmesinde bitmez. Sipariş onay sayfasını ve e-postasını neredeyse her alıcı dikkatlice okur.
Mağaza ziyaretlerinin çoğu telefondan gelir; önce telefon düzenini tasarlayıp deneyin, sonra masaüstüne genişletin.
İkisi de yalnızca teknik değil, tasarım kararıdır.
Hız: görselleri sıkıştırıp WebP veya AVIF sunun; düzen sıçramasını önlemek için görsel genişliğini ve yüksekliğini belirleyin; üçüncü taraf uygulama ve komut dosyalarını sınırlayın; Google PageSpeed Insights'ta Core Web Vitals değerlerinizi kontrol edin.
Erişilebilirlik: WCAG 2.2 AA'yı karşılayan renk karşıtlığı, ürün görsellerinde alternatif metin, etiketli form alanları, klavyeyle erişilen menü ve filtreler, neyin yanlış gittiğini söyleyen hata mesajları kullanın. Erişilebilir mağazalar herkesin kullanımını kolaylaştırır; birçok bölgede erişilebilirlik yasal beklentidir.
Sıfırdan başlıyorsanız iyi bir başlangıç düzeni bu kararların çoğunu kolaylaştırır. Mağaza tasarımları için şablonlarımıza göz atın veya We.Inc sohbetinde mağazanızı anlatın. Ürün sayfaları, sepet ve ödeme içeren çevrimiçi mağaza oluşturur; barındırma ve SSL dahil, görsel olarak veya kodla ince ayar yapabilirsiniz.
Ücretsiz başlayın · Kredi kartı gerekmez