Article original : What is Motion Sensitivity? How to Design Accessible Web Animations

En tant que développeurs web, nous aimons une bonne animation, n'est-ce pas ? Mais soyons honnêtes, parfois nous sommes tellement captivés par l'effet "wow" que nous oublions que nos sites web existent pour des personnes réelles aux besoins divers.

Un obstacle caché pour certains utilisateurs est la sensibilité au mouvement. Ce n'est peut-être pas quelque chose à quoi nous pensons tous les jours, mais cela peut avoir un grand impact sur la façon dont les gens vivent l'internet.

Dans cet article, je souhaite mettre en lumière la sensibilité au mouvement. Nous explorerons à quoi cela ressemble, les conditions qui y sont liées et comment cela peut affecter la capacité de quelqu'un à profiter de l'utilisation d'un site web.

Mes objectifs pour cet article sont :

  1. Vous faire réfléchir à la création d'expériences web confortables et accueillantes pour tous.
  2. Vous équiper de conseils pratiques pour y parvenir. Parce qu'un web inclusif est un meilleur web pour tous.

Qu'est-ce que la sensibilité au mouvement ?

La sensibilité au mouvement n'est pas seulement un terme technique – elle fait référence à la façon dont nous vivons le monde numérique, en particulier pour ceux dont les sensibilités vont au-delà de ce qui est visible. Alors, décomposons ce concept et voyons pourquoi il est important.

Selon la National Library of Medicine, la sensibilité au mouvement fait référence à une condition où une personne ressent des symptômes tels que des étourdissements, des nausées et un déséquilibre en réponse au mouvement. Cela peut être causé par divers facteurs, y compris des problèmes d'oreille interne, des troubles neurologiques et certains médicaments.

Les personnes sensibles au mouvement peuvent avoir des difficultés à tolérer des activités impliquant du mouvement, comme voyager en voiture et même certaines animations de mouvement.

Peut-être avez-vous fait un long voyage en voiture et ressenti le mal des transports. Ou vous êtes allé au cinéma pour voir un film en 3D et, au lieu de profiter de l'expérience, vous avez fini avec des maux de tête, des migraines, des étourdissements ou des nausées. Alors vous comprenez à quel point la sensibilité au mouvement peut être sérieuse.

Comment la sensibilité au mouvement affecte les gens

Pour certaines personnes, les effets de mouvement comme le défilement parallaxe peuvent être ennuyeux, mais les effets de la sensibilité au mouvement vont au-delà d'un simple inconvénient. Cela peut perturber l'expérience numérique et, plus important encore, affecter le bien-être de ceux qui naviguent dans cet espace.

Certaines personnes peuvent se sentir étourdies, nauséeuses, ou ressentir des maux de tête ou des migraines lorsqu'elles sont confrontées à certaines animations ou transitions. Pour elles, l'accès au contenu numérique devient plus qu'un simple clic – c'est une considération de leur confort et de leur santé.

Comprendre les troubles associés

Pour vraiment comprendre la sensibilité au mouvement, je crois que nous devons explorer les conditions qui y sont liées, principalement les troubles vestibulaires et la sensibilité au mouvement visuel.

Les troubles vestibulaires affectent l'oreille interne et la façon dont le cerveau traite les informations spatiales. Pour quelqu'un souffrant de troubles vestibulaires, des tâches simples comme maintenir l'équilibre ou gérer les stimuli de mouvement peuvent devenir difficiles.

La sensibilité au mouvement visuel concerne une sensibilité accrue aux stimuli visuels, entraînant un inconfort ou des réactions adverses à certains types de mouvement. Pour quelqu'un souffrant de sensibilité au mouvement visuel, naviguer sur des sites web avec des animations ou des comportements de défilement spécifiques peut être une lutte.

En explorant ces facettes de la sensibilité au mouvement, nous posons les bases pour créer des espaces numériques qui reconnaissent et respectent les expériences utilisateur diverses.

Alors, pourquoi est-ce important ?

Eh bien, je pense que c'est aussi simple que cela : tout le monde mérite de profiter du monde numérique sans se sentir mal. Comprendre la sensibilité au mouvement nous aide à créer des sites web, des jeux et des applications plus inclusifs et confortables pour tous, pas seulement pour ceux qui ont une vision de super-héros.

Explorons pourquoi concevoir en gardant à l'esprit la sensibilité au mouvement n'est pas seulement une bonne pratique mais une étape vers un monde en ligne plus inclusif.

À quel point la sensibilité au mouvement est-elle courante ?

La sensibilité au mouvement est plus courante que vous ne le pensez. Selon cet article des Archives de Physiothérapie, il a été rapporté que 28,4 % de la population ressentent une sensibilité au mouvement. De plus, selon cet article :

Presque toutes les personnes sont affectées avec un mouvement suffisant et la plupart des gens ressentiront le mal des transports au moins une fois dans leur vie. La susceptibilité, cependant, est variable, avec environ un tiers de la population étant très susceptible tandis que la plupart des autres personnes sont affectées dans des conditions extrêmes. Les femmes sont plus facilement affectées que les hommes.

Ces statistiques soulignent la nécessité pour les concepteurs et développeurs web de prendre en compte la sensibilité au mouvement dans nos créations. Elles mettent en évidence le fait que ce qui peut être une animation visuellement engageante pour un utilisateur peut être un obstacle pour un autre.

Comment identifier les déclencheurs de sensibilité au mouvement dans les animations

L'animation peut améliorer l'engagement et aider à guider les utilisateurs à travers l'application. Mais il est vital que nous examinions de près les types d'animations que nous incorporons dans nos conceptions, en particulier lorsque nous visons des expériences adaptées au mouvement.

Explorons ces déclencheurs potentiels et discutons des alternatives pour garantir une conception plus inclusive.

Animations rapides ou clignotantes

  • Potentiel de déclenchement : Les animations rapides et clignotantes peuvent désorienter les utilisateurs sensibles au mouvement, entraînant un inconfort ou des maux de tête. Des exemples de ces types d'animations incluent les notifications clignotant rapidement, les bannières clignotantes ou les boutons d'appel à l'action clignotants.
  • Approche alternative : Optez pour des transitions plus douces comme des fondu ou des glissements subtils, en évitant les effets de clignotement rapide pour une expérience plus confortable.

Transitions trop complexes

  • Potentiel de déclenchement : Les animations de chargement élaborées avec des motifs complexes, des effets de glissement complexes ou des transitions trop détaillées entre les pages peuvent submerger les utilisateurs, provoquant une surcharge sensorielle pour ceux qui sont sensibles au mouvement.
  • Approche alternative : Simplifiez les transitions, concentrez-vous sur la clarté et le but. Efforcez-vous d'avoir une conception élégante sans complexité visuelle inutile.

Mouvements de rebond ou élastiques

  • Potentiel de déclenchement : Les animations avec des mouvements de rebond ou élastiques peuvent provoquer des étourdissements ou des nausées chez les utilisateurs sensibles au mouvement. Des exemples incluent les boutons qui rebondissent lors d'une interaction ou les effets de défilement élastique.
  • Approche alternative : Choisissez des fonctions d'assouplissement plus subtiles pour les animations, offrant une expérience plus douce et moins exigeante physiquement.

Animations à haute vitesse

  • Potentiel de déclenchement : Les carrousels à haute vitesse, les curseurs d'images rapides ou les fonctionnalités de défilement rapide peuvent poser un défi aux utilisateurs sensibles au mouvement, potentiellement entraînant des sentiments d'inconfort ou de désorientation.
  • Approche alternative : Permettez aux utilisateurs de contrôler les vitesses d'animation ou optez par défaut pour des transitions plus lentes et plus délibérées pour un rythme universellement confortable.

Défilement automatique continu

  • Potentiel de déclenchement : Les fonctionnalités de défilement automatique qui déplacent le contenu en continu sans interaction de l'utilisateur, comme les diaporamas automatiques ou les banderoles d'actualités, peuvent être déstabilisantes pour les utilisateurs sensibles au mouvement.
  • Approche alternative : Implémentez un défilement initié par l'utilisateur, donnant le contrôle à l'utilisateur et évitant les mouvements inattendus.

Changements de couleur clignotants ou intenses

  • Potentiel de déclenchement : Les animations clignotantes ou les changements de couleur soudains et intenses peuvent être visuellement accablants et déclencher un inconfort. Des exemples incluent les bannières clignotantes, les changements de couleur intenses au survol ou les changements rapides de couleurs de fond.
  • Approche alternative : Maintenez une palette de couleurs cohérente et évitez les changements de couleur rapides et drastiques. Envisagez des transitions plus douces pour les changements de couleur.

Mouvements de rotation

  • Potentiel de déclenchement : Les animations de rotation, telles que les logos tournants ou les carrousels rotatifs, peuvent provoquer des étourdissements ou des vertiges chez les personnes souffrant de troubles vestibulaires ou de sensibilité au mouvement.
  • Approche alternative : Minimisez ou éliminez les mouvements de rotation, surtout dans les situations où ils ne sont pas essentiels pour comprendre le contenu.

En reconnaissant ces déclencheurs potentiels et en adoptant des approches alternatives, nous pouvons créer des expériences numériques plus attentionnées et accueillantes pour les utilisateurs sensibles au mouvement.

Le but n'est pas d'arrêter d'ajouter des animations, mais de concevoir avec empathie, en veillant à ce que le mouvement améliore plutôt que de nuire à l'expérience utilisateur.

Comment utiliser les préférences de réduction de mouvement

Une avancée significative vers une conception web adaptée au mouvement consiste à utiliser les préférences de réduction de mouvement intégrées dans les systèmes d'exploitation et les navigateurs. Ces préférences offrent aux utilisateurs la possibilité de minimiser ou d'éliminer les animations inutiles.

En reconnaissant et en respectant ces préférences utilisateur, nous pouvons améliorer considérablement l'accessibilité des applications web.

Incorporer des fonctionnalités de mouvement réduit

Pour les développeurs, l'intégration de fonctionnalités de mouvement réduit dans les applications web implique une combinaison de pratiques de codage et de considérations d'interface utilisateur.

Commencez par identifier les zones où les animations peuvent être atténuées ou remplacées par des alternatives statiques. La mise en œuvre de vérifications conditionnelles pour les préférences de réduction de mouvement dans votre base de code permet à votre application web de s'adapter dynamiquement, offrant une expérience plus fluide pour les utilisateurs qui optent pour un mouvement réduit.

Fonctionnalité média CSS prefers-reduced-motion

.animated-element {
  animation: pulse 1s linear infinite both;
}

/* Atténuer l'animation */
@media (prefers-reduced-motion) {
  .animated-element {
    animation: smooth 4s linear infinite both;
  }
}

Détection de mouvement réduit en JavaScript

// Vérifier si l'utilisateur préfère un mouvement réduit en utilisant JavaScript

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Exemple d'ajustement de l'animation en fonction de la préférence de mouvement réduit

const animatedElement = document.querySelector('.animated-element');
if (prefersReducedMotion) {
  animatedElement.style.animation = 'smooth 4s linear infinite both';
} else {
  animatedElement.style.animation = 'pulse 1s linear infinite both';
}

Tester votre animation sur Chrome

Bien que les vérifications d'accessibilité de base soient facilement disponibles, Chrome DevTools offre des capacités avancées grâce à son outil Rendering caché.

L'une des options disponibles dans l'outil de rendu est l'option de tester votre animation lorsque l'utilisateur active prefers-reduced-motion. Voici comment l'utiliser :

  • Cliquez sur l'icône de personnalisation (trois points) dans le panneau DevTools
  • Sélectionnez plus d'outils
  • Sélectionnez l'option Rendering dans la liste des options

L'outil de développement Chrome Sélectionnez Rendering sous plus d'outils

  • Une fois activé, l'onglet Rendering apparaît dans DevTools.
  • Recherchez l'option nommée "Emulate CSS media feature prefers-reduced-motion".
  • Activez cette option pour prévisualiser comment les animations de votre site web apparaissent pour les utilisateurs qui ont configuré leur appareil ou leur navigateur pour réduire le mouvement.

Outil de rendu Chrome pour reduced-motion

Lorsque l'utilisateur a activé prefers-reduced-motion, évitez de supprimer complètement les animations. Efforcez-vous de fournir aux utilisateurs une expérience plus fluide plutôt que de les exclure complètement de l'expérience interactive.

Conseils et bonnes pratiques pour la sensibilité au mouvement

Explorons les conseils et bonnes pratiques à intégrer dans nos conceptions :

  1. Animations subtiles : Optez pour des animations subtiles qui transmettent des informations sans être accablantes. Les fondu, transitions et effets de chargement doux peuvent améliorer l'expérience utilisateur sans causer d'inconfort.
  2. Vitesses ajustables : Offrez aux utilisateurs la possibilité de contrôler les vitesses d'animation. Implémentez des paramètres dans votre application qui permettent aux utilisateurs de personnaliser la vitesse des transitions, garantissant une expérience confortable pour tous.
  3. Signaux de navigation clairs : Utilisez le mouvement pour guider les utilisateurs de manière intuitive. Par exemple, employez des animations subtiles pour indiquer un changement d'état ou pour attirer l'attention sur des éléments importants, en veillant à ce que les utilisateurs sensibles au mouvement puissent suivre le flux sans se sentir désorientés.
  4. Tests utilisateur : Effectuez des tests utilisateur approfondis, spécifiquement avec des personnes qui ressentent une sensibilité au mouvement. Recueillez des commentaires pour affiner votre conception, en veillant à ce qu'elle réponde aux besoins de la base d'utilisateurs diversifiée.
  5. Documentation et communication : Documentez clairement votre approche de la conception adaptée au mouvement dans votre documentation de projet. Cela sert non seulement de référence pour votre équipe, mais communique également votre engagement envers l'accessibilité aux parties prenantes et aux utilisateurs.

Conclusion

La sensibilité au mouvement n'est pas une exception rare – c'est une expérience partagée par de nombreuses personnes. Notre responsabilité en tant que développeurs web n'est pas seulement de reconnaître cette réalité, mais d'intégrer activement l'inclusivité dans l'ADN de nos créations.

En identifiant les déclencheurs potentiels et en mettant en œuvre des fonctionnalités de mouvement réduit en utilisant des technologies comme prefers-reduced-motion en CSS et JavaScript, nous créons des espaces qui accommodent les besoins divers sans compromettre l'engagement.

L'accessibilité n'est pas une tendance, c'est une éthique fondamentale qui façonne l'avenir de l'internet en un espace où chacun, quelles que soient ses capacités, peut utiliser l'internet avec confort.

Merci beaucoup d'avoir lu cet article, si vous l'avez trouvé utile, envisagez de le partager. Bon codage !

Vous pouvez me contacter sur LinkedIn ou GitHub.

Références

  • Val Head. Designing Safer Web Animation For Motion Sensitivity (8 septembre 2015) https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/
  • Chaudhary, S., Saywell, N., Kumar, A., & Taylor, D. (2020). Visual Fixations and Motion Sensitivity: Protocol for an Exploratory Study. JMIR Research Protocols, 9(7). https://doi.org/10.2196/16805
  • Albalwi, A.A., Johnson, E.G., Alharbi, A.A. et al. Effects of head motion on postural stability in healthy young adults with chronic motion sensitivity. Arch Physiother10, 6 (2020). https://doi.org/10.1186/s40945-020-00077-9
  • Motion sickness. (2024, January 1). In Wikipedia. https://en.wikipedia.org/wiki/Motion_sickness