Web Sitesi Ürün Filtreleme Paneli: Yapı ve Davranış
Çok ürünlü bir katalogda filtreleme paneli, aramanın kendisi kadar önemlidir. Doğru kurgulanmış bir panel kullanıcıyı birkaç tıkla hedefe götürür; yanlış kurgulanmış panel ise kategoriyi gezilmez hale getirir.
Bu rehberde hangi filtrelerin sunulacağını, panelin nasıl yerleşeceğini ve mobil davranışını ele alıyoruz. Tasarımın sitenize uyarlanması için Weblike web sitesi tasarımı ekibimizden destek alabilirsiniz.
Web Sitesi Ürün Filtreleme Paneli Nedir?
web sitesi ürün filtreleme paneli, kullanıcının kategori içindeki ürünleri özelliklere göre daraltmasını sağlayan arayüz bölümüdür. Panel, kataloğu gezilebilir kılar.
Bu bölüm bir liste değildir. Kullanıcının karar sürecini yönlendiren bir araçtır.
Neden Gerekli?
Ürün sayısı arttıkça gezinme zorlaşır. Filtreleme bu zorluğu birkaç yönden çözer.
- Hız: Hedefe daha az tıkla.
- Keşif: İlgili ürünler görünür.
- Karar: Seçenekler daraltılır.
- Terk: Aradığını bulamayan ayrılmaz.
Hangi Filtreler Sunulmalı?
Filtre seti kategoriye göre değişir. Her kategoride aynı filtreleri göstermek yanlıştır.
Kullanıcının gerçekten karar verirken baktığı özellikler seçilmelidir. Varsayım yerine veri kullanılmalıdır.
Fiyat Aralığı
Fiyat, hemen her kategoride en çok kullanılan filtredir. Kaydırmalı aralık ya da hazır gruplar sunulabilir.
Hazır gruplar daha hızlı seçilir. Kaydırmalı yapı ise esneklik verir.
Marka Filtresi
Marka bilinirliği yüksek kategorilerde bu filtre kritiktir. Liste uzunsa arama alanı eklenmelidir.
Markalar alfabetik sıralanmalıdır. Popülerlik sırası tutarsız algılanır.
Özellik Filtreleri
Renk, beden, malzeme gibi özellikler kategoriye özgüdür. Bu filtreler ürün verisinden beslenir.
Veri eksikse filtre çalışmaz. Katalog verisinin tutarlılığı ön koşuldur.
Renk Filtresi
Renk filtresi metin yerine renk örnekleriyle sunulduğunda daha hızlı kullanılır. Örnekler yeterince büyük olmalıdır.
Renk adı da gösterilmelidir. Renk körlüğü olan kullanıcılar için bu gerekli bir destektir.
Stok Durumu
Yalnızca stokta olanları gösterme seçeneği sunulmalıdır. Bu filtre hayal kırıklığını önler.
Varsayılan olarak işaretli olabilir. Stok gösterimini web sitesi stok gösterimi yazısında ele aldık.
Değerlendirme Filtresi
Puan üzerinden filtreleme karar sürecini kısaltır. Belirli puanın üzerindekiler gösterilebilir.
Yeterli yorum yoksa bu filtre anlamsızdır. Yorum sayısı düşük kataloglarda gizlenmelidir.
Filtre Sayısı
Çok sayıda filtre paneli kullanılmaz hale getirir. Beş ile yedi filtre çoğu kategori için yeterlidir.
Az kullanılan filtreler gizlenebilir. Daha fazla göster seçeneği sunulur.
Sonuç Sayısı Gösterimi
Her filtre seçeneğinin yanında kaç ürün olduğu gösterilmelidir. Bu bilgi boş sonuç riskini azaltır.
Sıfır sonuçlu seçenekler ya gizlenmeli ya pasif gösterilmelidir. Tıklanıp boş sayfa görmek hayal kırıklığı üretir.
Boş Sonuç Durumu
Filtre kombinasyonu sonuç vermiyorsa kullanıcıya yol gösterilmelidir. Boş sayfa bırakılmamalıdır.
Hangi filtrenin kaldırılabileceği önerilebilir. Benzer ürünler de gösterilebilir.
Panel Yerleşimi
Masaüstünde panel genellikle sol sütunda yer alır. Bu düzen alışılmıştır.
Üst yatay filtre çubuğu da kullanılabilir. Az sayıda filtre varsa bu yapı yer kazandırır.
Sol Sütun
Sol sütun uzun filtre listelerini taşıyabilir. Kaydırma boyunca görünür kalabilir.
Sütun genişliği içeriği sıkıştırmamalıdır. Ürün ızgarasına yeterli alan bırakılmalıdır.
Yatay Filtre Çubuğu
Üstte yer alan açılır filtreler modern bir görünüm sunar. Mobil ile tutarlılık sağlar.
Çok sayıda filtre bu yapıya sığmaz. Kategori karmaşıksa sol sütun tercih edilmelidir.
Mobil Davranış
Mobilde panel ekranı kaplayan bir katman olarak açılır. Alt kısımda sabit bir filtre butonu bulunur.
Uygula butonu her zaman görünür olmalıdır. Mobil öncelikli tasarımı mobil öncelikli tasarım yazısında inceleyebilirsiniz.
Anında mı Uygula mı?
Filtreler seçilir seçilmez uygulanabilir ya da uygula butonu beklenebilir. İki yaklaşımın da yeri vardır.
Masaüstünde anında uygulama akıcıdır. Mobilde uygula butonu veri tüketimini ve bekleme sayısını azaltır.
Seçili Filtrelerin Gösterimi
Uygulanan filtreler sonuç listesinin üstünde etiket olarak gösterilmelidir. Kullanıcı neyi seçtiğini görmelidir.
Her etiket tek tıkla kaldırılabilmelidir. Tümünü temizle seçeneği de bulunmalıdır.
Temizleme
Tüm filtreleri temizleme seçeneği kolay erişilebilir olmalıdır. Kullanıcı baştan başlamak isteyebilir.
Tek tek kaldırma da desteklenmelidir. İki yöntem birlikte sunulur.
Adres Yapısı
Filtrelenmiş sonuçların kendi adresi olmalıdır. Kullanıcı bağlantıyı paylaşabilmeli ve geri gelebilmelidir.
Bu yapı arama motoru tarafında da önemlidir. Dizinleme durumunu Google Search Console üzerinden izleyebilirsiniz.
Dizinleme Kararı
Her filtre kombinasyonunun dizine girmesi istenmez. Kontrolsüz kombinasyonlar yinelenen içerik üretir.
Değerli kombinasyonlar seçilip dizine açılabilir. Geri kalanı kapatılmalıdır.
Performans
Her filtre değişiminde tüm sayfanın yeniden yüklenmesi yavaştır. Yalnızca sonuç alanı güncellenmelidir.
Sayfa hızını Google PageSpeed Insights üzerinden ölçebilirsiniz. Filtreleme en hızlı tepki vermesi gereken etkileşimlerdendir.
Yükleme Göstergesi
Sonuçlar yüklenirken gösterge sunulmalıdır. Donmuş görünen sayfa tekrar tıklama üretir.
Gösterge sonuç alanında konumlanmalıdır. Tüm ekranı kaplayan yükleme rahatsız edicidir.
Sıralama ile İlişki
Filtreleme ve sıralama farklı işlevlerdir ancak birlikte kullanılır. İkisi yan yana konumlanmalıdır.
Sıralama seçimi filtre değişince korunmalıdır. Sıfırlanan sıralama kullanıcıyı şaşırtır.
Erişilebilirlik
Filtreler klavyeyle kullanılabilmelidir. Onay kutuları ve açılır bölümler standart yapıda olmalıdır.
Sonuç sayısı değiştiğinde duyuru yapılmalıdır. Ekran okuyucu kullanıcıları değişimi fark etmelidir.
Veri Kalitesi
Filtreler ürün verisine dayanır. Eksik ya da tutarsız veri filtreyi işlevsiz kılar.
Katalog verisi düzenli denetlenmelidir. Filtreleme özelliklerini filtreleme özellikleri yazısında ele aldık.
Ürün filtreleme panelinde kontrol listesi
web sitesi ürün filtreleme paneli tasarlanırken dört başlık karara bağlanır. Bu kararlar panelin kullanılabilirliğini belirler.
Filtre seti, sonuç sayısı gösterimi, mobil davranış ve adres yapısı bu başlıklardır. web sitesi ürün filtreleme paneli bu dördü netleştiğinde kataloğu gerçekten gezilebilir kılar.
Kullanım Analizi
Hangi filtrelerin ne sıklıkla kullanıldığı ölçülmelidir. Kullanılmayan filtreler kaldırılabilir.
Bu veri panel sadeleştirmesini yönlendirir. Varsayımla kurulan panel şişer.
Kategori Bazlı Uyarlama
Her kategori kendi filtre setini taşımalıdır. Tek bir şablon tüm katalogda çalışmaz.
Uyarlama yönetim yükü getirir ancak dönüşüme doğrudan yansır.
Karşılaştırma ile Birlikte
Filtreleme sonrası kullanıcı genellikle birkaç ürünü karşılaştırır. İki özellik birbirini tamamlar.
Karşılaştırma kurgusunu ürün karşılaştırma yazısında, filtre bileşenlerinin tasarımını filtreleme tasarımı yazısında ele aldık.
Beş ile yedi filtre çoğu kategori için yeterlidir. Az kullanılanlar gizlenip daha fazla göster seçeneğiyle sunulabilir.
Evet. Her seçeneğin yanında ürün sayısı gösterilmeli, sıfır sonuçlu seçenekler gizlenmeli ya da pasifleştirilmelidir.
Masaüstünde anında uygulama akıcıdır. Mobilde uygula butonu bekleme sayısını azaltır.
Renk örnekleriyle birlikte renk adı da gösterilmelidir. Yalnızca örnek, renk körlüğü olan kullanıcılar için yetersizdir.
Hangi filtrenin kaldırılabileceği önerilmeli ya da benzer ürünler gösterilmelidir. Boş sayfa bırakılmamalıdır.
Evet. Kullanıcı bağlantıyı paylaşabilmeli ve geri dönebilmelidir.
Hayır. Kontrolsüz kombinasyonlar yinelenen içerik üretir; yalnızca değerli olanlar açılmalıdır.
Sonuç listesinin üstünde etiket olarak. Her etiket tek tıkla kaldırılabilmelidir.
Kullanım verisiyle. Varsayımla kurulan paneller zamanla şişer ve kullanılmaz hale gelir.
Filtreleme paneli, katalog büyüdükçe arama kutusundan daha çok kullanılan araca dönüşür; bu yüzden hangi filtrelerin kalacağına varsayımla değil kullanım verisiyle karar verilmelidir. Her seçeneğin yanında sonuç sayısını göstermek ve boş sonuçta yol göstermek, panelin kullanıcıyı yormadan hedefe götürmesini sağlar.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
