E-ticaret Ürün Sayfasında İlk Ekranda Neler Olmalı? Dönüşüm Odaklı Yerleşim
İlk ekran, ürün sayfasının vitrinidir; ziyaretçi aşağı kaydırmadan önce karar verir. Kısa tez şu: ilk ekranda ürünü, fiyatı ve satın alma eylemini aynı anda görmeyen bir ziyaretçi, sayfanın geri kalanına şans vermeden çıkar. Dönüşüm odaklı yerleşim, her şeyi ilk ekrana yığmak anlamına gelmiyor. Doğru olan, kararı destekleyen az sayıda bilgiyi doğru sırayla vermek ve geri kalanını kaydırmanın altında düzenli bir hiyerarşiyle sunmak.
Bu yazıda ilk ekrana girmesi gereken bileşenleri, mobilde ve masaüstünde sıralamanın nasıl değiştiğini, hız ölçütlerinin yerleşimle nasıl bağlandığını ve yerleşimi canlıya almadan önce neyi test etmeniz gerektiğini anlatıyoruz. Veri tarafında Baymard Institute'un ürün sayfası araştırmasına ve Google'ın web.dev dokümanlarına dayanıyoruz.
İlk ekran neden bu kadar belirleyici?
Ürün sayfasına gelen kişi çoğu zaman bir arama sonucundan, bir reklamdan ya da bir kategori listesinden geliyor ve aklında belirli bir soru var: "Aradığım ürün bu mu, ne kadar, ne zaman elime geçer?" Bu üç soruya ilk ekranda cevap yoksa ziyaretçi ya kaydırıp aramaya başlıyor ya da geri dönüp rakip sonuca bakıyor. Aramayı sizin sayfanızda sürdürmesi, sizin için en iyi ihtimal bile değil; en iyi ihtimal, aramaya gerek kalmaması.
Baymard Institute'un 2023'te yayımlayıp Mart 2026'da güncellediği ürün sayfası kıyaslaması, 155'ten fazla sitede 30.000'den fazla elle puanlanmış kullanılabilirlik değerlendirmesine dayanıyor. Sonuç çarpıcı: masaüstünde sitelerin yüzde 48'i ürün sayfası kullanılabilirliğinde "yeterli" ya da "iyi" düzeyde, mobilde bu oran yüzde 38, uygulamalarda yüzde 36. Hiçbir site "kusursuz" puanı almamış. Yani ilk ekranı düzgün kurmak, rakiplerinizin çoğuna karşı gerçek bir fark yaratıyor.
İlk ekrana girmesi gerekenler
Bir bileşenin ilk ekranda yer alıp almayacağına karar verirken tek bir ölçüt kullanın: ziyaretçi bunu görmeden "sepete ekle" düğmesine basar mı? Basmazsa ilk ekranda olmalıdır. Basarsa aşağıya taşınabilir.
- Ürün görseli: İlk ekranın en büyük parçası olmalı. Ziyaretçi ürünü görmeden hiçbir şeyi değerlendirmez.
- Ürün adı: Marka, ürün tipi ve ayırt edici nitelik; kısa ve taranabilir.
- Fiyat: İndirimliyse eski fiyat ve yeni fiyat birlikte, net biçimde. Birim fiyat anlamlıysa (gramaj, adet, metre) onu da gösterin.
- Varyant seçimi: Beden, renk, hacim gibi seçimler. Seçim yapılmadan sepete eklenemiyorsa bu alan düğmenin hemen üstünde olmalı.
- Satın alma düğmesi: Sayfada başka hiçbir öğeyle yarışmayan, tek ve belirgin bir birincil eylem.
- Stok ve teslimat bilgisi: Ürün stokta mı, ne zaman teslim edilir.
- Güven sinyali: Değerlendirme puanı ve yorum sayısı gibi, tek bakışta okunabilen bir özet.
Listede olmayan şeylere dikkat edin: uzun ürün açıklaması, teknik özellik tablosu, kargo politikasının tam metni, çapraz satış önerileri ve marka hikâyesi ilk ekranda yer almamalı. Bunlar önemli, ama kararı bekleyen biri için ikincil. Bu bileşenlerin aşağıda nasıl sıralanacağına yazının ilerleyen bölümlerinde döneceğiz.
Fiyat ve teslimat bilgisini gizlemeyin
E-ticaret sitelerinde en sık gördüğümüz hatalardan biri, kargo bilgisini yalnızca sepet ya da ödeme adımında göstermek. Baymard'ın 2017 tarihli araştırmasında kullanıcıların yüzde 64'ü, ürünü sepete eklemeye karar vermeden önce ürün sayfasında kargo ücreti tahmini aradığını gösterdi; aynı çalışmada sitelerin yüzde 43'ü ürün sayfasında ne kargo ücretini ne de bir hesaplayıcıyı sunuyordu. Araştırma eski, ama davranış değişmedi: 2026 güncellemesinde de sitelerin yüzde 67'sinin satın alma bölümünün yakınında toplam sipariş maliyeti tahmini göstermediği belirtiliyor.
Baymard, kargo ücretini göstermenin en iyiden en kötüye doğru şu yollarını sıralıyor: sabit ücretli kargoda en düşük ücreti yazmak, IP konumuna göre tahmin yapmak, oturum açmış kullanıcıda son teslimat adresini kullanmak ve en düşük ile en yüksek ücret aralığını vermek. Hangi yolu seçerseniz seçin, tahminin dayandığı koşulu kısa bir etiketle açıklayın. "Ücretsiz kargo" bir koşula bağlıysa (örneğin belli bir sepet tutarı), bunu ürün fiyatının yakınına yazın.
Teslimat için de aynı mantık geçerli. "Tahmini teslimat: 14-16 Ekim" gibi bir tarih aralığı, "2-3 iş günü" ifadesinden daha somut. Ziyaretçi bir tarih görüyorsa karar verirken kendi takvimiyle karşılaştırabiliyor.
Görsel alanı: büyüklük, sıra ve ölçek
Ürün fotoğrafı yalnızca "güzel görünmek" için değil, bilgi vermek için var. Baymard'ın kıyaslamasına göre sitelerin yüzde 37'si ölçek hissi veren ("in scale") görseller sunmuyor ve kullanıcıların yüzde 42'si ürünün boyutunu ürün görselinden anlamaya çalışıyor. Giyimde modelin üzerinde çekilmiş fotoğrafların yokluğu da yüzde 23 oranında bir eksik olarak kaydedilmiş. Bu durum, özellikle boyutu belirsiz ürünlerde (çanta, mobilya, aksesuar) görsel sırasının dönüşümü etkilediğini gösteriyor.
Görsel galerisini kurarken şu sıra iyi çalışır: ilk görsel temiz zeminde ürünün tamamı, ikincisi ürün kullanımda ya da modelde, üçüncüsü ölçek referansıyla, sonrakiler detay ve doku. Küçük resim şeridi mobilde de görünür olmalı. Kullanıcı kaç görsel olduğunu ve hangisinde olduğunu bilmeli.
Video varsa ilk görsel yerine değil, galerinin içinde bir sonraki öğe olarak konumlandırın. Otomatik oynayan ve ilk ekranı kaplayan videolar hem veri tüketiyor hem de ürünün kendisini gölgede bırakıyor.
Mobilde ilk ekran: her şey tek sütun
Mobilde ilk ekran masaüstündekinin yarısı kadar bile değil. Bu yüzden öncelik sırası daha katı olmalı. Sağlıklı bir mobil sıralama şöyle: ürün adı, görsel galerisi, fiyat, varyant seçimi, sepete ekle düğmesi, ardından teslimat ve güven bilgisi. Düğme ilk ekrana tam sığmıyorsa, kaydırdıkça ekranın altına yapışan bir sepete ekle çubuğu kullanın; ancak bu çubuk sayfanın altındaki gezinme öğelerini ya da çerez bildirimini örtmemeli.
Baymard'ın verilerinde mobil siteler masaüstünden belirgin biçimde geride: "yeterli" ya da daha iyi düzeydeki sitelerin oranı mobilde yüzde 38, masaüstünde yüzde 48. Kullanıcı kendi sitenizin ürün sayfasını pazaryerlerinde gördüğü akıcılıkla karşılaştırır. Aynı ürünü pazaryerinde tek dokunuşla sepete atabilen biri, sizin sayfanızda üç kaydırma sonra düğmeyi bulmak zorunda kalırsa vazgeçer.
Mobil için pratik bir test: sayfayı gerçek bir telefonda açın, baş parmağınızla yalnızca ilk ekrana bakın ve sırayla şu soruları cevaplayın: Ürün ne? Kaç para? Seçeneğim ne? Nereden alırım? Dördünü de kaydırmadan cevaplayamıyorsanız yerleşim işe yaramıyor demektir.
Masaüstünde iki sütunlu yerleşim
Masaüstünde yaygın ve işe yarar düzen, solda görsel galerisi, sağda satın alma bloğudur. Satın alma bloğunun sırası mobildekiyle aynı kalmalı: ad, değerlendirme özeti, fiyat, varyantlar, düğme, teslimat. Sağ sütunu sabit tutmak (kaydırırken görünür kalması) uzun görsel galerisi olan sayfalarda işe yarıyor; ama sağ sütun ekran yüksekliğinden uzunsa sabitleme ters tepiyor ve alttaki bilgiler erişilemez hale geliyor.
Bu düzeni uygularken sol sütuna genişliğin yaklaşık yarısını verin. Ürün görselini küçük tutup sağ tarafı bilgiyle doldurmak çekici görünür, ancak ürün alışverişte kararı veren şey görseldir. Yakınlaştırma imleç üzerine gelince değil, tıklayınca da çalışmalı; dokunmatik ekranlı dizüstü bilgisayarlar artık yaygın.
İlk ekran ve sayfa hızı
İlk ekranın içeriği ile sayfa hızı doğrudan bağlantılı, çünkü Google'ın Largest Contentful Paint (LCP) ölçütü çoğu ürün sayfasında ilk ekrandaki ana ürün görselini ölçüyor. web.dev dokümanlarına göre iyi bir LCP değeri 2,5 saniye ya da altı, 4,0 saniyenin üstü zayıf kabul ediliyor; ölçüm, sayfa yüklemelerinin yüzde 75'lik diliminde yapılıyor ve mobil ile masaüstü ayrı değerlendiriliyor.
web.dev'in LCP optimizasyon rehberi, LCP süresini dört alt bölüme ayırıyor: ilk bayta kadar geçen süre, kaynağın yüklenmeye başlamasına kadar geçen gecikme, kaynağın yüklenme süresi ve öğenin ekrana çizilmesine kadar geçen gecikme. Rehber yaklaşık dağılımı yüzde 40, yüzde 10, yüzde 40 ve yüzde 10 olarak veriyor; bunlar katı kurallar değil, sorunun nerede olduğunu anlamaya yarayan ölçüler. Ürün sayfaları için üç uygulama öne çıkıyor:
- İlk ekrandaki ana ürün görselini asla tembel yüklemeyin (lazy loading). Rehber bunun her zaman gereksiz bir yükleme gecikmesi yarattığını belirtiyor.
- Ana görsele
fetchpriority="high"verin, ama bunu bir ya da iki görselle sınırlayın; fazlası etkisini azaltır. Ekran dışındaki galeri görselleri içinfetchpriority="low"daha uygun. - Ana görselin adresi sayfanın ilk HTML'inde görünmeli. Görsel yalnızca CSS ya da JavaScript içinden çağrılıyorsa tarayıcı onu geç keşfeder; bu durumda yüksek öncelikle önyükleme (preload) yapın.
İkinci ölçüt Cumulative Layout Shift (CLS). web.dev'e göre iyi CLS değeri 0,1 ya da altı, 0,25 üstü zayıf. Boyutu belirtilmemiş görseller, geç yüklenen fiyat ya da kampanya bandı, sonradan beliren yorum yıldızları ilk ekranda kaymaya yol açar. Kullanıcı tam düğmeye basacakken içeriğin kayması, hem kötü deneyim hem de yanlış tıklamadır. Görsellere ve galeriye sabit alan ayırın, fiyat bloğunu sayfa ilk çizildiğinde yerinde tutun.
İlk ekranın altında ne gelmeli?
Ziyaretçi ikna olmadıysa aşağı kaydırır; bu bölümde sıra, bir soruyu cevaplamaktan ibaret: "Neden sana güvenmeliyim?" Önerdiğimiz akış şöyle: kısa ürün özeti ve öne çıkan özellikler, ardından teknik özellikler, iade ve değişim koşulları, yorumlar, sıkça sorulan sorular ve en son benzer ürünler.
İade politikası burada önemli bir yer tutuyor. Baymard'ın güncellemesine göre sitelerin yüzde 44'ü iade politikasını ürün içeriğinden göstermiyor ya da bağlantı vermiyor; 1.032 katılımcılı bir çalışmada kullanıcıların yüzde 60'ı iade politikasını ürün sayfasında arıyor. İade koşulunun tam metnini ilk ekrana koymanıza gerek yok, ama ürün bloğunun yakınına tek satırlık bir özet ve tam metne giden bir bağlantı koymak yeterli.
Yorumlar için de dürüst olun. Baymard'a göre sitelerin yüzde 89'u olumsuz yorumlara yanıt vermiyor. Olumsuz yoruma sakin ve somut bir yanıt vermek, dışarıdan bakan bir alıcıya yorum puanının kendisinden daha fazla güven veriyor. Sayfanın ilk ekranında yalnızca yıldız özeti yeterli, yorumların kendisi aşağıda yer almalı.
Yerleşimi canlıya almadan önce test etmek
Bir yerleşim değişikliği her zaman bir varsayımdır; doğrulamadan tüm sayfalara yaymak riskli. Upjen olarak e-ticaret sitelerinde yerleşim değişikliklerini önce tek bir kategori ya da çok trafik alan bir avuç ürünle denemenizi öneriyoruz. Ölçülecek şeyler net olmalı:
- Sepete ekleme oranı (ürün sayfası ziyaretine göre sepete ekleme)
- İlk ekranda kaydırma oranı ve kaydırma derinliği
- Düğme tıklama konumu ve mobilde yanlış tıklama
- LCP ve CLS değerleri (Search Console'daki Core Web Vitals raporu ve PageSpeed Insights)
Test süresini trafik belirler. Günde birkaç düzine ziyaretçi alan bir ürün sayfasında iki haftalık bir deneme bile sonuç vermeyebilir; bu durumda tek tek ürünler yerine ürün şablonunun tamamını değiştirip önceki ve sonraki dönemi karşılaştırmak daha gerçekçi olur. Karşılaştırma yaparken kampanya dönemlerini ve fiyat değişikliklerini not edin, yoksa sonucu yerleşime bağlayamazsınız.
Yerleşimi kurarken kullandığınız altyapının sınırları da önemli. Hazır tema kullanıyorsanız ilk ekran sırasını değiştirmek bazen geliştirici müdahalesi gerektirir. Ürün sayfası şablonunu sıfırdan ya da mevcut altyapınız üzerinde yeniden kurgulamak isterseniz e-ticaret sitesi kurulumu hizmetimizde bu işi nasıl yürüttüğümüzü anlatıyoruz. Pazaryeri ve kendi site arasındaki fark için blogdaki diğer yazılara da bakabilirsiniz.
İlk ekranda sık yapılan hatalar
- Fiyatı düğmeden uzak yerleştirmek: Fiyat sol üstte, düğme sağ altta olunca göz iki nokta arasında dolaşıyor.
- Birden fazla birincil düğme: "Sepete ekle", "Hemen al" ve "Favorilere ekle" aynı ağırlıkta görününce hiçbiri öne çıkmıyor. Birincil eylem tek olmalı.
- Zorunlu varyantı seçtirmeyip düğmeyi sessizce pasif bırakmak: Düğme tıklanamıyorsa nedenini söyleyin. "Önce beden seçin" gibi tek satır yeterli.
- Kampanya bandıyla ilk ekranı doldurmak: Üstte yüksek bir duyuru bandı, altında çerez bildirimi, onun altında gezinme çubuğu kalınca ürün görseli ilk ekranda görünmüyor.
- Galeriyi hız pahasına büyük dosyalarla doldurmak: İlk görselin dosya boyutu LCP'yi doğrudan belirler. Görüntüyü cihaz genişliğine göre farklı boyutlarda sunun.
- Stok durumunu gizlemek: Stokta olmayan ürünü yalnızca sepete eklerken belirtmek, kullanıcıyı en kötü anda yarı yolda bırakıyor.
Sıkça Sorulan Sorular
Ürün sayfasında "ilk ekran" tam olarak nereye kadar?
İlk ekran, cihazın ekran boyutuna göre değişir: sabit bir piksel değeri yoktur. Bu yüzden yerleşimi tek bir yükseklik varsayımına göre değil, gerçek telefon ve dizüstü bilgisayarlarda deneyerek kurun. Ölçüt, kaydırmadan hangi bilgilerin görüldüğüdür.
Sepete ekle düğmesi her zaman ilk ekranda mı olmalı?
Mümkünse evet. Mobilde ürün adı, görsel, fiyat ve varyant seçimi ekranı doldurduğunda düğme aşağıda kalabilir; bu durumda kaydırınca ekranın altına yapışan bir düğme çubuğu kullanmak çözümdür.
Ürün açıklamasını ilk ekrana koymalı mıyım?
Tam açıklamayı koymayın. Üç-dört satırlık bir özet ya da kısa özellik listesi yeterli. Uzun açıklama ve teknik tablo, ilk ekranın altında yer almalı.
Yerleşim değişikliği SEO'yu etkiler mi?
Doğrudan etkilemesi gerekmez, ama sayfa hızını ve görünür içeriği değiştirdiği için LCP ve CLS üzerinden etkileyebilir. Değişiklikten sonra Search Console'daki Core Web Vitals raporunu izleyin; görünür metin ve başlık yapısını bozmamaya dikkat edin.
Yorumlar ilk ekranda olmalı mı?
Yorumların kendisi hayır, ama yıldız puanı ve yorum sayısı gibi tek satırlık bir özet evet. Özetin üzerine tıklayınca sayfanın yorumlar bölümüne kayması, ziyaretçiye ihtiyaç duyduğu detaya hızlı erişim sağlar.
Sonuç
İyi bir ürün sayfası ilk ekranda ürünü, fiyatı, seçenekleri ve satın alma eylemini birlikte gösterir; teslimat, iade ve yorum gibi kararı destekleyen bilgileri ürün bloğunun hemen yakınında tutar; geri kalan her şeyi kaydırmanın altına düzenli bir hiyerarşiyle bırakır. Rakamlar yerleşimin önemini gösteriyor: masaüstündeki sitelerin yarısından azı, mobildekilerin üçte birinden biraz fazlası "yeterli" kullanılabilirlik düzeyine ulaşıyor. Siz önce kendi ürün sayfanızı telefonda açıp yukarıdaki dört soruya kaydırmadan cevap verebiliyor mu diye bakın.
Ürün sayfası şablonunuzu birlikte gözden geçirmek isterseniz e-ticaret sitesi kurulumu ekibimizle iletişime geçebilirsiniz. Site tarafı, reklam ve pazaryeri işlerinin aynı ekipte yürüdüğü çalışma düzenini e-ticaret ajansı sayfamızda anlattık.