Crédit: Unsplash

Comment améliorer vos compétences en conception

Partie 4: Fondements de l'animation d'interface

Le Web moderne permet aux concepteurs de jouer avec une large gamme de conception de mouvement. Voici quelques principes directeurs pour utiliser l'animation d'interface.

Principe 1: Retour à l'animation traditionnelle

Les 12 principes de base de l’animation, introduits pour la première fois dans le livre L’illusion de la vie: Animation Disney, constituent une ressource de choix pour les animateurs. Il a été écrit par Ollie Johnston et Frank Thomas, des animateurs de Disney, deux des membres d’une équipe d’animateurs qualifiés par Walt Disney de «Nine Old Men» qui ont créé les dessins animés les plus célèbres de Disney.

Même si les principes de l'animation traditionnelle peuvent être explorés de manière plus détaillée dans le livre, ils constituent un excellent point de départ pour passer à l'animation numérique. Les principes comprennent le timing, l'anticipation, le suivi et plus encore, vous aident à obtenir un mouvement crédible, naturel et fluide.

Principe 2: Le mouvement doit être lié à l'objectif de l'utilisateur

Penser au mouvement n'est qu'un autre outil de conception de votre boîte à outils UX - il doit être conçu de manière à aider votre utilisateur à atteindre ses objectifs. La conception de mouvement ne devrait pas être envahissante ou excessive. En d'autres termes, si cela gêne l'utilisateur ou lui prend plus de secondes pour une tâche qui devrait être rapide, cela devient inutile et ennuyeux.

Interface utilisateur Un mouvement complémentaire à une interaction est un bon exemple de mouvement effectué correctement.

Par exemple, un indicateur de chargement est nécessaire et constitue une partie inévitable d'une transition de page. Le mouvement peut être utilisé pour créer une version plus attrayante ou personnalisée de l'indicateur de page. Cette interaction ne prend pas plus de temps qu’elle n’aurait été autrement (sans mouvement).

Au-delà de ce que l'utilisateur essaie d'accomplir, les concepteurs doivent reconnaître les objectifs d'une conception de mouvement efficace.

Qu'est-ce qu'une conception de mouvement efficace peut accomplir?

1. Fournir le contexte

Motion peut aider à fournir un contexte lors des transitions. Cela peut attirer l'attention sur un emplacement particulier ou aider l'utilisateur à se concentrer sur une zone de la page comme une transition ailleurs.

Par exemple, lorsque vous réduisez un navigateur Web, l’interaction se réduit littéralement à l’icône située sur le dock. Cela permet à l'utilisateur de savoir où il peut agrandir la fenêtre une fois celle-ci réduite.

2. Communique (un état, que se passera-t-il ensuite, etc.)

Motion peut communiquer un état ou préparer le terrain pour ce qui va se passer ensuite.

Par exemple, l’écran de connexion de macOS tremblera visiblement si vous vous trompez avec votre mot de passe. Cela indique une erreur dans le champ de formulaire reporté dans l'écran de connexion de l'iPhone. Cela communique une erreur dans la validation du formulaire qui invite les utilisateurs à réessayer.

3. Changer la perception

Un détail de mouvement bien placé sur une interaction peut donner une impression de vitesse et de fluidité.

Alors que le temps réel pour un chargement d’écran peut être identique, l’animation permet de lisser les espaces et d’apporter des transitions réfléchies sur la manière dont les éléments de page se déplacent, ce qui donne une impression de vitesse.

La conception animée peut aider à rendre les coutures / transitions plus agréables, car il n’est souvent pas possible de vivre une véritable expérience «continue».

Un exemple peut être trouvé dans les boutons en relief de la conception du matériau. Lorsque vous appuyez dessus, le mouvement montre comment les éléments sont organisés et indique la suite des événements. Il renforce également la hiérarchie des éléments de la page et concentre votre oeil là où vous pouvez le plus facilement accomplir votre prochaine tâche.

Principe 3: Permettre le retrait du mouvement

Tout le monde ne pourra pas apprécier la conception de mouvement. Ceux qui ont une déficience visuelle ou qui ont des problèmes déclenchés par un mouvement peuvent ne pas être en mesure d’apprécier les indices visuels trouvés dans votre interface utilisateur interactive. Par conséquent, il est important d’utiliser du texte alternatif à la place des repères visuels ou d’avoir une autre option de désinscription si toute la conception utilise beaucoup de mouvement. Pour vos utilisateurs utilisant des lecteurs d'écran, le texte alternatif peut être le seul moyen de glaner le sens de vos images ou de vos détails de mouvement (si ceux-ci sont liés à des actions / tâches clés) et rendront votre conception plus inclusive pour tous.

Conclusion

Motion est un autre outil puissant et attrayant qui vous aidera à améliorer votre expérience utilisateur et à créer des histoires plus convaincantes. Créez des mouvements plus accessibles et plus ciblés en utilisant les principes ci-dessus et créez des animations interactives réfléchies qui fonctionnent avec vos utilisateurs et non contre eux.