Filtreleme ve sıralama arayüzü tasarlamak: bileşen, düzen, boş durum

Filtre ve sıralama arayüzü neden ayrı bir tasarım problemidir?

Filtre kullanıcıya "hangi sonuçlar listede olsun" sorusunu, sıralama ise "hangi sonuç önce gelsin" sorusunu sordurur. İkisi aynı ekranda durduğu için birbirine karıştırılır, oysa farklı zihinsel işlemlerdir. Filtre kümeyi daraltır; sıralama aynı kümeyi yeniden dizer. Arayüz bu farkı hissettirmezse kullanıcı sıralamayı değiştirdiğinde filtrenin kaybolduğunu ya da tersini sanır.

Bir ürün listesinde kullanıcının hedefi genellikle "benim kriterlerime uyan az sayıda seçeneğe ulaşmak"tır. Filtre tasarımı bu hedefi kaç tıklamada, ne kadar belirsizlikle gerçekleştirdiğine göre değerlendirilir. İyi tasarlanmış filtre paneli sonuç sayısını görünür kılar, yapılan seçimi geri alınabilir tutar ve hiç sonuç kalmayan kombinasyonlara kullanıcıyı götürmez.

Filtre, çok yönlü filtre (faceted) ve sıralama kontrollerinin nasıl kurulacağı, hangi bileşenin hangi veri türüne uyduğu, mobilde nasıl uyarlanacağı ve test edilirken nelere bakılacağı sırasıyla şöyledir.

Hangi filtre türü hangi veri için kullanılır?

Bileşen seçimi veri türüne bağlıdır:

• Onay kutuları (checkbox): çoklu seçim gerektiren kategorik özellikler için. Marka, renk, beden gibi.
• Radyo düğmeleri veya segment kontrol: yalnız tek seçimin mantıklı olduğu durumlar için. Teslimat süresi gibi birbirini dışlayan seçenekler.
• Aralık kaydırıcısı (slider) ve sayı alanı: fiyat, boyut, tarih aralığı gibi sürekli değerler. Kaydırıcı tek başına hassas değer girmeyi zorlaştırır; yanında sayı giriş alanları olması iyi uygulamadır.
• Açılır liste: seçenek sayısı çok ve kullanıcı ne aradığını biliyorsa, arama kutulu seçim listesi.
• Anahtar (toggle): "yalnız stokta olanlar" gibi açık-kapalı durumlu filtreler.
• Renk veya görsel seçim kutucukları: seçeneğin kendisi görsel olduğunda (renk örneği, desen).

Aynı facet içindeki çoklu seçim kural olarak "ya da" (OR) mantığıyla çalışır: mavi ve kırmızı seçilirse ikisi de gösterilir. Farklı facet'ler arasında ise "ve" (AND) mantığı kullanılır: mavi ve belirli beden. Bu kuralı kullanıcıya açıklamaya gerek kalmayacak biçimde tutarlı uygulamak, filtreleme arayüzünün sessiz ama kritik sözleşmesidir.

Panel düzeni: sıra, gruplama ve sonuç sayısı

Filtreleri önem sırasına göre dizin. En çok kullanılan filtreler (örneğin marka, fiyat) üstte ve açık olsun; seyrek kullanılanlar daraltılabilir gruplarda dursun. Sıra, tahmine değil kullanım verisine ya da kullanıcı araştırmasına dayanmalıdır.

Her seçeneğin yanında seçildiğinde kaç sonuç geleceğini göstermek, kullanıcıyı boş sonuç sayfasından korur. Sonuç sayısı sıfır olan seçenekleri tamamen gizlemek yerine soluk gösterip seçilemez yapmak, kullanıcının neden kaybolduğunu anlamasını sağlar.

Uygulanan filtreleri sonuç listesinin üstünde, kaldırılabilir etiket (chip) olarak göstermek şu faydaları sağlar: kullanıcı hangi koşullarla baktığını görür ve tek bir tıklamayla birini kaldırabilir. Hepsini temizleyen "Filtreleri temizle" bağlantısı da yine görünür olmalıdır.

Uzun seçenek listelerinde (örneğin çok sayıda marka) kısa bir arama kutusu ve "daha fazla göster" bağlantısı kalabalığı kontrol eder. Alfabetik sıra yerine popülerliğe göre sıralama çoğu zaman daha yararlıdır, ancak her yaklaşım da açıkça etiketlenmelidir.

Anlık mı, uygula düğmesiyle mi filtrelemeli?

Masaüstünde filtre değiştikçe sonuçları anlık güncellemek hızlı hissettirir; ancak bunu ancak sunucu yanıtı hızlıysa ve sayfa sıçramıyorsa yapın. Her tıklamada liste yeniden yüklenirken içerik atlıyorsa kullanıcı yönünü kaybeder. Sonuç alanında yükleme göstergesi ve konumu koruyan güncelleme önemlidir.

Mobilde genellikle ekranı kaplayan bir filtre paneli açılır. Burada kullanıcı birkaç seçim yapar ve "Sonuçları göster" düğmesine basar; düğmenin üstünde eşleşen sonuç sayısı bulunursa deneme-yanılma azalır. Seçimleri her tıklamada uygulamak mobil ağda yavaşlık ve zıplama yaratır, bu yüzden toplu uygulama tercih edilir.

Hangisini seçerseniz seçin şunlar sabit kalmalıdır: seçilen filtre görünür olmalı, geri alınabilmeli ve sayfayı yenileyince ya da geri tuşuna basınca kaybolmamalıdır. Bunun için filtre durumunu adres çubuğundaki parametrelere yazmak (URL ile paylaşılabilir hale getirmek) hem kullanıcı hem arama motoru açısından değerlidir.

Sıralama kontrolü nasıl tasarlanır?

Sıralama genellikle tek seçimli bir açılır liste ya da segment kontroldür. Etiketler kullanıcının ne beklediğini söylemelidir: "En düşük fiyat", "En yeni", "En çok değerlendirilen", "Alakalı". Belirsiz etiketlerden ("Önerilen") kaçının ya da ne anlama geldiğini kısa bir ipucu ile açıklayın.

Varsayılan sıralama bağlama uymalıdır. Arama sonuçlarında "alaka" doğal varsayılandır; kategori listesinde popülerlik veya editörün seçimi olabilir. Varsayılan sıralamayı kullanıcıdan gizlemek yerine seçili halde göstermek şeffaflık sağlar.

Sıralamayı değiştirmek filtreleri sıfırlamamalıdır. Aynı şekilde filtreyi değiştirmek de sıralama seçimini bozmamalıdır. Bu bağımsızlık sağlanmazsa kullanıcı kontrolleri birlikte kullanmaktan korkar.

Tablo görünümlerinde sütun başlığına tıklayarak sıralama yaygındır. Burada sıralama yönünü gösteren ok işareti ve çoklu sütun sıralama gerekiyorsa öncelik göstergesi sağlanmalıdır.

Sonuç çıkmadığında ne yapılır?

Boş sonuç, filtre arayüzünün en çok ihmal edilen durumudur. Kullanıcı hiç eşleşme olmadığını gördüğünde nedenini bilmek ister. İyi bir boş durum ekranı şunları içerir: hangi filtre kombinasyonunun sonuç vermediğinin açık ifadesi, tek tıklamayla bir filtreyi gevşetme önerisi (örneğin "Fiyat filtresini kaldır"), benzer ürünler veya genişletilmiş sonuç.

Daha önlemci yaklaşım, sonuç sayısı sıfır olan seçenekleri en baştan seçilemez yapmaktır. Böylece kullanıcı boş sayfaya ulaşamaz. Bunun için sunucu tarafında seçenek sayılarının her filtre değişiminde güncellenmesi gerekir; bu teknik bir maliyettir ama deneyimi belirgin biçimde iyileştirir.

Arama kutusu ile birlikte kullanılan filtrelerde, aramanın kendisi bir filtre gibi davranır. Aramayı temizlemek ile filtreleri temizlemek ayrı eylemler olmalı, ama uygulanan koşullar tek bir yerde görünmelidir.

Mobil, erişilebilirlik ve test

Mobilde filtre paneli çoğunlukla alt çekmece ya da tam ekran katmanıdır. Üstte uygulanan filtre sayısını gösteren bir "Filtrele" düğmesi ve yanında "Sırala" düğmesi bulunur. Parmakla dokunma alanları yeterince büyük olmalı, kapat düğmesi ve "Temizle" kontrolü kolay ulaşılır konumda durmalıdır.

Erişilebilirlik için her kontrolün etiketi olmalı, onay kutuları klavye ile gezilebilmeli ve sonuç sayısı değiştiğinde ekran okuyucuya bildirilmelidir. Renkle ayrılan filtre seçeneklerinde metin etiketi de bulunmalıdır; yalnız renge dayanmak herkes için çalışmaz.

Test için şu sorular kullanılabilir: Kullanıcı hedef ürünü kaç adımda buluyor? Filtreyi geri alabiliyor mu? Sıralamanın filtreyi bozduğunu düşünüyor mu? Boş sonuçta ne yapıyor? Gerçek kullanıcılarla küçük bir görev tabanlı test ve analitik verisi (hangi filtre hiç kullanılmıyor, hangi kombinasyon boş sonuç veriyor) tasarımı iyileştirir.

Mindset programlarında bu beceri nerede çalışılır?

Arama Deneyimi Tasarımı: Filtreleme, Sıralama ve Sonuç Sayfaları programı, "Filtreleme ve Sıralama" ve "Sonuç Sayfası ve Kurtarma" modülleriyle bu konunun arama bağlamını ele alır; e-ticaret ve içerik platformlarının ürün ve arayüz tasarımcıları için uygundur. Veri Yoğun Arayüz Tasarımı programının "Filtre, Arama ve Sıralama" modülü ise yönetim panelleri ve tablo ağırlıklı ekranlarda aynı konuyu kurumsal yazılım bağlamında işler.

Bu programlar, ürün ekiplerinde aynı filtre sistemini hem müşteri tarafı hem yönetim tarafı için tutarlı tasarlamak isteyenler için birlikte düşünülebilir.