Animations & interfaces : Il faut que ça bouge !
Bien animer une interface c’est important ! Voici quelques conseils pour le faire de façon efficace et esthétique.
L’animation , un passage obligatoire pour le designer ?
Ces dernières années, les métiers du digital subissent d’importants changements. En effet, le travail de Web designer englobe désormais un nombre si important de métiers qu’il ne peut plus être utilisé pour définir notre métier (ou devrais-je dire “nos métiers”). On voit apparaitre alors les “motion designer” qui auront pour rôle d’ajouter une dimension supplémentaire afin d’enrichir l’expérience utilisateur.
Pourquoi animer ?
Nous étions déjà plus ou moins habitués aux animations avec Flash. L’apparition des technologies d’animation liées à l’HTML5 a complètement changé la donne. On a d’abord pu voir des sites web utiliser ces animations de façon gadget, sans forcement vouloir répondre à des contraintes ergonomiques ou fonctionnelles. Mais elles peuvent faire bien plus !
Bien évidemment les animations sont à utiliser car elles sont ludiques. Mais, pour aller plus loin, elles servent car elles rendront votre produit plus fini, plus abouti. Mais de façon plus cartésienne on peut affirmer que :
• Les animations aident à comprendre une transition entre deux états.
• Les animations aident à rendre votre application plus rapide en apparence.
N’hésitez pas à les utiliser dans vos applications mais aussi dans la phase de conception car bien souvent une petite animation bien faite vaut mieux qu’un long discours !
“Le prototypage d’interaction permet de faire passer des idées plus facilement à nos collaborateurs et clients.” — Aurélien Foutoyet
Prenons un exemple, les moments d’attente ou de chargement. Le rôle d’une animation sera ici de créer un environnement plus plaisant durant un moment d’attente (envoi de formulaire, chargement d’une page, etc.)
L’application iOS Stripe utilise une série d’animations dans l’interface pour indiquer à l’utilisateur qu’un code de vérification vient de lui être envoyé par SMS juste après un paiement. En réalité l’application ne sait pas exactement à quel moment va arriver le SMS. Ment-elle à son utilisateur ?! Oui…et non ! Car, le temps de jouer ces quelques petites animations, l’utilisateur n’a pas le temps de s’impatienter. Il ne verra pas passer ces 3 longues secondes, et aura l’impression de recevoir instantanément la notification du SMS. Malin non ?
Let’s Move !
Voici désormais une liste non-exhaustive de lois qui régissent le motion design appliquées au design d’interface. En d’autres termes, une recette pour des animations belles et efficaces.
Squash and Stretch
Les personnes et les objets ont des masses inhérentes. Quand un objet se déplace, il subit des lois qui conditionnent son mouvement en fonction de sa rigidité, de son poids ou encore de sa taille. De ce fait, une étagère en bois ne se déplacera pas de la même manière qu’une chemise dans le monde réel. Le principe d’animation “Squash and Stretch” est le principe utilisé pour rendre de la rigidité d’un objet.
Pensez à utiliser ce principe sur vos applications mobiles. Cela renforce l’engagement de l’utilisateur car cela crée un lien entre le monde physique et le monde digital. Vous jouez donc sur l’empathie. Vous pouvez également faire passer un ressenti différent en fonction de la nature de l’animation choisie.
La transition d’écran de l’application Flipboard présente un “Squash & Stretch” qui exprime une page de type planche solide. En revanche, la transition choisie par iBooks évoque le mouvement souple et flexible d’une feuille de papier.
A vous de bien choisir afin de faire passer le bon message et d’augmenter l’empathie de votre utilisateur.
Anticipation
Quand un animateur réalise un objet en mouvement, 3 phases distinctes doivent être respectées pour que le mouvement soit réaliste :
- La préparation de l’action,
- L’action en elle-même,
- Le résultat du mouvement.
C’est le principe d’anticipation qui est utilisé pour préparer un objet au mouvement. Anticiper c’est préparer tous les éléments de l’environnement afin de donner au spectateur une idée de ce qui va se passer.
De la même façon, le principe d’anticipation peut être appliqué aux applications mobiles. Il faut avant tout donner à l’utilisateur un aperçu de ce qui est sur le point d’arriver.
Dans l’exemple ci-dessus la petite pile de fiches ainsi que l’animation montre que plusieurs fiches sont présentes sur l’écran. L’utilisateur comprend donc intuitivement qu’il peut naviguer entre plusieurs éléments. Il a un aperçu de ce qui est sur le point de se produire. C’est le principe d’anticipation.
Staging
“Staging” signifie mise en scène. Ce mot est également utilisé pour décrire le “Home-Staging” qui consiste à redonner de la valeur à un bien immobilier. Le principe de la mise en scène d’une animation est similaire. Car une bonne mise en scène rend l’animation claire et évidente pour l’utilisateur.
Dans le monde de l’expérience utilisateur mobile, le principe de la mise en scène est plus pertinente lorsque l’on considère les transitions entre les écrans et les interactions. Une interaction qui est bien mise en scène combine fluidité et mouvement pour guider l’oeil de l’utilisateur au bon endroit et au bon moment. On ressentira tout de suite quelque chose de peu naturel quand le Staging est mauvais.
Pour finir
Comme vous l’imaginez, cette liste n’est pas exhaustive mais j’espère qu’elle vous a donné envie de vous intéresser au motion d’interface et aux lois qui régissent l’animation.
Ces réflexions m’ont été inspirées par des articles anglophones très intéressants sur les “12 lois du motion design” et “The Illusion of Life” de Frank Thomas et Ollie Johnston (écrit dans le années 30 !). En voici un résumé en vidéo plus que passionnant :
Merci pour votre attention. Et surtout n’oubliez pas : Let’s Moove :)
