Filtre ile sıralama arasındaki fark nedir?

Filtre ölçüte uymayan ürünleri listeden çıkarır. Sıralama hiçbir ürünü çıkarmaz, yalnızca sırayı değiştirir. İkisi ayrı kontroller olarak durmalı.

Faceted search ne demek?

Faceted search, içeriğin her yönü için ayrı bir filtre sunan yapıdır. Bir giyim mağazasında bunlar kategori, fiyat, beden ve renk olabilir. Kullanıcı bu filtreleri birleştirip listeyi daraltır.

Filtreler anında mı uygulanmalı, Uygula butonuyla mı?

Liste bir saniyenin altında yenileniyorsa ve kullanıcılar göz gezdiriyorsa anında uygulama iyi çalışır. Site zaman zaman yavaşlıyorsa ya da kullanıcı telefondaysa Uygula butonu daha güvenlidir.

Varsayılan sıralama ne olmalı?

Varsayılan sıralama, ürün yelpazesinin genişliğini ilk ekranda göstermeli. En çok satan sırasını temel alın ve her ana ürün türünü ilk sıralara serpiştirin. Ben bu sıralamaya Önerilen adını veriyorum.

Filtre ve sıralama tasarımı: ürün filtreleme kalıbı

Filtre mi, facet mi

NN/g'den Kathryn Whitenton, 2014 tarihli yazısında iki terimi ayırır. Filtre, büyük bir içerik kümesinden ölçüte uymayanları çıkaran her araçtır. Faceted search ise içeriğin her yönü için ayrı bir filtre sunar.

Bir giyim mağazasında ben bu facet'leri kategori, fiyat, beden ve renk olarak kurarım.

Whitenton'a göre aradaki fark bir derece meselesidir. Facet yapısı çok büyük kümelerde daha esnektir ve kümede neler bulunduğunu da gösterir. Ama tasarımı ve bakımı pahalıdır, çünkü her facet için eski yeni her üründe veri tutmanız gerekir.

Yazının en sevdiğim önerisi şu: yatırım yapmadan önce kullanıcınızın gerçekten facet'e ihtiyacı olduğundan emin olun. Yirmi ürünlük bir kategoride basit bir filtre çoğu zaman yeter.

Filtre türleri

Ürün filtrelemede en sık iki kontrol görürüm: kategori ve beden gibi listeden seçilen değerler ve fiyat gibi aralıklar. Bunlara bazen "stokta olanlar" gibi tek bir açma kapama düğmesi eklenir.

Listeden seçilen değerlerde en önemli kural, aynı grupta birden çok seçime izin vermektir. Baymard'dan Iva Olah'ın 2024 yazısına göre, kurumun e-ticaret karşılaştırmasındaki sitelerin %15'i buna izin vermiyor. Bu sitelerde kullanıcı seçenekleri tek tek açıp kapatıyor ve sonuçları aklında tutmak zorunda kalıyor.

Olah'ın önerdiği mantık basit: gruplar arasında "ve", grup içinde "veya". Mont ve 1.500 TL üzeri seçilirse ikisine de uyan ürünler gelir. S ve M seçilirse bu bedenlerden birinde bulunan her ürün listelenir.

Seçenekleri onay kutusu olarak gösterin ki kullanıcı birden çok seçebileceğini anlasın.

Seçeneklerin yanına o seçimle kaç ürün kalacağını yazın. NN/g'den Katie Sherwin, 2016 yazısında bu sayıların kullanıcıyı sıfır sonuçlu aramalardan koruduğunu söyler. Aşağıdaki örnekte her seçeneğin yanındaki parantez bunu yapıyor.

Canlı örnek: on iki ürünlük liste

Aşağıdaki listeyi bu sayfa için kurdum. Filtreler grup içinde "veya", gruplar arasında "ve" mantığıyla çalışıyor. Her seçimden sonra sonuç sayısı güncelleniyor ve ekran okuyucuya bildiriliyor.

Filtreleyin ve sıralayın

On iki kurgusal ürünlük bir giyim listesi. Kategori, fiyat ve beden seçin; seçtikleriniz üstte çip olarak görünür, her biri tek tıkla kalkar. Mont ile 750 TL altını birlikte seçerseniz sıfır sonuç ekranını görürsünüz. Telefonda filtreler Filtrele butonunun arkasında durur.

Örnekte iki şeye dikkat edin. Mont seçtiğinizde "750 TL altı" seçeneğinin yanında (0) yazar, yani seçmeden önce sonucu bilirsiniz. Yine de seçerseniz liste boşalır ve hangi filtreyi kaldırırsanız kaç ürün döneceği söylenir.

Uygulanan filtreleri gösterin

Baymard'dan Kathryn Reeves, 2020 yazısında (güncelleme 2026) uygulanan filtrelerin bir özetini listenin üstünde göstermeyi önerir. Test edilen sitelerin %28'inde böyle bir özet yok.

Özet yoksa kullanıcı filtrenin uygulandığından emin olamaz ve listede neden bu ürünleri gördüğünü bilemez. Bir filtreyi kaldırmak için de paneli yeniden açıp aramak zorunda kalır.

Reeves'e göre mobilde sorun daha büyük, çünkü kullanıcı seçimini görmek için filtre panelini yeniden açmak zorunda. Masaüstünde de uzun bir kenar çubuğunun altındaki seçim gözden kaçar. Sistemin kendiliğinden uyguladığı filtreler de kullanıcıya özet sayesinde görünür.

Özetteki her filtre tıklanınca kalkmalı ve yanında bir "Tümünü temizle" bağlantısı olmalı. Yalnızca "Filtre (3)" yazan bir sayaç yetmez, çünkü hangi üçü olduğunu söylemez.

Seçilen seçeneği de panelde yerinden oynatmayın. Reeves'in verisinde test edilen sitelerin %97'si seçili seçeneği eski yerinde bırakıyor.

Sonuç sayısı ve sıfır sonuç

Toplam sonuç sayısı her an görünmeli. Whitenton'un 2015 tarihli mobil facet yazısı bunu açıkça ister: kullanıcı uzun bir filtre listesinde aşağı kaydırsa bile toplam görünür kalmalı.

Sayı ekran okuyucu kullanıcısına da ulaşmalı. Bunu WCAG 2.2'nin AA düzeyindeki 4.1.3 Durum Mesajları ölçütü ister. W3C'nin bu ölçüt için verdiği örneklerden biri tam olarak bu: aramadan sonra beliren "5 results returned" metni.

Ben sonuç sayısını role="status" taşıyan bir alana yazarım. Odak yerinden oynamaz, ekran okuyucu sayıyı yine de okur.

Sıfır sonuç bir çıkmaz sokak olmamalı. Hangi filtrenin listeyi boşalttığını söyleyin ve onu tek tıkla kaldırma yolu verin. Bu ekranın metnini boş durum kalıbında ayrıca anlattım.

Arama kutusundan gelen sıfır sonuç ise başka bir sorun. Yazım hatasını yakalamak ve öneri sunmak için arama ve otomatik tamamlama kalıbına bakın.

Anında uygulama mı, "Uygula" butonu mu

Sherwin iki yolu ayırır. Anında uygulamada liste her seçimden sonra yenilenir. Toplu uygulamada kullanıcı birkaç filtre seçer, liste en sonda bir kez yenilenir.

Anında uygulama

Her seçimden sonra liste yenilenir.

Kime uyar: neye bakacağını henüz bilmeyen, seçeneklere göz gezdiren kullanıcıya.

Şartı: cevabın bir saniyenin altında gelmesi.

"Uygula" butonu

Kullanıcı birkaç filtre seçer, liste en sonda bir kez yenilenir.

Kime uyar: ölçütü belli olan kullanıcıya, zaman zaman yavaşlayan sitelere ve mobile.

Riski: seçimlerin birleşimi sıfır sonuç verebilir.

Hangisini seçeceğiniz kullanıcının niyetine ve sitenin hızına bağlı. Sherwin'e göre anında uygulama ancak cevap bir saniyenin altında geliyorsa iyi hissettirir.

Liste her seçimde titrerse kullanıcının dikkati dağılır. Bu durumda yazı, sonuç alanını soluklaştırıp bir ilerleme göstergesi koymayı önerir.

Sherwin bir ara yol da tarif eder. "Uygula" butonu koyarsınız, kullanıcı bir iki saniye yeni seçim yapmazsa filtreler kendiliğinden uygulanır. Bekleme sırasında yine bir ilerleme göstergesi görünür.

Filtre uygulandıktan sonra sayfayı listenin en üstüne zıplatmak da dikkat ister. Sherwin'e göre bu, kullanıcının yerini kaybettirebilir. Kullanıcı hâlâ seçim yapıyorsa yanlış kategoriye tıklama ihtimali de artar.

Mobilde filtre paneli

Telefonda filtreler listenin yanına sığmaz, bir butonun arkasına girer. Whitenton, kullanıcıyı sonuçlardan koparan tam ekran filtre sayfaları yerine sağdan açılan bir panel önerir.

Panel açıkken arkadaki sonuçların bir kısmı görünür kalır. Kullanıcı seçiminin listeyi nasıl değiştirdiğini izleyebilir.

Aynı yazı, paneli açan butonda simge yerine "Filtrele" gibi bir kelime kullanmanın daha anlaşılır olduğunu söyler. Ben butona uygulanan filtre sayısını da yazarım: "Filtrele (2)".

Sherwin mobilde toplu uygulamayı önerir, çünkü hareket halindeyken sayfalar çoğu zaman yavaş yüklenir. Ben paneli kapatan butona sonuç sayısını yazarım: "5 ürünü göster". Böylece kullanıcı paneli kapatmadan önce ne göreceğini bilir.

Panel içindeki her onay kutusu parmakla rahat basılabilmeli. Satırın tamamını tıklanabilir yapın ve satırları sık dizmeyin. Ölçüleri dokunma alanı kalıbında anlattım.

Sıralama seçenekleri ve varsayılan

Sıralama filtreden ayrı bir iştir: hiçbir ürünü çıkarmaz, yalnızca sırayı değiştirir. Baymard'dan Mark Crowley, 2021 yazısında dört temel sıralama sayar: fiyat, kullanıcı puanı, en çok satan ve en yeni. Test edilen masaüstü sitelerin %64'ü bu dördünü birlikte sunmuyor.

Crowley'ye göre iki yönlü olması gereken tek temel sıralama fiyattır. Puan ve yenilik tek yönlü olabilir, çünkü testlerde kullanıcılar en düşük puanlı ürünü neredeyse hiç aramadı. Alfabetik sıralamayı da testlerde çok az kişi kullanmış.

Bir de "Sırala" yazısını açılır listeye bir seçenek gibi koymayın, kafa karıştırır. Crowley'nin verisinde sitelerin %30'u bunu yapıyor.

Varsayılan sıralama ise en çok gözden kaçan karardır. Reeves, 2021 yazısında kullanıcıların bir kategoriyi ilk birkaç üründen yargıladığını anlatır. İlk ekranda hep aynı tür ürün varsa, kullanıcı seçeneğin dar olduğunu sanıp kategoriyi, hatta siteyi terk edebilir.

Fiyata göre varsayılan sıralama da fiyat aralığı hakkında yanlış bir izlenim bırakır. Masaüstü sitelerin %24'ü varsayılan sıralamayı ürün yelpazesini göstermek için kullanmıyor.

Reeves'in önerisi, en çok satan sırasını temel alıp listenin %10'undan fazlasını oluşturan her ürün türünü ilk 20 ürünün içine almaktır. Mobilde bu sayı 10 civarına iner.

Bu sıranın adı için Reeves "Relevance" ya da "Featured" önerir. "Popular" adını kullanmayın, çünkü test kullanıcıları onu en çok satan sıralaması sanmış. Ben Türkçede "Önerilen" adını kullanıyorum.

Yukarıdaki örnekte "Önerilen" sıra dört kategoriyi ilk dört karta dağıtıyor. Bunu ürün detay sayfasına giden ilk adım olarak düşünün: kullanıcı ilk ekranda kendine uygun bir şey görmezse oraya hiç gitmez.

Benim notum

Bir mağazaya audit yaparken ilk denediğim şey, aynı grupta iki seçenek işaretlemektir. Sonra telefonda bir filtreyi kaldırmaya çalışırım. Bu iki deneme, sorunların çoğunu daha ilk bakışta gösterir.

En sık gördüğüm hata, filtrelerin bir arama eklentisinin varsayılan ayarlarıyla bırakılmasıdır. Seçenekler veritabanındaki sırayla gelir, bedenler "XL, S, L, M" diye dizilir, sayılar yazmaz. Her kategoride hangi filtrelerin duracağına ürün ekibi karar vermeli.

Varsayılan sıralamayı da ayrıca sorarım. Çoğu ekip bunun bir karar olduğunu fark etmemiştir. Filtre ve sıralama, e-ticaret UX analizinde baktığım ilk konulardan biridir.

Kontrol listesi

Bir ürün listesini yayından önce bu maddelerle kontrol ederim. Kendi mağazanızın filtrelerine benim bakmamı isterseniz UX Audit bunu kapsar.

Aynı grupta birden çok seçenek seçilebiliyor; seçenekler onay kutusu.
Gruplar arasında "ve", grup içinde "veya" mantığı çalışıyor.
Her seçeneğin yanında kaç ürün kalacağı yazıyor.
Uygulanan filtreler listenin üstünde çip olarak görünüyor ve tek tek kalkıyor.
"Tümünü temizle" var.
Toplam sonuç sayısı her an görünüyor ve ekran okuyucuya bildiriliyor.
Sıfır sonuçta hangi filtrenin kaldırılacağı öneriliyor.
Mobilde filtre butonu yazılı ve uygulanan filtre sayısını gösteriyor.
Sıralamada fiyat, puan, en çok satan ve en yeni var.
Varsayılan sıralama ilk ekranda ürün yelpazesini gösteriyor.