Web Sitesi Filtreleme Tasarımı Nasıl Yapılır?
Çok sayıda ürün ya da içerik barındıran bir sitede kullanıcı, aradığına ancak listeyi daraltarak ulaşabilir. Filtreler bu daraltmayı sağlar; ancak yanlış kurulduklarında kullanıcıyı boş sonuç ekranlarına sürükler ve siteden çıkmaya iter. web sitesi filtreleme tasarımı, bu nedenle yalnızca bir arayüz bileşeni değil, satın alma yolunun kendisidir. Bu yazıda filtre düzenini adım adım ele alıyoruz.
Peki web sitesi filtreleme tasarımı nasıl yapılır? Filtre seçiminden mobil davranışa kadar başlıkları inceliyoruz. Arayüz ihtiyaçlarınız için Weblike ekibine danışabilirsiniz.
web sitesi filtreleme tasarımı nedir
web sitesi filtreleme tasarımı, uzun listelerin kullanıcı tarafından belirli ölçütlere göre daraltılmasını sağlayan arayüzün planlanmasıdır. Ürün listeleri ve arşivlerde kullanılır.
Neden Gerekli
Yüzlerce sonucu tek tek incelemek mümkün değildir. Filtre, kullanıcıyı kendi ihtiyacına yaklaştırır.
Dönüşüme Etkisi
Doğru kurulan filtre satın alma yolunu kısaltır. Dönüşüm optimizasyonu bu etkiyi ele alır.
Hangi Sitelerde
Ürün katalogları, ilan siteleri, blog arşivleri ve belge listeleri filtre gerektirir. Kısa listelerde gerek yoktur.
Filtre Seçimi
Hangi ölçütlerin sunulacağı ürün yapısına göre belirlenir. Her alan filtre olmaz.
Gerçek İhtiyaç
Kullanıcının gerçekten kullandığı ölçütler seçilmelidir. Bu bilgi davranış verisinden çıkarılır.
Veriye Bakmak
Hangi filtrelerin kullanıldığı ölçülmelidir. Hiç kullanılmayan ölçütler listeden çıkarılabilir.
Fazla Filtre Sorunu
Çok sayıda filtre kullanıcıyı kararsız bırakır. Liste sınırlı tutulmalıdır.
Öncelik Sıralaması
En çok kullanılan filtreler üstte yer almalıdır. Alta inen filtre fark edilmez.
Filtre Türleri
Onay kutusu, tek seçim, aralık ve renk seçimi en yaygın türlerdir. Her ölçüt için uygun tür seçilir.
Çoklu Seçim
Aynı filtre içinde birden fazla seçeneğin işaretlenebilmesi gerekir. Tek seçim kısıtlayıcı olur.
Fiyat Aralığı
Fiyat filtresi en çok kullanılan ölçütlerden biridir. Kullanımının kolay olması gerekir.
Aralık Girdileri
Kaydırıcı kullanımı mobilde zor olabilir. Elle değer girme seçeneği de sunulmalıdır.
Sonuç Sayısını Göstermek
Her filtre seçeneğinin yanında kaç sonuç bulunduğu gösterilmelidir. Bu bilgi boş ekranı önler.
Boş Sonuç Riski
Sonuç üretmeyen seçeneklerin pasif gösterilmesi gerekir. Tıklanıp boş ekranla karşılaşmak kötü bir deneyimdir.
Boş Durum
Sonuç kalmadığında yönlendirme yapılmalıdır. Boş durum tasarımı bu konuyu ele alır.
Anlık Güncelleme
Filtre seçildiğinde listenin hemen güncellenmesi beklenir. Ek bir butona basma ihtiyacı akışı keser.
Uygula Butonu
Mobilde toplu uygulama daha iyi çalışabilir. Bu karar cihaza göre verilmelidir.
Seçili Filtreleri Göstermek
Hangi filtrelerin aktif olduğu listenin üstünde görünmelidir. Gizli kalan filtre kafa karıştırır.
Tek Tek Kaldırma
Her filtrenin ayrı ayrı kaldırılabilmesi gerekir. Tümünü temizlemek tek seçenek olmamalıdır.
Tümünü Temizle
Hızlı sıfırlama için ayrı bir bağlantı bulunmalıdır. Bu seçenek belirgin olmalıdır.
Sıralama ile Fark
Sıralama ve filtreleme farklı işlevlerdir. İkisinin karıştırılmaması gerekir.
Sıralama Seçenekleri
Fiyat, yenilik ve popülerlik gibi seçenekler ayrı sunulmalıdır. Varsayılan sıralama düşünülerek belirlenir.
Mobil Davranış
Küçük ekranda filtreler genelde ayrı bir panelde açılır. Bu panelin kapatılması kolay olmalıdır.
Mobil Yerleşim
Filtre butonunun erişilebilir konumda olması gerekir. Sayfa kaydırıldığında da görünür kalması tercih edilir.
Dokunma Alanı
Onay kutularının parmakla rahat işaretlenebilmesi gerekir. Küçük hedefler hata üretir.
Kaydırma Konumu
Filtre uygulandıktan sonra kullanıcının konumunu kaybetmemesi gerekir. Başa dönen sayfa rahatsız eder.
Yükleme Göstergesi
Sonuçlar güncellenirken bilgi verilmelidir. Sessiz bekleme, filtrenin çalışmadığı izlenimi yaratır.
Hız
Filtre uygulandığında sonuçların hızlı dönmesi gerekir. Bekleme, filtre kullanımını azaltır.
Performans Etkisi
Her seçimde tüm sayfanın yenilenmesi yavaşlık üretir. Açılış hızı bu etkiyi anlatır.
Adres Yapısı
Uygulanan filtrenin adrese yansıması paylaşımı mümkün kılar. Bu özellik sık atlanır.
Paylaşılabilir Bağlantı
Kullanıcı filtrelenmiş listeyi paylaşabilmelidir. Aynı şekilde geri tuşu da çalışmalıdır.
Geri Tuşu Davranışı
Tarayıcı geri tuşunun önceki filtreye dönmesi beklenir. Aksi davranış kullanıcıyı siteden çıkarır.
Arama Motoru Tarafı
Filtre adresleri çok sayıda benzer sayfa üretebilir. Bu durum tarama bütçesini tüketir.
İndeksleme Kararı
Hangi filtre sayfalarının taranacağı belirlenmelidir. Google Search Console bu durumu izlemenizi sağlar.
Adres Düzeni
Parametre yapısının düzenli olması gerekir. URL yapısı bu düzeni anlatır.
Kategori Sayfaları
Sık kullanılan filtre birleşimleri için ayrı sayfa oluşturulabilir. Bu yaklaşım görünürlük sağlar.
Arama ile Bütünlük
Filtre ve site içi arama birlikte çalışmalıdır. Arama kutusu tasarımı bu ilişkiyi ele alır.
Veri Kalitesi
Filtrelerin çalışması ürün bilgilerinin eksiksiz olmasına bağlıdır. Boş alan ürünü listeden düşürür.
Eksik Veri Sorunu
Özelliği girilmemiş ürünler filtrelemede görünmez. Bu kayıp fark edilmez.
Veri Düzeni
Ürün özelliklerinin standart biçimde girilmesi gerekir. Serbest metin filtrelemeyi bozar.
Erişilebilirlik
Filtrelerin klavyeyle kullanılabilir olması gerekir. Erişilebilirlik bu gerekliliği ele alır.
Ekran Okuyucu
Sonuç sayısındaki değişimin bildirilmesi beklenir. Sessiz güncelleme karışıklık üretir.
Etiketleme
Her filtre grubunun açık bir başlığı olmalıdır. Başlıksız liste anlaşılmaz.
Test Etmek
Filtre akışı gerçek kullanıcılarla denenmelidir. Belirli bir ürünü bulma görevi yeterlidir.
Ölçüm
Filtre kullanım oranı ve sonrasındaki dönüşüm izlenmelidir. Kullanılmayan filtreler kaldırılabilir.
Düzenli Sadeleştirme
Zamanla eklenen filtreler listeyi şişirir. Bu liste dönemsel olarak gözden geçirilmelidir.
Sık Yapılan Hata
Her ürün özelliğini filtreye dönüştürmek en yaygın hatadır. Kalabalık filtre listesi kullanıcıyı karar veremez hale getirir.
Varsayılan Açık Filtreler
Bazı filtre gruplarının açık, bazılarının kapalı başlaması gerekir. En çok kullanılanlar açık bırakılmalıdır.
Çok Seçenekli Gruplar
Onlarca seçenek içeren filtrelerde grup içi arama sunulmalıdır. Uzun liste taranamaz hale gelir.
Stok Durumu Filtresi
Tükenmiş ürünlerin gizlenebilmesi beklenir. Satın alınamayan ürünler listeyi gereksiz uzatır.
Filtre Adlandırma
Filtre başlıklarının kullanıcının diliyle yazılması gerekir. Teknik terimler ve kısaltmalar anlaşılmaz kalır.
web sitesi filtreleme tasarımı Özeti
Sınırlı filtre sayısı, sonuç adedinin gösterilmesi, seçili filtrelerin görünürlüğü, hızlı güncelleme ve temiz ürün verisi filtrelemeyi işlevli kılar.
Ürün katalogları, ilan siteleri ve geniş arşivlerde gereklidir. Kısa listelerde ihtiyaç yoktur.
Sınırlı tutulmalıdır. Çok sayıda filtre kullanıcıyı kararsız bırakır ve listeyi karmaşıklaştırır.
Kullanıcının gerçekten kullandığı ölçütler seçilmelidir. Bu bilgi davranış verisinden çıkarılır.
Gösterilmelidir. Her seçeneğin yanında kaç sonuç olduğunun bilinmesi boş ekranla karşılaşmayı önler.
Listenin üstünde görünür olmalı ve her biri tek tek kaldırılabilmelidir.
Ayrı bir panelde açılması yaygındır. Panelin kapatılması kolay, dokunma alanları geniş olmalıdır.
Yansımalıdır. Böylece filtrelenmiş liste paylaşılabilir ve tarayıcı geri tuşu doğru çalışır.
Hangi birleşimlerin taranacağı bilinçli olarak belirlenmelidir. Kontrolsüz yapı tarama bütçesini tüketir.
Genelde ürün özelliklerinin eksik girilmesinden kaynaklanır. Veri düzeni standart olmalıdır.
Filtreleme, uzun bir listeyi kullanıcının kendi ihtiyacına indirgeyen araçtır. web sitesi filtreleme tasarımı için filtre sayısını sınırlı tutmak, sıralamayı kullanım verisine dayandırmak, sonuç adetlerini göstermek, seçili filtreleri görünür kılmak, adres yapısını düzenli kurmak ve ürün verisini standartlaştırmak gerekir. Liste tarafını genişletmek için sayfalama yapısı yazımızı inceleyebilirsiniz.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
