Filter va saralash (sort) — e-commerce, katalog, blog va boshqa katta ro'yxatlar uchun zarur UX elementlari. Foydalanuvchi 1000 ta mahsulot ichidan kerakli birini topishi uchun filter va sort kerak. Yaxshi dizayn filter konversiyani 40%+ oshiradi. Yomon esa — foydalanuvchini sayt'dan ketkazib yuboradi.
Filter va sort farqi
Filter — natijani cheklash. \"Faqat Apple telefonlari\" yoki \"100$ dan past\". Natija soni kamayadi.
Sort — tartiblash. \"Narx oshib boruvchi\" yoki \"Eng yangi avval\". Natija soni o'zgarmaydi.
Ikkalasi alohida vazifa, lekin birga ishlatiladi.
Filter turlari
Checkbox — bir nechta variant tanlash. \"Brand: Apple, Samsung, Xiaomi\". Eng tarqalgan.
Radio — bitta variant. \"Tartib: yangi/eski/mashhur\". Sort uchun ko'p ishlatiladi.
Range slider — diapazon. \"Narx: 100-500\". Vizual jihatdan jozibali.
Color swatch — rang tanlash. Mahsulot ranglari uchun.
Dropdown — ko'p variantli list. \"Mamlakat\".
Toggle — yes/no. \"Faqat mavjud\".
Search input — qidiruv field.
Filter joylashishi
Sidebar (chap tomonda) — eng tarqalgan. Desktop ekran yetadi.
Top bar — yuqorida horizontal. Sahifa joyini tejaydi.
Mobile drawer — mobile'da slide-in panel.
Modal — kichik ekranlarda overlay filter.
Sort joylashishi
Top right — natija ro'yxati ustida o'ng tomonda. Dropdown bilan.
Yoki tab format: \"Eng yangi | Narx | Mashhur\".
Filter ko'rsatilish strategiyasi
Faqat tegishli filter'larni ko'rsatish. \"Telefon\" kategoriya'da — brand, narx, ekran o'lcham filter. \"Kitob\" kategoriya'da — janr, muallif, yil.
Conditional filters: foydalanuvchi \"Apple\" filterini tanlasa, qolgan filter'lar Apple mahsulotlariga moslashishi.
Active filters ko'rsatish
Foydalanuvchi qaysi filter'lar aktiv ekanini darrov ko'rishi shart. \"Aktiv filter'lar\" tag'lar bilan ko'rsatish — har biri \"X\" bilan o'chirish mumkin.
\"Hammasini o'chirish\" tugmasi — barcha filter'larni reset qilish.
Natija counter
Har filter tanlangach — \"X natija topildi\" darhol yangilanish. Foydalanuvchi filter'ning ta'sirini ko'radi.
Real-time vs apply tugma: real-time UX yaxshi (har click'da natija yangilanadi). Apply — server load kam.
Filter natija yo'q
Filter natijasi 0 ta bo'lsa — clear empty state. \"Sizning filter bilan natija topilmadi\".
Alternative tavsiyalar: \"Filter'larni o'zgartiring\", \"Boshqa kategoriyani ko'ring\", popular filter'lar tavsiya.
Mobile filter UX
Mobile'da filter sidebar ishlamaydi — joy kam. Eng yaxshi yondashuv: bottom drawer yoki full-screen modal.
\"Filter\" tugmasi yuqori o'ngda. Bosilganda full-screen ochiladi. Filter tanlash, \"Apply\" tugma bilan ishga tushirish.
Sort odatda dropdown — mobile'da ham.
URL state
Filter va sort URL'ga saqlanishi shart. ?brand=apple&sort=price-asc. Foydalanuvchi link share qilsa, boshqa odam ham bir xil filter bilan ko'radi.
Browser back tugmasi — oldingi filter holatga qaytishi.
Performance
Filter o'zgarganda — sahifa yangidan yuklanmasin. AJAX bilan natijalar yangilash. Tezroq UX.
Backend: indexed queries. ElasticSearch yoki Algolia katta katalog uchun.
SEO va filter
Filter URL'lar duplicate content keltirishi mumkin. ?brand=apple va ?brand=apple&color=red — alohida URL.
Yechim: canonical asosiy kategoriya'ga. Yoki noindex filter sahifalarga.
Accessibility
Filter keyboard navigation. Tab bilan har filter'ga o'tish. Space/Enter bilan tanlash.
aria-label, aria-checked. Screen reader bilishi shart.
Common filter xato
1. Juda ko'p filter — foydalanuvchi adashadi.
2. Conditional filter yo'q — filter natijasi yo'q (\"Apple + Samsung brand\" — imkonsiz).
3. Active filter ko'rsatilmaydi.
4. Mobile'da sidebar — buzilgan.
5. URL state yo'q — share qilish mumkin emas.
6. Slow performance — sekin yangilanish.
Faceted search
Faceted search — filter'ning kengaytirilgan ko'rinishi. Har filter qancha natija beradi ham ko'rsatadi.
\"Brand: Apple (45), Samsung (32), Xiaomi (28)\". Foydalanuvchi natija sonini darrov ko'radi.
Filter tools
Vue.js, React'da kichik komponent. WordPress: WooCommerce filter plugin (Advanced AJAX Product Filter).
Algolia, ElasticSearch — backend.
A/B test filter
Test elementlari: filter joylashishi (sidebar vs top), filter turi (checkbox vs dropdown), real-time vs apply.
E-commerce konversiya ta'siri: 20-40% farq mumkin.
Sayt.uz va filter
Sayt.uz hosting va domain saytida filter kam (mahsulot katalogi katta emas).
Blog'da filter bor: kategoriya (SEO, Hosting, Domen, Website, Security, SSL). Yon panelda checkbox bilan.
Sort: \"Yangi avval\" yoki \"Mashhur\". Dropdown bilan.
URL state: ?category=seo&sort=popular. Share oson.
Mobile: filter accordion ostida, sort dropdown bilan yuqorida.
Natija: foydalanuvchi blog kategoriyalar orqali to'g'ridan-to'g'ri navigatsiya qiladi, pages per session 2.8.