Gestes et UX sur les appareils tactiles

1) Pourquoi les gestes et quand ils sont appropriés

• Prévisibles (conformes aux attentes de la plateforme).
• Détectable (l'utilisateur devine que le geste est disponible).
• Étayé par la rétroaction (visuelle/audio/tactile).
• Sont fiables avec des touches erronées et différentes touches du périphérique.

Les principes : d'abord les éléments évidents UI → ensuite les gestes-aides → puis les gestes avancés cachés. Les actions critiques sont toujours dupliquées avec des boutons explicites.

2) Taxonomie des gestes

Tap/Double-tap/Long-press - choix/dopage. menus/actions avancées.
Swipe (montagnes ./vert.) - navigation, suppression/archivage, divulgation des actions.
Drag-and-drop - Trier, transférer, modifier la hiérarchie.
Pinch/Spread (zoom) - échelle (galeries, cartes, graphiques).
Rotate - rarement, approprié dans les éditeurs/vues.
Pull-to-refresh/Release-to-action - mise à jour/action secondaire.
Edge-swipe - Navigation système (retour/menu), avec soin dans le Web.
Multi-touch - gestes avec 2-3 doigts pour les scénarios avancés.
Gestures système - captures d'écran, PiP, système « Back » (Android) - tenir compte des conflits.

3) Ergonomie et zones du pouce

Thumb-zones : la zone à atteindre est la moitié inférieure de l'écran ; CTA clés, filtres à puce et onglets - en bas.
Hit-target : minimum 44 × 44 pt/48 × 48 dp. Ajoutez hit-slop (zone de dockage invisible) pour les petits éléments.
Les reculs des bords : réduisent les faux pieds-de-nez ; les interactions critiques ne sont pas près du bord.
Orientation : portrait - par défaut ; paysage - optimiser pour deux pouces (en particulier dans les jeux/vidéos).

4) Détectabilité et apprentissage

Affordance : allusions au geste (carte semi-visible sur le côté, « stylo » en bas pour le sheet).
Micro-onbording : conseils jetables (« Remuez pour supprimer »), pas intrusifs, avec « Compris ».
Geste d'essai : animation de démonstration lors de la première apparition du modèle.
Répétabilité : les gestes doivent fonctionner de la même manière dans tous les endroits où le contenu est similaire.

5) Rétroaction : Visuelle, tactile, sonore

Visuel : ombre, parallax, collage aux guides, indicateur de progression lorsque pull-to-refresh.
Tactile (haptics) : impulsion facile lors de la capture de drag, plus « lourd » - avec drop/succès.
Audio (modéré) : clics courts/clics dans les jeux ou événements tangibles (gain/erreur).
États d'annulation : « zone rouge » visuelle lors d'un balayage destructif, signe vibrant avant d'être enlevé.

6) Conflits de gestes et priorités

Hiérarchie de reconnaissance : scroll interne> carte de balayage> système edge-back (dans le weba, l'inverse). Personnalisez gesture-arena/priorités.
Scroll vertical vs balayage horizontal : bloquer un axe après 10-15 px mouvement.
Edge-swipe vs ses propres gestes : ajouter un retrait interne ou un « stylo » pour ne pas intercepter le système.
Back-gesture globale (Android/iOS) : ne cassez pas la navigation attendue - dupliquez les actions importantes avec le bouton Retour.

7) Modèles par scénario

7. 1 Listes et cartes

Swipe-actions : Swipe court est un indice d'action (icônes), long est une action instantanée.
Paradigme undo : Après un geste destructif, montrez snackbar « Annuler ».
Drag-reorder : glisser sur le « stylo » ; fixez l'axe vertical.

7. 2 Cartes, galeries, graphiques

Pinch-zoom + double tap pour la mise à l'échelle.
Inertia & bounds : limites élastiques, inertie lisse.
Tap-hold pour « loupe « /détails de point sur le graphique.

7. 3 Navigation et couture

Bottom-sheet : geste « tire » du stylo, état collapsed/partial/full ; swipe-down pour fermer.
Tabs/Chips : balayage horizontal entre les onglets avec indicateur de progrès.

7. 4 Jeux et scénarios « rapides »

One-hand play : grandes zones de paris/actions au bord inférieur.
Doubles gestes : double tap comme « répéter le pari » (confirmation haptic).
Seuil sur destructive : « fixez » votre doigt à 300 ms ou passez la « zone rouge » pour effectuer.

8) Accessibilité (A11y)

Tous les gestes sont dupliqués par des boutons ou des éléments de menu.
VoiceOver/TalkBack : descriptions correctes et ordre de mise au point.
Accessibilité motrice : alternatives à la longue presse (icône « ⋮ »), zones de contact élargies.
Contraste et échelle : les gestes ne doivent pas être le seul moyen d'atteindre l'action.

9) Performance et fiabilité

INP (Interaction to Next Paint) ≤ 200 ms pour les gestes clés.
Touch latency : cible <50-100ms avant la première réponse (capture visuelle/rétroéclairage).
60 FPS : fluidité pour drag/scroll ; débranchez les ombres lourdes et blur lorsque vous vous déplacez.
Hit-testing : éviter les chevauchements (z-index/overflow) - les pièges sont « tendres ».
Tests d'accrochage : droitier/gaucher, pouce/petit doigt, debout/dans le transport.

10) Web vs Native

Web/PWA : auditeurs passifs ('passive : true') pour le scroll, 'touch-action'pour verrouiller les axes, éviter d'intercepter les gestes système inutilement.
Natif iOS/Android : utiliser des reconnaissance système (UIGestureRecognizer/Android GestureDetector), haptics à temps plein, prédictif « Back » (Android 14 +).
Webview : ponts et zones de sécurité, fermeture prédictive des shits - à l'intérieur du web, sans briser le système « Back ».

11) Multi-tach et gestes avancés

Deux doigts : panoramique lorsque le zoom est verrouillé ; sur les cartes, un geste « deux doigts vers le bas » pour la couche.
Trois doigts : uniquement pour les utilisateurs de puissance ; laissons toujours une alternative.
Combinaisons : long-press + drag pour sélectionner la gamme/mouvement de groupe.

12) Validation, télémétrie, métriques

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI : Taux de réussite, taux de Misfire, taux undo, INP, Time-to-Action, Drop-off en cas de conflit de gestes.

13) Localisation et différences culturelles

Langues RTL : miroir des gestes horizontaux et des icônes.
Symbolisme : « se moquer à gauche = supprimer » n'est pas universel - confirmer dans l'onbording.
Modèles tactiles : utilisez les profils système, ils sont déjà familiers à l'utilisateur.

14) Sécurité et erreurs

Gestes destructifs - seulement avec undo/confirmation.
Il ne faut pas accidentellement fermer les processus critiques (paiement/CUS).
Protection contre les tremblements : seuil de mouvement (5-10 px) avant le début du geste.
Désactivation des gestes dans les états de blocage (loader de paiement, modal de confirmation).

15) Modèles pour tables/tablettes tactiles

Scénarios à deux mains : séparation des zones de contrôle.
Mode multi-utilisateurs : les gestes ne sont pas en conflit, priorité sur le temps de toucher.
Grands hit-targets : 56-64 dp ; guides visuels pour les opérations de drag.

16) Anti-modèles

Actions critiques cachées uniquement par geste (sans bouton).
Gestes en conflit avec le système (edge-back, notification shade).
Long-press sans « contraction » visuelle et son/vibration.
Balayage horizontal à l'intérieur du scroll vertical sans lock axial.
Ombres « lourdes »/blur à drag → lag et chute FPS.
Gestes incohérents dans différentes parties de l'application.

17) Chèque de mise en œuvre (étape par étape)

1. Carte des gestes : où et quoi - avec des alternatives pour les A11y.
2. Priorités de reconnaissance : arête axiale, zone de sécurité, arène de gesture.
3. Feedback : piège visuel, profils haptiques, animations ≤ 200ms.
4. Performance : INP/60 FPS, profilage sous drag/scroll.
5. Onbording : conseils et gestes d'essai avec la possibilité d'éteindre.
6. Télémétrie : success/misfire/undo, touches heatmap.
7. Matrice de test : devis, densités, gaucher/droitier, mallettes de mauvais réseau.
8. Documentation : hyde par geste dans le système de conception, exemples et anti-cas.

18) Résultat

C'est rapide, compréhensible et fiable. Il réduit le chemin vers la cible sans briser les attentes du système et en assurant l'accessibilité pour tous. Concevez les gestes dans le cadre d'un système de conception : modèles uniques, priorités claires, rétroaction riche et contrôle rigoureux de la performance - l'UX tactile sera alors tout aussi agréable sur n'importe quel appareil et dans n'importe quel scénario.