ჟესტები და UX სენსორულ მოწყობილობებზე

1) რატომ არის ჟესტები სათანადო?

• პროგნოზირებადი (შეესაბამება პლატფორმის მოლოდინს).
• ნაპოვნია (მომხმარებელი აცნობიერებს, რომ ჟესტი ხელმისაწვდომია).
• მხარს უჭერს უკუკავშირს (ვიზუალური/აუდიო/ტაქტილური).
• საიმედოა არასწორი შეხებით და მოწყობილობის სხვადასხვა დაჭერით.

პრინციპები: ჯერ UI- ს აშკარა ელემენტები, შემდეგ ჟესტები, შემდეგ კი მოწინავე ფარული ჟესტები. კრიტიკული მოქმედებები ყოველთვის არის მკაფიო ღილაკების დუბლირება.

2) ჟესტების ტაქსონომია

Tap/Double-tap/Long-press - არჩევანი/დამატებითი მენიუ/გაფართოებული მოქმედებები.
Swipe (მთები/vert.) - ნავიგაცია, მოცილება/არქივირება, მოქმედების გამჟღავნება.
Drag-and-drop - დახარისხება, გადაცემა, იერარქიის ცვლილება.
Pinch/Spread (zoom) - მასშტაბები (გალერეები, რუქები, გრაფიკა).
Rotate - იშვიათად, შესაფერისია რედაქტორებში/შეხედულებებში.
Pull to refresh/Release-to-action - განახლება/მეორადი მოქმედება.
Edge-swipe - სისტემური ნავიგაცია (უკან/მენიუ), ფრთხილად ვებვერში.
Multi-touch - ჟესტები 2-3 თითით მოწინავე სცენარებისთვის.
სისტემა gestures - ეკრანის კადრები, PiP, სისტემური „უკან“ (Android) - გაითვალისწინეთ კონფლიქტები.

3) ერგონომიკა და თითის ზონები

Thumb-zones: ხელმისაწვდომი ზონა ეკრანის ქვედა ნახევარია; ძირითადი CTA, ჩიპის ფილტრები და ჩანართები ქვემოთ მოცემულია.
Hit-target: მინიმუმ 44 × 44 pt/48 × 48 dp. დაამატეთ hit-slop (უხილავი რძის ზონა) მცირე ელემენტებისთვის.
ზღვარზე გადასვლა: შეამცირეთ ყალბი edge-swipe; კრიტიკული არასტაბილურობა არ არის ახლოს ზღვართან.
ორიენტაცია: პორტრეტი - ნაგულისხმევი; ლანდშაფტი ოპტიმიზაციაა ორი თითისთვის (განსაკუთრებით თამაშებში/ვიდეო).

4) გამოვლენა და სწავლა

Affordance: ჟესტის მინიშნებები (ნახევრად ხილული ბარათი გვერდიდან, „სახელური“ ქვემოთ sheet).
მიკრო-ონბორდინგი: ერთჯერადი მინიშნებები („მოხარშეთ მოსაშორებლად“), არ არის შეპყრობილი, „ესმის“.
საცდელი ჟესტი: სადემონსტრაციო ანიმაცია ნიმუშის პირველი გამოჩენის დროს.
განმეორება: ჟესტები უნდა მუშაობდეს თანაბრად ყველა ადგილას მსგავსი შინაარსით.

5) უკუკავშირი: ვიზუალური, ტაქტიკური, ხმა

ვიზუალური: ჩრდილი, პარალაქსი, სახელმძღვანელოების ჩამოსხმა, წინსვლის ინდიკატორი.
ტაქტიკური (ბედნიერი): მსუბუქი იმპულსი დრაკონის დაჭერისას, უფრო „მძიმე“ - დროპის/წარმატების დროს.
აუდიო (ზომიერად): მოკლე კლიშეები/დარტყმები თამაშებში ან ხელშესახები მოვლენები (მოგება/შეცდომა).
გაუქმების პირობები: ვიზუალური „წითელი ზონა“ destructive-swaype, ვიბრაციული მინიშნება მოხსნის წინ.

6) ჟესტების კონფლიქტი და პრიორიტეტები

ამოცნობის იერარქია: შიდა skroll> swipa ბარათი> სისტემური edge-back (ვებში - პირიქით). პარამეტრები gesture-arena/პრიორიტეტები.
ვერტიკალური ფრაგმენტი ჰორიზონტალური საყრდენი: დაბლოკეთ ერთი ღერძი 10-15 px მოძრაობის შემდეგ.
Edge-swipe საკუთარი ჟესტები: დაამატეთ შიდა დალაგება ან „სახელურის“ ჟესტები ისე, რომ არ შეარჩიოთ სისტემური.
გლობალური ჩაკეტვა (Android/iOS): ნუ დაარღვევთ მოსალოდნელ ნავიგაციას - მნიშვნელოვანი მოქმედებები დუბლირებულია უკან ღილაკზე.

7) ნიმუშები სცენარების მიხედვით

7. 1 სიები და ბარათები

Swipe actions: მოკლე swayp - მოქმედების მინიშნება (ხატები), გრძელი - მყისიერი მოქმედება.
Undo პარადიგმა: dectructive ჟესტის შემდეგ, აჩვენეთ snackbar „გაუქმება“.
Drag-reorder: „სახელურის“ გადაღება; ჩაწერეთ ვერტიკალური ღერძი.

7. 2 რუკები, გალერეები, გრაფიკა

Pinch-zoom + ორმაგი წევის მასშტაბები.
Inertia & bounds: ელასტიური საზღვრები, გლუვი ინერცია.
Tap-hold „lupa „/წერტილის ნაწილები გრაფიკზე.

7. 3 ნავიგაცია და სამკერვალო

Bottom sheet: სახელურიდან „ოფლის“ ჟესტი, კოლაფსირებული/ნაწილობრივი/სრული მდგომარეობა; დახურვისთვის swipe down.
Tabs/Chips: ჰორიზონტალური სვიპი დეპოზიტებსა და პროგრესის ინდიკატორს შორის.

7. 4 სათამაშო და სწრაფი სკრიპტები

One-hand play: დიდი განაკვეთები/მოქმედებები ქვედა კიდეზე.
ორმაგი ჟესტი: ორმაგი წევა, როგორც „განაკვეთის გამეორება“ (ჰიპური დადასტურება).
ბარიერი destructive: „დააფიქსირეთ“ თითი 300 ms ან გაიარეთ „წითელი ზონა“.

8) წვდომა (A11y)

ყველა ჟესტი დუბლირებულია ღილაკებით ან მენიუს წერტილებით.
VoiceOver/TalkBack: სწორი აღწერილობები და ფოკუსის რიგი.
Motor accessibility: long-press- ის ალტერნატივა (ხატი „ხატი“), გაზრდილი შეხების ზონები.
კონტრასტი და მასშტაბი: ჟესტები არ უნდა იყოს მოქმედებისკენ მიმავალი ერთადერთი გზა.

9) შესრულება და საიმედოობა

INP (შემდეგი ხაზი) 200 ms ძირითადი ჟესტებისთვის.
Touch latency: მიზანი <50-100 ms პირველ პასუხამდე (ვიზუალური დაჭერა/განათება).
60 FPS: გლუვი drag/scroll- ისთვის; გამორთეთ მძიმე ჩრდილები და ბლური მოძრაობისას.
Hit-testing: თავიდან აიცილეთ ჭერი (z-index/overflow) - ხაფანგები „დაუცველია“.
ტესტები საკმარისია: მარჯვენა/მარცხენა, დიდი/პატარა თითი, იდგა/ტრანსპორტში.

10) Web vs Native

Web/PWA: პასიური მსმენელები ('passive: true') დასაკეტად, ღერძების დაბლოკვის 'მიზნით, თავიდან აიცილეთ სისტემური ჟესტების დაჭერა საჭიროების გარეშე.
iOS/Android nation: გამოიყენეთ სისტემის ამოცნობა (UIGesturEcognizer/Android GestureDetector), სტანდარტული haptics, რომელიც პროგნოზირებულია „უკან“ (Android 14 +).
ვებვიუ: ხიდები და უსაფრთხო ზონები, წინამორბედი სკამების დახურვა - ვებში, სისტემის „უკან“ გატეხვის გარეშე.

11) მულტფილმები და მოწინავე ჟესტები

ორი თითი: პანორამაცია დაბლოკილი zoom- ით; რუქებზე - „ორი თითის ქვემოთ“ ჟესტი, ფენის ფენა.
სამი თითი: მხოლოდ ძალაუფლების მოყვარულთათვის; ყოველთვის მოდით ალტერნატივა.
კომბინაციები: გრძელი პრესა + დრაგი დიაპაზონის/ჯგუფური გადაადგილების შესარჩევად.

12) ვალიდაცია, ტელემეტრია, მეტრიკა

События: `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) ლოკალიზაცია და კულტურული განსხვავებები

RTL ენები: ჰორიზონტალური ჟესტები და ხატები.
სიმბოლიზმი: „მარცხენა მხარეს = წაშლა“ არ არის უნივერსალური - დაადასტურა ონბორდინგში.
ტაქტიკური ნიმუშები: გამოიყენეთ სისტემური პროფილები, ისინი უკვე იცნობენ მომხმარებელს.

14) უსაფრთხოება და შეცდომები

Destructive ჟესტები - მხოლოდ undo/დადასტურებით.
Edge swips შემთხვევით არ უნდა დაიხუროს კრიტიკული პროცესები (გადახდა/CCC).
ხვრელისგან დაცვა: მოძრაობის ბარიერი (5-10 px) ჟესტის დაწყებამდე.
ჟესტების გამორთვა დაბლოკვის პირობებში (გადახდის ლაადერი, მოდელის დადასტურება).

15) სენსორული მაგიდები/ტაბლეტები

ორმაგი სახელმძღვანელო სცენარები: საკონტროლო ზონების გამიჯვნა.
მულტიპლიკაციური რეჟიმი: ჟესტები არ ეწინააღმდეგება, პრიორიტეტი შეხების დროს.
დიდი ჰიტ-ტარგეტები: 56-64 დპ; ვიზუალური სახელმძღვანელო დრაკონის ოპერაციებისთვის.

16) ანტიპატერები

ფარული კრიტიკული მოქმედებები მხოლოდ ჟესტით (ღილაკის გარეშე).
ჟესტები, რომლებიც ეწინააღმდეგებიან სისტემურ (edge-back, notification shade).
გრძელი პრესა ვიზუალური „ბრძოლის“ და ხმის/ვიბრაციის გარეშე.
ჰორიზონტალური საყრდენი ვერტიკალური გადახურვის შიგნით, ღერძული ლოკის გარეშე.
„მძიმე“ ჩრდილები/blur drag - lag და FPS ვარდნა.
არაკოორდინირებული ჟესტები განაცხადის სხვადასხვა ნაწილში.

17) განხორციელების შემოწმების სია (ეტაპობრივი)

1. ჟესტების რუკა: სად და რომელი - ალტერნატივებით A11y.
2. აღიარების პრიორიტეტები: ღერძი, edge-safe ზონა, gesture-arena.
3. უკუკავშირი: ვიზუალური ხაფანგი, ბედნიერი პროფილები, ანიმაცია - 200 ms.
4. სპექტაკლი: INP/60 FPS, პროფილირება drag/scroll- ში.
5. ონბორდი: მინიშნებები და საცდელი ჟესტები გამორთვის შესაძლებლობით.
6. ტელემეტრია: success/misfire/undo, heatmap შეხება.
7. ტესტის მატრიცა: მოწყობილობები, სიმკვრივე, მარცხენა/მარჯვენა, ცუდი ქსელის შემთხვევები.
8. დოკუმენტაცია: დიზაინის სისტემაში ჟესტების ჰაიდი, მაგალითები და ანტი-შემთხვევები.

18) შედეგი

კომპეტენტური ჟესტი არის სწრაფი, გასაგები და საიმედო. ის ამცირებს მიზნის გზას სისტემის მოლოდინების დარღვევის გარეშე და ყველასთვის ხელმისაწვდომობას უზრუნველყოფს. შეიმუშავეთ ჟესტები, როგორც დიზაინის სისტემის ნაწილი: ერთიანი ნიმუშები, მკაფიო პრიორიტეტები, მდიდარი გამოხმაურებები და შესრულების მკაცრი კონტროლი - მაშინ სენსორული UX თანაბრად სასიამოვნო იქნება ნებისმიერ მოწყობილობაში და ნებისმიერ სცენარში.