UX Swipe-to-Action : Rendre les gestes cachés détectables et sécurisés
Comment concevoir des actions de balayage dans les listes : signifiants, seuils, validations par balayage complet, annulation, accessibilité et pourquoi le balayage ne devrait jamais être le seul moyen.
À retenir
Les actions de balayage sont un raccourci rapide pour les actions de liste fréquentes telles que l'archivage ou la suppression, mais elles sont masquées et ne doivent donc jamais être le seul moyen de faire quelque chose. Utilisez-les pour les actions attendues, affichez un seuil clair à mesure que l'élément se déplace, laissez un balayage partiel révéler et un balayage complet, et proposez l'annulation des actions destructrices.
Les problèmes d'utilisabilité
Nielsen Norman Group a détecté des problèmes récurrents avec les actions de balayage pour révéler : le manque de signifiants ne permet pas de savoir clairement où le balayage fonctionne, les actions non standard derrière le balayage surprennent les personnes qui s'attendent à une suppression ou à l'archivage, le fait de cacher de nombreuses actions derrière un balayage les rend difficiles à découvrir, et le balayage peut être ambigu lorsque le même geste navigue également entre les sections.
Comment les actions de balayage doivent-elles se comporter ?
Material Design décrit le modèle commun sur Android : les éléments de la liste peuvent révéler des boutons lors d'un balayage, et l'action principale est l'option finale alignée à la fin, qu'un balayage complet déclenche directement.
- Continuez à glisser pour les actions fréquentes et attendues : archiver, supprimer, marquer comme lu.
- Affichez l'action et sa couleur à mesure que l'élément se déplace et modifiez-la visiblement au seuil de validation.
- Ressortez l'élément s'il est libéré avant le seuil.
- Proposez d'annuler ou demandez une confirmation pour les actions destructrices.
- Ne mélangez pas les actions de balayage horizontal avec la navigation par balayage horizontal sur le même écran.
Jamais le seul moyen
Le balayage étant invisible, placez les mêmes actions dans un menu visible, un menu en appuyant longuement ou un écran de détail. Cela couvre également l'accessibilité : les utilisateurs de lecteurs d'écran et les personnes qui ne peuvent pas effectuer de gestes précis ont besoin d'un itinéraire non gestuel, et les plateformes proposent des actions d'accessibilité précisément dans ce but.
Le mouvement rend le balayage digne de confiance
L'objet doit suivre exactement le doigt et, lors du relâchement, un ressort qui supporte la vitesse du doigt rend l'engagement ou le retour en arrière physique. Une brève tape haptique sur le seuil, là où la plateforme la supporte, confirme l'action avant que le doigt ne se lève.
Principes clés à retenir
- Le balayage est masqué : fournissez toujours une alternative visible
- Utilisez-le pour les actions fréquentes et attendues
- Un balayage partiel est révélé, un balayage complet est validé, la version anticipée revient
- Annuler ou confirmer les actions destructrices
- Évitez les gestes horizontaux contradictoires sur un seul écran
Questions fréquentes
Sources
- Using Swipe to Trigger Contextual Actions — Nielsen Norman Group
- Lists guidelines — Material Design 3