Gesturi și UX pe dispozitive tactile

1) De ce gesturi și atunci când acestea sunt adecvate

• Previzibil (în conformitate cu așteptările platformei).
• Detectabil (utilizatorul ghicește că gestul este disponibil).
• Sprijinit de feedback (vizual/audio/tactil).
• Fiabil cu atingeri eronate și apucături diferite ale dispozitivului.

Principii: mai întâi elemente UI explicite → apoi gesturi de aluzie → apoi gesturi ascunse avansate. Acțiuni critice - întotdeauna duplicat cu butoane explicite.

2) Taxonomia gestului

Atingeți/Atingeți dublu/Apăsați lung - selecție/adăugare. meniuri/acțiuni avansate.
Glisați (munte/vert) - navigare, ștergere/arhivare, divulgarea acțiunilor.
Drag-and-drop - sortare, transfer, schimbare ierarhică.
Pinch/Spread (zoom) - scară (galerii, hărți, grafice).
Rotiți - rare, adecvate în editori/vizualizări.
Pull-to-refresh/Release-to-action - actualizare/acțiune secundară.
Edge-swipe - navigare sistem (spate/meniu), cu atenție pe web.
Multi-touch - 2-3 gesturi cu degetul pentru scenarii avansate.
Gesturile sistemului - capturi de ecran, PiP, sistemul „Înapoi” (Android) - iau în considerare conflictele.

3) Ergonomie și zone degetul mare

Zonele degetul mare: ajunge la zona - jumătatea inferioară a ecranului; CTA-urile cheie, filtrele de cip și filele sunt în partea de jos.
Țintă de succes: minim 44 × 44 pt/48 × 48 dp. Adăugați un hit-slop pentru elemente mici.
Liniuţe de margine: reduceţi marginile false; interacțiuni critice - nu aproape de margine.
Orientare: portret - implicit; peisaj - optimizați pentru două degete (în special în jocuri/videoclipuri).

4) Detectabilitate și formare

Preț accesibil: indicii de gest (carte semi-vizibilă pe lateral, „stilou” pe partea de jos pentru foaie).
Micro-onboarding: indicii one-off („Glisați pentru a șterge”), nu intruziv, cu „Got it”.
Gest de încercare: animație demo la prima apariție a modelului.
Repetabilitate: Gesturile ar trebui să funcționeze la fel în toate locurile cu conținut similar.

5) Feedback: vizual, tactil, audio

Vizual: umbră, paralaxă, lipirea de ghiduri, indicator de progres atunci când pull-to-refresh.
Haptics: impuls de lumină atunci când hapsân drag, mai „grele” - atunci când scăderea/succesul.
Audio (moderat): clicuri/clicuri scurte în jocuri sau evenimente tangibile (câștig/eroare).
Anularea afirmă: „zona roșie” vizuală cu glisare distructivă, indiciu de vibrații înainte de îndepărtare.

6) Conflicte și priorități de gesturi

Ierarhia de recunoaștere: defilare internă> glisați cardul> muchie de spate a sistemului (pe web - invers). Configurați gest-arena/prioritățile.
Derulare verticală vs glisare orizontală: Blocați o axă după 10-15 px de mișcare.
Edge-swipe vs gesturi proprii: Adăugați o liniuță internă sau un gest „stilou” pentru a nu intercepta sistemul.
Global back-gest (Android/iOS): nu rupe navigarea așteptată - duplicați acțiuni importante cu butonul „Înapoi”.

7) Modele scriptate

7. 1 Liste și carduri

Glisați-acțiuni: glisați scurt - indiciu de acțiuni (icoane), acțiune lungă - instantanee.
Undo-paradigmă: după distructive-gest spectacol snackbar „Anulează”.
Drag-reorder: trageți pe „mâner”; Fixați axa verticală.

7. 2 Hărți, galerii, grafice

Pinch-zoom + robinet dublu pentru scalare.
Inerție și limite: limite elastice, inerție netedă.
Țineți apăsat pentru „lupă „/detalii ale punctului de pe grafic.

7. 3 Navigare și scuturi

Foaie de fund: gest de tragere din mâner, stare colapsată/parțială/completă; glisați-jos pentru a închide.
File/Chips: glisați orizontal între file cu indicator de progres.

7. 4 Scenarii de joc și rapide

Joc cu o singură mână: Zone mari de pariere/acțiune la marginea de jos.
Gesturi duble: atingeți dublu ca „pariu repetat” (confirmare haptică).
Prag pe distructiv: „blocați” degetul la 300ms sau treceți prin „zona roșie” pentru a executa.

8) Disponibilitate (A11y)

Toate gesturile sunt duplicate cu butoane sau elemente de meniu.
VoiceOver/TalkBack: descrieri corecte și ordinea de focalizare.
Accesibilitatea motorului: alternative la apăsarea lungă (pictograma „⋮”), zone tactile crescute.
Contrast și scară: Gesturile nu ar trebui să fie singura modalitate de a ajunge la acțiune.

9) Performanță și fiabilitate

INP (Interaction to Next Paint) ≤ 200ms pentru gesturi cheie.
Latenţă tactilă: ţintă <50-100ms înainte de primul răspuns (captură/iluminare vizuală).
60 FPS: netezime pentru drag/scroll; opriți umbre grele și se estompează atunci când se deplasează.
Hit-testare: evitați suprapunerile (z-index/overflow) - capcanele sunt „moi”.
Încercări de prindere: dreptaci/stângaci, degetul mare/degetul mic, în picioare/în transport.

10) Web vs nativ

Web/PWA: ascultătorii pasivi ('pasivi: adevărați') pentru defilare, 'touch-action' pentru blocarea axelor, evitați inutil interceptarea gesturilor sistemului.
iOS/Android nativ: utilizați recunoscătoare de sistem (UIGestureRecognizer/Android GestDetector), haptice standard, predictive „Înapoi” (Android 14 +).
Webview: poduri și zone sigure, închiderea predictivă a scuturilor - în interiorul web, fără a rupe sistemul „Înapoi”.

11) Gesturi multi-touch și avansate

Două degete: panning în timp ce zoom este blocat; pe cărți - un gest „două degete în jos” pentru stratul add.
Trei degete: numai pentru utilizatorii de putere; dă întotdeauna o alternativă.
Combinații: apăsați lung + trageți pentru selecția intervalului/mișcarea grupului.

12) Validare, telemetrie, metrică

События: 'gest _ start', 'gest _ commit', 'gest _ cancel', 'latency _ ms',' distance _ px ',' overscroll', 'misfire' (ложный жест), 'undo _ used'.
KPI: Rata de succes, Rata de eroare, Rata de anulare, INP, Timp de acțiune, Drop-off pentru conflictul de gesturi.

13) Localizare și diferențe culturale

Limbi RTL: Gesturi și pictograme orizontale în oglindă.
Simbolism: „glisați la stânga = eliminați” nu este universal - confirmați în onboarding.
Modele tactile: utilizați profiluri de sistem, acestea sunt deja familiare utilizatorului.

14) Securitate și bug-uri

Gesturi distructive - numai cu anulare/confirmare.
Glisoarele de margine nu trebuie să închidă accidental procesele critice (plată/CCM).
Protecție împotriva tremuratului: prag de mișcare (5-10 px) înainte de a începe gestul.
Dezactivarea gesturilor în stările de blocare (încărcător de plată, modal de confirmare).

15) Touch Table/Tablet Modele

Scenarii cu două mâini: separarea zonelor de control.
Modul multi-utilizator: gesturile nu intră în conflict, atingeți prioritatea timpului.
Ținte mari: 56-64 dp; ghiduri vizuale pentru operații de tragere.

16) Antipattern

Acțiuni critice ascunse numai prin gest (fără buton).
Gesturi care intră în conflict cu sistemul (edge-back, notification shade).
Apăsați lung fără „scramble” vizual și sunet/vibe.
Glisați orizontal în interiorul defilării verticale fără blocare axială.
„Grele” umbre/blur atunci când trageți → lag și picătură FPS.
Gesturi inconsecvente în diferite părți ale aplicației.

17) Lista de verificare a implementării (pas cu pas)

1. Harta gesturilor: unde și ce - cu alternative pentru A11y.
2. Priorități de recunoaștere: blocare axială, zone de siguranță, gest-arena.
3. Feedback: capcană vizuală, profile haptice, animații ≤ 200 ms.
4. Performanţă: INP/60 FPS, tragere/defilare profilare.
5. Onboarding: solicită și gesturi de încercare cu capacitatea de a opri.
6. Telemetrie: succes/rătăcire/anulare, atingeri heatmap.
7. Matrice de testare: dispozitive, densități, stângaci/dreptaci, cazuri de rețea proaste.
8. Documentație: ghid de gesturi în sistemul de proiectare, exemple și anti-cazuri.

18) Linia de jos

Un gest competent este rapid, ușor de înțeles și de încredere. Acesta reduce calea către obiectiv, fără a rupe așteptările sistemului și asigurând accesibilitatea pentru toată lumea. Gesturi de design ca parte a sistemului de proiectare: modele uniforme, priorități clare, feedback bogat și control strict al performanței - apoi atingeți UX va fi la fel de plăcut pe orice dispozitiv și în orice scenariu.