Balayer dans les applications mobiles — types de gestes et implémentation

Qu'est-ce que le balayage dans les interfaces mobiles

Balayer (swipe) est un geste par lequel l'utilisateur fait glisser son doigt sur l'écran dans une direction spécifique, déclenchant une action. Contrairement au tap (contact court), le balayage implique un mouvement et un contact avec l'écran pendant toute la durée du geste.

L'histoire du balayage a commencé avec le premier iPhone en 2007 — le geste « slide to unlock » est devenu la marque de fabrique des interfaces mobiles. Aujourd'hui, le balayage est utilisé dans des milliers d'applications pour la navigation, la gestion de contenu et l'organisation d'informations.

Selon UX Planet (2025), les applications avec contrôle gestuel (y compris le balayage) montrent un engagement utilisateur supérieur de 18%. Le balayage est perçu comme une action plus naturelle que l'appui sur un bouton, car il imite le mouvement physique des objets.

Paramètres de reconnaissance du balayage

Les paramètres principaux qui déterminent si un geste est un balayage sont : distance minimale (généralement 30–50 pixels), déviation maximale par rapport à une ligne droite (pas plus de 15–20 degrés) et durée maximale de contact (jusqu'à 500 ms). Si le doigt reste plus longtemps sur l'écran, le geste est classé comme glissement ou appui long.

Types de balayage par direction

Selon la direction du mouvement, les balayages se divisent en quatre types principaux : gauche, droite, haut et bas. Chaque type a son propre objectif et contexte d'utilisation.

Les balayages horizontaux (gauche/droite) sont le plus souvent utilisés pour gérer des éléments individuels — suppression, archivage, feuilletage. Les balayages verticaux (haut/bas) — pour naviguer entre les écrans et actualiser le contenu. Selon les Material Design Guidelines (2024), le balayage horizontal est plus confortable pour les droitiers : déplacer le pouce vers la gauche est plus naturel avec la main droite.

Balayages multi-doigts

Les balayages à deux et trois doigts sont utilisés pour des actions avancées. À deux doigts — basculer entre les bureaux sur iPad, annuler (balayage à trois doigts). À trois doigts — capture d'écran sur certains appareils. Cependant, les gestes multi-doigts sont moins intuitifs et nécessitent un apprentissage de l'utilisateur.

Implémentation du balayage sur iOS

Sur iOS, le traitement des gestes repose sur UIGestureRecognizer — une classe abstraite qui analyse une séquence d'événements tactiles et détermine s'ils correspondent à un geste spécifique.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipe)
        )
        swipeLeft.direction = .left
        view.addGestureRecognizer(swipeLeft)
    }

    @objc func handleSwipe(sender: UISwipeGestureRecognizer) {
        print("Balayer vers la gauche")
    }
}

UISwipeGestureRecognizer prend en charge la configuration de la direction (direction) et du nombre de doigts (numberOfTouchesRequired). Par défaut, un doigt et la direction droite sont requis. Pour reconnaître d'autres directions, vous devez spécifier explicitement la direction : .left, .up, .down.

Une API de plus haut niveau — UICollectionViewLayout avec prise en charge des actions de balayage. Depuis iOS 11, les tableaux et les collections prennent en charge les actions de balayage intégrées via UISwipeActionsConfiguration, permettant d'ajouter des boutons de suppression ou d'archivage sans traitement manuel des gestes.

Implémentation du balayage sur Android

Sur Android, le traitement du balayage est construit via GestureDetector — une classe qui analyse les MotionEvents et appelle les méthodes de rappel correspondantes.

class SwipeActivity : AppCompatActivity() {
    private val swipeThreshold = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                val dx = e2.x - e1.x
                if (dx > swipeThreshold) {
                    println("Balayer vers la droite")
                }
                return true
            }
        })
    }
}

La méthode onFling dans GestureDetector est appelée lorsque l'utilisateur balaie rapidement son doigt sur l'écran. Elle reçoit les coordonnées de début et de fin (e1, e2) et la vitesse du mouvement (velocityX, velocityY). Pour déterminer la direction, la différence de coordonnées sur l'axe X ou Y est comparée.

La bibliothèque AndroidX fournit une API plus pratique : ViewCompat.setSwipeRefreshLayout pour le pull-to-refresh, RecyclerView avec ItemTouchHelper pour les actions de balayage dans les listes. ItemTouchHelper permet d'ajouter des fonctionnalités de balayage avec un retour visuel — icône, couleur de fond et animation.

Balayage dans les applications web

Dans le développement web, les événements Touch Events API (touchstart, touchmove, touchend) et les bibliothèques d'encapsulation comme Hammer.js ou Swiper.js sont utilisés pour traiter les balayages.

let startX = 0;
let startY = 0;
const threshold = 50;

element.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if (Math.abs(dx) > threshold) {
        console.log(dx > 0 ? "Balayer vers la droite" : "Balayer vers la gauche");
    }
});

Touch Events API — une méthode native de traitement des gestes dans le navigateur. L'événement touchstart enregistre les coordonnées initiales, touchmove suit le mouvement, touchend détermine le résultat. La valeur seuil (threshold) filtre les touches accidentelles.

Selon Can I Use (2026), Touch Events API est pris en charge par 98% des navigateurs. Pour les scénarios gestuels complexes (balayages multiples, reconnaissance de direction), il est recommandé d'utiliser la bibliothèque Hammer.js, qui abstrait le traitement de bas niveau et fournit une API claire.

Motifs UX avec le balayage

Les motifs UX réussis avec le balayage se sont formés au fil des années d'évolution des interfaces mobiles. Leur utilisation garantit que l'utilisateur comprend comment le geste fonctionne sans apprentissage supplémentaire.

Le motif « Swipe to Delete » est le plus courant. Balayer vers la gauche sur un élément de liste révèle un bouton de suppression. Standardisé sur iOS (SwipeActionsConfiguration) et Android (ItemTouchHelper). Les utilisateurs s'attendent à ce que balayer vers la gauche supprime ou archive un élément.

Le motif « Swipe to Go Back » — balayer depuis le bord gauche de l'écran pour revenir à l'écran précédent. Devenu un standard sur iOS après l'iPhone X. Sur Android, une navigation similaire fonctionne via le geste système. Il est important de ne pas entrer en conflit avec ce geste système dans vos propres applications.

Le motif « Pull to Refresh » — balayer vers le bas pour actualiser le contenu. Inventé par Loren Brichter pour Tweetie (2008), maintenant utilisé dans des millions d'applications. Implémenté dans les composants standards des deux plateformes.

• Retour d'information — l'élément doit se déplacer avec le doigt, montrant le résultat avant la fin du balayage
• Conflits de gestes — évitez de supporter simultanément le balayage horizontal et le défilement sur le même élément
• Découvrabilité — les premières actions de balayage doivent être accompagnées d'un indice visuel
• Annulation — l'utilisateur doit pouvoir annuler le balayage en ramenant le doigt à sa position d'origine