Ürün detay sayfası (PDP) tasarımı: kurallar ve örnek

Kısaca

Alışverişçi ürün sayfasında sorularına cevap arar. Bu ürün bana olur mu, bedenim var mı, kapıma kaça ve ne zaman gelir? Cevabı bulamayan kişi başka bir sekmeye geçer.

Baymard Institute'un Mart 2026'da güncellenen değerlendirmesinde, ürün sayfası "iyi" ya da "makul" bulunan masaüstü sitelerin oranı %48. Mobil sitelerde bu oran %38. Yani sitelerin çoğunda bu sayfa hâlâ vasat ya da daha kötü.

Bu sayfa yalnızca ürün detay sayfası kalıbını anlatır. Ana sayfadan ödemeye kadar bütün sayfa türlerini e-ticaret UX rehberinde topladım. Burada o rehberin ürün sayfası bölümünü kural kural açıyorum.

• Görseli büyütülebilir yapın, ürünü boyutu bilinen bir şeyin yanında gösterin.
• Bedeni açılır menüde değil, butonlarla ve stok durumuyla gösterin.
• Renk seçilince ana görsel o renge dönsün.
• Fiyatın yanında kargo dahil tahmini toplamı yazın.
• Kargo süresini değil, tahmini teslimat tarihini yazın.
• Sepete ekleyince kaçırılamayacak bir onay verin.
• Mobilde sepete ekle butonunu ekranın altında tutun.

Ürün sayfasının anatomisi

Masaüstünde görseller solda, satın alma alanı sağda durur. Mobilde aynı parçalar alt alta dizilir ve sepete ekle butonu ekranın altına yapışır.

Sıra önemlidir. Fiyat, toplam, seçenekler, teslimat ve buton aynı blokta durmalı, çünkü karar orada verilir. Özellik tablosu ve yorumlar kararı destekler, bu yüzden aşağıda kalabilir.

Bu iskeleti kâğıtta çizmek isterseniz wireframe sayfasında bir ürün sayfası örneği var.

Görseller

NN/g'den Katie Sherwin'in 2019 rehberi, görselin büyütülmüş halini ürün sayfasının olmazsa olmazları arasında sayar. Görsel üzerinde yakınlaştırma ve kaydırma ise "olsa iyi olur" listesindedir. Rehbere göre tek bir görünüm alışverişçinin sorularını nadiren cevaplar.

Boyutu görselden anlamak zordur. Baymard'ın testlerinde kullanıcıların %42'si ürünün boyutunu görsellerden anlamaya çalıştı. Buna karşın sitelerin %37'si, ürünü boyutu bilinen bir şeyle yan yana gösteren bir görsel sunmuyor.

Giyim ürünlerinde ölçeği insan bedeni verir. Baymard'a göre sitelerin %23'ü giyim, aksesuar ya da kozmetik ürününü bir model üzerinde göstermiyor.

Modelin boyunu ve giydiği bedeni görselin altına yazmanızı da öneririm. Kullanıcı beden tablosunu açmadan sorusunun cevabını alır. Bu öneri benim, bir araştırma bulgusu değil.

Renk seçimi ana görseli değiştirmeli. Kullanıcı nane yeşilini seçip hâlâ sarı gömleğe bakıyorsa, seçiminin işe yarayıp yaramadığını bilemez. Bu durum Nielsen'in ilk ilkesini, yani sistem durumunun görünürlüğünü bozar.

Varyant seçimi: beden ve renk

Bedeni buton olarak gösterin. Baymard'a göre sitelerin %57'si beden seçiminde buton kullanmıyor.

Baymard'ın testlerinde açılır menü sorun çıkardı, çünkü menüde bedenler varsayılan olarak gizli kalıyordu. Menü, hangi bedenin stokta olduğunu görmeyi de zorlaştırıyor.

Baymard'ın renk dışı varyant seçicileri yönergesi bunun sonucunu da yazar. Bazı kullanıcılar hemen ve doğrudan görünmeyen beden seçeneklerini kaçırır. Sonra uygun bir varyant olmadığını sanar ya da kontrol etmek için fazladan zaman harcar.

Sherwin'e göre stok durumu, özellikle renge ya da bedene göre değişiyorsa açıkça görünmeli. Kullanıcı ürünün tükendiğini sepete ekledikten sonra öğrenmemeli.

Tükenen bedeni bu yüzden gizlemem, devre dışı gösteririm. Üstünü çizer, altına "Tükendi" yazarım. Başka bir renkte varsa bunu da hemen altında söylerim.

Yalnızca soluk renge güvenmem, çünkü renk tek başına durum anlatmaz. Kesik çerçeve, üstü çizili yazı ve "Tükendi" kelimesi birlikte çalışır.

Beden butonları parmakla seçilir, bu yüzden boyutları da önemli. WCAG 2.2'nin 2.5.8 ölçütü (AA), hedeflerin en az 24 × 24 CSS piksel olmasını ya da yeterli boşlukla ayrılmasını ister. Ben daha büyüğünü kullanırım, nedenini dokunma alanı sayfasında anlattım.

Fiyat ve toplam maliyet

Sherwin'in rehberi fiyatın, ürüne özel ek ücretlerle birlikte gösterilmesini ister. Çalışmadaki bir alışverişçi siteleri karşılaştırırken ürün sayfasındaki ücretsiz kargoyu da hesaba kattı. Sitelerden biri ise ücretsiz kargoyu ancak ürün sepete eklenince söylüyordu.

Baymard'a göre sitelerin %67'si satın alma alanının yanında toplam sipariş maliyeti tahmini göstermiyor. Baymard, en düşük kargo ücretiyle hesaplanan en düşük toplamın varsayılan olarak gösterilmesini önerir. Kargo ve vergi tutarı yüksek olabiliyorsa bir kargo ve vergi hesaplayıcısı da önerir.

Sepet terki verisi bunun nedenini gösteriyor. Baymard'ın 22 Eylül 2025'te güncellenen listesi ABD'li alışverişçilere dayanıyor ve "yalnızca bakıyordum" diyenleri dışarıda bırakıyor. Bu alışverişçilerin %40'ı ödemeyi ek maliyetler çok yüksek olduğu için yarıda bıraktı, %12'si ise toplam tutarı en başta göremediğini ya da hesaplayamadığını söyledi.

Birden fazla boyutta ya da adette satılan ürünlerde birim fiyatı da yazın. Baymard'a göre sitelerin %81'i birim fiyatı göstermiyor. 750 ml ile 1,5 litrelik şişeyi karşılaştıran kullanıcı hesap makinesi açmak zorunda kalmamalı.

Son adımda ortaya çıkan bir ücret kullanıcıya gizli maliyet gibi gelir. Bunu dark pattern rehberinde anlattım. Ödeme adımının kurallarını ise checkout kalıbında topladım.

Stok ve teslimat tarihi

"2–4 iş günü" yazmayın, tarih yazın. Iva Olah'ın 2023 tarihli Baymard yazısına göre sitelerin %41'i tahmini teslimat tarihi göstermiyor.

Yalnızca kargo süresini gören katılımcılar durup tarihi kendileri hesapladı. Bu hesap bazen tereddüde, bazen terke yol açtı.

Olah asıl olarak teslimat tarihinin ödeme adımında, her kargo seçeneğinin ücretinin yanında gösterilmesini önerir. Mümkünse ürün sayfasında da gösterilmesini ister.

Tarih aralıkları "3–7 iş günü" gibi süre aralıklarından daha kolay anlaşıldı. Ama aralık 5–7 günden genişleyince bazı katılımcılar tereddüt etti.

Tarihi hesaplarken sipariş saat sınırını ve hazırlık süresini katın. Olah'ın uyarısına göre kargo firmalarının sistemleri, aksi söylenmedikçe paketin aynı gün çıktığını varsayar.

Katılımcılar gösterilen tarihi bir teslimat garantisi gibi okudu. Tutmayan tarih zamanla güveni aşındırır. Yoğun dönemlerde ve tatillerde tahmini güncel tutun.

İade bilgisi de buraya aittir. Baymard'a göre kullanıcıların %60'ı iade bilgisini ürün sayfasında arıyor. Sitelerin %44'ü ise ana ürün içeriğinde iade koşullarını göstermiyor ya da onlara bağlantı vermiyor.

Sepete ekle onayı

Sepete ekleme onayı kaçırılamayacak kadar belirgin olmalı. Sherwin'in testinde yeterli geri bildirim alamayan kullanıcılar ürünü birden fazla kez ekledi ve sepette mükerrer ürünlerle karşılaştı. Bazıları da eklemediği ürünü eklediğini sandı.

NN/g'den Amy Schade 2014'te aynı konuda bir uyarı yazdı. Tek satırlık bir yazı ya da sepet simgesindeki sayının değişmesi kolayca gözden kaçıyor. Onu kaçıran kullanıcı ya sepete gidip kontrol ediyor ya da ürünü yeniden ekliyor.

Sherwin iki yolu da kabul eder: kalıcı bir bildirim ya da bir onay ekranı. Ben ürün sayfasında kalan bir onay panelini tercih ederim. Panelde ürün, renk, beden, sepet toplamı ve iki açık yol durur: "Sepete git" ve "Alışverişe devam et".

Beden seçilmeden butona basılırsa hata mesajını beden grubunun hemen altında gösterin ve odağı oraya taşıyın. Mesajın nasıl yazılacağını hata mesajları sayfasında anlattım.

Özellik tablosu ve yorumlar

Özellik tablosu

Sherwin açıklamanın eksiksiz ama kısa olmasını, önemli bilginin başta durmasını ister, çünkü okuyucu metni tarar. Tanıdık olmayan terimler açıklanmalı. Ona göre veri yoğun özelliklerde karşılaştırma tablosu çoğu zaman en iyi yoldur.

Baymard'ın 344 siteye bakan özellik tablosu değerlendirmesinde sitelerin %64'ü bu alanda vasat ya da daha kötü. Sitelerin %30'unda aynı türdeki ürünler arasında etiket, yapı ve ölçü birimi tutarsızlığı ciddi düzeyde.

Kendi kuralım basit: aynı kategorideki her ürün aynı satırları, aynı sırayla ve aynı birimle göstersin. Bir gömlekte "Kumaş", diğerinde "Materyal" yazarsa kullanıcı iki sayfayı kolayca karşılaştıramaz.

Yorumlar

Sherwin yorumlar için bir özet sunmayı, olumlu ile olumsuzu da açıkça ayırmayı önerir. Yorumcunun yaşı ya da ürünü nasıl kullandığı gibi bilgiler, yorumun okura uyup uymadığını gösterir. Yorumların site tarafından doğrulandığını belirtmek de güven kurar.

Baymard'a göre sitelerin %89'u olumsuz yorumlara cevap vermiyor. Baymard, mağaza cevabının yorumlardan farklı bir görünümle ayrılmasını önerir, böylece cevap kolayca fark edilir.

Sitelerin %63'ü ise yorumlardaki fotoğraflar arasında gezinmeye izin vermiyor. Baymard, kullanıcının fotoğraflar ve bağlı oldukları yorumlar arasında oklarla ya da kaydırma hareketiyle gezinebilmesini önerir.

Mobilde yapışkan sepet butonu

Telefonda ürün görseli çoğu zaman ilk ekranın tamamını kaplar. Kullanıcı açıklamayı ya da yorumları okurken sepete ekle butonu ekranın çok üstünde kalır. Butonu ekranın altına sabitlemek, kararını veren kişiyi geri kaydırmaktan kurtarır.

Bu konuda açıp okuduğum bağımsız bir araştırma yok, bu yüzden size bir oran vermeyeceğim. Önerim kendi gözlemime dayanıyor ve test edilmesi gereken bir hipotez. Kendi sitenizde bir A/B testiyle ölçebilirsiniz.

Yapışkan butonu kurarken şunlara dikkat ederim:

• Bar ince olsun: fiyat, seçilen beden ve buton yeter.
• Beden seçilmeden basılırsa odağı beden grubuna taşıyın ve nedenini yazın.
• Bar klavye odağını tamamen örtmesin. WCAG 2.2'nin 2.4.11 ölçütü (AA), odaktaki öğenin yapışkan bir başlık ya da alt bar yüzünden tamamen gizlenmesine izin vermez. CSS'teki scroll-padding bunun basit bir çaresidir.
• Butonu tam genişlikte yapın. Büyük hedefe daha kolay dokunulur, bunu Fitts yasası anlatır.
• Onay paneli de barın içinde açılsın. Kullanıcı sayfanın neresindeyse onayı orada görsün.

Örnek: iyi ve kötü ürün sayfası

Aşağıdaki ürün sayfası kurgusal. Önce iyi hali deneyin: bir renk seçin, görselin ve tükenen bedenlerin değiştiğini görün. Sonra beden seçip sepete ekleyin.

Ardından "Kötü hal" düğmesine basıp aynı işi tekrarlayın. Bu halde beden açılır menüye geçer ve kargo ücreti kaybolur. Sepete ekleme onayı da yalnızca sağ üstteki sayaca düşer.

Telefondaysanız iyi halde sayfayı aşağı kaydırın. Sepete ekle butonu ekranın altında kalır.

Benim notum

Ürün sayfası audit'lerinde en sık yazdığım bulgu, beden menüsünde saklanan stok bilgisi. Kullanıcı bedenini seçiyor, butona basıyor ve "stokta yok" yazısını ancak o zaman görüyor. Düzeltmesi çoğu zaman küçük bir iştir.

İkinci sırada kargo ücreti geliyor. Ekipler ücretsiz kargo sınırını ana sayfadaki şeride yazıp ürün sayfasında unutuyor. Ben fiyatın hemen altına kargo dahil tahmini toplamı koymayı öneriyorum.

Bir ürün sayfasına bakarken önce telefonu elime alırım. Masaüstünde düzgün görünen satın alma alanı, telefonda görselin ve açıklamanın altında kaybolabilir. Yeniden tasarıma girmeden neyin bozuk olduğunu görmek isterseniz UX Audit tam bu iş için var.