Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

UI/UX : 8 principes pour jouer sur le Motion Design

Afin de fidéliser un internaute, un site web se doit de proposer une navigation optimale et d’offrir une expérience à la fois stimulante et intuitive....

Publié par Jerome Dajoux

Afin de fidéliser un internaute, un site web se doit de proposer une navigation optimale et d’offrir une expérience à la fois stimulante et intuitive.

Aussi, à l’heure où les designers disposent de moyens pour concevoir des animations fluides pour le web sans que ces dernières n’alourdissent les pages et accroissent leur temps de chargement, il n’est pas étonnant que le Motion Design intègre la démarche UX.

Nous vous proposons donc de découvrir dans cet article 8 des principes majeurs applicables en matière d’animation des interfaces.

 

1. L’assouplissement

Il est assurément l’un des principes majeurs de l’animation puisqu’il est issu du livre « The Illusion of Life  : Disney Animation » d’Ollie Johnston et Frank Thomas, ouvrage qui fait référence dans le domaine.

motion design principes Disney animation UX UI

L’assouplissement a vocation à rendre le mouvement beaucoup plus naturel à travers une décélération ou une accélération due à un nombre d’images plus ou moins important.

En effet, il est possible de ralentir une animation en ajoutant des images ou au contraire de l’accélérer en en supprimant.

 

2. Le suivi et le chevauchement des actions

Ce principe — qui en inclut deux en réalité — est lui aussi tiré de l’ouvrage « The Illusion of Life  : Disney Animation ».

ux ui design chevauchement motion

Il se décompose ainsi  :

  • Le suivi d’action. Il repose sur le fait qu’un corps en mouvement arrêtant de bouger doit encore être en action, et ce pour créer une animation réaliste. Ce n’est pas parce qu’une femme arrête de courir brusquement que sa robe cesse brusquement tout mouvement par exemple.
  • Le chevauchement. Il repose sur le fait que les différentes parties d’un objet bougent à des vitesses différentes. Une donnée à prendre en considération pour des animations réalistes.

 

3. La parentalité

Le principe de parentalité consiste à relier plusieurs objets d’interface utilisateur et donc à établir des relations ou une hiérarchie entre ceux-ci.

motion design principes Disney animation UX UI

Ainsi, lorsque l’internaute va manipuler un objet d’interface, le designer va, par le biais d’un mouvement, lui montrer comment les objets sont reliés.

La parentalité peut donc permettre de créer de l’interaction en temps réel et donc de rendre plus convivial un site.

 

4. Le changement de valeur

Les objets d’interface basés sur les chiffres sont très nombreux sur le web. Si certains sont statiques et ne visent donc qu’à apporter une information, d’autres sont dynamiques et ce sont ceux-là qui nous intéressent.

changement de valeur motion design

Le fait que ce type d’objet d’interface soit « animé » permet de mieux mettre en lumière la valeur présentée et surtout de mieux l’ancrer dans la réalité.

D’ailleurs, la nature dynamique des données pourrait donner envie à certains utilisateurs de passer à l’action afin de les faire évoluer.

En outre, parce que les valeurs affichées peuvent évoluer sans action de l’utilisateur, ces objets d’interface contribuent à refléter un récit dynamique.

 

5. La superposition

Afin de donner un peu de relief à l’interface d’un site web et afin de la rendre plus conviviale, un designer peut avoir recours au principe de la superposition.

superposition motion design  motion design principes Disney animation UX UI

Autrement dit, il crée plusieurs couches et rend certains éléments non visibles sans action de l’internaute. Toutefois, pour que cela fonctionne parfaitement, le concepteur du site doit s’assurer que l’internaute puisse comprendre qu’il y a du contenu caché accessible.

Le rendu visuel offert par une bonne application de ce principe justifie à lui seul d’y avoir recours.

 

6. Le clonage

Pour apporter un peu de narration à votre interface, rien de mieux que d’avoir recours au principe du clonage. Son idée est simple  : créer des objets à partir d’autres objets.

motion design principes Disney animation UX UI

Eh oui, lorsque vous concevez un objet d’interface, vous pouvez raconter une histoire. Comment  ?

En créant de nouveaux objets à partir d’objets existants, et ce alors même que l’attention de l’internaute est focalisée sur eux.

Vous concevez ainsi une chaîne d’événements et incitez l’internaute à agir de telle ou telle façon.

 

7. L’obscurcissement

Afin de définir une hiérarchie principale sur un site Internet ou bien d’indiquer la navigation désirée, les spécialistes du motion design peuvent avoir recours au principe d’obscurcissement.

motion design principes Disney animation UX UI

Il consiste tout simplement à obscurcir — et plus généralement à rendre moins « visible » (le flou est souvent utilisé) — certains éléments d’interface ou contenus afin de guider l’internaute vers son tunnel de conversion le plus souvent.

 

8. L’effet parallax

Le dernier principe présenté ici est un élément-clé du web design dans les années 2010  : l’effet parallax.

motion design principes Disney animation UX UI

Visant à créer une hiérarchie spatiale lorsque les internautes ont recours au défilement vertical, l’effet parallax est une technique qui repose sur une très célèbre illusion d’optique  : plus les éléments sont situés loin, puis nous les percevons petits.

Les objets les plus éloignés se déplacent alors moins vite dans notre perception.

Bon à savoir
Eh bien, cela a été transposé à l’univers du web et grâce à un arrière-plan qui défile moins vite que le reste du site, il est possible de créer de la profondeur et de mieux faire comprendre à l’internaute la hiérarchie des éléments.

 

Vous l’avez compris à travers la présentation de ces 8 grands principes, le métier de motion designer ne s’improvise pas.

Aussi, si vous désirez concevoir des animations de qualité pour optimiser la navigation et l’expérience utilisateur des internautes, faites appel à un professionnel du motion design qui saura écouter vos besoins.

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

L’art de choisir le bon arrière-plan pour vos photographies

La photographie, c’est un art. Et, comme tous les arts, il comporte une part d’instinct… et une part de technique. Choisir un arrière-plan, cela...

Publié le par Melanie De Coster
Graphisme

Inspiration : 6 pochettes d’album de musique créatifs

Vous en avez sans doute conscience, mais pour être réussie, la pochette d’un disque doit simultanément être originale, belle, efficace et...

Publié le par Solenne Ricard