Qidiruv va filtrlar UX’i: qulay katalogni qanday loyihalash

Katalogni nima qulay qiladi

Inson katalogga ikki strategiyadan biri bilan keladi: nima izlayotganini biladi va so‘rov kiritadi yoki filtrlar orqali assortimentni toraytirib tanlaydi. Yaxshi interfeys ikkalasini ham qo‘llab-quvvatlaydi va ularni birlashtirishga imkon beradi.

Asosiy tamoyillar:

• qidiruv darhol ko‘rinadi va noaniqliklarni kechiradi;
• filtrlar odamlar haqiqatan tanlaydigan xususiyatlarga asoslanadi;
• tanlangan shartlar doim ko‘rinadi va oson olib tashlanadi;
• har qanday natija, hatto bo‘sh bo‘lsa ham, keyingi qadamni taklif qiladi.

Qidiruv maydoni

• Joylashuv. Sarlavhada, ko‘zga tashlanadigan joyda, barcha sahifalarda bir xil. Assortimenti katta do‘konda maydonni ikonka ortiga yashirmasdan to‘liq ko‘rsatgan ma’qul.
• Kenglik. Maydon odatiy so‘rovni qirqmasdan sig‘dirishi kerak.
• Maydon ichidagi maslahat — shunchaki «Qidiruv» emas, so‘rov namunasi («Masalan, yugurish uchun krossovkalar»).
• Tugma va Enter. Klavisha va tugma orqali yuborish; mobilda type="search" yoki enterkeyhint="search" orqali mos klaviatura.

Avtoto‘ldirish

Yozish paytidagi takliflar vaqtni tejaydi va insonga katalog lug‘atini o‘rgatadi. Ularni guruhlarga ajrating:

• so‘rovlar — mashhur iboralar;
• kategoriyalar — «Poyabzal bo‘limidagi krossovkalar»;
• mahsulotlar — tezkor o‘tish uchun miniatyura va narx bilan.

Qoidalar: mos keladigan qismni ajratib ko‘rsating, strelkalar va Enter bilan navigatsiyani qo‘llab-quvvatlang, ro‘yxatni juda uzun qilmang va kiritilgan matnni foydalanuvchi harakatisiz almashtirmang. Foydalanish qulayligi uchun WAI-ARIA Authoring Practices’dagi combobox patternidan foydalaning.

Xatolar, sinonimlar va klaviatura tartibi

Odamlar xato qiladi, qisqartmalar bilan va turli tillarda yozadi. Qidiruv buni hisobga olishi kerak:

• xatolar uchun noaniq moslik (fuzzy matching);
• sinonimlar va so‘zlashuv nomlari («noutbuk» — «laptop»);
• noto‘g‘ri klaviatura tartibi — kirill va lotin o‘rtasida almashadigan foydalanuvchilarda tez-tez uchraydi;
• transliteratsiya va artikul bo‘yicha qidiruv.

Agar so‘rov avtomatik tuzatilgan bo‘lsa, buni ayting: «"krossovka" uchun natijalar ko‘rsatildi. "krosovka" ni izlash?»

Bo‘sh natija

«Hech narsa topilmadi» sahifasi — katalogning eng xavfli joyi. Boshi berk ko‘cha o‘rniga chiqish yo‘lini bering:

• aynan nima izlanganini ko‘rsating va tuzatish taklif qiling;
• filtrlarning bir qismini olib tashlashni taklif qiling va qaysi biri natijani eng ko‘p toraytirayotganini ko‘rsating;
• mashhur kategoriyalar yoki o‘xshash mahsulotlarni ko‘rsating;
• marketpleyslarda mahsulot paydo bo‘lishiga obunani taklif qiling.

Nol natijaga olib keladigan filtrlarni oldindan nofaol qilib belgilash yoki yonida mahsulotlar sonini ko‘rsatish yaxshiroq.

Fasetlar

Fasetli filtrlar — bu xususiyatlar guruhlari: brend, o‘lcham, narx, rang, mavjudlik.

Maslahatlar:

• Fasetlar tartibi — hamma joyda bir xil emas, shu kategoriyada tanlash uchun muhimligiga qarab.
• Uzun ro‘yxatlarni «Hammasini ko‘rsatish» tugmasi bilan bir nechta qiymatgacha yig‘ing.
• Filtr darhol qo‘llanadimi yoki «Ko‘rsatish» tugmasi bilanmi — hal qiling. Desktopda odatda darhol, mobil pardada — natijalar soni ko‘rsatilgan tugma bilan.
• Filtrlarni URL’da saqlang, shunda natijani ulashish va «Orqaga» tugmasi bilan qaytish mumkin bo‘ladi.

Tanlangan filtrlar chiplari

Natijalar ustida tanlangan qiymatlar chiplarini ko‘rsating: «Nike ×», «500 000 so‘mgacha ×». Ular «nega aynan shuni ko‘ryapman» degan savolga javob beradi va shartni bir bosishda olib tashlashga imkon beradi. Bir nechta filtr tanlanganda «Hammasini tozalash» qo‘shing.

Mobildagi filtrlar

• Tanlangan qiymatlar soni ko‘rsatilgan «Filtrlar» tugmasi — saralash yonida, aylantirishda mahkamlangan.
• Filtrlar to‘liq ekranli pardada yoki bottom sheet’da ochiladi.
• Pardaning pastida mahkamlangan «N ta mahsulotni ko‘rsatish» tugmasi.
• Eng ko‘p ishlatiladigan filtrlarni natijalar ustidagi tezkor filtrlarning gorizontal qatoriga chiqarish mumkin.

Saralash

Saralash va filtrlar — turli vositalar: filtr toraytiradi, saralash tartiblaydi. Tushunarli variantlarni taklif qiling: mashhurlik bo‘yicha, avval arzonlari, avval qimmatlari, yangilari, reyting bo‘yicha. Joriy variant ko‘rinib turishi, tanlov esa filtrlar o‘zgarganda saqlanishi kerak.