Navigation Gestuelle — comment ça marche, types et implémentation

Qu'est-ce que la Navigation Gestuelle

La Navigation Gestuelle est une méthode d'interaction de l'utilisateur avec un appareil mobile via des séquences de touches, mouvements et pressions reconnues par l'écran tactile. Contrairement aux boutons traditionnels, les gestes n'ont pas de position fixe à l'écran et sont reconnus par des motifs de mouvement : balayage depuis le bord, pincement à deux doigts, appui long.

La transition vers la navigation gestuelle a commencé avec l'iPhone X (2017), où Apple a complètement supprimé le bouton Home, le remplaçant par un balayage depuis le bord inférieur. Google a suivi la tendance avec Android 10 (2020), offrant aux utilisateurs le choix : navigation à trois boutons, navigation à deux boutons et navigation gestuelle complète. Selon StatCounter (2025), plus de 75 % des appareils Android et 95 % des appareils iOS utilisent la navigation gestuelle.

Architecturalement, la reconnaissance gestuelle comprend trois étapes : Capture (capture des événements tactiles), Reconnaissance (identification du motif de mouvement) et Action (exécution de l'action assignée). Au niveau système, Android et iOS disposent de gestionnaires intégrés pour les gestes de navigation de base — balayage retour, accès à l'écran d'accueil, ouverture du commutateur d'applications. Le développeur n'a qu'à intégrer correctement ses propres gestes dans ce système.

Types de Gestes dans la Navigation Mobile

Tous les gestes tactiles peuvent être divisés en trois catégories selon leur objectif et leur méthode d'exécution. Chaque type a ses propres règles de traitement et recommandations d'utilisation dans l'interface.

Gestes de Navigation

Les gestes de navigation contrôlent le déplacement entre les écrans : balayage depuis le bord gauche pour revenir en arrière (iOS), balayage vers le haut pour ouvrir le commutateur d'applications, balayage depuis le bord inférieur pour retourner à l'écran d'accueil. Ces gestes sont traités par le système au niveau de la fenêtre et ne doivent pas entrer en conflit avec les gestes personnalisés dans l'application.

Gestes de Manipulation

Les gestes de manipulation modifient la position, la taille ou l'orientation des objets à l'écran. Pincement (zoom à deux doigts), rotation, glisser, balayer rapidement — tous ces gestes sont traités au niveau de View ou Composable et n'affectent pas la navigation système.

Gestes Contextuels

Les gestes contextuels activent des fonctions supplémentaires sans naviguer vers un autre écran. Appui long (pour le menu contextuel), double tap (pour like ou zoom), balayage depuis le bord (pour ouvrir un Drawer). Ces gestes nécessitent l'implémentation la plus soignée car ils peuvent chevaucher les gestes de navigation système.

Navigation Gestuelle sur Android : GestureDetector et MotionEvent

Android SDK fournit un système de traitement des gestes à plusieurs niveaux, allant de MotionEvent bas niveau à GestureDetector et GestureOverlayView haut niveau. Le choix du bon niveau dépend de la complexité du geste et des exigences de performance.

GestureDetector — La Classe de Base

GestureDetector est une classe haut niveau qui convertit une séquence de MotionEvent en gestes spécifiques : onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. Le développeur remplace les méthodes nécessaires de GestureDetector.SimpleOnGestureListener et reçoit un événement reconnu prêt. GestureDetector est recommandé pour tous les gestes standard sauf le zoom — pour cela il y a ScaleGestureDetector.

val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
    override fun onFling(
        e1: MotionEvent?, e2: MotionEvent,
        velocityX: Float, velocityY: Float
    ): Boolean {
        val deltaX = e2.x - (e1?.x ?: 0f)
        return if (Math.abs(deltaX) > Math.abs(e2.y - (e1?.y ?: 0f))) {
            if (deltaX > 0) onSwipeRight() else onSwipeLeft()
            true
        } else false
    }
})

view.setOnTouchListener { _, event -> gestureDetector.onTouchEvent(event) }

TouchDelegate pour Cibles Personnalisées

TouchDelegate est un mécanisme pour étendre la zone tactile d'une View. Il est utilisé lorsque l'élément cible est plus petit que la taille tactile minimale de 48dp. Par exemple, un petit bouton « Fermer » dans le coin de l'écran reçoit un TouchDelegate qui étend sa zone d'impact sans changer sa taille visible. Google recommande TouchDelegate pour tous les éléments interactifs de moins de 48x48dp.

Gestes dans Jetpack Compose

Compose fournit des modificateurs pour la gestion des gestes : clickable, draggable, swipeable, combinedClickable (pour double tap et appui long). En interne, Compose utilise PointerInputScope pour le traitement bas niveau, mais la plupart des développeurs n'ont besoin que des modificateurs haut niveau. Pour les gestes personnalisés, utilisez pointerInput avec awaitPointerEvent.

Navigation Gestuelle sur iOS : UIGestureRecognizer et SwiftUI

iOS SDK utilise l'architecture UIGestureRecognizer — une classe de base abstraite qui analyse une séquence de UITouch et détermine si elle correspond à un geste connu. Apple recommande d'utiliser les reconnaisseurs standard autant que possible, et de ne créer des sous-classes personnalisées que pour des gestes uniques.

UIGestureRecognizer dans UIKit

UIKit fournit un ensemble de reconnaisseurs prêts à l'emploi : UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Chaque reconnaisseur a des états (possible, began, changed, ended, cancelled, failed) — le développeur suit l'état pour réagir à différentes étapes du geste.

let swipeBack = UISwipeGestureRecognizer(
    target: self,
    action: #selector(handleSwipeBack)
)
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

@objc func handleSwipeBack() {
    navigationController?.popViewController(animated: true)
}

Gestes dans SwiftUI

SwiftUI utilise des modificateurs de gestes déclaratifs, similaires à Compose : onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. SwiftUI gère automatiquement les conflits entre gestes via simultaneousGesture, sequencedGesture et exclusiveGesture — des modificateurs qui déterminent la priorité des gestes lorsqu'ils sont déclenchés simultanément.

Image("photo")
    .gesture(
        MagnificationGesture()
            .onChanged { scale in
                self.currentScale = scale
            }
            .sequenced(before: DragGesture())
    )

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer est un reconnaisseur système qui contrôle le geste de balayage retour dans UINavigationController. Par défaut, il est actif pour tous les écrans sauf la racine. Si votre application utilise une NavigationBar personnalisée, interactivePopGestureRecognizer peut cesser de fonctionner — il faudra l'activer par programmation via navigationController.interactivePopGestureRecognizer?.delegate.

Conflit entre Gestes Système et Personnalisés

Le conflit de gestes est l'un des problèmes les plus difficiles de la navigation gestuelle. Lorsqu'un geste personnalisé (par exemple, ouvrir un Drawer en balayant depuis le bord gauche) coïncide avec un geste système (balayage retour sur iOS ou Android), le système doit déterminer quel geste a la priorité. Gérer correctement ce conflit est essentiel pour l'expérience utilisateur.

Solution sur Android : Insets et SystemGestureExclusionRects

Android 10+ permet à l'application de réserver des zones de l'écran pour ses propres gestes via WindowInsets. Utilisez ViewCompat.setSystemGestureExclusionRects pour spécifier les régions où les gestes système ne doivent pas se déclencher. Par exemple, pour un Drawer à gauche, vous pouvez exclure le bord gauche de l'écran (jusqu'à 200dp de large) du balayage retour système. Google a fixé une limite : jusqu'à 200dp peuvent être exclus de chaque côté.

val exclusionRect = Rect(0, 0, 200, height)
ViewCompat.setSystemGestureExclusionRects(
    drawerView,
    listOf(SystemGestureExclusionRect(exclusionRect))
)

Solution sur iOS : UIGestureRecognizerDelegate

iOS fournit la méthode gestureRecognizerShouldBegin dans UIGestureRecognizerDelegate, qui permet à un reconnaisseur personnalisé de décider s'il doit commencer la reconnaissance. Pour un balayage de Drawer depuis le bord gauche, vous pouvez vérifier la position du toucher : si l'utilisateur fait glisser le Drawer (distance dépasse le seuil), le geste personnalisé prend le contrôle. Si le geste n'est pas reconnu, le système rend le contrôle à InteractivePopGestureRecognizer.

Erreurs Courantes et Bonnes Pratiques

La Navigation Gestuelle nécessite une conception minutieuse, en particulier sur les appareils dotés d'une navigation gestuelle système. Examinons les erreurs courantes et les recommandations pour les corriger.

Erreur : Ignorer les Zones de Conflit aux Bords de l'Écran

L'erreur la plus courante consiste à placer des éléments interactifs ou à implémenter des balayages personnalisés dans les zones de gestes système (bords gauche et droit, bord inférieur). L'utilisateur tente d'effectuer une action, mais la navigation système se déclenche à la place. Prévoyez toujours des marges pour les gestes système et gérez les conflits via les exclusion rects.

Erreur : Vitesse de Reconnaissance Différente sur Android et iOS

Les paramètres de gestes (seuil de vélocité, distance minimale) diffèrent par défaut entre les plateformes. Si votre application est multiplateforme, ne copiez pas les paramètres d'une plateforme à l'autre — testez chaque geste séparément sur Android et iOS. Flutter et React Native adaptent automatiquement certains paramètres, mais pas tous.

Bonne Pratique : Retour Visuel

Chaque geste doit être accompagné d'un retour visuel : changement de couleur, transformation, animation. L'utilisateur doit comprendre que le geste a été reconnu et que l'action est exécutée. Sur iOS, les reconnaisseurs système fournissent automatiquement un retour haptique ; sur Android, il doit être ajouté via HapticFeedbackConstants.

Bonne Pratique : Accessibilité pour les Gestes

Tous les utilisateurs ne peuvent pas effectuer des gestes — les personnes ayant des capacités motrices limitées utilisent VoiceOver et TalkBack pour naviguer. Chaque geste doit avoir une alternative par bouton. Google et Apple exigent que toutes les actions gestuelles soient dupliquées avec des contrôles accessibles.