Cet article a été rédigé le 6 novembre 2026.
Les outils d’IA évoluent à toute vitesse. La quantité d’animations qu’une interface web peut supporter sans nuire à l’usage reste inchangée. Un survol (hover), une transition (transition) courte et une discrète réponse au toucher suffisent amplement à valider l’ergonomie d’un écran. Les effets de verre dépoli, la parallaxe, les ouvertures décalées, les carrousels et l’ancrage rigide du défilement peuvent être identifiés et refusés. Lisez ceci comme la définition d’un seuil de sobriété, non comme un catalogue d’animations à appliquer.
Les modèles d’IA ont tendance à ajouter des effets visuels parce que le mouvement donne l’illusion d’un travail abouti. Une page statique peut sembler incomplète lors d’une démonstration sur grand écran, alors qu’elle s’avère parfaitement adaptée aux conditions d’une salle d’attente. Or, le public visé par cette série se trouve précisément dans ces conditions réelles : un smartphone en main, la lumière vive de la rue, une interface consultée dans une langue qui n’est pas forcément sa langue maternelle, et aucun temps à perdre avec des éléments qui bougent pendant qu’on cherche à lire un tarif. Le mouvement ne se justifie que s’il explique une transition ou un changement d’état ; il ne se justifie jamais par le simple fait que le concepteur connaissait le nom d’un effet.
Trois interactions qui méritent leur place
Un survol (hover) est un changement d’aspect lorsqu’un pointeur de souris vient se poser sur un composant : une légère nuance de couleur ou le soulignement d’un lien. Il indique aux personnes utilisant une souris que l’élément est interactif. Cet effet n’existe pas lors d’une navigation au doigt sur écran tactile. Toute information uniquement accessible au survol est strictement invisible sur smartphone. Exigez systématiquement que le même signal visuel apparaisse lors de la focalisation au clavier (focus), ou renoncez-y.
Une transition (transition) correspond au bref laps de temps nécessaire pour passer d’un état à un autre, généralement autour d’un cinquième de seconde. Un tiroir (drawer) qui s’affiche instantanément sans animation intermédiaire paraîtra cassé ; un tiroir qui met une seconde entière à glisser semblera lent. Demandez une transition courte à l’ouverture et à la fermeture. Évitez absolument de réclamer une animation sur chaque lettre d’une phrase : lire n’est pas un spectacle.
Une micro-interaction (microinteraction) est une réponse discrète à un geste précis. Le bouton d’enregistrement confirme brièvement l’action ; une option sélectionnée adapte son visuel. Cela relève du même principe de clarté qu’une notification éphémère (toast), dans un format plus restreint. Ce n’est ni une animation de mascotte, ni une projection de confettis, ni un effet sonore. Si la réponse ne peut pas s’expliquer en une seule proposition simple, elle est déjà disproportionnée.
Des effets qu’il suffit de savoir refuser
Ces termes correspondent à des techniques existantes. Ils ne constituent pas des étapes obligatoires pour créer une première page. Lorsqu’un modèle d’IA vous les propose spontanément, vous devez savoir les décliner explicitement par leur nom :
- Glassmorphism — un panneau d’apparence dépolie. Cet effet réduit considérablement le contraste des textes superposés. Si la lecture devient difficile, supprimez l’effet de verre.
- Parallaxe (parallax) — un arrière-plan qui se déplace à une vitesse différente du texte. Ce mouvement peut provoquer un inconfort visuel chez certains usagers. Il entre de plus directement en conflit avec les réglages système demandant une réduction des mouvements (reduced motion).
- Bento — une grille de blocs asymétriques, s’inspirant des coffrets repas japonais. Cette disposition peut s’avérer utile plus tard pour un tableau de bord ; sur une première page, elle brouille la hiérarchie des informations en laissant la taille des blocs imposer inutilement l’importance des contenus.
- Apparition échelonnée (stagger) — l’affichage progressif des éléments les uns après les autres avec un délai. L’utilisateur se retrouve contraint d’attendre l’affichage d’une liste qu’il aurait pu lire immédiatement.
- Carrousel (carousel) — un défilé horizontal d’images ou de cartes. La grande majorité des utilisateurs ne consulte jamais au-delà de la première vue. Intégrez directement les informations essentielles dans le corps de la page.
- Ancrage de défilement (scroll snap) — le blocage forcé du défilement sur chaque écran complet. Sur smartphone, ce comportement piège les utilisateurs entre des sections qu’ils souhaitaient simplement parcourir rapidement.
Inutile d’accorder du temps d’apprentissage à ces effets. Il suffit de savoir les refuser lorsqu’ils sont suggérés sans besoin réel : “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” Cette phrase en anglais constitue en elle-même une consigne parfaitement claire.
L’affichage d’un tarif en extérieur
Imaginez une personne debout devant un commerce, son smartphone à la main en plein soleil, tentant de lire le tarif d’un service avant d’entrer. La page qui lui a été conçue fait apparaître le prix après un temps d’attente, le superpose à une photo de la rue et déplace l’arrière-plan plus lentement que le texte. Lors de la démonstration sur l’écran d’un bureau, l’effet paraissait très travaillé. En plein soleil, l’interface semble instable et illisible. La personne préfère entrer pour demander directement. La page a manqué à son unique fonction.
Ce constat s’impose plus rapidement encore là où le smartphone constitue le seul écran disponible et où la rue fait office de bureau. Un effet d’animation qui nécessite une pièce sombre et un grand moniteur pour paraître élégant ne constitue pas un choix neutre par défaut ; c’est une habitude importée des studios de création. Nommer l’effet permet de refuser cette habitude. Nul besoin de critiquer le style visuel : il suffit d’indiquer clairement le nom anglais du composant ou de l’effet rejeté dans vos consignes au modèle d’IA, afin qu’il ne soit pas réintroduit sous le prétexte de « rendre la page plus moderne ».
La consigne qui prévient ce problème est courte, et elle utilise les noms exacts pour empêcher le modèle de traduire une demande de « sobriété » par une autre forme de décoration : Pas de carrousel pour afficher les tarifs. Pas de verre dépoli (glassmorphism) derrière les chiffres. Pas de parallaxe. Pas d’apparition échelonnée sur la liste des services. Une courte transition lors de l’ouverture d’un tiroir (drawer), et aucune transition si l’utilisateur a activé l’option de mouvement réduit (reduced motion) sur son téléphone. Du texte sombre sur une surface claire et unie. Le tarif doit être le premier élément lisible de la section, non la seconde carte d’un défilé. Ce paragraphe de cadrage peut être rédigé une fois pour toutes et réemployé dans l’ensemble de vos projets de l’année : il restera pertinent bien plus longtemps que les tendances visuelles qui tentent les modèles d’IA.
La règle d’accessibilité qui prime sur l’effet
Les systèmes d’exploitation permettent d’activer une option exigeant des mouvements réduits (reduced motion). Une interface qui ignore ce choix utilisateur ne fait pas preuve de dynamisme ; elle manque d’égard envers un besoin explicite. Précisez cette contrainte dans vos consignes : si l’utilisateur préfère une réduction des mouvements (reduced motion), affichez directement l’état final sans glissement ni apparition échelonnée. L’information reste présente ; l’animation est supprimée.
La lisibilité et le contraste résistent à toutes les modes. Du texte superposé à une photo, du texte sur du verre dépoli ou rédigé dans un gris très clair qui paraissait élégant sur l’écran du concepteur s’avèrent illisibles en plein soleil, sur des écrans basiques ou pour des yeux fatigués. Exigez du texte sombre sur une surface claire et unie, sauf motif fonctionnel impérieux. Nommer la texture de la surface est secondaire ; fournir des mots lisibles est fondamental.
Le parcours proposé au fil de cette série ne visait pas à mémoriser quarante définitions. Il s’articulait autour de quatre décisions majeures : Nommer le composant en anglais pour éviter que le modèle ne devine au hasard. Rédiger les libellés et les contenus dans la langue des usagers. Choisir clairement si le composant doit interrompre, partager l’écran ou simplement informer. Enfin, maintenir l’interface suffisamment stable pour permettre une lecture fluide. Une personne maîtrisant ces quatre principes possède le vocabulaire qui conditionne réellement la qualité du travail. Le reste n’est qu’un catalogue d’options techniques à ouvrir plus tard, en utilisant le nom anglais approprié, si un besoin précis le réclame.