Micro-interactions : 15 exemples et comment les concevoir
Les micro-interactions expliquées : une définition, les quatre parties de Dan Saffer, 15 exemples réels regroupés par type, les règles de conception et comment les construire en CSS, Framer Motion, GSAP ou ExodeUI.
À retenir
Une micro-interaction est un petit moment confiné dans une interface qui ne fait qu'une seule chose : aimer une publication, modifier un paramètre, confirmer un formulaire ou effectuer un geste. Le terme et son anatomie viennent de Dan Saffer, qui définit quatre parties. Un déclencheur le démarre, les règles décident de ce qui se passe, les commentaires montrent le résultat et les boucles ou modes régissent ce qu'il fait au fil du temps. Les bonnes micro-interactions sont courtes, répondent aux propres entrées de l'utilisateur et restent interruptions.
Qu'est-ce qu'une micro-interaction ?
Une micro-interaction est la plus petite interaction complète dans un produit : une tâche unique avec un début, un changement et une fin. Ce n'est pas un flux complet. Aimer une publication est une micro-interaction ; écrire et publier un commentaire est un flux. L'idée et sa structure proviennent du livre Microinteractions de Dan Saffer, qui divise chacune en quatre parties.
Les quatre parties d'une micro-interaction
Le cadre de Dan Saffer divise une micro-interaction en quatre composants. Les nommer est utile car la plupart des bugs et la plupart des mauvais mouvements résident dans l'un des quatre, pas dans l'ensemble.
Déclenchement
L'événement qui le démarre. Initié par l'utilisateur (un appui, un survol, un appui long, un glisser) ou initié par le système (la fin d'un téléchargement, l'arrivée d'une erreur réseau). Crédit : Dan Saffer.
Règles
Que se passe-t-il une fois qu'il démarre : les états valides, les contraintes telles que les limites de traînée ou les valeurs minimales et maximales, et la séquence des événements. Crédit : Dan Saffer.
Retour
Comment le produit indique à l'utilisateur ce qui s'est passé : l'installation du ressort, le changement de couleur, la transformation de l'icône, la mise à jour du texte. C’est là que réside la majeure partie du motion design. Crédit : Dan Saffer.
Boucles et modes
Ce que fait l’interaction au fil du temps et comment les modes la modifient. La même bascule peut se comporter différemment en mode sombre ou dans une présentation compacte sans changer sa logique. Crédit : Dan Saffer.
Pourquoi les micro-interactions sont importantes
Une micro-interaction est la manière dont une interface répond à l'utilisateur sans paragraphe de texte. Il confirme qu'une action a été reçue, montre que quelque chose fonctionne toujours ou explique ce qui vient de changer. Lorsqu'ils manquent, le même produit semble plus lourd : les utilisateurs appuient deux fois parce que rien ne leur a dit que le premier appui a atterri, ou ils attendent sur un écran qui ne donne aucun signe de progression. Les bons sont plus ressentis que remarqués, c’est là le point.
15 exemples de micro-interactions
Ceux-ci sont regroupés selon ce qu’ils communiquent. Lorsque ExodeUI fournit un exemple correspondant, le nom est donné afin que vous puissiez l'ouvrir et le modifier.
Boutons et bascules (appuyer et indiquer)
1. Pression sur un bouton : échelle jusqu'à environ 0,92 lorsque le pointeur est bas et ressort lorsque vous le relâchez (exemple ExodeUI : Jelly Button). 2. Interrupteur à bascule : traduction basée sur Spring avec changement de couleur lors de la validation (Gooey Toggle). 3. Commutateur de mode : un contrôle segmenté qui fait glisser son indicateur et transforme l'étiquette active (Motion Switch).
Retour du formulaire (validation et soumission)
4. Tremblement de saisie invalide : un court coup de pouce horizontal indiquant « vérifiez ce champ » sans boîte de dialogue (Saisie de texte Wiggle). 5. Soumission en cours : le bouton devient l'indicateur de progression, afin que l'utilisateur ne perde jamais sa place (Bouton d'envoi animé). 6. Confirmation du succès : un petit éclat de célébration sur le bouton lorsque l'action atterrit (Rocket Launch Button).
Chargement et progression
7. Progression circulaire : un anneau qui se remplit à la valeur réelle et se stabilise grâce à un ressort (Radial Gauge). 8. Indicateur de niveau ou d'activité : une barre qui réagit en direct aux données entrantes telles que le niveau audio (Sound Wave).
Navigation
9. Basculement de menu : une icône qui se transforme entre deux états et révèle le menu en place (Morph Nav). 10. Grossissement du Dock : les éléments proches du curseur se soulèvent et grandissent, puis se stabilisent (Magnetic Dock). 11. Sélection des onglets : un indicateur qui glisse entre les onglets au lieu de clignoter (Liquid Tab Bar).
États vides et réussis
12. État vide : une petite illustration qui s'anime en une seule fois pour adoucir un écran vide. 13. Récompense révélée : un cadeau ou un badge qui s'ouvre avec anticipation lorsqu'un jalon est atteint (Coffret Cadeau Surprise).
Tirer pour rafraîchir
14. Pull-to-refresh : overscroll élastique qui suit la traînée, puis revient en arrière et se stabilise lors du relâchement. Le feedback est l'étirement, pas un spinner.
Commentaires de style haptique
15. Impulsion de confirmation : une brève échelle et une lueur sur l'élément qui reflète le tapotement haptique sur le mobile, de sorte que la même action soit la même sur un appareil sans moteur de vibration.
Des règles de conception qui les maintiennent bons
Quelques règles séparent une micro-interaction qui aide de celle qui agace.
- Soyez bref : le plus complet est en environ 200 à 400 ms ; un mouvement plus long sur un petit élément semble lent
- Commencez dans le même cadre que l'entrée ; un départ retardé brise le sentiment de cause à effet
- Gardez-le interrompu : si l'utilisateur inverse l'action en cours de mouvement, redirigez-le avec vitesse plutôt que de redémarrer à zéro.
- Respect préfère le mouvement réduit : fournit un repli statique ou en fondu enchaîné qui communique toujours le changement
- Donnez-lui une tâche : si l'interaction nécessite plus d'une décision, c'est un flux
Comment créer des micro-interactions
Le bon outil dépend du nombre de plates-formes sur lesquelles la même interaction doit s'exécuter.
CSS uniquement
Idéal pour les cas simples et autonomes : ascenseurs en survol, bagues de mise au point et bascules pilotés par :checked ou un changement de classe. Les transitions et les @keyframes suffisent, et il n'y a rien à expédier au-delà de la feuille de style.
Framer Motion ou GSAP (Web)
Idéal lorsque le mouvement nécessite des ressorts, des gestes ou une orchestration et doit uniquement s'exécuter sur le Web. Les deux vous donnent des ressorts interruptions et peuvent être entraînés par l'état React.
ExodeUI (Web, iOS et Android à partir d'un seul fichier)
Utilisez-le lorsque la même interaction doit se comporter de manière identique dans une application React, une application SwiftUI et Flutter. Vous le créez une fois dans un fichier .exode et le runtime le lit sur chaque plate-forme, il n'y a donc pas de réécriture par plate-forme.
Extrait d’implémentation en production
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Principes clés à retenir
- Une micro-interaction est une petite tâche avec un déclencheur, des règles, des commentaires et des boucles ou modes, les quatre parties nommées par Dan Saffer.
- La plupart des bons se terminent en 200 à 400 ms environ, démarrent dans la même image que l'entrée et restent interruptions.
- Le feedback est ce qui fait le travail : il confirme l'action et explique ce qui a changé, souvent sans aucun texte.
- Fournissez toujours une solution de secours à mouvement réduit qui transporte les mêmes informations sans mouvement