Gesti e UX sui sensori
1) Perché i gesti e quando sono appropriati
I gesti riducono il percorso dell'utente all'azione: un swipe anziché tre tappe. Aumentano la velocità e la ritenzione se:- Prevedibili (in linea con le aspettative di piattaforma).
- Rilevabili (l'utente sa che il gesto è disponibile).
- Supportati da feedback (visivo/audio/tattile).
- Affidabili in caso di tocchi non corretti e differenti prese del dispositivo.
Principi: prima gli elementi chiari dell'UI, poi i gesti e poi i gesti nascosti avanzati. Azioni critiche - Duplicare sempre con pulsanti espliciti.
2) Tassonomia dei segni
Tap/Double-tap/Long-press - selezione/supplemento. menu/azioni avanzate.
Swipe (montagne ./wert.) - Navigazione, rimozione/archiviazione, discovery.
Drag-and-drop - Ordinare, spostare, modificare la gerarchia.
Pinch/Spread (zoom) - Scala (gallerie, mappe, grafica).
Rotate è raro, appropriato nei redattori/visualizzazioni.
Pull-to-refresh/Release-to-action - aggiornamento/azione secondaria.
Edge-swipe - Navigazione di sistema (indietro/menu), attenta al web.
Multi-touch - gesti con 2-3 dita per scenari avanzati.
System gestures - screenshot, PiP, sistema «Indietro» (Android) - tieni conto dei conflitti.
3) Ergonomia e zone del pollice
Thumb-zone - Zona estesa - Metà inferiore dello schermo CTA chiave, chip filtri e schede sono nella parte inferiore.
Hit-target: minimo 44 x 44 pt/48 x 48 dop. Aggiungi un hit-slop (zona invisibile) per piccoli elementi.
Indentazione dei bordi: riduce i falsi edge-swipe; interazioni critiche non sono vicine al bordo.
Orientamento: ritratto predefinito paesaggio - ottimizzare per due pollici (soprattutto nei giochi/video).
4) Rilevabilità e apprendimento
Affordance - Indizi di gesto (mezzo-visibile a lato, penna in basso per sheet).
Micro-onboarding: suggerimenti usa e getta («Smetti di rimuovere»), non ossessivi, con «Capito».
Gesto di prova: animazione dimostrativa alla prima apparizione del pattern.
Ripetitività: i gesti devono funzionare allo stesso modo in tutte le posizioni con contenuti simili.
5) Feedback: visivo, tattile, audio
Visivo: ombra, parallax, aggancio alle guide, indicatore di progresso al pull-to-refresh.
Tattile (haptics) è un leggero impulso per la presa di drag, più «pesante» per il successo di drop.
Audio (moderato): click/clic brevi nei giochi o eventi tangibili (vincita/errore).
Stati di annullamento: zona rossa visiva con swipe distruttivo, allusione vibro prima dell'eliminazione.
6) Conflitti di segni e priorità
Gerarchia di riconoscimento: scroll interno> scheda swipe> sistema edge-back (il web è il contrario). Impostare gesture-arena/priorità.
Schienale verticale vs swipe orizzontale: blocca un asse dopo 10-15 px movimento.
Edge-swipe vs gesti personalizzati: aggiungi un rientro interno o una maniglia per non intercettare quelli del sistema.
Back-gesture globale (Android/iOS) - Non interrompere la navigazione prevista - Fare doppio con il pulsante Indietro.
7) Pattern per script
7. 1 Elenchi e schede
Swipe-action - Breve swipe - Suggerimento azioni (icone), lunga - azione istantanea.
Paradigma Undo: dopo un gesto distruttivo, mostra snackbar «Annulla».
Drag-reorder - Trascinamento su «penna» fissa l'asse verticale.
7. 2 mappe, gallerie, grafici
Pinch-zoom + doppio tap per scalare.
Inertia & bounds - Limiti elastici, inerzia fluida.
Tap-hold per la lupa o le parti del punto nel grafico.
7. 3 Navigazione e shit
Bottom-sheet: gesto «tira» dalla penna, dallo stato collapsed/partiale/full; swipe-down per la chiusura.
Tabs/Chips - Swipe orizzontale tra le schede con indicatore di progresso.
7. 4 Script di gioco e «veloci»
One-hand play: grandi aree di puntata/azione sul bordo inferiore.
Doppi gesti: doppio tap come «ripeti puntata» (conferma haptic).
Soglia distruttiva: «fissa» il dito su 300 ms o percorri la «zona rossa» per eseguire.
8) Disponibilità (A11y)
Tutti i gesti sono duplicati da pulsanti o voci di menu.
VoiceOver/TalkBack - Descrizioni corrette e ordine di attivazione.
Motor accessibility - Alternative long-press (icona «⋮»), aree di tocco estese.
Contrasto e scala: i gesti non devono essere l'unico modo per arrivare all'azione.
9) Prestazioni e affidabilità
INP (Interaction to Next Paint) ≤ 200 ms per i gesti chiave.
Touch latency: obiettivo <50-100 ms prima della prima risposta (cattura visiva/evidenziazione).
60 FPS fluidità per drag/scroll; disattiva le ombre pesanti e blur durante lo spostamento.
Hit-testing - Evita le sovrapposizioni (z-index/overflow) - trappole delicate.
Test di gradimento: destro/mancino, pollice/pollice, in piedi/nel trasporto.
10) Web vs Native
Web/PWA: ascoltatori passivi («passive: true») per lo scroll, «touch-action» per bloccare gli assi, evitare di intercettare i gesti di sistema senza bisogno.
: usa i riconoscimento di sistema ( ), gli haptics a tempo pieno, il predittivo «Indietro» (Android 14 +).
Webview: ponti e zone sicure, chiusura predittiva dei shit - all'interno del web senza rompere il sistema Indietro.
11) Multi-tac e gesti avanzati
Due dita: panoramica con zoom bloccato; Nelle mappe c'è il segno «due dita in giù» per il livello.
Tre dita: solo per i power users; Facciamo sempre un'alternativa.
Combinazioni: long-press + drag per selezionare l'intervallo/lo spostamento di gruppo.
12) Validazione, telemetria, metriche
События: `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 in caso di conflitto di segni.
13) Localizzazione e differenze culturali
Le lingue RTL mirano i gesti orizzontali e le icone.
Simboli: «Sposta a sinistra = rimuovi» non universale - conferma in un onboarding.
Pattern tattile: usa i profili di sistema, già conosciuti dall'utente.
14) Sicurezza e errori
Gesti distruttivi - solo con undo/conferma.
I swipe Edge non devono essere casualmente chiusi da processi critici (pagamento/CUS).
Protezione da tremori: soglia di movimento (5-10 px) prima dell'inizio del gesto.
Disattiva i gesti per gli stati di blocco (loader, modal di conferma).
15) Cartoni per tavoli touch/tablet
Script a due mani: separazione delle aree di controllo.
Modalità multi-utente: i gesti non sono in conflitto, la priorità è il tempo di tocco.
Grandi hit-targets: 56-64 dp; guide visive per le operazioni drag.
16) Antipattern
Attività critiche nascoste solo con un gesto (senza un pulsante).
Gesti in conflitto con quelli di sistema (edge-back, notifiche shade).
Long-press senza «contrazione» visiva e suono/vibro.
Swipe orizzontale all'interno di uno scroll verticale senza asse.
Ombre pesanti/blur a drag league e caduta FPS.
Gesti incoerenti in diverse parti dell'applicazione.
17) Assegno foglio di implementazione (passo passo)
1. Mappa dei segni: dove e quali alternative per A11y.
2. Priorità di riconoscimento: lock di asse, area edge-safe, gesture-arena.
3. Feedback: trappola visiva, profili haptics, animazioni da 200 ms.
4. Performance: INP/60 FPS, profilassi a drag/scroll.
5. Indizi e gesti di prova che possono essere spenti.
6. Telemetria: success/misfire/undo, tocchi heatmap.
7. Matrice di prova: device, densità, mancino/destro, valigette di cattiva rete.
8. Documentazione: hyde per gesti nel sistema di progettazione, esempi e anti-valigetta.
18) Totale
Un gesto corretto è veloce, comprensibile e affidabile. Riduce il percorso di destinazione senza interrompere le aspettative di sistema e garantire la disponibilità di tutti. Progettare i gesti come parte di un sistema di design: pattern unificati, priorità chiare, feedback ricco e controllo della performance rigoroso - in questo modo il touch UX sarà altrettanto piacevole su qualsiasi dispositivo e qualsiasi scenario.