Жести і UX на сенсорних пристроях

1) Навіщо жести і коли вони доречні

• Передбачувані (відповідають платформним очікуванням).
• Виявляються (користувач здогадується, що жест доступний).
• Підкріплені зворотним зв'язком (візуальним/аудіо/тактильним).
• Надійні при помилкових торканнях і різних хватах пристрою.

Принципи: спочатку явні елементи UI → потім жести-підказки → потім просунуті приховані жести. Критичні дії - завжди дублювати явними кнопками.

2) Таксономія жестів

Tap/Double-tap/Long-press - вибір/див. меню/розширені дії.
Swipe (гір ./верт.) - навігація, видалення/архівація, розкриття дій.
Drag-and-drop - сортування, перенесення, зміна ієрархії.
Pinch/Spread (zoom) - масштаб (галереї, карти, графіки).
Rotate - рідко, доречний в редакторах/переглядах.
Pull-to-refresh/Release-to-action - оновлення/вторинна дія.
Edge-swipe - системна навігація (назад/меню), обережно у вебв'ю.
Multi-touch - жести з 2-3 пальцями для просунутих сценаріїв.
System gestures - скріншоти, PiP, системна «Назад» (Android) - враховуйте конфлікти.

3) Ергономіка і зони великого пальця

Thumb-zones: досяжна зона - нижня половина екрану; ключові CTA, чіп-фільтри і вкладки - внизу.
Hit-target: мінімум 44 × 44 pt/48 × 48 dp. Додавайте hit-slop (невидиму зону докасання) для дрібних елементів.
Відступи від країв: знижують помилкові edge-swipe; критичні інтеракції - не впритул до краю.
Орієнтація: портрет - за замовчуванням; ландшафт - оптимізувати для двох великих пальців (особливо в іграх/відео).

4) Виявлюваність і навчання

Affordance: натяки на жест (напів-видима картка збоку, «ручка» знизу для sheet).
Мікро-онбординг: одноразові підказки («Змахніть, щоб видалити»), не нав'язливі, з «Зрозумів».
Пробний жест: демонстраційна анімація при першій появі патерну.
Повторюваність: жести повинні працювати однаково у всіх місцях зі схожим контентом.

5) Зворотній зв'язок: візуальна, тактильна, звукова

Візуальна: тінь, паралакс, прилипання до напрямних, прогрес-індикатор при pull-to-refresh.
Тактильна (haptics): легкий імпульс при захопленні drag, більш «важкий» - при drop/успіху.
Аудіо (помірно): короткі кліки/клацання в іграх або відчутні події (виграш/помилка).
Стану скасування: візуальна «червона зона» при destructive-свайпі, вібро-натяк перед видаленням.

6) Конфлікти жестів і пріоритети

Ієрархія розпізнавання: внутрішній скролл> картка свайпа> системний edge-back (у вебі - навпаки). Налаштуйте gesture-arena/пріоритети.
Вертикальний скролл vs горизонтальний свайп: блокуйте одну вісь після 10-15 px руху.
Edge-swipe vs власні жести: додавайте внутрішній відступ або жест- «ручку», щоб не перехоплювати системні.
Глобальний back-gesture (Android/iOS): не ламайте очікувану навігацію - важливі дії дублюйте кнопкою «Назад».

7) Патерни за сценаріями

7. 1 Списки та картки

Swipe-actions: короткий свайп - підказка дій (іконки), довгий - миттєва дія.
Undo-парадигма: після destructive-жесту показуйте snackbar «Скасувати».
Drag-reorder: перетягування по «ручці»; Фіксуйте вертикальну вісь.

7. 2 Карти, галереї, графіки

Pinch-zoom + подвійний тап для масштабування.
Inertia & bounds: пружні межі, плавна інерція.
Tap-hold для «лупи «/деталей точки на графіку.

7. 3 Навігація і шити

Bottom-sheet: жест «потягни» з ручки, стану collapsed/partial/full; swipe-down для закриття.
Tabs/Chips: горизонтальний свайп між вкладками з індикатором прогресу.

7. 4 Ігрові та «швидкі» сценарії

One-hand play: великі зони ставок/дій біля нижнього краю.
Подвійні жести: подвійний тап як «повторити ставку» (підтвердження haptic).
Поріг на destructive: «зафіксуйте» палець на 300 мс або пройдіть «червону зону», щоб виконати.

8) Доступність (A11y)

Всі жести дублюються кнопками або пунктами меню.
VoiceOver/TalkBack: коректні описи і порядок фокусу.
Motor accessibility: альтернативи long-press (іконка «⋮»), збільшені зони дотику.
Контраст і масштаб: жести не повинні бути єдиним способом потрапити до дії.

9) Перформанс і надійність

INP (Interaction to Next Paint) ≤ 200 мс для ключових жестів.
Touch latency: ціль <50-100 мс до першого відгуку (візуальне захоплення/підсвічування).
60 FPS: плавність для drag/scroll; відключайте важкі тіні і blur при переміщенні.
Hit-testing: уникайте перекриттів (z-index/overflow) - пастки «ніжметься».
Тести хватів: правша/лівша, великий/малий палець, стоячи/в транспорті.

10) Web vs Native

Web/PWA: пасивні слухачі ('passive: true') для скролла,'touch-action'для блокування осей, уникайте перехоплення системних жестів без потреби.
iOS/Android натив: використовуйте системні розпізнавачі (UIGestureRecognizer/Android GestureDetector), штатні haptics, предиктивний «Назад» (Android 14 +).
Вебв'ю: мости і безпечні зони, предиктивне закриття шитів - всередині веба, не ламаючи системне «Назад».

11) Мульти-тач і просунуті жести

Два пальці: панорамування при заблокованому zoom; на картах - жест «два пальці вниз» для додаткового шару.
Три пальці: тільки для power-users; завжди давайте альтернативу.
Комбінації: long-press + drag для вибору діапазону/групового переміщення.

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-свайпи не повинні випадково закривати критичні процеси (оплата/КУС).
Захист від тремтіння: поріг руху (5-10 px) перед початком жесту.
Відключення жестів при блокуючих станах (лоадер оплати, модал підтвердження).

15) Патерни для сенсорних столів/планшетів

Дворучні сценарії: розділення зон управління.
Мультикористувацький режим: жести не конфліктують, пріоритет за часом дотику.
Великі hit-targets: 56–64 dp; візуальні напрямні для drag-операцій.

16) Антипатерни

Приховані критичні дії тільки жестом (без кнопки).
Жести, що конфліктують з системними (edge-back, notification shade).
Long-press без візуальної «сутички» і звуку/вібро.
Горизонтальний свайп всередині вертикального скролла без осьового локу.
«Важкі» тіні/blur при drag → лаг і падіння FPS.
Неузгоджені жести в різних частинах програми.

17) Чек-лист впровадження (покроково)

1. Карта жестів: де і які - з альтернативами для A11y.
2. Пріоритети розпізнавання: осьовий лок, edge-safe зони, gesture-arena.
3. Зворотній зв'язок: візуальна пастка, haptics-профілі, анімації ≤ 200 мс.
4. Перформанс: INP/60 FPS, профілювання при drag/scroll.
5. Онбординг: підказки і пробні жести з можливістю вимкнути.
6. Телеметрія: success/misfire/undo, heatmap торкань.
7. Тест-матриця: девайси, щільності, лівша/правша, кейси поганої мережі.
8. Документація: гайд за жестами в дизайн-системі, приклади і анти-кейси.

18) Підсумок

Грамотний жест - це швидко, зрозуміло і надійно. Він скорочує шлях до мети, не ламаючи системні очікування і забезпечуючи доступність для всіх. Проектуйте жести як частину дизайн-системи: єдині патерни, чіткі пріоритети, багатий зворотний зв'язок і строгий контроль перформансу - тоді сенсорний UX буде однаково приємним на будь-якому пристрої і в будь-яких сценаріях.