• Rough draft

    • Animations

    Owned by VERONIQUE LECLERC
    May 05, 2023
    2 min read

    Les animations permettent de peaufiner l'expérience visuelle et de renforcer le sens des fonctionnalités.

    https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

    Sur le Web, les animations servent à charger, afficher, cacher des informations. Lors d'un délai de chargement, une animation permet de gérer le temps d'attente de l'utilisation. À la suppression ou à l'ajout de contenu, une animation permet à l'utilisateur de bien comprendre les changements effectués à la page.

    Une animation peut communiquer les sentiments d'urgence, de complétion, le besoin d'une attention particulière.

    Recommandations

    Prévoir l'arrêt manuel de chaque contenu animé (fka 7.3.1)

    Un moyen de mettre en pause et de relancer l’animation doit être prévu pour chaque contenu animé (défilement, clignotement, mouvement, mise à jour automatique, etc.). Sur le site de Radio-Canada, il y a quatre types de contenu animé : les carrousels, les GIF animés, les transitions animées et les publicités.

    Carrousels à défilement automatique

    • Ils doivent avoir un système de pagination (points de progression, numérotation, barre de progression) et de navigation (flèches). Dans le cas d’un carrousel à défilement automatique, dès qu’une action est entreprise (par la flèche ou la pagination) le défilement automatique s’arrête. Un système de mise en pause (texte ou icône pause) et de relance (texte ou icône flèche) du mouvement est requis pour ce type de carrousel.

    GIF animés

    • Le moyen privilégié est de laisser la configuration et les fonctionnalités natives du navigateur pour figer les images (Safari) ou les faire disparaître (Firefox). S’assurer que le texte qui accompagne l’image est alors représentatif de l’image animée. (Voir aussi interfaces riches).

    Transitions

    • Prenant la forme d’un zoom ou d’un léger mouvement répétitif, ces animations sont considérées comme des images décoratives non essentielles à la compréhension, mais leur mouvement peut rendre inconfortable certains utilisateurs. Une technologie autre que GIF comme Cinématographe/Flixel, animations CSS ou vidéo d’arrière plan décorative en dehors du contrôleur est utilisée plutôt que le contrôleur vidéo de Radio-Canada.

    • Si le mouvement ne s’arrête pas après 5 secondes, un système de pause doit être prévu.

    • Voici un exemple d’une page animée sur Radio-Canada.ca.

    • En vue desktop, la transition est animée et l’icône de pause est présente. En vue mobile, la transition est un zoom qui s’arrête avant 5 secondes, donc l’icône n’est pas requise.

    Publicités

    • Elles ne sont pas sous le contrôle de Médias numériques, mais il serait opportun d’aviser l’équipe responsable de la publicité et des autopromotions de cette norme d’accessibilité.

    💬 Remarques

    Il n’est pas nécessaire de prévoir de moyen pour mettre en pause les barres de progression animées ou les éléments dont le mouvement s’arrête automatiquement dans un laps de temps inférieur à 5 secondes.

    ⚠️ Attention

    Voici des exemples intéressants mais qui nécessiteraient une amélioration en accessibilité, avec l'ajout d'une icône de pause: - Zoom arrêté - Arrière-plan animé - Animation en boucle (simple) - Animation en boucle (double)

    Références