Principes de mouvement

En adhérant aux principes de mouvement, les concepteurs favorisent la création d’une expérience uniforme pour les utilisateurs du site web de TELUS. Veuillez respecter ces normes dans vos travaux de conception.

Intentionnel

Le mouvement met l’accent sur les éléments importants et aide les utilisateurs à atteindre leurs objectifs sans distraction.

Réaliste

Le mouvement reflète les attentes du monde physique où nous vivons, tout en illustrant les relations spatiales et hiérarchiques entre les éléments.

Évolutif

Le mouvement doit être harmonieux à l’échelle du système de conception en entier. Moins, c’est mieux.

Personnalité

Le mouvement doit ajouter du caractère et illustrer la personnalité de la marque TELUS. Elle est expressive et ravissante.


Fondements du mouvement

Les fondements de la conception du mouvement s’appuient sur la hiérarchie d’abord, puis la rétroaction et l’état de chaque élément. La personnalité doit adopter les traits et les caractéristiques de TELUS pour respecter la voix de la marque.

Personnalité

La personnalité de nos normes de mouvement reflète nos principes fondamentaux. Nous devons faire en sorte que toutes les interactions respectent les caractéristiques suivantes :

  • Serviable : amical et prêt à aider

  • Bienveillant : attentionné et se soucie des autres

  • Fiable : sur qui on peut compter, sincère

  • Attentif : attentionné, présent et conscient

  • Réactif : réceptif et flexible

  • Digne de confiance : vrai, honnête et agit de bonne foi

Ces traits décrivent ce que nous voulons que les clients perçoivent du mouvement sur telus.com.

Hiérarchie

Les relations hiérarchiques entre les éléments aident à orienter les utilisateurs en indiquant le lien entre les éléments.

Transitions parent-enfant

Les transitions parent-enfant montrent la hiérarchie entre l’élément parent (p. ex. sommaire du compte) et les éléments enfants (p. ex. détails d’un abonné). La transition déplace les utilisateurs vers l’amont ou l’aval de la hiérarchie dans un déroulement déterminé.

Transitions entre pairs

Les transitions entre pairs montrent la relation entre des éléments du même niveau hiérarchique. Par exemple, cette transition permet à l’utilisateur de se déplacer d’un onglet à un autre.

Transitions de niveau supérieur

Les transitions de niveau supérieur montrent les relations de navigation. Les destinations sont souvent groupées par tâches principales qui ne sont pas nécessairement liées entre elles. La transition effectue le déplacement sur place en changeant des valeurs comme l’opacité et l’échelle.


Points à considérer pour l’accessibilité des principes du mouvement

Faites un usage modéré des animations, surtout si elles occupent une grande partie de l’écran. Les animations peuvent désorienter les utilisateurs et même occasionner des malaises.

Les animations initiées par l’utilisateur sont préférables pour l’état du système et le retour visuel, ainsi que pour la compréhension des relations spatiales d’un site. Évitez la prise de contrôle du défilement, les effets de parallaxe et les vidéos en lecture automatique. L’utilisateur doit pouvoir contrôler lui-même l’expérience à l’écran. L’utilisateur doit avoir la possibilité de désactiver les animations automatiques.

Des contrôles intégrés aux préférences du système d’exploitation permettent de réduire le mouvement sur les appareils et sur les ordinateurs. Si l’utilisateur a activé cette option, le comportement par défaut est de rendre la page statique au moyen d’une requête média. L’œil humain perçoit environ 200 images par seconde. Utilisez un taux de rafraîchissement de 30 images par seconde pour que le mouvement soit le plus uniforme que possible.

Le site est uniquement en anglais.

Voir un exemple sur GitHub

Dimensions (axes des X, Y et Z)

La dimension sur l’axe des Z suggère une hiérarchie conceptuelle qui utilise des boîtes ombragées pour indiquer une hiérarchie visuelle surélevée. Le plan de l’écran est défini selon un système de coordonnées X,Y où la position 0,0 se situe dans le coin supérieur gauche. L’élévation sur l’axe des Z est la profondeur imaginaire qui pointe vers l’utilisateur.

Axe des X : Objets qui entrent dans les limites de l’écran ou qui en sortent. P. ex. en-tête global, barre de progression, indicateur de progression

Axe des Y : Objets indiquant une progression ou un état de chargement. P. ex. notifications, cartes, contenu d’un onglet

Axe des Z : Objets donnant de nouveaux renseignements. P. ex. fenêtres modales, contexte fourni en plaçant le pointeur de souris au-dessus d’un élément, indicateur de chargement de page


Anatomie de la transition

Qu’il s’agisse d’un élément persistant, sortant ou entrant, les mouvements anatomiques signalent qu’une transition a eu lieu.

Élément persistant

Le mouvement appliqué à un élément persistant (p. ex. icône, fondu enchaîné entre cartes, boîtes d’information pouvant être agrandies) reste en place. Il commence et se termine à l’écran.

Élément sortant

Le mouvement appliqué à un élément sortant (p. ex. contenu, icône, navigation) sort de l’écran par un fondu en 150 ms à 300 ms.

Élément entrant

Un élément entrant (p. ex. contenu, icône, navigation) entre à l’écran par un fondu en 150 ms à 300 ms.


Le rôle de la continuité

La continuité joue un rôle important dans la conception, car elle aide les utilisateurs à comprendre le système avec lequel ils interagissent. Alors que l’apparence de l’interface utilisateur change, le mouvement permet de conserver une continuité entre le placement et l’apparence des éléments avant et après une transition. Une transition fluide d’un point à un autre attire l’œil de l’utilisateur et le guide dans l’expérience d’une façon plus intuitive et conviviale.

Interpolation

L’interpolation est une technique qui génère des images intermédiaires entre deux états d’un objet. Ainsi, l’utilisateur a l’impression que la première image s’est transformée en la deuxième image. Les propriétés associées à l’interpolation :

  • Forme

  • Opacité

  • Position


Transitions par fondu

Les fondus aident à créer des transitions fluides entre deux états d’un objet par l’insertion d’une opacité intermédiaire.

Fondu entrant

Un fondu entrant se produit lorsque l’opacité d’un objet passe de 0 % à 100 %.

Fondu sortant

Un fondu sortant se produit lorsque l’opacité d’un objet passe de 100 % à 0 %.

Fondu enchaîné

Un fondu enchaîné se produit lorsqu’un objet apparaît en même temps et à la même position qu’un autre objet qui disparaît.

Fondu avec noir

Un fondu avec noir se produit lorsqu’un objet disparaît avant qu’un autre objet apparaisse.


Rétroaction et état

Lorsqu’il y a lieu, le mouvement doit communiquer qu’une action s’est produite et, dans la mesure du possible, donner des indications sur ce qui se produira par la suite.

Le mouvement associé à la rétroaction et à l’état doit être immédiat et illustrer l’état d’exécution de l’élément. Par exemple : erreur ou réussite, chargement en cours, envoi de données, modification de l’ordre par glisser-déposer.


Vitesse (minutage)

La vitesse de transition est la vitesse observable à laquelle l’interface utilisateur change d’état. Lorsque la vitesse est appropriée, les changements de l’interface utilisateur ne compliquent ou n’interrompent pas le déroulement pour l’utilisateur. Lorsque des éléments changent d’état ou de position, les transitions doivent être assez lentes pour que les utilisateurs les remarquent, mais assez rapides pour ne pas qu’ils aient à attendre. La vitesse de transition optimale se situe entre 100 ms et 500 ms.

Durée

Utilisez la durée la plus courte possible pour que la transition ne soit pas soudaine ou brusque.

Durée – simple

Les composants simples comprennent les contrôles de sélection, les boutons et les alertes et notifications.

Les transitions simples ont besoin de moins de temps que les transitions complexes. Elles doivent prendre de 100 ms à 250 ms.

Durée – complexe

Les composants complexes comprennent les changements de forme et les animations d’icônes.

Les transitions complexes ont besoin de plus de temps que les transitions simples. Elles doivent prendre de 250 ms à 500 ms.

Sorties et fermetures

Les transitions qui ferment, ignorent ou réduisent un élément peuvent faire l’objet d’une rétroaction plus rapide. La prochaine tâche de l’utilisateur requiert une plus grande attention. Ces transitions doivent donc être de courte durée.

La durée doit être de 150 ms à 250 ms et dépend de l’animation ouverte.

Zone

Les transitions qui occupent une petite zone à l’écran ont une durée plus courte que celles qui occupent une grande zone.


Transition en douceur

Les objets réels ne se déplacent pas de façon linéaire d’un point à un autre. Pour que le mouvement soit plus réaliste, les objets doivent effectuer une transition en douceur en accélérant ou en ralentissant.

Transition avec accélération

Les objets qui sortent d’une zone doivent commencer la transition lentement et la terminer rapidement et brusquement.

Transition avec ralentissement

Les objets qui entrent dans une zone doivent commencer rapidement et brusquement, puis ralentir à la fin de la transition.


Chorégraphie

L’objectif principal de la chorégraphie dans le cadre des principes du mouvement est d’organiser la séquence de mouvements et de transformations (les deux types d’animations) qui se produisent dans la fenêtre d’affichage

Séquence

Dans une chorégraphie, la séquence maintient l’attention de l’utilisateur sur l’élément souhaité alors que l’écran passe d’un état à un autre.

Une séquence d’animation désigne l’ordre dans lequel les différentes parties d’une animation apparaissent, commencent à bouger et arrêtent de bouger.

Grâce à une séquence bien construite, l’utilisateur comprend facilement ce qui a changé à l’écran, quels éléments ont été ajoutés ou retirés et ce qu’il faut savoir au sujet de la prochaine interaction.

Séquence – simple

Une séquence simple anime tous les éléments à l’unisson, par exemple un volet de menu d’application qui s’ouvre dans la fenêtre d’affichage ou qui en ressort en se refermant.

La séquence n’est pas limitée à une seule animation; plusieurs animations peuvent se produire ensemble. Par exemple, un fondu entrant ou sortant, un mouvement et un changement de couleur peuvent se produire au même moment.

Un autre aspect de l’établissement d’une séquence simple consiste à rapprocher les animations dans le temps afin qu’elles se terminent au même moment et semblent former un seul mouvement fluide.

Séquence – complexe

Les séquences complexes sont requises lorsqu’un grand nombre d’éléments ou de groupes d’éléments entrent dans la fenêtre d’affichage ou en sortent.

Les éléments sont divisés en trois groupes pour éviter toute confusion :

  • Les éléments sortants : la première partie de l’animation

  • Les éléments entrants ou qui apparaissent : la deuxième partie de l’animation

  • Les éléments qui restent dans la fenêtre d’affichage : ils peuvent faire l’objet de transformations et de changements de couleur ou de contenu

Certains éléments commencent à bouger avant les autres pour créer une progression et orienter l’œil de l’utilisateur afin de l’aider à se concentrer sur une zone donnée de l’écran (p. ex. nouveau texte d’appel à l’action).

La distance que doit parcourir un élément a une grande incidence sur la courbe et le temps requis. Par exemple, pour les écrans qui se chargent d’abord à l’état de squelette, le squelette doit disparaître d’abord, puis le contenu, qui peut occuper plus d’espace que le squelette, doit trouver sa place à l’écran.

Transformation

Les transformations servent à faire passer un élément d’un état à un autre avec grâce, ou à faire passer un élément à plusieurs autres (lorsque les éléments entrants ne sont pas visibles dans la fenêtre d’affichage).

La raison d’être principale de ces transitions est d’aider l’utilisateur à suivre facilement les changements à un élément individuel ou à des groupes d’éléments à l’écran. Les transformations peuvent être simples ou complexes selon la quantité d’information et de mouvement.

Transformation – simple

Lorsqu’un élément ou une très petite section de l’écran fait l’objet d’une transformation limitée et qu’il y a très peu de mouvement sur les axes des X et des Y, il s’agit d’une transformation simple.

L’animation du changement d’un état à un autre renforce le fait que le même élément a maintenant une signification ou un objectif différent.

Transformation – complexe

Les changements de disposition complexes utilisent des transformations partagées pour créer des transitions fluides d’une disposition à une autre. Pour éviter que plusieurs transformations se chevauchent et créent de la confusion, groupez les éléments et transformez-les comme une seule unité au lieu de les animer de façon indépendante.

Élément focal

Une transition peut comprendre un élément focal, qui est un élément intermédiaire persistant important dans la hiérarchie. Comme les conteneurs animés, les éléments focaux renforcent la continuité en transformant doucement leur apparence.

Certaines transitions placent un élément focal dans le parcours d’autres éléments. Dans ces cas, évitez d’utiliser un élément focal et utilisez la transition par défaut qui permet aux éléments de disparaître puis de réapparaître.