I'm always excited to take on new projects and collaborate with innovative minds.

Phone

+90 553 565 1310

Email

[email protected]

Website

https://ahmetyuceler.com.tr

Address

Kayseri/Turkey

Sosyal Bağlantılar

Cascading Filters (Bağımlı / İlişkisel Filtreler) Nedir?

Klasik filtreleme sistemlerinde tüm filtre seçenekleri her zaman aktiftir.
Bu da kullanıcıyı çoğu zaman sonuçsuz kombinasyonlara sürükler ve arayüzde kullanıcıya ürün yok şeklinde gösterirsiniz tabi buda hiç hoş bir durum degil.

Cascading Filters (Bağımlı / İlişkisel Filtreler) Nedir?

Cascading Filters Ne Yapar?

Bir filtre seçildiğinde:

  • Diğer filtrelerin seçenekleri anlık olarak güncellenir
  • O kombinasyonda hiç sonucu olmayan seçenekler disable edilir
  • Kullanıcı sadece gerçekten var olan kombinasyonlar arasında gezinir

Yani filtreler artık birbirinden bağımsız değil, birbirine bağlı (dependent) hale gelir.

Klasik Filtre vs Cascading Filter

Klasik FiltreCascading Filter
Tüm seçenekler sürekli açıkSadece geçerli seçenekler açık
Yanlış kombinasyonlar seçilebilirSonuçsuz kombinasyon yok
Kullanıcı 0 sonuç ekranına düşerKullanıcı her zaman gerçek sonuç görür
UX zayıfUX güçlü ve yönlendirici

Gerçek Hayat Örneği – Emlak

Kullanıcı:

 
Lokasyon: Şişli  

Bu seçimden sonra:

  • İlçe listesi → sadece Şişli’ye bağlı ilçeler
  • Oda sayısı → sadece Şişli’de mevcut olanlar
  • Fiyat histogramı → sadece Şişli fiyat dağılımına göre
  • Asansör checkbox → sadece Şişli’de varsa aktif

Bu yapı = Faceted Search with Cascading Filters

Frontend Mantığı Nasıl Çalışır?

Sistem tek bir ana dataset üzerinden çalışır.

 
products = [  { location : "Şişli" , district : "Mecidiyeköy" , rooms : 2 , price : 18000 , elevator : true },  { location : "Şişli" , district : "Bomonti" , rooms : 3 , price : 25000 , elevator : false },  { location : "Beşiktaş" , district : "Levent" , rooms : 1 , price : 20000 , elevator : true } ] 

Kullanıcının seçtiği aktif filtreler:

 
activeFilters = {   location : "Şişli" ,   district : null ,   rooms : null ,   elevator : null } 

Cascading Algoritma

 
function applyCascadingFilters ( products, activeFilters ) {   const filtered = products. filter ( p =>     Object . keys (activeFilters). every ( key => {       if (!activeFilters[key]) return true       return p[key] === activeFilters[key]    })  )   return {     filteredProducts : filtered,     availableOptions : {       district : [... new Set (filtered. map ( p => p. district ))],       rooms : [... new Set (filtered. map ( p => p. rooms ))],       elevator : [... new Set (filtered. map ( p => p. elevator ))]    }  } } 

Sonra UI’da:

 
if (!availableOptions. rooms . includes ( 3 )) {   disable ( "3+1" ) } 

UX Kazancı

  • Kullanıcı hiçbir zaman boş sonuca düşmez
  • Filtre sistemi kullanıcıyı doğru yola yönlendirir
  • Arama süresi kısalır
  • Conversion rate artar

Bu yüzden Amazon, Airbnb, Zillow gibi ve tabi benim yazdığım platformlar bu mimariyi kullanır.

2 dakika okuma
Oca 07, 2026
Ahmet Yüceler
Paylaş

yorum Yap

E-posta hesabınız yayımlanmayacak. Gerekli alanlar işaretlendi *

Bu sitedeki deneyiminiz çerezlere izin vererek geliştirilecektir. Cookie Policy