Ce que la science peut vous apprendre sur le design de superbes animations d’interface utilisateur graphique

Quand nous créons des interfaces utilisateur graphiques (IUG) qui imitent le monde physique que nos utilisateurs peuvent facilement comprendre et utiliser – simplement en prédisant comment l’interface graphique se comportera en fonction de leurs (et de nos) expériences communes dans le monde physique. Une façon d’imiter le monde physique est d’utiliser les animations pour montrer comment les objets changent et se déplacent sur l’interface graphique. Ici, nous allons vous montrer les bases des sciences cognitives derrière la façon dont les gens comprennent le monde physique et vous donner des exemples de la façon dont le géant du logiciel Google applique la science cognitive dans son Material Design. Comprendre ces connaissances signifie que vous serez en mesure de designer des animations d’IUG qui sont tout aussi faciles à comprendre car elles correspondent aux lois de la physique qui régissent les phénomènes qui nous entourent. De cette façon, votre utilisateur saura à quoi s’attendre de votre interface graphique, quel que soit son thème ou la nature de l’entreprise.

Lorsque vous avez une compréhension fondamentale de ce qui rend les animations faciles à comprendre, vous pouvez faire de meilleurs choix de design dans les situations où les directives de design ne couvrent pas l’idée que vous souhaitez réaliser. Cela signifie – tant que vous gardez une prise ferme sur la discipline tout en jetant un œil attentif sur les moindres détails de la façon dont vous voulez que votre concept de design apparaisse – vous pouvez vraiment atteindre le ciel ici. Il ne devrait y avoir aucune raison pour laquelle vous ne pouvez pas produire des animations vraiment innovantes qui attirent l’attention des utilisateurs à plusieurs niveaux.

Animations et monde physique – Imiter le mouvement

Les utilisateurs ont une compréhension inhérente des propriétés des objets physiques ; Ainsi, chaque fois que nous faisons imiter le monde physique aux interfaces graphiques, les utilisateurs les trouveront faciles à comprendre. L’une des propriétés des objets dans le monde physique est qu’ils peuvent être déplacés dans un espace tridimensionnel. Sur les interfaces graphiques, nous utilisons des animations pour montrer à l’utilisateur comment les objets se déplacent ou peuvent être déplacés. Nous utilisons également des mouvements – des séquences montrant des changements – pour donner à l’utilisateur des informations sur ce qui arrive à un objet d’IUG. À titre d’exemple, pensez au mouvement que vous voyez lorsque vous réduisez ou fermez une fenêtre dans de nombreuses interfaces utilisateur. La fenêtre devient progressivement plus petite jusqu’à ce qu’elle disparaisse du dock ou de la barre des tâches où vous l’avez ouverte pour la première fois. Sur un PC, lorsque vous avez de nombreuses fenêtres ouvertes et que vous commencez à les fermer, une par une, vous remarquerez la largeur de la fenêtre restant dans les onglets augmente – jusqu’à ce que vous tombiez à environ cinq fenêtres ouvertes. Cet effet reflète le phénomène réel des objets « s’étalant ou se serrant ensemble pour utiliser (ou même « profiter ») de l’espace disponible.

Lorsque vous réduisez une fenêtre sur un Apple MacBook, une brève animation montre que la fenêtre est réduite dans le dock.

Même si le mouvement est rapide, il vous donne une compréhension de base instantanée de l’action qui vient de se dérouler. D’un point de vue technique, réduire une fenêtre ne nécessite pas de mouvement ; vous ne réduisez pas la taille d’un objet physique. Cependant, du point de vue de l’utilisateur, l’idée selon laquelle un objet devient plus petit avant de disparaître est très facile à comprendre. Imiter le comportement des objets physiques signifie que l’utilisateur sait à quoi s’attendre de l’interface graphique car il peut se fier à son expérience avec le monde physique.

Quand nous sommes bébés, nous apprenons et construisons des modèles sur la physique du monde. Et ce qui se passe, lorsque nous commençons à toucher les pixels dans un logiciel, c’est que ces mêmes parties de votre cerveau essaient de comprendre : « Quelle est la physique de ce monde ? ». Tout d’abord, il n’y a rien de pire que l’incohérence de la physique d’un monde, car cela signifie que vous apprenez constamment – constamment un enfant et constamment en train d’apprendre parce que tout est nouveau et surprise et c’est incohérent et vous ne pouvez jamais vous poser afin d’être efficace et optimisé.
– Matias Duarte, vice-président du Material Design chez Google

Ici, vous apprendrez les fondamentaux de la science cognitive de la façon dont vos utilisateurs (à condition qu’ils soient humains) comprennent les objets physiques, afin que vous puissiez designer des animations d’IUG qui sont tout aussi faciles à comprendre car elles correspondent à la physique du monde. Nous vous donnerons également quelques exemples de la manière dont Google utilise notre compréhension du monde physique dans ses directives de Material Design. Avant d’entrer dans la science cognitive, cependant, commençons par quelques mots d’avertissement sur l’utilisation des animations.

Règles d’utilisation des animations

Si nous utilisons mal les animations, elles deviendront une nuisance plutôt qu’une aide. Elles prendront trop de temps et d’attention à l’utilisateur. Cela peut sembler banal, mais vous serez peut-être surpris de voir à quel point il est facile de se laisser emporter par ce qui semble être une idée fantastique. Pour éviter cela, vous devez prendre du recul et regarder la situation dans son ensemble au fur et à mesure. À savoir, tenez toujours compte des règles empiriques suivantes inspirées des directives d’animation de Google :

• Commencez toujours par considérer ce que l’utilisateur essaie d’accomplir, puis aidez-le à le faire.
• Utilisez des animations lorsqu’elles peuvent aider l’utilisateur et fournir des informations ; 99% du temps, vous ne devez pas utiliser d’animations simplement parce qu’elles sont belles.
• Le mouvement animé doit avoir du sens. Pensez à ce que vous essayez de dire à l’utilisateur en utilisant une animation et concevez le mouvement en conséquence.
• Les animations doivent être subtiles et ne pas prendre plus de temps que nécessaire. Moins, c’est vraiment plus, et le temps des utilisateurs leur est aussi précieux que le vôtre.

Maintenant que nous avons fait le point, voyons comment les utilisateurs comprennent les propriétés des objets physiques et comment vous pouvez utiliser leur compréhension pour créer de superbes animations.

Comment les utilisateurs comprennent-ils les objets physiques ?

La connaissance des objets [Object knowledge] est un élément fondamental de la façon dont les humains comprennent le monde. Des années d’enquête méticuleuse par des chercheurs tels qu’Elizabeth Spelke, Renée Baillargeon et un certain nombre d’autres ont montré que nous avons une connaissance de base rudimentaire des objets physiques et de leurs propriétés depuis notre enfance.

Dès l’enfance, nous formons des attentes sur les propriétés des objets physiques et sur la manière dont nous pouvons interagir avec eux.

Les bébés s’attendent à ce que les objets se comportent d’une certaine manière et deviennent surpris lorsqu’ils font quelque chose de différent de ce à quoi ils s’attendent. Certaines des choses que nous comprenons sont :

• Les objets peuvent être dissimulés, mais ils existent toujours.
• Les objets peuvent être déplacés, mais ils ne bougent pas sans l’influence d’une force extérieure.
• Les objets ne disparaissent pas soudainement et ne réapparaissent pas ailleurs ; au lieu de cela, ils se déplacent dans des chemins dégagés.
• Les objets bougent lorsqu’ils entrent en contact. Un objet peut faire bouger un autre objet s’ils se heurtent l’un à l’autre, mais ils ne se heurtent pas à distance.
• Un objet tombera s’il est relâché dans les airs.
• Les objets plus petits peuvent tenir dans des objets plus grands, mais pas l’inverse.
• Si un objet bouge tout seul, il a une forme d’énergie interne ou d’intentions, auquel cas le comportement peut s’écarter du comportement d’objets physiques inertes.

Comme vous pouvez le voir, les principes de la liste ressemblent étroitement à la physique de base ; même ainsi, pensez-y davantage en termes de la façon dont les gens expérimentent le comportement des objets lorsque nous interagissons avec des objets, plutôt qu’en tant que physique réelle. Vous n’avez pas besoin de comprendre la physique derrière la gravité pour savoir que lorsque vous laissez tomber votre téléphone, il tombe au sol.

Notre expérience des objets est profondément enracinée et a une profonde influence sur la façon dont nous interprétons et prédisons le monde à l’âge adulte. Avoir cette compréhension intégrée dans notre esprit est vital ; imaginez à quel point le monde serait terrifiant si les objets ne sont pas conformes à ces lois ou si nous, pour une raison quelconque, avons dû continuer à réapprendre à quoi s’attendre. La plupart des interfaces graphiques sont conçues comme un système d’objets. Les objets d’IUG sont faciles à comprendre, car nous pouvons utiliser nos attentes à l’égard des objets physiques lorsque nous interagissons avec eux. Lorsque nous voyons une icône d’application qui ressemble à un objet physique, nous nous attendons à ce qu’elle se comporte comme un objet physique. Le fait que nous pouvons faire glisser et déposer des objets d’IUG a du sens pour nous, car c’est ainsi que les objets physiques se comportent. Si je dépose une application sur une autre application sur mon iPhone d’Apple, je m’attends à ce que les autres applications se déplacent, tout comme les objets physiques bougent lorsqu’ils se heurtent. Nous pouvons concevoir certaines des propriétés des objets sous forme de graphiques statiques, mais de nombreux comportements et interactions des objets sont des choses que nous pouvons améliorer grâce à des animations.

De nombreuses interfaces graphiques sont inspirées d’objets physiques et de la façon dont ils se rapportent les uns aux autres.

Pour rendre l’interaction avec les objets d’IUG facile à comprendre, vous devez vous assurer que votre animation suit au plus près les attentes des utilisateurs vis-à-vis des objets physiques. Maintenant, vous pouvez parcourir la liste ci-dessus de la façon dont nous comprenons le monde physique et en faire une recommandation sur le comportement d’un objet d’IUG. De nombreuses recommandations de Material Design de Google pour l’utilisation de mouvements dans les interfaces graphiques suivent également le même principe. Google a présenté ses directives de Material Design en 2014 et, comme son nom l’indique, imiter le monde physique est l’une des idées fondamentales des directives de design.

Directives de Material Design de Google

Le mouvement, ou animations, est un aspect important des directives de Material Design de Google. En fait, c’est l’un de leurs trois principes fondamentaux pour le design matériel :

• Le matériel est la métaphore (c’est-à-dire ancrée dans la réalité des objets physiques).
• Audacieux, graphique, intentionnel (les objets d’interface doivent créer du sens et être beaux).
• Le mouvement donne du sens.

Ci-dessous, nous entrerons dans une description plus détaillée de la manière dont Google exploite les attentes des utilisateurs vis-à-vis du monde physique dans leurs directives de design de mouvement dans les interfaces graphiques de Material Design.

Mouvement dans Google Material Design

Google Material Design s’inspire largement des propriétés des matériaux dans le monde physique. Google déclare que les objets d’IUG devraient ressembler à des choses dans le monde réel. Pour y parvenir, l’interface graphique est construite comme un espace tridimensionnel utilisant des couches et des ombres.

L’interface Android est construite comme un espace en 3 dimensions.

Les mouvements sont également une partie importante de Material Design, en particulier des mouvements inspirés par le comportement des objets dans le monde physique.

Nous voulions que le monde que nous avons construit soit continu et qu’il ait une physique et un mouvement comme le monde qui nous entoure. Quand on pousse quelque chose, ça glisse et ça a de l’élan puis ça s’arrête, non ? Lorsque nous lâchons quelque chose, cela s’accélère. Si je pousse, le mouvement irradie vers l’extérieur, quand je tape des mains, le son rayonne vers l’extérieur. Nous voulions que notre monde ait également une continuité de mouvement. Juste assez pour que ça ait du sens. Pas, vous savez, un grand mouvement de zoom juste pour le plaisir. Nous ne voulions pas que vous voliez à travers le monde, nous voulions que le monde bouge juste assez autour de vous pour que les choses aient un sens.
— Matias Duarte, vice-président de Material Design chez Google

La manière dont Material Design imite le monde physique ne doit pas être confondue avec le Skeuomorphisme, où les objets d’IUG sont conçus pour ressembler à des objets du monde physique. Un exemple est le design de l’icône de la corbeille pour qu’elle ressemble à une corbeille physique (d’ailleurs, c’était une poubelle). Plutôt que de regarder différents objets culturels, Material Design examine les attributs naturels les plus élémentaires du monde physique et ce que nous attendons de lui, et essaie d’imiter ces attributs.

Regardez cette vidéo pour voir comment les animations dans Google Material Design sont inspirées de la façon dont les objets physiques se déplacent.

Vous trouverez ci-dessous trois exemples de la manière dont Material Design imite les attributs des objets physiques dans leurs directives d’utilisation des animations.

1. Animation easing

Dans le Material Design, ainsi que dans la plupart des autres interfaces graphiques, les objets sont faciles à ease in et à ease out lorsqu’ils se déplacent d’un endroit à un autre sur l’interface graphique. Cela donne à l’utilisateur une idée claire de ce qui arrive à un objet d’IUG, et cela imite le fait que les objets dans le monde physique se déplacent toujours selon un chemin dégagé. Ils ne disparaissent pas et ne réapparaissent pas ailleurs. Dans le monde physique, les objets se déplacent également le long d’une courbe non linéaire où ils accélèrent et décélèrent au début et à la fin des mouvements ; par conséquent, le easing rend le mouvement plus naturel.

Voici un exemple d’animation qui utilise du ease in et du ease out pour créer un mouvement plus naturel.

2. Cause et effet

Dans Material Design, les objets répondent à la saisie tactile de l’utilisateur en se déplaçant, vers le haut ou vers le bas, sur l’axe z afin de simuler la pression ou sur l’axe x / y si l’utilisateur déplace l’objet ailleurs. Cela reflète les actions du monde réel d’appuyer et de glisser, respectivement. Les objets d’IUG se déplacent également lorsqu’ils touchent d’autres objets d’IUG. Par exemple, si l’utilisateur place un objet au milieu d’une liste d’objets, les objets environnants se déplacent sur le côté. De même, dans le monde physique, les objets bougent lorsqu’ils sont poussés par une force extérieure (mais jamais seuls, sans pouvoir). Pensez à une poubelle remplie de ballons de football dans un magasin de sport et à ce qui se passe si vous en retirez un et que vous le remettez en place.

Lorsque vous déplacez des objets d’IUG dans l’application Google Keep, cette action déplace les objets environnants de la même manière que les objets physiques poussés par une force extérieure.

3. Gravité

Les directives Material Design suggèrent que les objets d’IUG doivent se déplacer le long d’une courbe lorsqu’ils sont déplacés en diagonale vers le haut ou vers le bas. Les objets doivent également se déplacer plus rapidement lors du déplacement du haut vers le bas de l’interface graphique que lors du déplacement du bas vers le haut. Cela imite l’effet de la gravité sur les mouvements dans le monde physique. Notre monde n’est pas à l’envers ; ainsi, grimper ou soulever a tendance à demander des efforts et du temps.

Cette vidéo montre des exemples de la façon dont les courbes rendent un mouvement plus naturel.

Ce qu’il faut retenir

Les animations d’IUG fonctionnent bien lorsque nous les concevons pour imiter non seulement les lois de la physique, mais aussi les attentes des utilisateurs vis-à-vis du monde physique. La recherche a montré que nous avons déjà des attentes claires depuis notre enfance quant à la manière dont les objets doivent se déplacer dans le monde physique. Les objets sont conformes aux lois – ils existent lorsqu’ils sont cachés ; ils ne peuvent pas bouger sans aide ; ils ne peuvent pas disparaître et réapparaître ailleurs ; ils doivent se heurter pour se déplacer ; ils tombent du milieu des airs ; seuls les plus petits peuvent rentrer dans les plus grands ; et seuls les objets qui ont une énergie ou des intentions internes (comme dans le cas des animaux ou des véhicules motorisés/informatisés) peuvent se déplacer seuls.

Lorsque les mouvements des interfaces graphiques se comportent selon nos attentes, les utilisateurs peuvent appliquer les mêmes attentes fondamentales du monde physique afin de comprendre comment interagir avec l’interface graphique. En tant que designer, vous pouvez utiliser la liste en sept éléments qui régit la façon dont nous comprenons le monde physique pour vous assurer que les utilisateurs trouveront toujours vos animations tout aussi faciles à comprendre.

Références et où en savoir plus

Read Google’s introduction to Material Design here:
https://material.google.com/#introduction-principl…

Read Google’s guidelines on Motion in Material Design here: https://material.google.com/motion/material-motion.html#material-motion-how-does-material-move

To learn more about how infants learn about objects, you can read this paper, which sums up a lot of the research:

Renée Baillargeon & Susan Carey, Core Cognition and Beyond: The Acquisition of Physical and Numerical Knowledge. In Early Childhood Development and Later Outcome, 2012

Alternatively, watch this presentation by Professor Renee Baillargeon