MOTION DESIGN : petit guide

Motion
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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *