Sensorli qurilmalardagi imo-ishoralar va UX

1) Imo - ishoralar nima uchun va qachon mos keladi?

• Oldindan aytish mumkin (platforma taxminlariga mos keladi).
• Aniqlanadi (foydalanuvchi imo-ishora mavjud deb taxmin qiladi).
• Qayta aloqa (vizual/audio/taktik) bilan mustahkamlangan.
• Noto’g’ri teginish va qurilmani har xil tutishda ishonchli.

Printsiplar: avval aniq elementlar UI → so’ngra imo-ishoralar → so’ngra ilg’or yashirin imo-ishoralar. Tanqidiy harakatlar - doimo ochiq tugmalar bilan takrorlash.

2) Imo-ishoralar taksonomiyasi

Tap/Double-tap/Long-press - tanlash/qo’shimcha. menyu/kengaytirilgan harakatlar.
Swipe (shahar/vert) - harakatlarni navigatsiya qilish, olib tashlash/arxivlash, ochish.
Drag-and-drop - saralash, koʻchirish, ierarxiyani oʻzgartirish.
Pinch/Spread (zoom) - masshtab (galereyalar, xaritalar, grafiklar).
Rotate - kamdan-kam hollarda, muharrirlarda/ko’rishlarda mos keladi.
Pull-to-refresh/Release-to-action - yangilanish/ikkilamchi harakat.
Edge-swipe - tizim navigatsiyasi (orqaga/menyu), vebvyuda ehtiyot boʻling.
Multi-touch - ilg’or ssenariylar uchun 2-3 barmoqli imo-ishoralar.
System gestures - skrinshotlar, PiP, tizim «Orqaga» (Android) - mojarolarni hisobga oling.

3) Ergonomika va bosh barmoq zonalari

Thumb-zones: tegadigan zona - ekranning pastki yarmi; asosiy CTA, chip filtrlar va tablar - pastda.
Hit-target: kamida 44 × 44 pt/48 × 48 dp. Kichik elementlar uchun hit-slop qoʻshing.
Chetlardan chekinish: notoʻgʻri edge-swipe; tanqidiy interaksiyalar - chekkaga yaqin emas.
Orientatsiya: portret - andoza; landshaft - ikkita katta barmoqlar uchun optimallashtirish (ayniqsa o’yinlarda/videolarda).

4) Aniqlanish va o’qitish

Affordance: imo-ishora (yon tomonida yarim ko’rinadigan kartochka, pastki qismida sheet uchun «qalam»).
Mikro-onbording: bir martalik maslahatlar («Olib tashlash uchun olib tashlang»), obsesif emas, «Tushundim».
Sinov imo-ishorasi: namunaning birinchi koʻrinishida namoyish animatsiyasi.
Takrorlanuvchanlik: imo-ishoralar oʻxshash tarkibga ega boʻlgan barcha joylarda bir xil ishlashi kerak.

5) Teskari aloqa: vizual, taktil, tovush

Vizual: soya, parallaks, yo’nalishlarga yopishish, pull-to-refresh uchun progress-indikator.
Taktil (haptics): drag tutishda engil impuls, drop/muvaffaqiyat uchun «og’irroq».
Audio (oʻrtacha): oʻyinlarda qisqa bosish/bosish yoki sezilarli hodisalar (yutuq/xato).
Bekor qilish holatlari: destructive-svaypda vizual «qizil zona», olib tashlashdan oldin vibro-ishora.

6) Imo-ishora mojarolari va ustuvorliklar

Tanish ierarxiyasi: ichki skroll> svipp kartasi> tizim edge-back (vebda - aksincha). Gesture arena/ustuvorliklarni moslash.
Vertikal skroll vs gorizontal qoziq: 10-15 px harakatlangandan keyin bitta oʻqni blokirovka qiling.
Edge-swipe vs oʻz imo-ishoralari: tizim imo-ishoralarini ushlab qolmaslik uchun ichki tutqichni qoʻshing.
Global back-gesture (Android/iOS): kutilgan navigatsiyani buzmang - muhim harakatlarni «Orqaga» tugmasi bilan takrorlang.

7) Ssenariylar bo’yicha patternlar

7. 1 Ro’yxatlar va kartochkalar

Swipe-actions: qisqa svayp - harakatlar (ikonkalar), uzun - tezkor harakat.
Undo paradigmasi: destructive imo-ishorasidan keyin «Bekor qilish» snackbarini koʻrsating.
Drag-reorder: «ruchka» bo’yicha tortish; vertikal oʻqni oʻrnating.

7. 2 Xaritalar, galereyalar, grafiklar

Pinch-zoom + kattalashtirish uchun ikki darajali.
Inertia & bounds: elastik chegaralar, silliq inertsiya.
Grafikdagi «lupa «/nuqta tafsilotlari uchun tap-hold.

7. 3 Navigatsiya va shitlar

Bottom-sheet: qalamdan «torting» imo-ishorasi, collapsed/partial/full holati; yopish uchun swipe-down.
Tabs/Chips: progress koʻrsatgichli tablar orasidagi gorizontal qoziq.

7. 4 O’yin va «tezkor» stsenariylar

One-hand play: eng katta stavkalar/harakatlar zonasi.
Qoʻshaloq imo-ishoralar: «tiklash» sifatida qoʻshaloq sinf (tasdiqlash haptic).
Destructive chegarasi: barmogʻingizni 300 ms ga «mahkamlang» yoki bajarish uchun «qizil zona» dan oʻting.

8) Foydalanish imkoniyati (A11y)

Barcha imo-ishoralar tugmalar yoki menyu bandlari bilan takrorlanadi.
VoiceOver/TalkBack: toʻgʻri tavsiflar va fokus tartibi.
Motor accessibility: long-press muqobillari («⋮» belgisi), kattalashtirilgan teginish zonalari.
Kontrast va masshtab: imo-ishoralar harakat qilishning yagona yo’li bo’lmasligi kerak.

9) Spektakl va ishonchlilik

INP (Interaction to Next Paint) ≤ 200 ms asosiy imo-ishoralar uchun.
Touch latency: maqsad <50-100 ms birinchi javobgacha (vizual tutish/yoritish).
60 FPS: drag/scroll uchun silliqlik; harakatlanayotganda og’ir soyalar va blur o’chirib qo’ying.
Hit-testing: qopqoqlardan qoching (z-index/overflow) - tuzoqlar «siljiydi».
Tutqich testlari: oʻng/chap barmoq, katta/kichik barmoq, tik turish/transportda.

10) Web vs Native

Web/PWA: passiv tinglovchilar (’passive: true’), oʻqlarni blokirovka qilish uchun’touch-action’, keraksiz tizim imo-ishoralarini ushlashdan qoching.
iOS/Android nativ: tizim tanib olish vositalaridan (UIGestureRecognizer/Android GestureDetector), shtatdagi haptics, oldindan aytilgan «Orqaga» (Android 14 +) foydalaning.
Vebvyu: ko’priklar va xavfsiz joylar, shitlarni oldindan yopish - vebda tizim «Orqaga» ni buzmasdan.

11) Multi-tach va ilg’or imo-ishoralar

Ikkita barmoq: qulflangan zoom panoramasi; kartalarda - qo’shimcha qatlam uchun «ikki barmoq pastga» imo-ishorasi.
Uch barmoq: faqat power-users uchun; har doim alternativa bering.
Kombinatsiyalar: long-press + drag.

12) Validatsiya, telemetriya, metrika

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI: Success Rate, Misfire Rate, Undo Rate, INP, Time-to-Action, Drop-off.

13) Mahalliylashtirish va madaniy farqlar

RTL tillari: gorizontal imo-ishoralar va ikonalarni aks ettiring.
Ramzlar: «chapga oʻchirish = oʻchirish» universal emas - onbordingda tasdiqlang.
Taktik namunalar: tizim profillaridan foydalaning, ular allaqachon foydalanuvchiga tanish.

14) Xavfsizlik va xatolar

Destructive imo-ishoralari - faqat undo/tasdiqlash bilan.
Edge-sviplar tasodifan tanqidiy jarayonlarni yopmasligi kerak (to’lov/KS).
Titrashdan himoya qilish: imo-ishora boshlanishidan oldin harakat chegarasi (5-10 px).
Bloklovchi holatlarda imo-ishoralarni o’chirish (to’lov loaderi, tasdiqlash modali).

15) Sensor stollar/planshetlar uchun patternlar

Ikki qo’lli stsenariylar: boshqaruv zonalarini ajratish.
Multi-foydalanuvchi rejimi: imo-ishoralar oʻzaro ziddiyatli emas, teginish vaqtining ustuvorligi.
Yirik hit-targets: 56-64 dp; drag-operatsiyalar uchun vizual yo’naltirgichlar.

16) Antipatternlar

Faqat imo-ishora bilan (tugmasiz) yashirin tanqidiy harakatlar.
Tizim bilan ziddiyatli imo-ishoralar (edge-back, notification shade).
Vizual «to’qnashuv» va ovoz/vibro bo’lmagan Long-press.
Vertikal skroll ichida o’qli loksiz gorizontal qoziq.
«Og’ir» soyalar/blur drag → lag va FPS tushishida.
Dasturning turli qismlarida kelishilmagan imo-ishoralar.

17) Joriy etish chek-varaqasi (bosqichma-bosqich)

1. Imo-ishora xaritasi: qayerda va qaysi biri - A11y uchun muqobil.
2. Tanib olishning ustuvor yo’nalishlari: o’q loki, edge-safe zonasi, gesture-arena.
3. Fikr-mulohazalar: vizual tuzoq, haptics-profillar, animatsiyalar ≤ 200 ms.
4. Ijro: INP/60 FPS, drag/scroll’da profillash.
5. Onbording: maslahatlar va sinov imo-ishoralarini o’chirish imkoniyati bilan.
6. Telemetriya: success/misfire/undo, heatmap touch.
7. Test matritsasi: qurilmalar, zichliklar, chap/oʻng, yomon tarmoq holatlari.
8. Hujjatlar: dizayn tizimidagi imo-ishoralar bo’yicha gidlar, misollar va anti-keyslar.

18) Jami

Savodli imo - bu tez, tushunarli va ishonchli ishoradir. U maqsadga erishish yo’lini qisqartiradi, tizimli umidlarni buzmaydi va hamma uchun ochiq bo’ladi. Imo-ishoralarni dizayn tizimining bir qismi sifatida loyihalashtiring: yagona namunalar, aniq ustuvorliklar, boy fikr-mulohazalar va qat’iy ijro nazorati - shunda sensorli UX har qanday qurilmada va har qanday stsenariyda bir xil darajada yoqimli bo’ladi.