(illustration titre par Denis Pellerin)
C’est un acquis de la physique, et plus prosaïquement un acquis de l’expérience pour chacun d’entre nous : le monde qui nous entoure, celui dans lequel nous vivons, n’existe que dans le temps. En particulier chacune de nos actions, aussi insignifiante soit-elle, s’inscrit dans une durée. Elle implique un mouvement, aussi infime soit-il, qui se déploie dans le temps. Concrètement, une porte que nous actionnons peut être ouverte ou fermée, mais prend aussi toutes les positions intermédiaires pour passer d’un état à l’autre. Trivial.
Sauf que dans le monde de pixels de couleur de nos écrans interactifs, il arrive bien souvent que les choses apparaissent ou disparaissent instantanément (en tout cas du point de vue de nos capacités de perception). En matière d’expérience… c’est pas terrible. En effet, là où notre humanité de chair et d’os s’attend à être satisfaite, gratifiée d’un mouvement de disparition raffiné, la suppression brutale d’une fenêtre à l’écran, ou encore sa téléportation peut être vécue de manière frustrante. Inversement, le rebond gracieux d’une pop-in dans une application de location de trottinettes électriques pour nous dire que la petite machine est prête à l’emploi est particulièrement jouissif.
le temps est la première dimension de l'interaction
Le temps est la première dimension de l'interaction. Dans le design des interactions d'une interface écran, le traitement du temps est au moins aussi important que le traitement des objets dans l'espace de l’écran. Son impact sur l'expérience est au moins aussi fondamental.
La persistance rétinienne et l’effet phi
Il y a quelque chose de viscéral dans cette notion de mouvement attendu : notre expérience humaine, animale du monde et de ses règles, acquise depuis notre plus tendre enfance nous apprend que dans le réel les choses ne disparaissent pas comme par magie. Quand elles se déplacent, elles vont quelque part. Lorsqu’un objet, fut-il fait de lumière colorée affichée sur un écran, réagit de manière inconsistante avec cette expérience, nous sommes ainsi dérangés dans nos « convictions viscérales ». Qui plus est lorsque le système d’interface prétend singer au moins partiellement ce monde réel en employant la célèbre métaphore du bureau avec ses fenêtres, ses boutons, ses dossiers, ses fichiers, sa corbeille, etc.
Motion design génératif, issu de la production de milliers d'images statiques consécutives
Le principe de la persistance rétinienne, consiste à expliquer que nous percevons le mouvement d’une image à l’autre — d’une frame à l’autre — grâce à la persistance des couleurs captées par les cellules sensibles de nos yeux, appelée rémanence et qui durerait 1/25ème de seconde, juste le temps qu'il faut pour passer à l'image suivante. Ce principe est très contesté scientifiquement… au motif que l’illusion du mouvement serait plutôt l’objet d’une construction mentale, d’un effort de raccordement logique entre des images qui s’enchaînent et qui le permettent : typiquement un personnage qui se déplace devant un fond statique. On parle alors d’effet phi.
Trouver de la cohérence avec notre expérience du réel
En définitive, peu importe ici que l’on défende l’une ou l’autre des deux théories : nous, humains qui avons émergé en pleine nature, cherchons désespérément à comprendre ce que nous percevons et à y trouver de la cohérence afin d’anticiper et de survivre. Trouver de la cohérence avec notre expérience du réel, trouver une certaine logique vis-à-vis de cette expérience. Ainsi, ne pas s’adresser à nous humains à l’aide des mouvements que nous anticipons, c’est un peu nier notre humanité et ça ne peut pas vraiment aider à l’appropriation d’une interface.
De quelles animations parlons-nous ?
Lorsque l’on parle d’écrans et de cinématiques, il faut bien faire la part des choses. En effet, en employant le terme d’animation en particulier, on englobe le travail d’animation du dessin animé, mais aussi celui du motion design, ou encore le travail de transitions liées à l'interaction typique du design d’interfaces écrans.
Pour nous autres designers de services aux accents majoritairement digitaux, c’est plutôt la dernière espèce du genre qui nous intéresse : le design des transitions entre écrans ou le design des micro-animations d’éléments d’interface, en réponse à une interaction provoquée par l’utilisateur ou par un service connecté. Typiquement, le fameux état de « hover » — ou « rollover » selon les chapelles — qui définit la réaction d’un bouton ou d’un lien lorsque la souris le survole. Ou encore l’état « enfoncé » du bouton lorsqu’il est pressé par l’utilisateur. C’est aussi l’arrivée d’une notification sur l’écran verrouillé du smartphone, ou la transformation d’une boîte de dialogue à la fin d’un téléchargement — une forme d’interaction décorrélée de l’action immédiate de l’utilisateur.
La différence majeure de nos cinématiques d’interface avec les animations à caractère artistique ou illustratif se concrétise dans la vocation de l’animation en question. Il s’agit, dans notre cas, de rendre plus tangible le comportement des éléments d’une interface (ex: le bouton enfoncé), d’affirmer la métaphore physique d’interface employée le cas échéant (ex: la fenêtre qui tombe comme par gravité), pour en augmenter la compréhension, pour en augmenter l’affordance, c’est-à-dire la capacité à être immédiatement interprétée dans le bon sens.
Teaser des motion guidelines RATP, designed by User Studio
On retrouve dans cette vocation l’objectif de simplicité, de facilité d’usage presque universellement poursuivi par les designers. En effet les cinématiques viennent renforcer — et même magnifier — le discours construit par la forme « statique » des éléments d’interface. Redondance ? Sûrement un peu, mais les cinématiques d’interface vont largement au-delà : leurs vertus résident aussi et peut-être surtout dans le feedback de l’interaction (c’est-à-dire confirmer visuellement que l’interface a bien pris en compte une action de l’utilisateur) et dans la création d’une carte mentale de l’arborescence d’une interface (ex: comprendre que l’on est passé « sur l’écran qu’on retrouve sur la droite »), deux notions qui confèrent à l’interface un caractère particulièrement rassurant. À l’ère du paiement dématérialisé, du partage d’informations personnelles avec les administrations digitalisées, du pilotage automatique des avions, métros et réacteurs nucléaires, la confiance dans le fonctionnement d’une interface et dans la compréhension globale que l’on en a est primordial. Et les cinématiques d’interface en sont un vecteur majeur.
On retrouve dans cette vocation l’objectif de simplicité, de facilité d’usage presque universellement poursuivi par les designers.
L’émergence du mouvement dans le design d’interaction
Alors que le film d’animation et le cinéma ont consacré l’image en mouvement de manière magistrale, alors que le motion design s'est imposé comme un médium à part entière et infuse massivement dans la culture visuelle de notre époque, la culture du travail des cinématiques dans le design d’interaction commence tout juste à s’imposer. Un état de fait qui s’explique certainement de nombreuses manières :
- les outils dédiés au design d’interaction n’ont émergé que depuis quelques années, accompagnés de leur cortège d’outils de prototypage des transitions entre écrans notamment comme dans l'exemple de Principle ci-dessous, et bien d'autres désormais (alors que l'on employait auparavant exclusivement des outils généralistes de motion design tels qu’After Effects)
- la puissance de calcul des diverses machines que nous employons n’a pas toujours permis un rendu efficace des animations et transitions
- les frameworks de développement des différents systèmes d’exploitation n’ont pas toujours simplifié la réalisation de transitions ou d’animations (un peu de la même manière qu’ils n’ont pas toujours permis de simuler des ombres sous les fenêtres ou des dégradés à l’intérieur des boutons)
- la culture des designers d’interfaces est sûrement plus proche de celle des graphistes print que de celle des motion designers, animateurs, vidéastes — en témoigne d’ailleurs les profils des candidats à ces postes pendant de nombreuses années, avant que les formations spécifiques n’émergent
- ainsi, la question du temps dans l'interface passe presque systématiquement à la trappe
- et justement, l’émergence relativement récente des formations spécifiques, la faible acculturation des profs, la récente diffusion des bonnes pratiques n’ont pas aidé à intégrer cette dimension aux projets
- on peut sûrement ajouter à cette liste que la ligne budgétaire, parfois qualifiée d’option, allouée par les designers et leurs studios à ce travail de cinématiques le dégrade au rang de coquetterie qui prend du temps, qui est chère et dont on peut se passer.
Amortissement (easing)
Une fois le contexte posé, il s’agit d’entrer dans la complexité du sujet : première considération à adresser, l’amortissement, ou en bon français le easing.
Forme primitive des cinématiques d’interface si l’en est, la transition entre deux états d’un même bouton revient à passer d’un état « normal » (par défaut, au repos), à un état « pressé » (actif). Lorsque l’on crée et développe pareil bouton, on peut choisir de ne prendre aucune décision de design du point de vue des cinématiques :
- soit en n’implémentant aucune transition entre les deux états : c’est la solution la plus radicale, la moins raffinée. Mais elle est généralement plus facile à développer, et donc souvent privilégiée.
- soit en implémentant une transition entre les deux états, mais en la laissant se faire de manière linéaire : en démarrant et en s’arrêtant sèchement, c’est-à-dire sans courbe d’accélération ou décélération, ni au début ni à la fin. Ça fait un peu comme freiner brutalement au feu rouge : c’est raide. N’empêche que c’est déjà une transition et pas une téléportation entre deux états comme précédemment : à faible vitesse on y voit presque du feu, et ça peut très souvent suffire à aider à la compréhension d'un changement d'état.
On peut aussi décider de démarrer progressivement et de s’arrêter progressivement, c’est-à-dire avec amortissement. Dans pareil cas, le design de la courbe d'amortissement est un sujet de design à part entière. De nombreuses librairies existent à ce propos, qui permettent de se familiariser et de s’inspirer avec le vocabulaire du domaine : un excellent outil est Easing Functions Cheat Sheet, qui donne un aperçu des principaux modèles de easing, et en fournit des exemples appliqués à plusieurs paramètres (opacité, position, taille) qui plus est agrémentés de code CSS. Un autre outil, cubic-bezier.com, qui permet de mettre les mains dans le cambouis en modifiant une courbe de manière visuelle, fournit en outre les 4 valeurs nécessaires à la réalisation d’une courbe simple.
Voici justement une illustration interactive maison, librement inspirée des outils cités ci-dessus, que nous avons mise en œuvre pour expliciter les amortis les plus simples à utiliser, et qui permet de jouer avec les valeurs des "poignées" qui sculptent cette courbe de Bézier qui elle-même régit notre amorti :
Pour les plus geeks de nos lecteurs, retrouvez et modifiez le code HTML, VueJS, SCSS à l'adresse suivante : https://jsfiddle.net/userstudio/vah9ogsp/.
Pour finir n'entrons pas dans plus de détails techniques, mais illustrons plutôt l’importance du easing, au-delà du freinage au feu rouge : tentez d’imaginer un instant un TGV qui démarre instantanément à 300km/h; un oiseau qui atterrit sur son nid à pleine vitesse; une patineuse artistique qui réalise une pirouette à vitesse parfaitement constante du début à la fin… des situations justement peu imaginables, parce que physiquement impossibles et complètement décorrélées de notre expérience du Monde. Même si, selon l'interface considérée, rien ne nous empêche de choisir tout de même de nous affranchir de la gravité, de la logique du système masse-ressort, de créer une expérience plus frustre, ou plus lunaire, pour dramatiser un événement ou encore pour le rendre drôle, surprenant, incongru. Ce que nous défendons ici c'est l'importance de se poser la question. En somme, raffiner une transition et en particulier une transition qui accompagne une interaction, c'est faire notre métier de designers.
Ce que nous défendons ici c'est l'importance de se poser la question.
Skeuomorphisme et flat design
Un exemple d'instrument logiciel typique au format "VST" créé par Steinberg pour s'insérer dans les logiciels de création audio tels que Cubase ou Logic
Mais si, vous savez, vous en avez entendu parler à l’époque du passage de iOS6 à iOS7 d’Apple. Puis peut-être même au moment de l'avènement de Material Design par Google. Skeuomorphisme, c’est un terme compliqué qui fait essentiellement référence à un modèle formel d’éléments d’interface écran qui consiste à donner l’illusion d’éléments du monde réel dont ils sont "issus", au moins conceptuellement : typiquement ce sont des éléments d'interface écran dotés d’ombres portées, d’une texture matérielle, de volumes… dans le domaine du traitement informatique du son, c'est particulièrement fréquent — c'est même une véritable tradition souvent poussée jusqu'à l'overdose. Quelques exemples tangibles :
- façon skeuomorphique, le bouton ressemble par exemple au bouton d’un tableau de bord de voiture, avec ses congés, ses reflets, son traitement de surface, l’embossage du pictogramme qui vient l’orner
- un panneau de cartes d’information représentées par des cartons perforés et fixés par des rivets
- l'application de prise de notes qui ressemble à un bloc-note dont on déchire les feuilles au fur et à mesure
- la boussole numérique qui singe une aiguille aimantée baignant dans de l'huile…
Malgré toutes ses qualités en matière d'affordance initialement poursuivie afin d'éduquer les utilisateurs novices à l'usage des interfaces, ce modèle est un peu en perte de vitesse ces dernières années en matière de design d'interfaces, au profit de ce qu'on appelle communément le flat design. Ou plutôt en voie de rationnalisation, de savant mélange avec cette dernière tendance beaucoup moins tridimensionnelle comme son nom l'indique.
Les exemples les plus patents dans nos vies numériques étant justement ceux de iOS 7 dans lequel le skeuomorphisme a été réduit à sa portion congrue, ou encore celui de Material Design qui définit désormais les guidelines de design d'interfaces façon Google, et dans lequel le skeuomorphisme se retrouve par exemple dans quelques effets de superposition, d'ombre, de loupe, subtilement choisis… mais aussi dans la gestion du mouvement : des effets de gravités, de collisions (les objets se poussent, rebondissent), de rotation, d'aimantation, et tout ceci avec un amortissement systématique. La vidéo de présentation ci-dessous l'illustre assez bien, et les principes se trouvent assez précisément expliqués sur le site dédié. Notons qu'IBM a réalisé un travail similaire, qui bénéficie d'un Motion Generator dont les produits sont plutôt faciles à exploiter pour qui connaît un peu le CSS.
En étudiant ces exemples, on ne peut que constater l'apport cognitif du mouvement dans le design d'interaction comme le skeuomorphisme pour la forme statique — malgré l'évident risque d'overdose. À l'instar du film d'animation dans lequel l'adjonction de mouvement à n'importe quelle forme permet de lui conférer une vie, un caractère voire même une certaine sensibilité, l'adjonction de mouvement pour réaliser des transitions entre états ou entre vues (écrans, pages, scènes…) d'une interface lui confère tant du sens qu'une part d'expressivité.
Carte mentale et expérience
Jusqu'ici nous avons plutôt abordé, en matière d'exemples, la transition entre les états d'un élément que la notion de transition entre les vues (écrans, pages, scènes…) d'une interface. Or c'est là l'un des apports très intéressants des cinématiques, en matière de sens : donner à voir le plan de l'application considérée en signifiant que telle vue se situe à gauche et telle autre à droite, et ainsi permettre à l'utilisateur de se construire une carte mentale de l'objet informatique qu'il a entre les mains. Coupez le son de votre appareil et lancez la vidéo ci-contre, qui présente en deux minutes comment le logiciel XCode permet de concevoir une application pour iPhone typique comprenant une navigation de gauche à droite, avec le fameux bouton retour. L'animation qui accompagne l'ouverture de la nouvelle vue, puis son inversion pour retourner en arrière permettent de construire sans aucun doute possible cette carte mentale, et l'outil de construction d'interface lui-même (un Storyboard, pour les plus geeks de nos lecteurs) confirme cette notion.
Les cinématiques d'interface permettent ainsi de spatialiser une application entière tout en créant une impression de cohérence d'ensemble, et évacuent même la nécessité de créer un plan ou un mode d'emploi pour l'utilisateur d'applications métier complexes. Un peu de la même manière que l'avénement de la 3D dans l'architecture a permis de s'affranchir de nombreuses représentations statiques (l'animation n'est d'ailleurs pas en reste dans ce domaine-là non plus).
Les cinématiques d'interface permettent ainsi de spatialiser une application entière tout en créant une impression de cohérence d'ensemble
Les cinématiques simplifient ainsi d'autant la forme des écrans du point de vue statique — nettement moins d'explications, d'éléments de contexte sont nécessaires à afficher puisque transmis subliminalement par le mouvement. L'interface s'en trouve allégée visuellement.
En somme, l'expérience globale de l'outil s'en trouve améliorée. Le niveau d'exigence en matière de design d'UX/UI diffusé à l'heure actuelle par les plus grandes marques digitales est tel que traiter les cinématiques d'interface est désormais un incontournable, pour qui souhaite réaliser des expériences applicatives et expériences de marque mémorables.
Épilogue : mouvement, audio et haptique
Ainsi une autre composante de l'interaction qui se déploie dans le temps, c'est l'audio. Même s'il peut être particulièrement irritant quand répété (le son un peu ridicule des touches de claviers singé sur un écran tactile, le son de l'appareil-photo façon "réflex", etc.), le son accompagne très bien les transitions : à tel point que pour expliquer un mouvement que l'on n'a pas encore réalisé, on peut tout simplement chanter ou siffler (en tout cas, chez User Studio on le fait !) : un sifflement qui part de grave et monte dans les aigus pour signifier que le mouvement va se faire de bas en haut dans l'écran. Un son d'aspiration pour parler d'une boîte qui disparaît dans un mouvement de rétrécissement. Un "pop" ou un "blip" pour parler d'une fenêtre qui apparaît à la surface de l'écran. Un "boiiiing" pour parler d'un rebond. Tout un langage sonore commun qui s'inspire bien sûr de références communes en dessin animé (comme l'illustre cette géniale rencontre entre Speedy Gonzales et Grosminet) mais aussi tout simplement de l'expérience commune des mouvements du quotidien.
Enfin une dernière composante de l'interaction qui fait fondamentalement partie de notre expérience du mouvement, c'est la dimension haptique : comme avec un joystick dont les ressorts internes poussent contre le mouvement que l'on impose au manche pour le ramener à sa position verticale. C'est une raison pour nous de souligner l'intérêt de travailler les interactions tangibles et leurs cinématiques. De suggérer à nos clients que d'autres modalités d'interaction existent que celles de l'écran tactile. Que la qualité d'une expérience passe aussi par là. À suivre !
Références
Retrouvez un excellent article (presque une Bible) écrit par un non moins excellent enseignant anglo-saxon du domaine, Issara Willenskomer, tant sur le fond qu'en matière de principes concrets prêts à l'emploi (auteur du site uxinmotion.com). La seule critique que nous pourrions émettre à son égard : il se concentre un peu trop sur l'usage d'After Effects comme l'alpha et l'oméga de la résolution de tous les sujets d'animation.
Et dans le même esprit que notre article, un plaidoyer pour le design des cinématiques dans l'interaction, sur le blog Design Better de InVision. Qui pointe lui-même vers d'excellentes références, pointues et pédagogues.
Ainsi qu'une référence en matière d'animation, que l'on peut exploiter dans à peu près toutes les situations — même si bien sûr elle a tendance à tout formater sur son passage : Les "Twelve basic principles of animation" édictés par deux auteurs d'animation de chez Disney.