MOTION DESIGN : petit guide

https://uxdesign.cc/a-guide-to-motion-design-principles-7f05f10ccd79
📌 ARTICLE sur les bonnes pratiques concernant le motion design. En effet les micro interactions permettent de sensiblement améliorer l’utilisabilité des produits numériques, mais encore faut il qu’elles correctement réalisées.
L’article propose 12 Principes de conception :
1. Le Easing :
Le Easing représente la façon dont les objets du monde réel accélèrent et ralentissent au fil du temps.
2. L’Offset et le Delay
Faire apparaitre séquentiellement les éléments. En effet, lorsque plusieurs éléments de l’interface utilisateur se déplacent en même temps et à la même vitesse, les utilisateurs ont tendance à les regrouper et à négliger la possibilité que chaque élément puisse avoir sa propre fonctionnalité.
3. Le Parenting
Le Parenting crée des relations entre les éléments, établit une hiérarchie et permet à plusieurs éléments de communiquer avec les utilisateurs en même temps. Lorsqu’une propriété de l’élément parent change, les propriétés liées des éléments enfants changent également. Toutes les propriétés des éléments peuvent être liées les unes aux autres.
4. Transformation
La transformation permet de transformer un élément en un autre. Par exemple, un bouton de téléchargement se transforme en une barre de progression, qui se transforme en une icône d’achèvement.
5. Value Change
Présenter de manière dynamique les données. Lorsque les valeurs sont introduites sans mouvement, la volonté des utilisateurs de s’engager avec les données diminue et n’informe pas l’utilisateurs que les données sont interactives.
6. Masking
Le masking est le fait de révéler ou dissimuler de manière stratégique, certaines parties d’un élément de l’interface. Les concepteurs peuvent mettre en œuvre le masking pour montrer aux utilisateurs qu’ils progressent à travers une série d’interactions.
7. Overlay
En simulant la profondeur, la superposition permet de cacher et de révéler des éléments selon les besoins de l’utilisateur.
La hiérarchie des informations est un élément important à prendre en compte lors de l’utilisation de la superposition (overlay) . Par exemple, la première chose que les utilisateurs doivent voir dans une application de prise de notes est une liste de leurs notes. Ensuite, l’overlay peut être utilisée pour dévoiler des options secondaires pour chaque message – comme Supprimer ou Archiver.
8. Cloning
Le clonage est un comportement de mouvement dans lequel un élément de l’interface utilisateur se divise en d’autres éléments. C’est une façon intelligente de mettre en évidence des informations importantes ou des options d’interaction. Si des éléments surgissent ou disparaissent de nulle part, les utilisateurs n’ont pas le contexte nécessaire pour interagir en toute confiance.
9. Obscuration
L’obscurcissement présente à l’utilisateur une interface qui appelle à l’interaction tout en révélant simultanément un indice de l’écran à suivre. Les menus de navigation, les écrans de code d’accès et les fenêtres de dossiers/fichiers sont des exemples courants.
10. Parallax
La parallaxe est affichée lorsque deux (ou plusieurs) éléments de l’interface utilisateur se déplacent en même temps mais à des vitesses différentes.
Les éléments interactifs se déplacent plus rapidement et apparaissent au premier plan.
Les éléments non interactifs se déplacent plus lentement et reculent à l’arrière-plan.
11. Dimensionality
Le comportement est obtenu en faisant apparaître les éléments comme s’ils étaient pliables, pliables, flottants ou dotés de propriétés de profondeur réalistes.
12. Dolly et Zoom
Dolly : Le Dolly se produit lorsque le point de vue de l’utilisateur se rapproche (ou s’éloigne) d’un élément de l’interface utilisateur. Imaginez une personne avec un appareil photo qui s’approche d’une fleur pour obtenir une image plus proche.
Zoom : Avec le zoom, le point de vue de l’utilisateur et l’élément de l’interface utilisateur restent fixes, mais l’élément augmente (ou diminue) en taille dans l’écran de l’utilisateur. Imaginez maintenant que la personne reste sur place et utilise la fonction de zoom de la caméra pour faire apparaître la fleur plus grande.