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

Phone

+1 234 567 890

Email

[email protected]

Website

https://botble.com

Address

123 Main Street, New York, NY 10001

Social

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") }

Fiyat Histogramı Cascading

Histogram da aynı şekilde:

 
const prices = filteredProducts.map(p => p.price)

Bu sayede grafik sadece o filtre kombinasyonuna göre şekillenir.

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 min read
Jan 07, 2026
By Ahmet Yüceler
Share

Leave a comment

Your email address will not be published. Required fields are marked *

Your experience on this site will be improved by allowing cookies. Cookie Policy