Modal oynalar, tostlar va maslahatlar: qachon nimani ishlatish kerak
Amaliyot3 daqInnovialabs tahririyati
Qisqacha
Patternni to‘xtatish darajasiga qarab tanlang: modal oyna — foydalanuvchi qaror qilmasdan davom etib bo‘lmaganda, tost — ishni to‘xtatmaydigan qisqa tasdiq uchun, maslahat — kursor yoki fokusda ixtiyoriy tushuntirish uchun.
Qisqa javob
Uchala pattern ham interfeys ustida nimanidir ko‘rsatadi, lekin ular foydalanuvchini qanchalik kuchli to‘xtatishi bilan farq qiladi:
- Modal oyna interfeysning qolgan qismini bloklaydi. Foydalanuvchi javobisiz davom etib bo‘lmaganda yoki xato qimmatga tushadigan bo‘lsa ishlating.
- Tost (toast, snackbar) bir necha soniyaga paydo bo‘ladi va ishlashga xalaqit bermaydi. Tasdiqlar uchun mos: «Saqlandi», «Xat yuborildi».
- Maslahat (tooltip) kursor olib borilganda yoki fokusda element haqida qisqa tushuntirish beradi. Ma’lumot foydali, lekin majburiy bo‘lmaganda kerak.
Qoida: pattern qanchalik kuchli to‘xtatsa, undan shunchalik kam foydalanish kerak.
Shoshilinchlik va to‘xtatish bo‘yicha taqqoslash
| Pattern | To‘xtatish | Qachon o‘rinli | Qachon emas |
|---|---|---|---|
| Modal oyna | Yuqori | O‘chirishni tasdiqlash, qisqa majburiy forma | Reklama, yangiliklar, uzun formalar |
| Tost | Past | Harakat natijasi, oxirgi qadamni bekor qilish | Kritik xatolar, muhim ma’lumotlar |
| Maslahat | Minimal | Ikonka nomi, atamani tushuntirish | Majburiy ko‘rsatmalar, validatsiya xatolari |
| Inline-xabar | Yo‘q | Formadagi xatolar, kontekstdagi holatlar | Global hodisalar |
| Banner | Past | Uzoq davom etadigan tizim holati | Bir martalik tasdiqlar |
Inline-xabarlar va bannerlar ko‘pincha modal oynalarga yaxshiroq muqobil bo‘ladi: ular kontentni yopmaydi va foydalanuvchi kutgan joyda qoladi.
Modal oynalar uchun qoidalar
- Bitta vazifa. Modal oyna sahifa emas. Ichida tablar va aylantirish paydo bo‘lsa, alohida ekran qiling.
- Tushunarli tugmalar. «OK / Bekor qilish» o‘rniga harakatni yozing: «Loyihani o‘chirish» va «Qoldirish».
- Yopish. Xochcha, Esc tugmasi va buzmaydigan oynalar uchun fonga bosish. Saqlanmagan ma’lumotli oynalarda yopishdan oldin so‘rang.
- Zanjirsiz. Modal oyna ustidagi modal oyna chalkashtiradi. Ssenariyni qayta tuzing.
- Sahifa yuklanganda emas. Foydalanuvchi hali hech narsa qilmasdan paydo bo‘lgan oyna to‘siq sifatida qabul qilinadi.
Tostlar uchun qoidalar
- Ko‘rsatish vaqti matn uzunligiga bog‘liq: qisqa xabarga bir necha soniya yetadi, uzunrog‘iga ko‘proq kerak. Kursor va fokusda pauza — majburiy.
- Qaytariladigan amallar uchun tostdagi «Bekor qilish» harakati tasdiqlovchi modal oynadan yaxshiroq.
- Stek. Yangi tostlarni bitta hududga joylang, bir vaqtda ko‘rinadiganlar sonini cheklang va takrorlanuvchi xabarlarni birlashtiring.
- Joylashuv doimiy bo‘lsin: asosiy tugmalar va mobil navigatsiyani yopmaydigan bitta burchak yoki chet.
- Muhim narsa uchun emas. Agar xabarni o‘tkazib yuborish mumkin bo‘lmasa, tost mos emas: foydalanuvchi boshqa joyga qarab turganida u yo‘qoladi.
Maslahatlar uchun qoidalar
- Kursor olib borilganda va klaviatura fokusida ko‘rsating, Esc bilan yashiring.
- Matn — bitta qisqa ibora. Ichida havola va tugmalar bo‘lmasin: ularga yetib borish qiyin.
- Sensorli ekranlarda hover yo‘q. Muhim tushuntirishni yonidagi ko‘rinadigan matnga chiqaring yoki bosilganda ochiladigan alohida yordam ikonkasini qiling.
- Paydo bo‘lishdan oldingi kichik kechikish sichqoncha harakatida miltillashdan himoya qiladi.
Foydalanish qulayligi (accessibility)
Modal oynalar:
- Ochilganda fokus oyna ichiga o‘tadi, yopilganda uni chaqirgan elementga qaytadi.
- Focus trap: Tab oyna ostidagi kontentga chiqib ketmasligi kerak.
role="dialog"(kritik tasdiqlar uchunalertdialog),aria-modal="true"vaaria-labelledbyorqali sarlavha kerak.
showModal() bilan ishlatiladigan nativ <dialog> elementi bu ishning katta qismini o‘z zimmasiga oladi:
<dialog id="confirm" aria-labelledby="confirm-title">
<h2 id="confirm-title">Loyihani o‘chirasizmi?</h2>
<form method="dialog">
<button value="cancel">Qoldirish</button>
<button value="delete">O‘chirish</button>
</form>
</dialog>
Tostlarni live-hududga (role="status" yoki aria-live="polite") joylang, shunda ekran o‘quvchi fokusni tortib olmasdan xabarni o‘qiydi. Xatolar uchun role="alert", lekin tejamkorlik bilan.
Maslahatlarni element bilan aria-describedby orqali bog‘lang, faqat ikonkadan iborat boshqaruvlarga esa qo‘shimcha aria-label bering.
Batafsil shablonlar WAI-ARIA Authoring Practices Guide’da bor.
Foydalanuvchilarni bezor qiladigan xatolar
- Sayt ochilgandan bir soniya o‘tib obuna yoki chegirma haqidagi modal oyna.
- Har bir mayda harakatga tasdiqlash oynasi — odamlar o‘qimasdan «Ha» ni bosa boshlaydi.
- O‘qib ulgurmasdan yo‘qoladigan xato tosti.
- Majburiy maydon tushuntirilgan yagona joy sifatida maslahat oynasi.
- Topish qiyin yoki telefonda bosish qiyin bo‘lgan yopish tugmasi.
- Bir-birini va interfeys tugmalarini yopib qo‘yadigan bir nechta tost.