Lors d’un précédent article, nous avons parlé du Material Design et des actions à mettre en place au niveau de l’environnement 3D et des ombres.
Aujourd’hui nous allons parler des animations qui permettent à l’utilisateur d’être au cœur même de l’expérience.
Avant de passer en revue les différentes animations possibles sachez qu’il y a une règle de base à respecter qui est celle de la relation d’objet.
En effet, la façon dont vous organisez les objets dans une application détermine comment ces objets ou ces collections d’objets vont se déplacer les uns par rapport à l’autre.
Il y a 2 possibilités :
– Les objets peuvent se déplacer indépendamment les uns des autres,
– Ou leurs mouvements peuvent être contraints au travers de leur conteneur. Les conteneurs et les objets qu’ils contiennent ont une relation parent-enfant. Chaque objet a un seul parent et peut avoir un ou plusieurs enfants.
Les enfants héritent des propriétés de transformation de leur parent, comme la position, la rotation, l’échelle ou l’élévation…
La hiérarchie des parents et des enfants détermine la façon dont les objets et les groupes d’objets interagissent entre eux. Par exemple, les objets enfants ont un minimum de séparation de l’axe z de leur parent et d’autres objets ne peuvent pas être insérés entre parents et enfants.
Maintenant que ce principe de base est posé, nous pouvons voir les différentes animations possibles et leurs spécificités.
Les changements de formes
Les objets peuvent changer de forme. En effet, ils peuvent grossir ou rétrécir mais seulement à leur niveau de plan.
Ils peuvent apparaître ou disparaître n’importe où dans l’environnement.
Vous pouvez enlever une partie de l’objet et faire en sorte que ce dernier se « reconstitue » pour redevenir un objet en entier. Sur le même principe, deux objets peuvent se réunir pour ne former plus qu’un.
En revanche, les objets ne peuvent pas se plier ou se déplier.
Les animations dites « de surface »
Lors de la réception d’un événement d’entrée le système fournit une confirmation visuelle instantanée au point de contact. (Entrée= toucher, voix au micro…)
Ces réactions doivent respecter un mouvement radial, c’est-à-dire que le point d’entrée constitue l’épicentre et que les changements d’état doivent se déclencher au fur et à mesure que l’on s’éloigne de ce point. On crée ainsi une ondulation d’action.
En complément de cette réaction « en surface », l’objet lui-même peut aussi réagir en se surélevant par exemple.
Les mouvements authentiques
Observer le mouvement d’un objet nous renseigne sur ses propriétés : Léger ou lourd, souple ou rigide, petit ou grand… L’animation dans le Material Design n’est donc pas seulement beau, il aide à donner un sens aux relations spatiales, à renseigner sur la fonctionnalité et sur l’intention du système.
Les objets physiques ont une masse et ne se déplacent que lorsque des forces sont appliquées. Par conséquent, ils ne peuvent pas commencer ou s’arrêter de bouger de manière brusque. Les animations composées de mouvements trop rapides ou trop spontanés semblent donc peu naturels et peuvent être une perturbation désagréable pour l’utilisateur.
La règle essentielle des mouvements dans le Material Design est donc de conserver ce sentiment d’attraction physique sans sacrifier l’élégance, la simplicité, la beauté et la magie de l’expérience utilisateur.
Voici les quelques règles à respecter pour donner de l’authenticité à vos animations :
-Accélérez les objets rapidement et décélérez-les lentement pour éviter les changements brusques de vitesse. En effet, un changement brusque à la fois au début et à la fin de la « courbe » d’animation indiquerait que l’objet démarre et s’arrête instantanément ce qui est irréaliste.
– Lorsqu’un objet entre et sort du cadre, il doit le faire à sa vitesse de pointe. En effet, il ne faut pas distraire l’utilisateur avec des changements de vitesse inutiles.
– Faites des ajustements de vitesse selon les objets. En effet, un plus petit objet par exemple peut accélérer ou ralentir plus rapidement parce qu’il a moins de masse donc nécessite moins de force pour entrer en mouvement. A l’inverse, les plus gros objets peuvent avoir besoin de plus de temps pour atteindre leur vitesse de pointe. A vous de penser les mouvements de vos objets en les imaginant tels qu’ils seraient dans la « réalité ».
Les transitions
Il est parfois difficile pour un utilisateur de savoir où regarder et de comprendre comment les objets sont allés d’un point A à un point B.
Une stratégie d’animation bien menée doit guider efficacement cet utilisateur au travers de multiples étapes afin d’éviter cette confusion et d’améliorer la fluidité globale de son expérience.
La transition entre deux états visuels doit être claire, fluide et sans effort de compréhension pour l’utilisateur. Une transition bien conçue fait le gros du travail et permet à l’utilisateur de comprendre clairement où son attention doit se concentrer.
Cette transition s’articule autour de trois catégories d’éléments:
- Les éléments entrants: éléments nouvellement générés ou introduits dans l’environnement.
- Les éléments sortants: éléments qui ne sont plus pertinents et qui doivent être retirés d’une manière appropriée.
- Les éléments communs: éléments qui persistent du début à la fin d’une transition.
Lorsque vous concevez vos transitions, vous devez prendre en considération les points suivants:
- Pensez à la façon dont l’attention de l’utilisateur doit être dirigée. Quels sont les éléments et les mouvements qui soutiennent cet objectif? Comment les éléments entrants, sortants et les éléments communs doivent s’orchestrer durant la transition ?
- Considérez la couleur et les éléments communs dans le design de vos pages comme des éléments de lien et de connexion visuelle entre chaque transition.
- Ajoutez des animations de manière judicieuse: n’ajoutez la transition que si elle ajoute de la clarté et du confort à l’expérience utilisateur.
- Respectez la hiérarchie temporelle. En effet, un timing simultané pour tous les éléments ne permet pas de hiérarchiser l’information, ne donne pas d’informations sur ce qui est le plus important ou pas. Et si jamais tous les éléments ont la même importance alors préférez les introduire comme un groupe au travers d’un mouvement à plus large échelle.
- Appliquez la même règle de mouvement sur toutes vos transitions ; les mouvements aléatoires sont distrayants et ne participent pas à une sensation de cohérence. De même, évitez les chemins contradictoires ou qui se chevauchent.
- Pensez aux plus petits détails car c’est la petite touche qui peut faire toute la différence auprès de l’utilisateur. Par exemple, vous pouvez introduire des mouvements jusqu’aux petites icônes. Une icône de menu qui devient une flèche ou les commandes de lecture qui changent en douceur de l’un à l’autre servent une double fonction: informer l’utilisateur et le plonger dans un moment d’émerveillement.
Dans un prochain article, nous étudierons tous les éléments de design à notre disposition pour élaborer ses projets autour du Material Design.
Vous avez également toujours la disponibilité de revoir le principe des ombres et de l’environnement 3D dans l’article précédent !