29. Eviter les animations

[Yanngautreau]

---

title: 29. Eviter les animations
people: Yann Gautreau
scope: Front-office
state_validation: TO VALIDATE
responsible:

• Designeu(se·r)
  lifecycle:
• 1 - En amont
• 2 - Conception / Design
  priority_implementation: Fort 👍👍👍
  environmental_impact: Moyen 🌱🌱
  saved_resources:
• Processeur
• Mémoire vive
  path: /fiches/29-eviter-les-animations

---

Sujet

Les animations présentes sur un site internet sont généralement là pour augmenter l'engagement de l'utilisateur, censé provoqué une émotion chez ce dernier ce qui va augmenter son intérêt et ainsi captiver son attention. Il faut bien différencier une animation procédant de la pédagogie, à celles qui sont là uniquement dans un but esthétique. Ces dernières vont rajouter des ressources poids Javascript et CSS non nécessaire à la lisibilité de votre projet.

GreenIT vous conseille

Évitons toutes animations de contenu (textes, images) par surgissement ou glissement (fade In, fade out...) à l'ouverture de la page, ne pas privilégier les animations au déclenchement au scroll de type parallax. Ces animations peuvent sembler viable en desktop mais en version mobile elles sont inutiles voires elles nuisent à l'expérience utilisateur (privilégions toujours la vision mobile first). Si nous devons garder de l'animation, privilégions les micros-interactions via CSS uniquement, ces dernières vont effectivement participer à la compréhension et à l'expérience utilisateur.
Micros-intercations : changement état au survol ou au clic par exemple, elles ne doivent pas excéder 0.4 secondes, utilisons les pseudos-class, la propriéte transform (scal, rotate) au lieu d'agir sur la propriété height, width et position par exemple.

Exemple

Animation pédagogique : https://ig.ft.com/space-debris/ (non wordPress donc pas pertinent ?)

Principe de validation

Le nombre ...	est inférieur ou égal à
de ...	0

Source

Source s'il y en a

[dNicolle]

@Yanngautreau Commit vu, il y a un truc bizarre avec tes listes à puces.
Tu as besoin d'info/d'aide pour le principe de validation ?