Ürün Listeleme Sayfalarında Görsel Kararları ve Gerçek Maliyeti

Listeleme sayfasında görselin işi ürünü satmak değil, kullanıcının kırk ürün arasından neyi eleyeceğine hızlıca karar vermesini sağlamak. Bu yüzden detay sayfası için doğru olan çoğu görsel tavsiyesi listelemede ters çalışır: orada tek bir fotoğrafın bütçesi vardır, burada ekrandaki tüm kartların toplamı. Kararların çoğu estetik değil, bütçe kararı.

Bütçe görsel başına değil, sayfa başına

"Yüksek çözünürlüklü, detaylı fotoğraf kullanın" tavsiyesi detay sayfasında doğru. Listelemede aynı cümle ekrandaki her kart için tekrarlanır. 200 KB'lık bir görsel tek başına makul görünür, kırk üründe sayfayı sekiz megabayta çıkarır ve mobil bağlantıda ilk ekranın açılma süresini artık senin CSS'in belirlemez.

Listeleme kartının gerçekte kaç piksel geniş olduğunu ölç, görselleri o genişliğe göre üret. Tarayıcıya 1600 piksellik fotoğrafı verip CSS ile 280 piksele küçültmek indirilen baytı küçültmez. srcset ve sizes ile kart genişliğini bildirmek birkaç satırlık iş, üçüncü parti bir araca gerek yok. Doku ve dikiş detayını listelemeden çözmeye çalışma; onu görmek isteyen kullanıcı zaten detay sayfasına gidiyor.

Tutarlılık karşılaştırmayı ucuzlatır

Aynı arka plan, aynı açı, kadrajda aynı ürün oranı. Gerekçesi profesyonel görünmek değil: kullanıcı her karta yeniden adapte olmak zorunda kalmaz. Biri beyaz fonda, diğeri sokakta, üçüncüsü model üzerinde çekilmişse göz önce sahneyi çözer, ürünü sonra görür. Tedarikçiden görsel alıyorsan bu üç maddeyi yazıya dök ve kabul sırasında kontrol et, tutarlılığın büyük kısmı orada.

Filtreye göre değişen ana görsel ve önbellek faturası

"Mavi elbise" arayan kullanıcıya mavi varyantın fotoğrafını göstermek doğru bir karar. Arayüz tarafında tartışılacak yanı az, uygulama tarafındaki karşılığı ise genelde sessizce atlanıyor.

Kartın görseli artık üründen değil, aktif filtre kümesinden türüyor. Yani sayfa çıktısı filtre kombinasyonuna bağlanıyor ve önbellek anahtarına filtreleri koymak zorunda kalıyorsun. Renk, beden ve fiyat aralığı bağımsız seçildiğinde önbelleklenecek sayfa çeşidi bu boyutların çarpımı kadar artar, üstelik çoğu kombinasyona ikinci kez hiç uğranmaz. Yani isabet oranı düşer, maliyet kalır.

Pratik çıkış yolu sayfayı değil kartı önbelleğe almak. Varyant eşleşmesini tek bir baskın boyut için yap, gerisini varsayılan görselle bırak. O boyut renktir: kullanıcı rengi fotoğraftan doğrular, bedeni doğrulamaz.

Hover'daki ikinci fotoğraf

Üzerine gelince değişen ikinci görsel, ürünü başka bir açıdan göstermenin en ucuz yolu. Ucuz kalması tek koşula bağlı: sayfa açılırken indirilmemesi. Kırk ürünün ikinci fotoğrafını baştan yüklersen sayfa ağırlığını ikiye katlarsın ve kullanıcı bunların çoğunu hiç görmez. İkinci görseli hover ya da klavye odağı anında iste. Dokunmatikte hover yok; orada kart içine yatay kaydırmalı bir galeri koymak yerine ikinci görseli hiç göstermemek daha iyi sonuç verir, çünkü kart içi yatay kaydırma sayfanın dikey kaydırmasıyla çakışır.

Bağlam fotoğrafı listelemede mi, detayda mı

Ürünün gerçek ortamda ya da model üzerinde gösterilmesi ölçek algısını düzeltir, halının odada serili hali ceketin model üzerindeki duruşundan farksız biçimde işe yarar. Ama bağlam listelemenin asıl işini, yani karşılaştırmayı zorlaştırır: sahne değiştikçe ürünün kapladığı alan da değişir. Karar basit. Kategori tek tip ürün içeriyorsa (tamamı model üzerinde çekilmiş kıyafet gibi) bağlam listelemede de tutarlıdır, kullan. Kategori karışıksa listelemede ürünü izole tut, bağlamı detay sayfasının ilk görseline koy.

Çeşitlilik bir eşleşme sorunu

Farklı beden, yaş ve ten renginden modellerle çekim yapmak marka duruşuyla ilgili bir karar, ama bundan bağımsız pratik bir karşılığı da var: kullanıcı ürünün kendi üzerinde nasıl duracağını tahmin etmeye çalışıyor. Tek beden üzerinde çekilmiş bir katalog o tahmini imkansız kılar ve fatura iade oranı olarak gelir. Bunu listelemede çözmeye kalkma, kart zaten kalabalık. Aynı ürünün iki farklı bedendeki fotoğrafını detay sayfasında yan yana koymak, karta ikinci bir model eklemekten daha çok işe yarar.

Alt metni ve tekrar

Listeleme kartında görsel çoğunlukla ürün adını taşıyan bağlantının içinde durur. Bu durumda görsele ürün adını alt metni olarak yazmak, ekran okuyucu kullanıcısına aynı ismi iki kez okutur. Bağlantı metni ürün adını zaten veriyorsa görseli dekoratif işaretle ve alt="" bırak. Alt metni, görsel tek başına bilgi taşıdığında yazılır; listelemede genelde taşımaz.

Dosya adlarını anlamlı tutmak ayrı bir konu, maliyeti sıfır, o yüzden yap. Ama görsel aramasından trafik beklentisiyle her karta uzun alt metinleri doldurmak, erişilebilirliği bozarak SEO satın almaktır.