Le mouvement est naturel
En effet, avec le Material Design, le mouvement est utilisé pour répondre à l'utilisateur.
C'est une excellente forme de feedback !
Pour comprendre tout ce que cela implique, je vous invite à regarder cette courte vidéo créée par Google sur les principes du mouvement en Material Design.
En effet, il respecte les lois de l'inertie et de la gravité naturelles : dans le monde physique un objet ne bouge pas à une vitesse constance d'un point A à un point B.
Voici un exemple : une voiture à l'arrêt dans une rue de 50 mètres de long doit parcourir cette distance le plus vite possible. Elle peut aller aussi vite que possible, n'empêche que dans les phases de démarrage et de freinage, la voiture n'aura pas sa vitesse de pointe. C'est à cause de l'inertie, car la voiture doit porter son propre poids.
Et bien, c'est exactement la même chose avec les objets en Material Design.
Le mouvement est intentionnel
Il sert à montrer si une action est possible ou non : c'est l'exemple typique du "swipe".
Parfois on peut "swiper" pour faire disparaitre un élément et parfois non, tout simplement parce qu'un élément n'est pas "swipable". Pour autant, le mouvement, même dans ce cas, existe et il permet de montrer que l'action est impossible.
→ Vous trouverez un exemple ici.
Et dans certains cas très précis, il permet de guider l'utilisateur pour interagir avec le produit, c'est le cas par exemple lorsque l'on reçoit un appel sur un android : le pictogramme du téléphone vibre signalant l'appel en cours.
→ Vous trouverez l'illustration de ce phénomène ici.
Le mouvement fait transition
Entre un avant et un après, le mouvement suit l'utilisateur.
→ Vous trouverez un exemple ici.
Il n'y a pas de fondu enchainé… ni de passage d'une page à l'autre sans transition.
Tout simplement, le design bouge sous les doigts de l'utilisateur, ce qui donne l'impression que le design est vivant en quelque sorte.
La transition se dessine en fonction du point de contact (le doigt sur l'écran) : si l'utilisateur touche le centre de l'écran, la transition radiale se déroule à partir du centre.
→ Vous trouverez un exemple ici.
Le design amène visuellement l'utilisateur vers ce qu'il doit voir ensuite, il fait une transition douce, contrairement à un simple passage entre deux pages.
Par ailleurs, dans certaines transitions, le mouvement transforme les objets : un objet circulaire peut s'agrandir, prendre tout la place et prendre une forme rectangulaire.
→ Vous trouverez un exemple ici.
Enfin, il y a un autre type de mouvement de transition, c'est celui des icônes.
Pour ne pas saturer l'écran de bruit visuel, et notamment d'un trop grand nombre d'icônes, l'écran présente seulement les icônes d'interactions premières et celles-ci peuvent se transformer au moment où vous en avez besoin : lorsque l'on clique sur l'icône du menu hamburger, la page de menu s'ouvre mais l'icône se transforme en flèche pour indiquer à l'utilisateur qu'il peut revenir en arrière, et que c'est deux icônes sont liées à la même action ; ensemble, elles permettent un "aller-retour".
→ Vous trouverez un exemple ici (menu hamburger + flèche précédent),
→ et un autre ici (lecture + pause).
