Donnez vie à votre interface, apportez-y de l’émotion !
Contextualisation
Le mot « animation » vient du latin anima qui signifie «âme ». Pendant des années, designers et développeurs ont appréhendés la représentation des pages Web de façon statique, sans prendre en compte l’aspect mouvant, la fluidité, ce qui faisait le rendu même d’une page internet. Pourtant, une page Web ne doit pas être pensée, visualisée et construite comme un bloc inerte, il y a des paramètres essentiels en matière de design, d’ergonomie et d’accessibilité à prendre en compte.
Ainsi, redonner « âme » aux animations c’est leur donner vie, y ajouter une dimension humaine, y mettre du piquant, pour qu’une interface ne soit pas qu’une entité statique, terne et rationalisée.
Quels buts ?
Les animations dans le design ne sont pas choses nouvelles, les designers Web ont pris conscience qu’elles avaient un rôle à jouer dans l’appréhension d’une interface. Les éléments animés d’une interface servent autant d’un point de vue esthétique que fonctionnel et, lorsqu’ils sont bien pensés, permettent une meilleure compréhension du contexte et une facilité d’utilisation.
L’un des buts d’une animation est justement de rendre accessible une interface, d’y apporter la limpidité nécessaire à plus de compréhension. Elles permettent de se repérer dans l’espace, de trouver des voies et de créer en fin de compte une représentation psychique du site Web ou de l’application, où le ressort premier est l’instinct.
Pour Kit Oliynyk, un autre but des animations est d’inciter à l’action, d’exprimer une suite logique attendue de l’utilisateur. Les animations accompagnent l’utilisateur dans sa navigation et montrent dans certains cas, la prochaine étape à franchir. Non seulement les animations servent à représenter un cheminement plus précis, mais elles sont là pour inciter à prendre certains tracés. La transition prépare l’utilisateur à ce qui va se dérouler.
Lorsqu’elles sont bien pensées, elles passent inaperçues aux yeux d’un novice, la navigation devient intuitive et naturelle. L’important est de faire en sorte que l’utilisateur ne se rende pas compte qu’il se trouve en face d’une animation.
Tout se joue dès le départ, il suffit de quelques secondes pour réussir à garder l’attention d’un utilisateur, ou plutôt, il ne suffit que de quelques secondes pour lui faire perdre cette attention si précieuse.
Focus sur le Material Design
Par ce nouveau design, Google met d’avantage l’accent sur le mouvement, les transitions et l’impact. L’idée est d’introduire des effets d’ombres et de profondeurs mais aussi de gravité et d’inertie, de façon à ce que l’impression soit plus naturelle. Cette recherche de sensation tend à ce que les mouvements soient anticipables et donc plus facilement mémorisables par l’utilisateur.
Le mouvement est créateur de sens, les animations permettent de mieux assimiler le positionnement des différents éléments de la page web et/ou de l’application, si bien qu’ils permettent de fournir une cartographie mentale où les éléments s’articulent logiquement.
Quelles plus values ?
- Pour les utilisateurs
Comme indiqué précédemment, les animations lorsqu’elles sont bien pensées et réalisées, permettent une meilleure compréhension d’une interface. Elles sont en effet une façon d’apporter de la valeur ajoutée au contenu d’une page Web ou d’une application. Grâce à une fluidité accrue, la navigation est simplifiée, comme cadrée par un fil d’Ariane qui permet à l’utilisateur de savoir où il va.
On le sait bien, une image vaut parfois mieux que mille mots pour faire passer une idée ; mais alors combien vaut une animation dans ce cas là ?
- Pour les annonceurs
Les animations peuvent renforcer le message d’une marque ou d’un produit en accompagnent le contenu et lui servant de soutien. C’est notamment ce que l’on a pu voir avec les sites utilisant le duo scrolling et parallaxe. Dans une démarche de storytelling, la combinaison du parallaxe et du scrolling vient appuyer le propos.
L’idée du design de parallaxe est tout simplement une prise de conscience du mouvement. Plus spécifiquement, le mot « parallaxe » est utilisé pour décrire la perception de la distance entre les objets en mouvement le long d’une ligne de vue. Dans le cas d’une page web, il va rendre une timeline interactive et l’asseoir comme colonne vertébrale du site.
Dérives
- L’animation pour l’animation
Attention toutefois à ne pas abuser des éléments animés. On a pu le voir, les sites s’articulant autour du scrolling et de la parallaxe sont légions, si bien que l’on tend aujourd’hui vers la saturation. Les animations sont sensées magnifier le contenu, sauf exceptions elles ne doivent pas être utilisées dans un but purement technique mais bien du point de vue de l’utilisateur.
Si le contenu est roi, alors l’utilisateur est bel et bien maître et gouverne l’univers.
- Non-réciprocité des transitions
Lorsque l’on retrouve plusieurs représentations d’un même élément dans un ensemble, comme un site web qui proposerait différentes façons de d’aboutir au même contenu sur une même page, la complexité est accrue et fini par perdre l’utilisateur. Cela donne l’impression à l’utilisateur de se perdre lorsque plusieurs tâches sont lancées en même temps comme c’est le cas sur iOS. Cela arrive lorsqu’il n’y a pas de réciprocité entre les transitions ; dans ce cas, la hiérarchie de l’information est bouleversée et la navigation devient confuse pour l’utilisateur.
Pour aller plus loin :
- Motion with Meaning: Semantic Animation in Interface Design by Amin Al Hazwani, Tobias Bernard
- Designing Safer Web Animation For Motion Sensitivity by Val Head
- The Rise of Animationin Web Design by Nathan Huening
- Jedi Principles of UI Animation by Kit Oliynyk
- Should Animation Be Used in Web Design? The Pros & Cons by Ben Groulx
