ÜRÜN KARTI OPTİMİZASYONU YAPMAK

Bir e-ticaret sitesine giren kullanıcının ortalama bir kategori sayfasında geçirdiği süre 8 saniye. Bu sürede gözleri ürün kartlarının üstünde tarar; bazılarına tıklar, çoğunu görmeden bile kaydırır. Hangi kartlara tıklayacağı küçük bir karar — ama bu küçük karar tüm e-ticaret hunisinin ilk basamağıdır.

Ürün kartı her sayfa için ortalama 20-50 kez gösterilir. Bir kart üzerinde yapılacak %5'lik bir iyileştirme, listeleme sayfası dönüşümünü %5 artırır; kartın bu kadar belirleyici olması, elektronik ticaret kaynaklarında tanımlanan dönüşüm hunisinin ilk kademesinde durmasından gelir. Sayfada onlarca kart varsa etki çarpılır. Bu yüzden tek bir kartın detayları cirosal değer üretir.

Ürün kartı birkaç santimetrekarelik bir karar alanıdır: hangi öğeler girecek, göz hangi sırayla gezecek, fiyat ve sosyal kanıt nasıl durmadan satacak? Hover etkilerinden mobil nüanslara her detay aynı soruya hizmet eder — kullanıcı bu karta bakıp tıklamaya değer buldu mu?

Kartta Yer Alan Standart Öğeler

Modern e-ticaret ürün kartının tipik bileşenleri:

1. Ürün görseli
2. Ürün adı / başlık
3. Marka adı (genelde)
4. Fiyat (asıl + indirimli)
5. İndirim etiketi / oranı
6. Yıldız puanı + değerlendirme sayısı
7. Renk / varyant göstergeleri
8. "Hızlı ekle" veya "Favorile" butonu
9. Etiketler ("Yeni", "Çok satan", "Ücretsiz kargo")
10. Stok durumu (azalan stoklarda)

Hepsi her zaman gerekmez. Karta ne koyacağın hedef kitle, ürün tipi ve marjına bağlıdır. Ama bilinçli karar gerekir; bilinçsiz "ne koyalım" yerine "neyi koymayalım" perspektifi daha verimli.

Görsel — En Büyük Karar

Ürün kartının yüzde 60-70 alanı görseldir. Doğru görsel doğru tıklama; yanlış görsel boşa çekilen göz.

İyi görselin nitelikleri:

• Yüksek çözünürlük: Min 1000×1000 px, srcset ile responsive sunum.
• Ürün net görünüyor: Cluttered arka plan, modelin yüzünün dikkat çekmesi, fazla aksesuar dağıtıcı.
• Tutarlı kompozisyon: Tüm kartlarda görsel aynı tarzda olmalı; bazıları beyaz fonda, bazıları lifestyle çekim karışım kötü.
• Aspect ratio sabit: Kart yüksekliği değişmemeli; tüm görseller aynı oranda (genelde 1:1 veya 4:5).
• Hover'da ikinci görsel: Detay, farklı açı, ürün kullanımda görüntüsü. Tıklamadan ek bilgi.

Birden çok görsel açısı sergileyen kart (örn. ön + arka), tek görsel karta göre dönüşüm oranını belirgin artırır. Hover üzerinden veya küçük indicator'lar ile çoklu görsel sunumu artık standart.

Başlık ve Marka İlişkisi

Ürün adı net olmalı; ama açıklama değil etiket olmalı. Kart üzerinde uzun bir paragraf yer kaybı.

• İyi format: Marka + Model/Tip + Ana özellik. Örn: "Nike Air Max 90 Spor Ayakkabı Beyaz".
• Maks. 2 satır: Daha uzun overflow ile ... kesilir; ama önemli kelimeler ilk satırda olmalı.
• Marka ayrı vurgu: Bazı tasarımlarda marka adı küçük font ile başlığın üstünde; kullanıcı markaya odaklanırsa karar hızlanır.
• SEO için tam adı korumak değil; kullanıcı için sade olmak ana hedef. SEO ürün detay sayfasında halledilir.

"Premium Quality Cotton Slim Fit Long Sleeve Casual Shirt for Men Daily Wear All Season" tarzı title örnekleri dönüşüme zarar verir. "Erkek Slim Fit Pamuklu Gömlek" yeterli, gerisi detay sayfasına.

Fiyat Sunumu

Fiyat kartın en kritik elementlerinden. Yanlış sunum hem güveni sarsar hem kararı geciktirir:

• İndirim varsa: Asıl fiyat üstü çizgili, indirimli fiyat bold ve renkli. İndirim oranı (-%30) etiketle desteklenir.
• İndirim yoksa: Tek fiyat, net, net bold.
• Para birimi: Tutarlı format (199 TL vs 199,00 ₺ vs 199.00 TRY). Yerel kültüre uyum (Türkiye'de ₺ sembolü veya TL).
• Aksiyona davet: "Sepete Ekle"den önce fiyat görülmeli; tersi UX hatası.
• Aylık taksit / cüzdan bilgisi: Yüksek fiyatlı ürünlerde küçük bir not olabilir ("36 aya kadar taksit"); ama abartılırsa kart kalabalıklaşır.

İndirim oranı %30 ve üzeri ise göz çekici. %5-10 indirim için ayrı bir etiket koymak değer üretmez; sadece çizgili eski fiyat yeterli.

Sosyal Kanıt — Yıldız ve Sayı

Yıldız puanlama satın alma kararını ciddi etkiler. Doğru sunum:

• Yıldız + sayı birlikte: "4.5 ★ (847)". Sadece yıldız bilgisiz; sadece sayı soğuk; ikisi birlikte güçlü.
• Az değerlendirme varsa gösterme: 1-2 review'lı ürünün rating'i göstermek değil zarar. Min 5-10 review eşiği iyi.
• 4 yıldız altı dikkatli: 3.5 yıldız göstermek kullanıcıyı tedirgin eder; alternatif "Yeni" veya "Çok beğenilen" etiketi kullanılabilir veya rating gizlenir.
• Renk yıldızlar: Sarı/altın standart; mavi/yeşil markaya uyumlu kullanılabilir ama tanıdık değilse karışıklık yaratır.

Ek sosyal kanıt: "Bu ürünü 23 kişi sepetine ekledi" "Son 24 saatte 47 kişi aldı" gibi anlık veriler. Doğru çalıştığında güçlü; abartılırsa veya sahte gözükürse güveni sarsar. Türk kullanıcılarda spam algısı düşük tutulmalı.

Etiketler ve Rozetler

Kart üzerinde küçük rozetler ürünü diğerlerinden ayırır:

• Yeni: Son 30 gün içinde eklenmiş ürün.
• Çok satan: Son 30 gün satış üst %5-10'da.
• İndirim oranı: -%30, -%50 etiketi.
• Ücretsiz kargo: Kullanıcının en sevdiği rozet.
• Hızlı teslimat: Aynı gün/ertesi gün belirli ürünlerde.
• Stok sınırlı: Son 5 adet, son 3 adet gibi acillik sinyalleri.
• Edisyon / özel: Limited edition, exclusive, signature.

Tek karta 1-2 rozet maksimum; daha fazlası kalabalık. Hangi rozetin hangi etkiyi yarattığı A/B test edilmelidir.

Renk ve Varyant Göstergeleri

Ürünün farklı renk/varyantları varsa kart üzerinde küçük noktalarla gösterilir. Bu hem ürünün çeşidini iletir hem kullanıcı kendi renginde olup olmadığını bir bakışta görür.

• 3-4 renk noktası kart üzerinde; daha fazla varsa "+3" gibi gösterge.
• Hover veya tıklama ile renk değiştirildiğinde görsel de güncellenir (bonus).
• Beden bilgisi liste/kart üzerinde gerekli değil; detay sayfasında çözülür.

Varyant göstergeleri doğru çalıştığında "bu üründe benim için bir şey var" hissi yaratır; kullanıcı detaya tıklamadan ihtimali artar.

Quick Add ve Wishlist

Modern e-ticarette kart üzerinde aksiyon butonları yaygınlaştı:

• Hızlı sepete ekle: Listeleme sayfasından doğrudan sepete; hız avantajı, özellikle tekrar gelen kullanıcılarda.
• Favorile / wishlist: Daha sonra için saklama. Kalp ikonu sağ üstte standart.
• Hızlı görüntüle: Lightbox veya modal ile detay sayfasına gitmeden bilgi.

Bu butonlar mobilde her zaman görünür, desktop'ta hover'da çıkar. Mobilde gizlemek yanlış; touchscreen'de hover yok.

Quick add yararlı ama sadece varyantsız ürünlerde. Beden seçim gereken ürünlerde quick add doğrudan satın alma yerine "boyut seç" modalına gitmeli. Kapsamlı e-ticaret eğitimi kapsamında ürün kartı tasarımı, listeleme stratejileri ve dönüşüm optimizasyonu pratik anlatılır.

Mobil Uyum

Mobilde ürün kartı kuralları desktop'tan farklı:

• Tek veya iki kolon: Tek kolon dikey görseli büyütür, dönüşüm artar. İki kolon daha fazla ürün gösterir, keşif kolaylaşır. Çoğu marka "Kategori = iki kolon, arama sonucu = tek kolon" yapar.
• Touch target: Tüm butonlar min 44×44 px. Wishlist ikonu yeterli boşlukla yerleştirilmeli.
• Hover yok: İkinci görsel için swipe veya küçük indicator. Hover'a güvenmek mobilde işe yaramaz.
• Bilgi azaltma: Mobilde ek bilgi (kargo, taksit) genelde kart altında gösterilmez; detay sayfasına bırakılır.
• Lazy loading: Sayfa kaydırırken görseller yüklenmeli; ilk yüklemede tüm 50 ürün indirilirse mobilde sayfa donar.

Performans

Bir listeleme sayfasında 40-60 ürün kartı olabilir. Her kartın görsel ve script yükü toplandığında ciddi sayfa ağırlığı oluşur.

• Image optimization: WebP/AVIF format, srcset, doğru sizes attribute, lazy loading.
• Skeleton loading: Kart yüklenirken gri kutucuk; sayfa boş ve atlamış görünmez.
• Pagination veya infinite scroll: Bir seferde 24-48 ürün; daha fazlası scroll ile yüklenir.
• Critical CSS: İlk render'da görünen kartların CSS'i inline, gerisi async.

Performance dönüşümün gizli faktörüdür. Mobile'da 1 saniye fazla yüklenme yüzde 20 dönüşüm kaybı anlamına gelir. Kart optimizasyonu sadece tasarım değil; teknik optimizasyondur da.

A/B Test Disiplini

Ürün kartı her tasarım kararının en kolay test edilebileceği yerdir. Yüksek trafik, fast feedback, etkili karar:

1. Yıldız + sayı yan yana mı, alt alta mı?
2. İndirim etiketi sol üstte mi, sağ alttada mı?
3. Hover'da ikinci görsel kullanıcıyı detay sayfasına götürür mü?
4. "Hızlı ekle" butonu dönüşümü artırır mı yoksa karmaşıklaştırır mı?
5. Marka adı başlığın üstünde mi altında mı?

Her A/B test'te tek değişken değiştirilir; iki haftada 95% güven seviyesinde sonuç alınır. Bir yıl sonra kart bu küçük iyileştirmelerin toplamıyla başlangıçtan kayda değer farklı ve etkili olur.

Karşılaştırmalı Sıralama

Bir e-ticaret sitesinde kart sıralaması da kart kalitesi kadar önemli. Default sıralama:

• Popülerlik (son 30 gün satış)
• Yeni gelenler
• Yüksekten düşüğe fiyat
• Düşükten yükseğe fiyat
• Yıldız puanı
• İndirim oranı

Default'un "popülerlik" olması en yaygın ve genelde en iyi. Bu, hem yeni ziyaretçinin sosyal kanıt güveniyle ilerlemesini, hem de geri dönen müşterinin alışkanlığını korur. Kategori sayfası ilk 10 üründe her zaman en çok satanlar olmalı; dönüşüm istatistiksel olarak buradadır.

Sonuç Test Listesi

Yeni bir kart tasarımını yayına vermeden önce şu kontrolleri yap:

1. Görsel oranı tüm kartlarda aynı mı, hizalama düzgün mü?
2. Başlık 2 satır içine sığıyor mu, overflow düzgün mü?
3. Fiyat indirimli durumda doğru hiyerarşi mi?
4. Yıldız ve sayı tutarlı format mı, az değerlendirmeli ürünlerde gizleniyor mu?
5. Etiketler/rozetler kalabalıklık yaratmıyor mu?
6. Hover ve mobil davranışı test edildi mi?
7. Quick add ve wishlist butonları doğru çalışıyor mu?
8. Lazy loading aktif mi, ilk yüklemede sadece görünen kartlar mı yükleniyor?
9. Accessibility (alt text, klavye navigation, focus indicator) çalışıyor mu?
10. Düşük internet hızında nasıl görünüyor (skeleton, fallback)?

Bu listeyi yeni özellik veya yenileme her yapıldığında geçirmek; küçük ama kompleks bileşenin kalitesini koruyan disiplin. Ürün kartı doğru çalıştığında listeleme sayfası satışın asıl makinesi olur.