Catégories
Plugin et site web

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

Grâce à la large prise en charge de la fonction Préférer les médias à mouvement réduit, nous avons maintenant des moyens plus avancés de concevoir des mouvements qui peuvent être créatifs et innovants tout en étant plus sûrs pour les personnes sensibles au mouvement. Cet article explique comment et pourquoi y parvenir.

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 multimédia à 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'animations Web plus sûres pour la sensibilité au mouvement et les options limitées dont nous disposions à l'époque pour concevoir des mouvements sécurisés 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 la motion dans notre travail pour qu'elle soit inclusive 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 à l'écran – même s'ils faisaient partie d'une interface – pourraient avoir des conséquences physiques pour les personnes sensibles au mouvement. Dans les années qui ont suivi, 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.

Des articles comme «Votre interaction me rend malade» et «Accessibilité pour les troubles vestibulaires» 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 ressentent les individus à la suite de ce mouvement de déclenchement 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 que nous l'utilisons de manière responsable, tout comme nous essayons d'utiliser nos autres outils de conception de manière responsable.

Préfère un mouvement réduit sur le Web

La fonction de média de préférence à mouvement réduit est désormais prise en charge par le 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 mal ne se passe, il sera simplement ignoré et les choses continueront comme avant.

Tableau de prise en charge du navigateur pour la fonction de média à mouvement réduit sur caniuse.com
Tableau de prise en charge du navigateur pour la fonction multimédia à mouvement réduit. (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 une réduction de mouvement a été demandée.

En CSS, cela ressemblera à ceci:

@media (prefers-reduced-motion: reduce)  {
    /* reduced behaviour */   
}

Et en JavaScript:

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

const handleReduceMotionChanged = () => {
  if (motionQuery.matches) //reduced behaviour;
}

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.

Parmi les deux valeurs qui peuvent être renvoyées, la seule dont nous pouvons être sûrs qu'elle a été définie intentionnellement est la reduce (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 reduce (true) est retourné.

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

/* A constant bouncing motion effect applied to the title */
h2 {
  animation: bouncing 1.5s linear infinite alternate;
}

/* Replace it with a safer effect when prefers-reduced-motion returns true */
@media (prefers-reduced-motion) {
  h2 {
  animation: fade 0.5s ease-in both;
   }

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.

Capture d'écran du menu d'affichage d'accessibilité iOS et OSX
Sur iOS ou OSX, ce paramètre est accessible via Paramètres> Accessibilité> Affichage. (Grand aperçu)
Capture d'écran du menu Windows Simplifier et Personnaliser Windows
Sous Windows, il est accessible via Paramètres> Facilité d'accès> Affichage> Simplifier et personnaliser Windows. (Grand aperçu)

La fonctionnalité de média à mouvement réduit préféré en pratique

Décider de la manière d'utiliser la fonction de média de préférence à mouvement réduit est l'endroit où nous disposons d'un espace pour créer des solutions qui correspondent le mieux au contexte de nos produits et de notre contenu. Pour la plupart des projets Web, vous souhaiterez d'abord identifier les effets de mouvement susceptibles de déclencher sur votre site, puis utiliser la fonctionnalité de média de préférence à mouvement réduit pour fournir une version réduite de cet effet.

Examinons chaque étape plus en détail.

Identifier un mouvement potentiellement déclencheur

Pour trouver un mouvement potentiellement déclencheur que vous pourriez avoir, parcourez certains flux d'utilisateurs typiques pour votre site ou votre produit et examinez de plus près les effets de mouvement utilisés: avez-vous des interactions qui comportent 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 peut pas faire de mal d'ajouter l'effet en question à votre liste «à réduire» pour faire preuve de prudence.

Les Directives pour l'accessibilité du contenu Web recommandent de fournir une version réduite pour tout «mouvement qui crée l'illusion d'un 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 la condition de mouvement réduit la plus appropriée 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 la signification 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 grande page 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, pourraient être mieux remplacées par une version statique pour un mouvement réduit si elles sont principalement destinées à la personnalité ou à un effet 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 vos vidéos à lecture automatique ici également. Ceux-ci peuvent également contenir un mouvement potentiellement déclencheur et nécessiteraient 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 ceux-ci doivent être considérablement réduits ou entièrement supprimés pour réduire le mouvement. (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 fluide 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, remplacer 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 végétales ont les mêmes styles appliqués à l'état final de leur animation pour les positionner intrinsèquement là où elles se trouveraient dans le flux de documents par défaut:

.active .plant1, .active .plant2, .active .plant3 {
  transform: translateY(0);
  opacity: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 $ease-both;
}

.plant2 {
 transform: translateY(120%);
 transition: $dur $dur/6 $ease-both;
}

.plant3 {
   transform: translateY(-100%);
   transition: $dur $dur/3 $ease-both;  
}

L'animation de 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 lorsqu'un mouvement réduit a été demandé en modifiant l'état de début des animations comme ceci:

@media (prefers-reduced-motion: reduce) {
.plant1, .plant2, .plant3 {
  transform: translateX(0);
  opacity:0;
  }
}

Désormais, lorsque la fonction de média de préférence à mouvement réduit renvoie true, l'état de début de chaque animation photo de plante sera défini pour être déjà positionné à l'état final avec une opacité de 0. Cela signifie qu'il peut utiliser les mêmes propriétés de transition – le mêmes accélération, durée et décalages – mais l'opacité sera maintenant animée au lieu de la position via une transformation:

Remarquez que je n'ai pas eu besoin de modifier la durée, l'assouplissement ou les retards de l'animation pour ce faire. 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 le remplacement de 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 en plus de apple.com que j'ai remarqué travailler avec un mouvement réduit. 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)

Capture d'écran de Viljamisdesign.com avec «Hello, Universe» en gros caractères avec un champ d'étoiles de pixels derrière
Capture d'écran de Viljamisdesign.com (Grand aperçu)

La page Airpods Pro répond également aux préférences de mouvement réduites, mais de 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.)

Capture d'écran du site Airpods Pro sans mouvement réduit avec une grande image en gros plan d'une paire d'Airpods
Capture d'écran du site Airpods Pro sans mouvement réduit (Grand aperçu)

Ajouter des bascules personnalisées pour les expériences à mouvement intense

J'ai mentionné ci-dessus que la plupart des sites «basés sur des tâches» n'ont probablement qu'une poignée d'animations susceptibles de se déclencher et nécessitent 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 à la narration ou à la création d'une expérience, peuvent 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 de fournir une alternative réduite pour chacun, car la quasi-totalité des mouvements utilisés 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 une bascule de mouvement personnalisée visible 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 grand rôle 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 tout mouvement, car elle ne comprend qu'une animation, mais cette approche peut être utilisée pour réduire le mouvement. 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'elle préfère un mouvement réduit et un 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 Animal Crossing avec Tom Nook, un personnage principal du jeu, à l'avant et au centre.
Le site officiel d'Animal Crossing vous permet de réduire ou d'activer le mouvement selon vos préférences. (Grand aperçu)

Le site officiel d'Animal Crossing est un merveilleux exemple dans le monde réel 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 cet article de blog. Il existe de nombreux sites dont le public pourrait bénéficier d'une approche similaire.

Autres façons d'utiliser les bascules 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 une chose précieuse à 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 mettre en œuvre, quel que soit l'endroit où la bascule peut apparaître.

Une capture d'écran de l'onglet Accessibilité du panneau des paramètres de Twitter
Le menu des paramètres de Twitter comprend une bascule pour réduire les mouvements. (Grand aperçu)

Les bascules contextuelles sont une autre approche qui pourrait ê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 sans la faire boucler indéfiniment pendant la lecture.

Une capture d'écran de l'onglet d'accessibilité du panneau des paramètres de Twitter.
Une figure dans le côté obscur de l'article de la grille qui vous permet de jouer des figures animées à la demande avec un bouton personnalisé pour chacune. (Grand aperçu)

Dans le même esprit, Dave Rupert a partagé une technique permettant de combiner des préférences de mouvement réduit avec l'élément image pour afficher des éléments statiques à la place de gifs animés lorsqu'un 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é-animateur 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 boutons et des paramètres d'une manière qui convient au 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 pour un mouvement réduit 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 concevons et construisons des éléments pour le Web, de tirer parti de la fonction de média de préférence à 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 responsables et inclusifs.

Mais le niveau de conscience est toujours quelque chose dont nous devons être 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 multimédia à mouvement réduit et fournissons une expérience de qualité à mouvement réduit, plus la fonctionnalité sera significative pour ceux qui en ont besoin.

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *