E-ticarette ürün listeleme: Görsel gürültüden net tercihlere

Bir ürün listesi, bir karar alanıdır.

Bir kategori sayfasına eklenebilecek çok şey var: kampanya banner’ı, marka vitrini, hızlı filtreler, rozetler, öneriler, stok mesajları. Her biri tek başına makul görünebilir. Ancak aynı anda öne çıkmaya çalıştıklarında ürünler arasındaki farkı okumak zorlaşır.

İyi bir listeleme deneyimi, “Ne kadar çok şey gösteriyoruz?” sorusundan önce “Kullanıcı burada neye göre karar veriyor?” sorusunu ele alır. Bir kitapta yazar ve yayınevi; bir aydınlatma ürününde ölçü ve kullanım alanı; bir elektronik üründe teknik özellikler belirleyici olabilir. Her kategoriye aynı bilgi yoğunluğunu uygulamak yerine, seçimi etkileyen farkları anlamak gerekir.

Önce bilgi hiyerarşisini kurun.

Ürün görseli, adı, fiyatı ve ayırt edici özellikleri arasındaki ilişki, kartın temelini oluşturur. Kampanya veya teslimat bilgisi bu yapıya eklenmeli; yapının yerini almamalıdır. Kartların tutarlı olması, kullanıcının her üründe bilgi aradığı yeri yeniden öğrenmesini önler.

Hiyerarşiyi kurarken tüm etiketleri farklı renklerle vurgulamak yerine önem sırasını belirleyin. “Yeni”, “çok satan”, “indirimli” ve “önerilen” etiketlerinin tamamının baskın olması, hiçbirinin gerçekten öne çıkmaması anlamına gelebilir. Hangi etiketin hangi koşulda gösterileceğini de tasarım kararı olarak ele alın.

Kavramsal hiyerarşi örneği; gerçek bir arayüzün veya ölçülmüş bir testin sonucu değildir.

Boşluklar da bu düzenin parçasıdır. W3C’nin erişilebilir tasarım önerileri, ilişkili içerikleri başlıklar ve aralıklarla gruplamayı; anlamı yalnızca renge bağlamamayı önerir. Görsel sadelik, okunabilirlikten vazgeçmek anlamına gelmez.

Filtreler katalog için değil, kullanıcı için çalışmalı.

Katalogdaki bütün alanları filtre olarak sunmak cazip olabilir. Fakat anlamı belirsiz, birbirine yakın veya sonucu neredeyse değiştirmeyen seçenekler yeni bir karar yükü yaratabilir. Kullanıcının ürünleri gerçekten ayırdığı özelliklerden başlayın; teknik terimler gerekiyorsa anlaşılır açıklamalar ekleyin.

Bir filtre seçildiğinde ne olduğu görünür olmalı. Seçili değerleri listeye dönüldüğünde göstermek, tek tek kaldırabilmek ve bütününü temizleyebilmek kullanıcıya kontrol verir. Filtreleme ile sıralamayı da birbirinden ayırın: biri hangi ürünlerin görüleceğini, diğeri görünenlerin düzenini değiştirir.

Mobilde görünmeyen seçimler bırakmayın.

Filtreler bir panelde açılıyorsa kapandıktan sonra seçimin izi sayfada kalmalıdır. Örneğin “Filtreler · 3” etiketi ve seçili seçeneklerin kısa bir özeti kullanılabilir. Panelde “Uygula” modeli seçildiyse sonuçların ne zaman değişeceğini tutarlı biçimde anlatın; anlık filtrelemede de yükleme durumunu belirsiz bırakmayın.

Sonuç bulunamadığında yalnızca boş bir alan göstermek yerine hangi seçimlerin etkin olduğunu belirtin ve geri alınabilir bir adım sunun. “Filtreleri temizle” ile “Tüm ürünlere dön” farklı eylemlerdir; aynıymış gibi etiketlemeyin.

Üründen listeye dönüş de deneyimin parçası.

Kullanıcı bir ürünü açıp geri döndüğünde seçtiği filtreleri, sıralamayı ve mümkünse kaldığı konumu korumak önemlidir. Listeyi her seferinde baştan kurmak, karşılaştırmayı kesintiye uğratır. Bu davranışı yalnızca tasarım dosyasında değil, çalışan üründe de kontrol edin.

Listeleme yaklaşımını değerlendirmek için tek bir “ürün kartına tıklama” metriğine bağlı kalmayın. Daha fazla tıklama, daha kolay seçim anlamına gelmeyebilir; kullanıcı yeterli bilgiyi bulamadığı için her ürüne girmek zorunda kalıyor olabilir. Gözlem, geri bildirim ve görev tamamlama davranışını birlikte inceleyin.

İyi bir liste, ürünleri sergilemekle kalmaz; kullanıcıya seçeneklerini anlama alanı açar. D&R için hazırladığımız masaüstü listeleme ve mobil web tasarımlarını da proje sayfamızda inceleyebilirsiniz.