2026-10-11 · İkra Web Tasarım
E-ticarette renk ve beden seçenekleri nasıl gösterilmeli?
Ürün varyantlarında görsel, fiyat, stok ve sepet bilgisini tutarlı sunmak için uygulanabilir tasarım önerileri.
Seçilen ürünü görünür kılın
Bir ürünün farklı renk ve bedenleri varsa müşterinin hangi seçeneği incelediği açık olmalı. Yalnızca renkli bir daire göstermek yerine renk adını da yazın; seçili seçeneği belirgin bir çerçeve ve metinle anlatın. Örneğin “Renk: Siyah / Beden: M” özeti, ürün görselinin hemen yanında yer alabilir. Bu yazıda verilen örnekler tasarım senaryosudur; gerçek bir mağazanın sonuçlarını temsil etmez.
Görsel ve fiyat aynı seçeneği anlatsın
Müşteri krem renkli üründen siyah ürüne geçtiğinde ilgili görselin de değişmesini planlayın. Görseli olmayan seçeneğe başka rengin fotoğrafını açıklamasız koymayın. Varyantlar arasında fiyat farkı varsa yeni fiyat, seçimden sonra ve sepete ekleme işleminden önce görünmeli. Tasarım dosyasında yalnızca başlangıç durumunu değil, farklı seçimlerin ekranlarını da hazırlayın.
Stokta olmayan kombinasyonu açıklayın
Bir bedenin her renkte bulunacağını varsaymayın. Stokta olmayan seçenekleri anlaşılır biçimde işaretleyin; müşteriyi ancak sepet aşamasında uyarmak yerine ürün ekranında bilgi verin. Bekleme listesi sunuluyorsa bunun sipariş olmadığını belirtin. Kesin olmayan tedarik tarihini teslim sözüne dönüştürmeyin. İşletme, stok bilgisinin hangi sistemden güncellendiğini tasarım ekibiyle netleştirmeli.
Sepette seçim kaybolmasın
Sepet satırında ürün adıyla birlikte renk, beden, adet ve birim fiyatı gösterin. Adet değişikliği veya ürün düzenleme sonrasında seçimin korunmasını kontrol edin. Test için aynı ürünün iki farklı rengini sepete ekleyin: satırlar doğru ayrılıyor mu, biri silindiğinde diğeri kalıyor mu? Ekran güzel görünse bile yanlış varyant kaydedilmesi, alışveriş akışının işlevsel bir sorunudur.
Arama motoruna verilen bilgiyi eşleştirin
Google, ilişkili varyantları tanımlamak için ProductGroup ile Product yapılandırılmış verilerini belgeliyor. Renk ve beden gibi farklılıklar variesBy, varyantlar hasVariant alanıyla ifade edilebiliyor. Teknik ekip, seçilebilir varyantların adres yapısını ve sayfada görünen bilgileri bu işaretlemeyle birlikte değerlendirmeli. Uygulama Rich Results Test ile kontrol edilmeli; işaretleme eklemek belirli bir arama görünümünü veya sıralamayı garanti etmez.
Yayına çıkmadan küçük bir test tablosu hazırlayın
Üç senaryo seçin: stokta olan standart seçenek, farklı fiyatlı seçenek ve stokta olmayan seçenek. Her biri için görsel, fiyat, stok, sepet satırı ve sipariş özetini kontrol edip sonucu yazın. Telefonda da aynı akışı deneyin. Yeni mağazanızı planlarken İkra ile ürün sayısını, varyant yapısını ve stok yönetimi ihtiyacını paylaşabilirsiniz; tasarım kapsamını bu gerçek ihtiyaçlar üzerinden konuşalım.
Kaynaklar
Okumaya devam edin
Sosyal medya tasarımında tutarlı bir marka dili