Yeni projelere ve yenilikçi ekiplerle iş birliği yapmaya her zaman heyecanla bakıyorum.

Telefon

+90 553 565 1310

E-posta

[email protected]

Web sitesi

https://ahmetyuceler.com.tr

Adres

Kayseri, Türkiye

Sosyal Bağlantılar

İletişime geç

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.

Ahmet Yüceler Oca 07, 2026 2 dakika okuma
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.

Yazar Ahmet Yüceler

6+ yıllık deneyimle web ve mobil ürünler geliştiriyorum. Burada öğrendiklerimi paylaşıyorum.

İletişime geç →

yorum Yap

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

Bu sitedeki deneyiminiz çerezlere izin vererek geliştirilecektir. Çerez Politikamız