Mouvement et narration
Comment adapter au tactile une interaction conçue pour le survol de la souris ?
Pour adapter une interaction de survol à un écran tactile, commencez par identifier sa fonction. Révèle-t-elle une information essentielle, un aperçu facultatif ou un simple effet visuel ? La réponse détermine la transposition : montrer le contenu directement, ajouter une commande explicite ou supprimer l'effet sans perte d'information.
L'essentiel.
Adapter le survol au tactile demande de préserver la fonction plutôt que de reproduire le geste. Une information importante peut devenir permanente, un aperçu recevoir une commande et un effet décoratif disparaître sans enlever de contenu.
- Classez les effets de survol selon leur rôle avant de les adapter.
- Rendez les informations essentielles disponibles sans geste caché.
- Séparez la commande d'aperçu de la commande de navigation lorsqu'elles sont différentes.
- Testez les appareils hybrides et le clavier, au-delà d'une simple séparation ordinateur/mobile.
Chercher à reproduire exactement le survol conduit souvent à des gestes ambigus. Un premier toucher peut afficher un état et un second ouvrir une page, sans que le visiteur sache ce qui l'attend. Il vaut mieux concevoir une action claire pour chaque fonction et conserver une expérience cohérente entre les modes de navigation.
Faire l'inventaire de ce que le survol révèle
Parcourez les cartes, les menus, les images et les commandes. Notez ce qui apparaît ou change au passage du pointeur. Un prix caché, une description, une image de projet et un changement de couleur n'ont pas la même importance.
Demandez ensuite ce qui serait perdu si l'effet disparaissait. Si le visiteur ne peut plus comprendre une offre ou choisir une destination, le contenu doit disposer d'un autre accès évident. Si seule une nuance visuelle manque, la version tactile peut rester plus simple.
Cette analyse aide à éviter les adaptations mécaniques. Le rôle de l'information doit guider le geste, pas l'inverse. Une interface mobile peut être différente dans sa forme tout en conservant la même qualité de compréhension.
Choisir la bonne transposition
Une information courte peut être affichée directement sous une image. Un aperçu plus développé peut recevoir un bouton. Un menu peut séparer le lien vers une rubrique et la commande qui ouvre ses sous-rubriques. Le choix doit rendre le résultat du toucher prévisible.
| Fonction du survol | Adaptation possible | Point à vérifier |
|---|---|---|
| Information essentielle | Affichage permanent | Lisibilité et place disponible |
| Aperçu facultatif | Commande dédiée | Ouverture et fermeture explicites |
| Sous-menu | Bouton distinct du lien principal | Aucun toucher à double sens |
| Effet décoratif | Simplification ou retrait | Aucune perte de contenu |
| Indication d'action | Signe et libellé visibles | Action compréhensible avant le toucher |
Les médias CSS hover et pointer décrivent respectivement la capacité de survol et la précision du moyen de pointage principal. Ils ne constituent pas une identité certaine de l'appareil.
Exemple fictif : une liste de projets créatifs
Un portfolio affiche les noms de projets dans une liste. Sur ordinateur, une image apparaît au survol et accompagne légèrement le pointeur. Le titre reste un lien vers la page du projet. Cette présentation peut être expressive, mais elle dépend d'une possibilité de survol pratique.
Sur tactile, la liste reçoit une petite image fixe pour chaque projet. Le titre et la vignette ouvrent la même destination. L'aperçu ne demande plus un premier toucher mystérieux. La page conserve les informations et la tonalité visuelle, tout en utilisant une interaction adaptée.
Au clavier, le focus rend l'élément sélectionné identifiable et l'aperçu peut apparaître sans bloquer l'accès au lien. Le dispositif est ainsi pensé comme plusieurs expressions d'une même fonction : reconnaître le projet avant de l'ouvrir.
Préserver la fonction, adapter le geste
- SourisUn aperçu accompagne le survol ; le titre ouvre le projet.
- TactileUne vignette fixe donne l’information avant un toucher explicite.
- ClavierLe focus identifie le projet et conserve l’accès à sa destination.
- Fonction communeReconnaître ce que l’on va ouvrir, sans étape cachée.
Traiter les contenus temporaires avec soin
Les informations qui apparaissent au survol ou au focus doivent laisser le temps de les consulter. Le critère WCAG « Content on Hover or Focus » prévoit des conditions de fermeture, de survol du contenu ajouté et de persistance, avec les exceptions précisées dans le texte.
Évitez donc les panneaux qui disparaissent dès que l'on tente de les rejoindre. Sur tactile, une information temporaire doit également posséder une manière claire de se fermer. Le toucher extérieur peut compléter une commande, mais ne devrait pas être le seul indice d'un comportement difficile à deviner.
Vérifiez enfin les contenus qui couvrent une autre commande. Un aperçu doit enrichir la décision, pas masquer l'action qu'il était censé expliquer.
Tester les combinaisons de moyens de navigation
Une tablette peut être utilisée avec un clavier ou un pointeur. Un ordinateur peut proposer un écran tactile. Testez les changements de moyen de navigation au cours d'une même visite lorsque les appareils ciblés le permettent.
Le système doit éviter de rester bloqué dans un état pensé pour une seule interaction. Une information ouverte au pointeur doit pouvoir être fermée autrement. Un effet décoratif ne doit pas intercepter les gestes utiles.
Documentez les comportements par fonction : affichage, activation, fermeture et état sélectionné. Cette description sera plus durable qu'une règle simpliste du type « sur ordinateur, survol ; sur mobile, clic ».
Questions fréquentes
Peut-on utiliser un appui long pour remplacer le survol ?
Cela peut être envisageable dans un contexte précis, mais ce geste n'est pas toujours évident et peut entrer en concurrence avec des comportements habituels. Pour une information importante, un affichage direct ou une commande nommée offre généralement un accès plus explicite à tester.
Faut-il supprimer toutes les animations sur tactile ?
Non. Il faut adapter les interactions qui dépendent du survol. Une transition déclenchée par un toucher peut rester pertinente si elle répond à une fonction claire. La décision doit porter sur le sens, la lisibilité et le contrôle, pas sur une interdiction générale du mouvement.
Un seul composant peut-il gérer plusieurs modes ?
Oui, si ses états et ses fonctions sont définis clairement. Le même contenu peut être présenté différemment selon les capacités disponibles. Il faut toutefois vérifier les combinaisons et les changements en cours d'usage, afin que l'interface ne repose pas sur une hypothèse figée sur l'appareil.
Sources
Adapter l'interaction avec LVX
Pour un projet LVX, nous proposons d'inventorier les effets de survol et de les relier à leurs fonctions. Les informations nécessaires, les aperçus et les effets décoratifs peuvent ensuite recevoir des adaptations distinctes. Des prototypes sur plusieurs moyens de navigation permettent de vérifier les gestes et les états. Cette démarche préserve la singularité du site tout en évitant que son intérêt disparaisse lorsqu'on quitte la souris. Le résultat recherché est une expérience cohérente dans ce qu'elle permet de comprendre et de faire, même lorsque sa forme évolue. Découvrir notre approche.
