Gesty i UX na urządzeniach dotykowych

1) Dlaczego gesty i kiedy są odpowiednie

• Przewidywalne (zgodnie z oczekiwaniami platformy).
• Wykrywalny (użytkownik zgaduje, że gest jest dostępny).
• Obsługiwane przez sprzężenie zwrotne (wizualne/audio/dotykowe).
• Niezawodny z błędnymi dotykami i różnymi chwytami urządzenia.

Zasady: najpierw wyraźne elementy interfejsu użytkownika → następnie wskazać gesty → następnie zaawansowane ukryte gesty. Działania krytyczne - zawsze powielane za pomocą wyraźnych przycisków.

2) Taksonomia gestów

Dotknij/Double-tap/Long-press - wybierz/dodaj. menu/zaawansowane działania.
Swipe (mountain/vert) - nawigacja, usuwanie/archiwizacja, ujawnianie działań.
Przeciągnij i upuść - sortowanie, transfer, zmiana hierarchii.
Pinch/Spread (zoom) - skala (galerie, mapy, wykresy).
Obrót - rzadki, odpowiedni w edytorach/widokach.
Pull-to-refresh/Release-to-action - update/secondary action.
Edge-swipe - nawigacja systemowa (back/menu), ostrożnie w sieci.
Multi-touch - 2-3 gesty palców dla zaawansowanych scenariuszy.
Gesty systemowe - zrzuty ekranu, PiP, system „Back” (Android) - uwzględniają konflikty.

3) Ergonomia i obszary kciuków

Strefy kciukowe: strefa dotarcia - dolna połowa ekranu; Kluczowe CTA, filtry chipów i zakładki są na dole.
Cel trafienia: minimum 44 × 44 pkt/48 × 48 dp. Dodaj hit-slop dla małych przedmiotów.
Indenty krawędzi: zmniejszyć fałszywe przesuwanie krawędzi; interakcje krytyczne - nie blisko krawędzi.
Orientacja: portret - domyślnie; krajobraz - optymalizacja dla dwóch kciuków (zwłaszcza w grach/filmach).

4) Wykrywalność i szkolenie

Affordance: odrobina gestu (półwidzialna karta na boku, „długopis” na dole do arkusza).
Mikro-pokład: jednorazowe wskazówki („Swipe to delete”), nie natrętne, z „Got it”.
Gest próbny: animacja demo przy pierwszym pojawieniu się wzoru.
Powtarzalność: Gesty powinny działać tak samo we wszystkich miejscach o podobnej treści.

5) Informacje zwrotne: wizualne, dotykowe, audio

Wizualny: cień, paralaksa, trzymanie się przewodników, wskaźnik postępu podczas ciągnięcia do odświeżania.
Haptics: impuls świetlny podczas chwytania drag, bardziej „ciężki” - podczas spadania/sukcesu.
Audio (umiarkowane): krótkie kliknięcia/kliknięcia w gry lub zdarzenia materialne (wygrana/błąd).
Anulowanie: wizualna „czerwona strefa” z niszczycielską skręcką, wskazówką wibracyjną przed usunięciem.

6) Konflikty i priorytety dotyczące gestów

Hierarchia rozpoznawania: wewnętrzny zwój> karta swipe> system edge-back (w sieci - odwrotnie). Konfiguracja gestów-arena/priorytety.
Pionowy zwój w porównaniu z poziomym skrętem: Zamknij jedną oś po 10-15 px ruchu.
Krawędź-swipe vs własne gesty: Dodaj wewnętrzne tiret lub „długopis” gest, aby nie przechwycić systemu.
Globalny gest powrotny (Android/iOS): nie łamać oczekiwanej nawigacji - powielać ważne działania za pomocą przycisku „Back”.

7) Skryptowane wzory

7. 1 Listy i karty

Swipe-actions: short swipe - hint of actions (ikony), long - instant action.
Undo-paradigm: po destrukcyjnym gestem pokaż snackbar „Anuluj”.
Drag-reorder: przeciągnij na „uchwyt”; Naprawić oś pionową.

7. 2 Mapy, galerie, wykresy

Szczypta-zoom + podwójny kran do skalowania.
Bezwładność i granice: elastyczne granice, gładka bezwładność.
Kran-hold dla „szkła powiększającego „/szczegóły punktu na wykresie.

7. 3 Nawigacja i osłony

Dolna arkusz: gest wyciągający z uchwytu, zapadnięty/częściowy/pełny stan; przesuń w dół, aby zamknąć.
Zakładki/żetony: poziomy przesuw między zakładkami ze wskaźnikiem postępu.

7. 4 Gra i szybkie scenariusze

Odtwarzanie z jedną ręką: Duże strefy zakładów/akcji na dolnej krawędzi.
Podwójne gesty: podwójny kran jako „powtarzać zakład” (potwierdzenie haptic).
Próg destrukcyjny: „zablokować” palec w 300ms lub przejść przez „czerwoną strefę” do wykonania.

8) Dostępność (A11y)

Wszystkie gesty są powielane za pomocą przycisków lub elementów menu.
Głos Nad/Wstecz: poprawne opisy i kolejność ostrości.
Dostępność silnika: alternatywy dla długiej prasy (ikona „⋮”), zwiększone strefy dotykowe.
Kontrast i skala: Gesty nie powinny być jedynym sposobem, aby dostać się do akcji.

9) Wydajność i niezawodność

INP (Interaction to Next Paint) ≤ 200 ms dla kluczowych gestów.
Opóźnienie dotyku: cel <50-100 ms przed pierwszą odpowiedzią (wychwytywanie wizualne/oświetlenie).
60 FPS: gładkość do przeciągania/przewijania; wyłączyć ciężkie cienie i rozmycie podczas poruszania.
Hit-testing: unikać nakładania się (z-index/overflow) - pułapki są „miękkie”.
Badania przyczepności: praworęczny/leworęczny, kciuk/mały palec, stojący/w transporcie.

10) Web vs Native

Web/PWA: słuchacze pasywni („pasywni: prawdziwi”) do przewijania, „dotykowy” do osi blokujących, unikają niepotrzebnego przechwytywania gestów systemowych.
iOS/Android native: rozpoznawacze systemu użytkowania (UIGestureRecognizer/Android GestureDetector), standardowe haptics, predykcyjne „Back” (Android 14 +).
Webview: mosty i bezpieczne strefy, przewidywalne zamknięcie osłon - wewnątrz sieci, bez łamania systemu „Back”.

11) Multi-touch i zaawansowane gesty

Dwa palce: panning podczas powiększenia jest zablokowany; na kartach - gest „dwa palce w dół” dla warstwy add..
Trzy palce: tylko dla użytkowników energii; zawsze dać alternatywę.
Kombinacje: long-press + drag do wyboru zakresu/ruchu grupowego.

12) Walidacja, telemetria, mierniki

Советий: 'gestover _ start', 'gesture _ commit', 'gestence _ cancel',' latency _ ms ',' distance _ px ',' overscroll', 'misfire' (ловна беса), 'undo _ ied'.
KPI: Wskaźnik sukcesu, Wskaźnik niepowodzenia, Wskaźnik cofnięcia, INP, Czas do działania, Spadek dla konfliktu gestów.

13) Lokalizacja i różnice kulturowe

Języki RTL: Lustro poziomych gestów i ikon.
Symbolika: „swipe left = remove” nie jest uniwersalna - potwierdź w internecie.
Wzory dotykowe: używać profili systemowych, są już znane użytkownikowi.

14) Bezpieczeństwo i błędy

Destrukcyjne gesty - tylko z cofnięciem/potwierdzeniem.
Skręty krawędzi nie powinny przypadkowo zamykać procesów krytycznych (płatności/CCM).
Ochrona przed wstrząsem: próg ruchu (5-10 px) przed rozpoczęciem gestu.
Wyłączanie gestów w stanach blokowania (ładowarka płatnicza, modal potwierdzenia).

15) Stół dotykowy/wzory tabletek

Dwuręczne scenariusze: rozdzielenie stref kontrolnych.
Tryb wielu użytkowników: gesty nie kolidują, dotykaj priorytetu czasu.
Duże cele: 56-64 dp; przewodniki wzrokowe do operacji przeciągania.

16) Antypattery

Ukryte działania krytyczne tylko przez gest (bez przycisku).
Gesty, które są sprzeczne z systemem (krawędź-back, odcień powiadomienia).
Długie naciśnięcie bez wizualnego „scramble” i dźwięku/wibracji.
Poziomy przesuw wewnątrz pionowego przewijania bez blokady osiowej.
„Ciężkie” cienie/rozmycie podczas przeciągania → opóźnienie i spadek FPS.
Niespójne gesty w różnych częściach aplikacji.

17) Lista kontrolna wdrażania (krok po kroku)

1. Mapa gestów: gdzie i co - z alternatywami dla A11y.
2. Priorytety rozpoznawania: zamek osiowy, strefy bezpieczne dla krawędzi, arena gestów.
3. Informacje zwrotne: pułapka wzrokowa, profile haptics, animacje ≤ 200 ms.
4. Wydajność: INP/60 FPS, przeciągnij/zwiń profilowanie.
5. Na pokładzie: zachęty i gesty próbne z możliwością wyłączenia.
6. Telemetria: sukces/niepowodzenie/cofnięcie, dotknięcia mapy ciepłej.
7. Matryca testowa: urządzenia, gęstości, leworęczny/praworęczny, złe skrzynie sieciowe.
8. Dokumentacja: przewodnik po gestach w systemie projektowania, przykłady i anty-etui.

18) Najważniejsze

Kompetentny gest jest szybki, zrozumiały i niezawodny. Zmniejsza drogę do celu, nie łamiąc oczekiwań systemu i zapewniając dostępność dla wszystkich. Gesty projektowe jako część systemu projektowania: jednolite wzory, jasne priorytety, bogate opinie i ścisła kontrola wydajności - wtedy dotyk UX będzie równie przyjemny na każdym urządzeniu i w każdym scenariuszu.