Micro-Interactions: Quand elles Aident, Quand elles Gênent
Un bouton qui grandit légèrement ou une carte qui glisse doucement mérite sa place; un mouvement dans chaque coin d'une page, non. Où placer la limite.
Équipe rabbitclipPublié: 6 min de lecture
En bref
Une micro-interaction est la petite réponse qu'une page donne à l'action d'un visiteur, un clic, un survol, un défilement: un bouton qui grandit légèrement, un signal bref confirmant qu'un formulaire a bien été envoyé, un menu qui s'ouvre avec une transition douce. Elle mérite sa place au moment où elle porte une information: ceci a été cliqué, ceci a réussi, ceci est ouvert maintenant.
Le même mouvement, ajouté uniquement comme décoration sans aucune information, devient du bruit. Chaque carte qui tourne en entrant sur la page, chaque titre qui s'écrit lettre par lettre, fait attendre le visiteur plutôt que de le divertir; ces quelques secondes de délai s'accumulent et font paraître une page lente, indépendamment de son temps de chargement réel.
Trois sujets suivent: quel mouvement mérite sa place, où se situe la limite, et comment respecter une préférence de mouvement réduit.
Quel mouvement porte une information
Une micro-interaction fonctionnelle répond à une question que se pose le visiteur: est-ce que ce que j'ai cliqué a vraiment marché, ai-je bien envoyé le formulaire, ce menu est-il ouvert ou fermé. Un bref indicateur de chargement qui apparaît quand le bouton d'envoi d'un formulaire de commande est cliqué signale au visiteur que l'action est en cours; sans lui, un visiteur pourrait cliquer une seconde fois, ce qui peut causer un vrai problème comme un envoi en double.
Une petite coche verte qui apparaît une fois qu'un champ du formulaire d'adhésion d'un club sportif est correctement rempli entre dans la même catégorie; elle montre au visiteur qu'il est sur la bonne voie et réduit l'envie de revenir tout vérifier avant de terminer.
Où se situe la limite
Un mouvement a franchi la limite dès qu'il dure plus de quelques secondes, dès qu'une animation différente joue dans chaque coin de la page, ou dès qu'il détourne l'attention du contenu réel. Chaque élément visuel qui glisse depuis une direction différente sur la page d'accueil d'un studio de jeux peut impressionner la première fois, mais se ressent comme de la lenteur dès la deuxième visite.
Une mesure pratique: le mouvement devrait se terminer avant que le contenu ne commence à être lu. Si un élément glisse ou scintille encore alors qu'un visiteur a déjà commencé à lire une phrase, la durée doit être raccourcie, ou le mouvement supprimé complètement.
Respecter une préférence de mouvement réduit
Certains visiteurs gardent activé le réglage «réduire le mouvement» au niveau du système d'exploitation; c'est généralement un réglage d'accessibilité pour les personnes ressentant des vertiges ou des nausées déclenchés par le mouvement. Le navigateur transmet cette préférence au site via un signal appelé prefers-reduced-motion (MDN Web Docs, prefers-reduced-motion); un site peut lire ce signal et désactiver les grandes animations de glissement et de rotation tout en gardant seulement les transitions vraiment fonctionnelles, comme un changement de couleur.
La norme WCAG recommande aussi qu'un mouvement déclenché par une interaction puisse être désactivé; cela relève des exigences d'accessibilité, pas d'une préférence de design (W3C WCAG 2.1, Animation from Interactions). Sauter ce réglage sur la page d'accueil d'une application peut rendre la page inutilisable pour un visiteur sensible au mouvement.
Comment tester cela en pratique
Avant sa mise en ligne, un site devrait être parcouru à la fois en mode normal et en mode mouvement réduit, en vérifiant dans les deux cas que les fonctions clés, envoyer un formulaire, ouvrir un menu, naviguer entre les pages, continuent de fonctionner sans casser.
- Activer «réduire le mouvement» au niveau système et retester le site
- Se demander, pour chaque mouvement, s'il porte réellement une information
- Garder la durée du mouvement sous une seconde, supprimer les boucles répétées
- S'assurer que les animations d'entrée se terminent avant que le contenu ne commence à être lu
Le mouvement peut aussi être une décision de marque
Pour certaines marques, un mouvement mesuré fait partie de l'identité; le site d'une agence créative ou d'un studio de jeux peut porter un langage de mouvement plus ludique que la plupart. Pour une société de gestion d'installations ou un cabinet d'avocats, la même intensité de mouvement peut jouer contre le sérieux recherché par la marque. La bonne quantité dépend du secteur et du ton attendu par le visiteur.
États de chargement: écrans squelettes ou spinners
Ce qui s'affiche à l'écran pendant le chargement du contenu est lui-même une décision de micro-interaction. Un spinner dit seulement «attendez»; un écran squelette montre un contour pâle de ce à quoi ressemblera le contenu, ce qui donne au visiteur une meilleure idée de ce qu'il attend.
Des blocs gris pâle en forme de carte qui apparaissent pendant le chargement d'une liste de produits créent moins de sensation d'attente qu'un écran vide ou un simple spinner; la différence se voit surtout dès qu'un chargement dépasse une seconde.
Quand utiliser le son et la vibration comme retour
Une légère vibration sur un appareil mobile peut confirmer qu'une action s'est bien terminée, encore plus clairement qu'un mouvement visuel; mais utilisé en excès, ce même retour devient irritant. Il fonctionne mieux réservé aux moments vraiment importants plutôt que déclenché à chaque effleurement.
Le retour sonore est un choix plus rare et plus risqué sur un site web; un son inattendu peut surprendre un visiteur, surtout dans un environnement calme. Si un son est ajouté, il a besoin d'un moyen clair de le désactiver.
Sur la page d'accueil d'une application, montrer le vrai retour vibratoire ou sonore du produit dans une vidéo est généralement un choix plus sûr et plus efficace que d'ajouter le même effet sur le site lui-même.
Le mouvement aide quand il porte une information, et fatigue quand il s'accumule comme décoration. rabbitclip cadre le mouvement selon sa fonction sur chaque projet et respecte par défaut une préférence de mouvement réduit; l'usage du mouvement sur votre site actuel peut se revoir avec nous.
Questions fréquentes
Qu'est-ce que prefers-reduced-motion ?
Une préférence qu'un visiteur active au niveau du système d'exploitation; le navigateur la transmet au site, qui peut alors réduire les grands mouvements en conséquence.
Faut-il supprimer toute animation en mode mouvement réduit ?
Non, seulement les grandes, glissement, rotation, zoom; les petites transitions comme un changement de couleur peuvent rester.
Une animation d'entrée au chargement de la page pose-t-elle problème ?
Pas si elle se termine avant que le contenu commence à être lu; au bout de quelques secondes, elle commence à faire paraître la page lente.
La bonne quantité de mouvement dépend-elle du secteur ?
Oui, un langage de mouvement ludique convient bien à une agence créative mais peut jouer contre le ton d'un cabinet d'avocats à la même intensité.
Un écran squelette doit-il être utilisé à chaque chargement ?
Non, il apporte peu pour des chargements très brefs (moins d'une demi-seconde); le vrai bénéfice apparaît dès qu'un chargement dépasse une seconde.
