Mobilde Faceted Search: Tray Deseni ve Canlı Sonuç Sayacı

Mobilde filtreleri ayrı bir ekrana taşımak, masaüstündeki kenar çubuğunun en işlevsel yanını, yani seçimin sonuca ne yaptığını anında görmeyi ortadan kaldırır. Tray deseni bu kaybı geri almak için çıktı: filtre paneli ekranın bir kısmını kaplar, sonuç listesi arkada durmaya devam eder. Desenin asıl değeri arkada görünen o birkaç satırda değil, panelin üstünde duran sayıda.

Ayrı filtre ekranı geri bildirim döngüsünü koparır

Filtreler tam ekran açıldığında kullanıcı, seçimini kör yapar. Kaç sonuç kaldığını, seçtiği kombinasyonun listeyi boşaltıp boşaltmadığını uygula düğmesine basmadan bilemez. Sonuç boşsa geri döner, bir filtreyi kaldırır, tekrar uygular. Üç filtreli bir daraltmada bu döngü rahatlıkla altı ekran geçişine çıkar.

Sorun ekran alanı değil, sıralama. Masaüstünde seçim ve sonuç aynı anda görünür olduğu için kullanıcı denemeyi ucuz bulur. Ayrı ekran her denemeyi pahalı hale getirir, kullanıcı da denemeyi bırakıp ilk makul sonuca razı olur.

Tray deseninin yaptığı iş

Tray, ekranın altından veya yanından kayarak açılan, arkasını tamamen örtmeyen bir paneldir. Amazon ve eBay dahil büyük katalog uygulamalarının çoğu bu yapıya geçti. Çalışan bileşenleri şunlar:

• Panelin üstünde sabit duran, her seçimde güncellenen sonuç sayısı.
• Panel açıkken arkada kalan sonuç listesinin bir kısmının görünür kalması.
• Simge yerine kelime: huni ikonu değil, "Filtrele" yazısı.
• Paneli kapatmadan tek dokunuşla temizlenebilen seçimler.

Bu dördünden biri eksikse desen yarım çalışır. En sık eksik bırakılan da ilkidir.

Sayaç, arkadaki listeden daha çok iş yapar

Tray anlatılırken vurgu genelde şeffaflığa yapılır: kullanıcı sonuçları görmeye devam ediyor. Arkada kalan iki buçuk ürün kartı pratikte pek bilgi taşımaz, üstelik panel yükseldikçe o alan da kapanır. Geri bildirimi taşıyan şey "1.284 sonuç" yazısının "37 sonuç" olması, sonra sıfıra düşmesidir.

Buradan pratik bir sonuç çıkıyor: panelin şeffaflığını ayarlamakla uğraşmadan önce sayacı doğru kurun. Sayaç canlıysa tam ekran filtre paneli bile kabul edilebilir bir deneyim verir. Sayaç yoksa yarı saydam panel dekorasyondan ibarettir.

Anında uygulama mı, Uygula düğmesi mi

Cevap sorgunun maliyetine bağlı. Sayaç istemci tarafında hesaplanabiliyorsa ya da sunucu tarafında tek bir aggregation sorgusuyla dönüyorsa her dokunuşta güncelleyin, uygula düğmesine gerek kalmaz. Her filtre değişikliği yeni bir tur gerektiriyor ve yanıt yüzlerce milisaniye sürüyorsa anında uygulama kullanıcıyı yavaşlatır, üstelik liste parmağının altında yeniden akar.

Bu durumda doğru çözüm iki parçalı: seçimler panelde birikir, ama sayaç arka planda ayrı ve ucuz bir sorguyla güncellenmeye devam eder. Sonuç listesini yeniden çekmekle sonuç sayısını öğrenmek aynı işlem değil, çoğu arama altyapısında ikincisi belirgin şekilde ucuz. Arayüz kararının uygulamada neye mal olduğunu bilmeden bu tercihi yapmak, tasarımın sahada bozulmasının en yaygın sebebi.

Filtre URL'lerini site haritasına koymayın

Faceted search'ün arama motoru tarafındaki maliyeti genelde hafife alınıyor. Her filtre kombinasyonu ayrı bir URL üretiyorsa sayı çarpımsal büyür. Beş filtre grubunuz ve her grupta dört seçenek varsa, her gruptan en fazla bir seçim yapılabildiği durumda bile 5'in 5. kuvveti, yani 3.125 farklı adres oluşur. Grup içinde çoklu seçime izin verdiğiniz anda grup başına 16 durum çıkar ve toplam bir milyonu aşar.

Bu adreslerin neredeyse tamamı birbirinin alt kümesi olan içerikler döndürür. Tarayıcı bütçesi bu kombinasyonlarda erirken asıl kategori ve ürün sayfaları geride kalır. Filtre durumunu URL'de tutmak paylaşım ve geri tuşu için gerekli, ama bu sayfalar site haritasında yer almamalı ve indekslenmeye açılmamalı. Değer üreten birkaç kombinasyon varsa (çok aranan bir marka ve beden birleşimi gibi) onları elle seçip ayrı birer kategori sayfası haline getirin.

Dikkat edilecek son birkaç nokta

Panel açıkken arka planın kaydırılmasını kilitleyin, yoksa kullanıcı paneli sürüklemeye çalışırken listeyi kaydırır. Seçili filtreler panel kapandıktan sonra da liste başında etiket olarak görünsün, tek tek kaldırılabilsin. Yatay moda geçişte panel yüksekliği ekranın tamamını kaplamasın. Ve boş sonuç durumunu tasarlayın: hangi filtrenin listeyi boşalttığını söyleyen bir mesaj, kullanıcıyı baştan başlamaktan kurtarır.