Conception avec un mouvement réduit pour les sensibilités au mouvement

CSS a récemment ajouté des fonctionnalités qui nous permettent de reconnaître certaines préférences et qualités de l’environnement actuel de l’utilisateur. L'une de ces nouvelles fonctionnalités, en particulier la fonction de média de préférence à mouvement réduit, peut être particulièrement utile pour concevoir des mouvements plus inclusifs sur le Web.

Il y a quelques années, j'ai écrit un article sur la conception d'animation Web plus sûre pour la sensibilité au mouvement et les options limitées dont nous disposions à l'époque pour concevoir un mouvement sûr sur le Web. Certaines choses sont restées les mêmes depuis cet article original, comme les types d'effets de mouvement qui peuvent être déclencheurs, et l'importance du contexte et des attentes des utilisateurs. Mais ce qui a changé, c'est l'existence et la prise en charge de la fonction média de préférence à mouvement réduit. Cela fait une grande différence dans la façon dont nous pouvons concevoir le mouvement dans notre travail pour qu'il soit inclusif et accessible.

Pourquoi réduire le mouvement?

La sortie d'iOS7 en 2013 a déclenché une prise de conscience dans le monde de la conception numérique que certains mouvements sur l'écran – même s'il faisait partie d'une interface – pourrait avoir des conséquences physiques pour les personnes sensibles au mouvement. Depuis lors, les principaux systèmes d'exploitation mobiles et de bureau ont ajouté des fonctionnalités permettant aux utilisateurs de réduire la quantité de mouvement qu'ils rencontrent dans leurs systèmes d'exploitation.

Articles comme « Your Interactive Is Making Me Sick » et « Accessibility For Vestibular Disorders » partagent des histoires de première main sur la façon dont nos choix de conception, en particulier autour du mouvement, peuvent avoir des conséquences physiques pour les personnes sensibles au mouvement. Les causes profondes de ces sensibilités au mouvement peuvent varier considérablement d'un individu à l'autre. Pour certains, il est enraciné dans un trouble vestibulaire, tandis que pour d’autres, il peut provenir de migraines ou d’autres facteurs. Ce qui déclenche peut également varier d’une personne à l’autre, voire d’un jour à l’autre pour certains. Les symptômes physiques que les individus ressentent à la suite de ce mouvement déclencheur peuvent aller de légers étourdissements ou maux de tête à des nausées ou pire.

Les choix de conception que nous faisons autour de l'animation dans notre travail ont un impact direct sur la façon dont notre travail affecte les personnes sensibles au mouvement. Le fait de savoir quels types de mouvement sont potentiellement déclencheurs et comment nous pouvons les atténuer grâce à nos choix de conception nous aide à concevoir des expériences qui sont sûres pour notre public et ne causent aucun dommage involontaire. L'animation peut toujours avoir un impact positif sur nos efforts UX mais c'est à nous de nous assurer de l'utiliser de manière responsable, tout comme nous essayons d'utiliser nos autres outils de conception de manière responsable.

Préfère Reduced Motion Sur le Web

La fonction de média de préférence à mouvement réduit a maintenant une forte prise en charge du navigateur . Il est pris en charge dans les versions actuelles d'Edge, Firefox, Chrome, Safari, Opera, iOS Safari, ainsi que sur les navigateurs Android et Chrome pour Android. Le niveau de support que nous avons aujourd'hui en fait quelque chose que vous pouvez absolument utiliser en production. De plus, si le navigateur de quelqu'un ne prend pas en charge cette fonctionnalité, rien de grave ne se passe, il sera simplement ignoré et les choses continueront comme avant.

Grand aperçu )

Du côté du développement, nous pouvons tester les préférences de mouvement réduit de la même manière que nous utiliserions n'importe quelle autre requête multimédia en CSS ou JavaScript pour savoir si le mouvement réduit a été demandée.

En CSS, cela ressemblera à quelque chose comme ceci:

 @media (prefers-reduction-motion: reduction) {
    / * comportement réduit * /
}

Et en JavaScript:

 let motionQuery = matchMedia ('(prefers-reduction-motion)');

const handleReduceMotionChanged = () => {
  if (motionQuery.matches) // comportement réduit;
}

motionQuery.addListener (handleReduceMotionChanged);
handleReduceMotionChanged ()

Quelle que soit la manière dont vous choisissez d'y accéder, cette requête multimédia renverra l'une des deux valeurs suivantes: aucune préférence (faux) ou réduire (vrai). Une fois récupérées, vous pouvez utiliser ces valeurs pour informer ce que vous affichez dans le navigateur.

Des deux valeurs qui peuvent être renvoyées, la seule dont nous pouvons être sûrs qu'elle a été définie intentionnellement est la reduction (true) valeur. Aucune préférence (fausse) peut signifier que la personne en question accepte tous les types de mouvement, ou cela peut signifier que cette préférence n'a tout simplement pas encore été définie. Cela rend toute approche qui assimile la valeur d'aucune préférence (fausse) à la personne en question optant pour tous les niveaux de mouvement peu fiable. Pour cette raison, la meilleure approche consiste à réduire les effets de mouvement potentiellement déclencheurs lorsqu'une valeur de reduction (true) est renvoyée.

Par exemple, ici, l'animation de rebond en boucle est remplacée par un fondu dans l'animation lorsque un mouvement réduit est demandé:

 / * Un effet de mouvement de rebond constant appliqué au titre * /
h2 {
  animation: rebondissant alternatif infini linéaire de 1,5 s;
}

/ * Remplacez-le par un effet plus sûr lorsque prefers-reduction-motion renvoie true * /
@media (préfère le mouvement réduit) {
  h2 {
  animation: fondu 0.5s facilité dans les deux;
   }

Mouvement réduit du point de vue des utilisateurs

La plupart des principaux systèmes d’exploitation permettent aux utilisateurs de définir leurs préférences dans leurs paramètres système. Le libellé exact et l'emplacement des paramètres varient, mais la préférence peut être définie sur les systèmes d'exploitation iOS, OSX, Windows et Android.

La ​​fonction de média Prefers Reduced Motion en pratique

Décider comment utiliser la fonction de média de préférence à mouvement réduit est l'endroit où nous avons de l'espace pour créer des solutions qui correspondent le mieux au contexte de nos produits et contenus. Pour la plupart des projets Web, vous voudrez d'abord identifier tout effet de mouvement potentiellement déclencheur sur votre site, puis utiliser la fonction de média de préférence à mouvement réduit pour fournir une version réduite de cet effet.

Examinons chaque étape de plus de détails.

Identification d'un mouvement potentiellement déclencheur

Pour trouver un mouvement potentiellement déclencheur que vous pourriez avoir, parcourez quelques flux d'utilisateurs typiques pour votre site ou produit et examinez de plus près les effets de mouvement utilisés: Avez-vous des interactions qui ont de grands mouvements? Des gros zooms, des effets de rotation ou des effets de parallaxe? Tous ces types d'effets animés sont très probablement problématiques pour les personnes sensibles au mouvement. En revanche, les effets animés tels que la décoloration des couleurs, les changements d'opacité et les petits changements d'échelle ne seront probablement pas problématiques. En cas de doute, cela ne fait pas de mal d'ajouter l'effet en question à votre liste "à réduire" pour faire preuve de prudence.

Les Web Content Accessibility Guidelines recommandent de fournir une version réduite pour tout «mouvement qui crée l'illusion du mouvement… qui n'est pas essentiel à la signification du contenu». Je pense qu’il est également utile de voir des exemples, surtout si vous ne vous considérez pas comme sensible au mouvement à l’écran. Je couvre des exemples de mouvement potentiellement déclencheur dans mon article précédent et cet article sur le blog Webkit en a aussi. À moins que votre site ne repose fortement sur le mouvement, il y a de fortes chances que vous vous retrouviez avec une liste assez courte d'effets sur lesquels vous concentrer ici.

Créer une version à mouvement réduit

Ensuite, vous voulez déterminer le mouvement réduit le plus approprié condition pour ces effets potentiellement déclencheurs. L'animation peut-elle être facilement ajustée pour utiliser un effet sans mouvement comme un fondu d'opacité ou un fondu enchaîné pour des demandes de mouvement réduites? La mise en pause du mouvement ou la suppression complète de l'effet pour un mouvement réduit préserverait-elle le sens du contenu?

Le rôle de la motion en question sera un facteur important pour décider quelle serait la version réduite la plus appropriée. Vous ne souhaitez pas supprimer involontairement du contenu ou dégrader l'expérience globale. Voici quelques exemples de ce qui pourrait bien fonctionner pour les effets potentiellement déclencheurs que vous trouvez:

Transitions de grandes pages

Les effets de transition de grandes pages peuvent probablement être remplacés par un effet de fondu enchaîné pour un mode de mouvement réduit. Il en va généralement de même pour les grandes transitions de zoom ou de rotation qui font la transition entre différents états ou vues.

Illustrations animées

Les illustrations animées, en revanche, peuvent être remplacées par une version statique pour un mouvement réduit si elles sont principalement pour effet de personnalité ou de marque. Vous voudrez vous assurer que la version statique est toujours significative et que l’arrangement qui a le plus de signification n’est pas toujours le tout début ou la toute fin de l’animation. L'ajout de fonctionnalités permettant de lire des illustrations animées à la demande pour un mouvement réduit pourrait également être utile en permettant aux utilisateurs de lire l'animation lorsqu'ils sont prêts pour celle-ci.

N'oubliez pas de prendre en compte le mouvement dans vos gifs animés ou la lecture automatique vidéos ici aussi. Ceux-ci peuvent également contenir un mouvement potentiellement déclencheur et auraient besoin d'une version réduite s'ils le font.

Effets de parallaxe

Les effets de parallaxe et les effets de défilement lisse exagérés sont universellement déclencheurs pour les personnes sensibles au mouvement, donc ils devraient être considérablement réduits ou entièrement supprimés pour un mouvement réduit. (Chaque personne à qui j'ai parlé dans mes recherches à ce sujet a spécifiquement appelé la parallaxe comme étant un problème pour eux.) Les effets de défilement lisse peuvent être remplacés par le comportement par défaut du lien d'ancrage du navigateur comme décrit ici par Eric Bailey . La suppression des effets de parallaxe pour un mouvement réduit est la solution idéale, mais assurez-vous de vérifier que tout le contenu nécessaire est toujours visible et utilisable avec la parallaxe supprimée.

Dans la plupart des cas, le remplacement de l'effet potentiellement déclencheur par un effet plus sûr pour un mouvement réduit est le meilleur moyen de préserver autant que possible l'intention et la convivialité du contenu. Heureusement, la substitution d'un effet réduit peut également être assez simple.

Un exemple de réduction de mouvement

Par exemple, disons que j'ai signalé cette animation d'en-tête comme potentiellement déclencheur lorsque je suis allé sur mon site. Le mouvement est suffisamment grand pour créer l'illusion du mouvement, il est donc susceptible de déclencher, et les multiples directions du mouvement sont également susceptibles de poser problème. C'est certainement celui que je mettrais sur ma liste d'effets qui nécessitent une version réduite lors de l'examen de mon site.

Toutes les photos de plantes ont les mêmes styles appliqués à l'état final de leur animation pour les positionner intrinsèquement là où elles seraient dans le flux de documents par défaut:

 .active .plant1, .active .plant2, .active .plant3 {
  transformer: translateY (0);
  opacité: 1;
}

Et chacun a un état de départ avec un positionnement pour le traduire légèrement au-dessus ou en dessous de sa position intrinsèque pour commencer. Avec une transition définie pour que l'animation se produise:

 .plant1 {
  transform: translateY (-100%);
  transition: $ dur $ facilité-les deux;
}

.plant2 {
 transformer: translateY (120%);
 transition: $ dur $ dur / 6 $ facilité-les deux;
}

.plant3 {
   transform: translateY (-100%);
   transition: $ dur $ dur / 3 $ facilité-les deux;
}

L'animation du texte fonctionne de la même manière mais avec une traduction horizontale de chaque mot au lieu d'une traduction verticale.

Je peux changer l'animation en opacité de transition au lieu de changer la position de transformation lorsque le mouvement réduit a été demandé en changeant le état de début des animations comme celui-ci:

 @media (prefers-reduction-motion: reduction) {
.plant1, .plant2, .plant3 {
  transformer: translateX (0);
  opacité: 0;
  }
}

Désormais, lorsque la fonction de média de préférence à mouvement réduit renvoie vrai, l'état de début de chaque animation photo de plante sera déjà positionné à l'état final avec une opacité de 0. Cela signifie qu'il peut utiliser la même transition properties – les mêmes accélérations, durées et décalages – mais l'opacité s'animera maintenant au lieu de la position via une transformation:

Remarquez que je n'ai pas eu besoin de modifier la durée, l'accélération ou les retards de l'animation pour fais ça. Remplacer la propriété d'animation, tout en utilisant les mêmes détails d'animation, suffisait à réduire le mouvement. Cet exemple particulier a été réalisé en CSS, mais permuter la propriété d'animation peut être tout aussi simple avec JavaScript ou lors de l'utilisation de bibliothèques d'animation.

Exemples de mouvement réduit dans la nature

Vous pouvez voir cette approche en action sur viljamisdesign.com qui se trouve être l'un des premiers sites à part apple.com que j'ai remarqué travailler avec des mouvements réduits. Lorsque vous vous rendez sur le site avec une demande de mouvement réduit, l'animation de champ d'étoiles en rotation est arrêtée et les mouvements les plus importants du titre sont supprimés. Mais les animations comme les divers effets de survol sont toujours là. Cela se traduit par une expérience qui a ses caractéristiques UX et ses détails de conception intacts, tout en étant plus sûre pour la personne qui a demandé un mouvement réduit. (Voici une vidéo de Viljamisdesign.com avec et sans mouvement réduit activé pour référence: https://vimeo.com/399979166/1bd41d1919 )

La page Airpods Pro répond également aux préférences de mouvement réduites, mais en un manière très différente en raison du contenu et des effets utilisés. Presque tout le mouvement sur la page pourrait être potentiellement déclencheur car il a beaucoup de gros mouvements de zoom et d'effets de style parallaxe. Lorsqu'un mouvement réduit est demandé, tous les effets de parallaxe et de grand mouvement sont supprimés, mais ils font plus que simplement mettre en pause ou supprimer les animations. La version que vous voyez avec un mouvement réduit sélectionné a été conçue avec soin pour préserver le même contenu et la même signification de l'expérience de mouvement complet. ( Voici une vidéo du site The Airpods Pro avec et sans mouvement réduit sélectionné pour référence.)

Grand aperçu )

Ajout de bascules personnalisées pour des expériences intensives en mouvement

J'ai mentionné ci-dessus que la plupart des sites «basés sur des tâches» n'ont probablement qu'un poignée d'animations qui pourraient déclencher et nécessiter une version réduite. Mais ce ne sont pas les seuls types de sites Web disponibles sur le Web. Les projets qui impliquent une grande quantité de mouvement, comme les sites destinés davantage à raconter des histoires ou à créer une expérience, pourraient bénéficier d'une approche légèrement différente.

Pour des projets comme ceux-ci, il serait difficile de dresser une liste de mouvements potentiellement déclencheurs et fournir une alternative réduite pour chacun car la quasi-totalité du mouvement utilisé pourrait potentiellement déclencher. De plus, la motion fait partie intégrante du contenu et de sa signification. La conception d'un mode de mouvement réduit pour ces types de sites nécessitera une approche plus globale et plus d'efforts pour être sûr que la signification de votre contenu est préservée même si le mouvement est réduit.

Pour ces sites d'expérience très animés, fournir un mouvement personnalisé visible toggle est une chose utile à inclure. Cela permettra aux personnes qui ne connaissent peut-être pas encore le réglage de mouvement réduit ou qui éprouvent une certaine sensibilité au mouvement à ce moment-là, d'ajuster rapidement l'expérience. Une bascule de mouvement permet aux personnes sensibles au mouvement de participer à votre contenu d'une manière qui ne les rendra pas malades. C'est certainement mieux pour toutes les personnes impliquées que de devoir éviter complètement votre site.

Le contexte est un facteur clé

N'oubliez pas que le contexte joue également un rôle important ici. Personne ne veut être surpris par de grandes quantités de mouvement là où il ne s'y attend pas. Si vous visitez un site présenté comme une expérience de narration hautement interactive, vous aurez des attentes très différentes de celles lorsque vous visitez le site Web de votre banque. Ces deux sites pourraient certainement présenter de grandes quantités d'animation, mais ce serait une surprise inattendue sur le site de la banque.

Création d'une bascule de mouvement personnalisée

L'idée d'une bascule personnalisée est quelque chose que j'ai mentionné dans ] mon article de 2015 mais aujourd'hui c'est une option beaucoup plus viable. Sur le Web d'aujourd'hui, nous pouvons en créer un avec plus de facilité et même créer une bascule plus intelligente que ce que nous aurions pu faire il y a à peine quelques années.

Marcy Sutton a un excellent exemple de la façon dont une bascule de mouvement personnalisée moderne pourrait fonctionner dans ce CodePen . (Cet exemple fait partie de son cours sur la création d'applications Web accessibles, ce qui vaut également la peine d'être vérifié.) Son exemple utilise une bascule pour supprimer tous les mouvements, car elle ne comprend qu'une animation, mais cette approche peut être utilisée pour réduire les mouvements. effets sur l'ensemble d'une application ou d'un site suivant la même logique.

La caractéristique clé de cette approche est la façon dont Marcy l'associe parfaitement à la technologie Web moderne, c'est-à-dire qu'il préfère la réduction des mouvements et le stockage local. Lorsque vous utilisez cette approche, si quelqu'un vient sur votre site avec une demande de mouvement réduit, il obtient automatiquement la version à mouvement réduit sans avoir à activer manuellement la bascule. Et si quelqu'un invoque la bascule pour réduire le mouvement, cette préférence sera enregistrée via le stockage local afin de ne pas avoir à faire cette sélection à chaque visite.

Le site officiel d'Animal Crossing est un merveilleux exemple concret d'une bascule de réduction de mouvement personnalisée combinée à la fonction multimédia de préférence à mouvement réduit. C’est l’un de mes exemples préférés de gestion des mouvements réduits. Les choix de conception qu'ils ont faits pour réduire potentiellement le mouvement de déclenchement, tout en restant fidèles à l'ambiance générale du site et du contenu, sont excellents. J'ai écrit plus sur la façon dont ils ont réussi dans ce billet de blog . Il existe de nombreux sites dont le public pourrait bénéficier d'une approche similaire.

Autres façons d'utiliser les basculements de mouvement

Si vous avez déjà un panneau de préférences ou de paramètres, l'ajout d'une bascule pour demander une réduction du mouvement pourrait être un moyen précieux chose à ajouter à ces paramètres comme le fait Twitter sur son site. Dans ce cas, il n'y a pas de grandes quantités de mouvement immédiatement présentées lors de la visite du site et il y a déjà un panneau de paramètres, donc la mise en œuvre de la bascule dans le cadre des préférences de paramètres convient bien. La bascule de Twitter respecte également les paramètres au niveau du système d'exploitation via la requête de préférence à mouvement réduit et est prédéfinie sur activée ou désactivée en fonction de ce que l'utilisateur a défini au niveau du système d'exploitation. Concevoir votre bascule de mouvement pour respecter les paramètres du système d'exploitation est certainement une approche intelligente pour bien les implémenter, peu importe où la bascule peut apparaître.

Les basculements contextuels sont une autre approche qui peut être utilisée pour réduire le mouvement sur des illustrations animées spécifiques ou d'autres zones de contenu qui apparaissent sur votre site. L'article Dark Side of The Grid le fait bien en ajoutant des boutons à bascule contextuels à chaque figure animée pour permettre au lecteur de lire l'animation quand il veut la voir, mais pas de la faire boucler sans fin pendant la lecture. .

Dans le même esprit, Dave Rupert a partagé une technique pour combiner préfère le mouvement réduit avec l'élément image pour afficher des éléments statiques à la place des gifs animés en mouvement réduit a été demandé. Chris Coyier est allé plus loin et a suggéré de présenter une bascule de jeu pour ces gifs animés basés sur la même approche. L'exemple de démantèlement gif de Steve Faulkner pourrait également être une approche utile.

Tous ces éléments, ou quelque chose de similaire, pourraient être de bonnes options pour atténuer tout mouvement potentiellement déclencheur sur le Web. J'évoque ces exemples pour deux raisons. La première consiste à montrer qu'il existe un certain nombre de façons d'aborder les variations de mouvement réduites et que vous disposez d'une grande flexibilité pour trouver une approche qui convient le mieux à votre contenu. Et deuxièmement, au fur et à mesure que le temps passe et que de plus en plus de gens construisent des sites avec des options de mouvement réduites, les solutions les plus innovantes que nous verrons partagées dans la communauté.

Il existe de nombreuses façons créatives d'ajouter des commutateurs et des paramètres d'une manière logique. pour le contexte de votre projet. Il est intéressant de noter que de plus en plus de sites Web incluent des panneaux de paramètres ou des options pour définir des préférences telles que le mode sombre. L'inclusion d'une option de réduction des mouvements pourrait être une prochaine étape naturelle.

Plus nous l'utilisons, mieux cela sera pour tout le monde

Je pense qu'il est important pour nous, les personnes qui conçoivent et construisent des éléments pour le Web, de tirez parti de la fonction de média à mouvement réduit pour rendre notre travail plus inclusif. En prenant des mesures pour respecter les préférences de mouvement, nous rendons le Web plus sûr pour un plus grand nombre de personnes, et cela ne peut être qu'une bonne chose. Nous pouvons absolument être expressifs et créatifs avec le mouvement sur le Web tout en étant aussi responsables et inclusifs.

Mais le niveau de conscience est toujours quelque chose dont nous devons être, eh bien, conscients. Tous ceux qui pourraient avoir besoin d'une réduction de mouvement ne connaissent pas cette option dans les paramètres de leur système d'exploitation. Peut-être que moins de gens savent que cela peut également avoir un effet sur le contenu de leur navigateur, car si peu de sites Web en profitent actuellement. Plus nous tirons parti de la fonction de média à mouvement réduit et fournissons une expérience de qualité de mouvement réduite, plus la fonction sera significative pour ceux qui en ont besoin.

(ra , il)