Interfaces web & micro-animations : 13 références pour inspirer les webdesigners en herbe

Le 21/05/2019

Mis à jour le 23 mai 2019 à 6:11

Brutal design, Interfaces vocales, Inclusive design ou encore Broken Layouts sont autant d’indicateurs de tendances qui se retrouvent aujourd’hui au coeur des projets de webdesign et UX/UI.

Qu’ils soient déployés à plus ou moins grande échelle, dans des cas concrets ou non (portfolios, proof of concept, redesign..), ces mouvements graphiques s’inscrivent désormais et de manière plus ou moins durable, dans les usages et habitudes du côté des internautes (particuliers, marques, annonceurs).

Comme leurs prédécesseurs, ces nouveaux paradigmes redéfinissent alors les rapports entre concepteurs et consommateurs d’interfaces.

D’une année sur l’autre, on challenge l’aptitude des webdesigners à innover tout en optimisant le niveau attendu par tous, en terme d’ergonomie, de compatibilité entre les différents supports (desktop, mobile..), mais aussi de résultats visuels et de techniques.

C’est d’ailleurs autour de ce besoin d’interaction que s’est consolidée la tendance favorisant les micros-animations dans les pages d’un site et ses contenus ou d’une application. Mais en partie seulement, étant donné que l’explosion des usages et temps passés sur mobile par les internautes a considérablement ouvert la voie à l’animation, via la logique du mobile first, créant des très nombreuses possibilités, de points et types d’interactions.

Focus sur l’une de ces tendances, peut-être la plus exploitée en Webdesign pour l’année en cours : les micro-animations.

Insuffler un mouvement naturel à l’interface

Rydoo

Landing page de UI Motion Kit

Landing Page

Je me domicilie

Screen Transition

Guider l’utilisateur, accompagner une action

Donner des informations complémentaires sur l’action en cours ou à réaliser puis accompagner l’internaute dans sa navigation.

Ce type d’animation est très utile pour s’assurer la compréhension d’un ou plusieurs écrans clefs et guider les internautes au sein d’un parcours utilisateur spécifique (Création d’un compte utilisateur, Fiches produits interactives, Funnel..).

Micro-animations et transition

Dashboard Micro Interactions

Feed micro-animation

One Hour UI Challenge

Pour donner du corps au contenu et illustrer l’expérience

Appuyer le propos, apporter de la profondeur au contenu et une expérience de lecture plus agréable, plus efficace.

Les animations au coeur des pages de textes et même au sein des illustrations permettent de multiplier les points de contact visuels et de créer un lien entre les zones ou données que va concrètement lire l’internaute et celles qu’il va survoler ou deviner. Elles renforcent la compréhension de l’ensemble du sujet et laissent une trace plus durable dans les mémoires.