Menu
La communauté des concepteurs a commencé à appliquer une certaine rigueur à la documentation et à la systématisation des composants à la fois dans la conception et dans le code, mais le mouvement est souvent exclu de la discussion. Cependant, les exigences d’utilisation du mouvement dans la conception correspondent parfaitement aux directives d’un système de conception : répétabilité, gain de temps et cohérences UX.
En excluant le mouvement de votre système de conception, vous affaiblissez potentiellement son objectif. Si les concepteurs disposent des éléments de base nécessaires pour tout autre chose que le mouvement, ils n’auront d’autre choix que de créer des pièces ad hoc qui peuvent ne pas correspondre aux règles et au guide de style qui composent le système de conception. De plus, vous privez votre équipe, votre produit et, en fin de compte, vos utilisateurs, des avantages d’une dimension de conception plus profonde. Le mouvement dans la conception n’a pas seulement l’air cool, il contribue directement à l’expérience utilisateur de ces manières :
Avant de créer quoi que ce soit de nouveau, jetez un œil à ce qui existe actuellement. De la même manière que vous effectuez un audit de vos modèles d’interface utilisateur, vous pouvez faire de même pour les modèles de motion design.
Cela peut prendre du temps, mais cela vous montrera où vous avez des utilisations répétées du même élément, qui doivent être ajoutées au système de conception, et des utilisations ponctuelles qui ne fournissent probablement pas de solutions universelles.
Lorsque vous démarrez votre audit, concentrez-vous sur des modèles tels que :
L’audit peut être aussi simple qu’une vue tabulaire des modèles :
Tout comme vous exécuteriez un audit pour réduire le nombre de polices ou de tailles de police que vous utilisez, vous souhaitez utiliser une stratégie similaire avec le mouvement. En vous concentrant sur la cohérence de votre système de mouvement, vous pouvez créer un environnement confortable et prévisible pour l’utilisateur.
Des principes d’utilisation ambigus concernant le moment et la manière d’utiliser le mouvement peuvent sérieusement menacer la cohérence du produit. À l’inverse, être trop normatif peut étouffer l’innovation et empêcher l’émergence de nouveaux modèles.
Pour trouver le bon équilibre, tenez compte des principes qui guident contextuellement les améliorations UX : où avons-nous besoin d’affordances et de retours d’action plus forts ? Où y a-t-il des chutes lors de l’intégration ? Où sont les utilisateurs désorientés dans notre navigation ?
Voici quelques-uns des principes de mouvement les plus efficaces que les équipes de mise à l’échelle ont utilisés pour implémenter le mouvement dans leurs systèmes :
Dans une tentative de standardisation, Material Design a défini trois principes de mouvement : informatif, ciblé et expressif. L’équipe a ensuite déterminé quatre utilisations pour chacun des trois principes : hiérarchie, rétroaction, statut et animation des personnages.
IBM suggère que le mouvement peut être décrit comme expressif ou productif. Ces deux éléments concernent principalement les états d’ouverture / fermeture (comme les bascules ou les modaux), mais peuvent être utilisés dans d’autres cas où un mouvement rapide est plus fiable qu’un mouvement expressif fantaisiste.
Salesforce suit un modèle similaire en créant un compartiment uniquement pour « Personnalité et image de marque ». Au lieu d’intégrer la personnalité de la marque dans le timing et la facilité de chaque animation, ils ont laissé leur mouvement de marque être contextuel.
À partir de ces exemples, nous voyons que les principes relèvent finalement de deux approches : le mouvement comme plaisir et le mouvement comme utilisabilité. Aux équipes de trouver le niveau de granularité, ni trop étroit, ni trop large. Les bons principes directeurs permettront aux équipes d’être à la fois créatives et cohérentes.
La composition fondamentale de Motion concerne la relation entre l’objet, le temps et l’effet. Une fois les principes établis, les équipes peuvent commencer le processus de définition de la bibliothèque de blocs de construction de mouvement.
Ces blocs se composent de la durée, de la facilité, des effets d’objet (états de début / fin) et de la danse élégante de la chorégraphie (animation de plusieurs objets).
Une approche pour systématiser les effets consiste à les associer à vos principes. Cette vue sous forme de tableau montre la relation entre le principe, le composant, l’effet, la durée et la facilité.
Le concept d’échelles (ou d’étapes) dans les systèmes de conception permet une diversité de choix dans certaines limites. Nous le voyons dans la typographie, les grilles et même la couleur. Ces échelles permettent de prendre des décisions basées sur la conception plus rapidement et de manière plus cohérente.
Vous pouvez utiliser un cadre d’échelle similaire pour guider votre bibliothèque de mouvements.
Tout comme vous attribuez une typographie avec des balises h1, h2, h3, h4, h5, vous pouvez attribuer des balises à ces échelles : t1, t2, t3, t4, t5 (t pour le timing). Vous pouvez également choisir des noms descriptifs tels que : Extra rapide, Rapide, Normal, Lent, Extra lent, etc. Les échelles de temps peuvent inclure à la fois la durée et la facilité. Cependant, le plus souvent, la durée et l’accélération dépendront de l’objet, de sa taille et de la distance parcourue.
La durée dynamique décrit la relation entre la taille et la distance d’un objet pondérées par rapport au temps. Par exemple, lorsque vous définissez des échelles de mouvement, notez à quel point les mouvements rapides sont mieux adaptés aux distances plus courtes et aux objets plus petits.
Essayez de créer une formule de durée dynamique qui inclut le composant, la distance parcourue, le temps, la facilité ou même la complexité de l’animation. Considérez ces différentes approches :
L’accélération ajoute de la vie au mouvement en fournissant des repos naturels, ainsi qu’une accélération et une décélération personnalisées. Cela peut approfondir la personnalité de votre marque au point que certaines équipes incluent même « l’ambiance de la marque » comme principe directeur.
Il existe de nombreuses façons de créer une « ambiance » en mouvement en manipulant les commandes de facilité et la durée, allant des mouvements élastiques ludiques aux mouvements subtils et doux. Par exemple, dans un outil de facturation pour les avocats, vous souhaiterez peut-être des mouvements équilibrés et rapides. Alors que, pour une application de vidéo sociale, vous voudrez peut-être des mouvements élastiques.
Des vibrations de mouvement cohérentes peuvent être aussi simples que de documenter 2 à 3 types de courbes de Bézier d’aisance : facilité par défaut (personnalisée), entrée et sortie.
En appelant un type d’aisance, vous pouvez soit le nommer d’après une durée comme ‘T1-ressort-subtil’ ou vous pouvez intégrer l’aisance dans vos échelles de temps : ‘t1 utilise l’aisance cubique’, ‘t2 utilise l’aisance linéaire’.
Une autre stratégie consiste à baser l’assouplissement des composants, ou leurs états « in / out ». Par exemple, vous pouvez l’utiliser Productive Easing pour des mouvements fonctionnels, rapides et linéaires et Expressive Easing pour des mouvements agréables et axés sur les émotions.
C’est souvent le cas où le timing expressif a le plus de sens pour « animate-in » et le timing productif pour « animate-out ». Les fenêtres contextuelles modales, les interrupteurs à bascule, les cartes et les transitions utilisent souvent un timing à la fois expressif et productif.
Les effets sont les éléments de base de votre système. Ils distinguent un composant d’être statique. Lorsque des effets sont appliqués aux composants, ils deviennent un système interactif avec un état de début et de fin.
Pour systématiser ces effets, vous pouvez utiliser une convention de dénomination qui les décrit en groupes, ou une convention qui les décrit comme des états d’animation d’entrée et de sortie d’animation.
Lorsque vous documentez ces effets, utilisez des noms descriptifs tels que « Card-Fade-In » ou « Card-Grow », ou une convention de dénomination plus funky utilisant des onomatopées. Lors de l’utilisation d’onomatopées, une transition de page expressive peut être appelée pop, swoosh ou boum (consultez les transitions de diapositives Keynote ou le panneau d’effets d’After Effect pour nommer des idées).
La chorégraphie, c’est quand plusieurs objets sont simultanément en mouvement pendant une transition. La chorégraphie peut focaliser un utilisateur pendant un état de transition, fournir un contexte spatial ou donner de la personnalité et du plaisir.
Voici quelques approches différentes pour systématiser ces modèles, mais vous devriez trouver ce qui fonctionne le mieux pour votre produit :
Dans un souci d’adoption, les concepteurs doivent traduire les fichiers de présentation pour qu’ils correspondent au code de production. Le moyen le plus simple de documenter le mouvement consiste à cartographier les états de début et de fin. C’est la prémisse du key-framing – pour interpoler les changements entre l’état A et l’état B.
Un storyboard, un croquis ou une vidéo MP4 peuvent souvent donner aux développeurs tout ce dont ils ont besoin pour construire un prototype. Mais pour mettre à l’échelle les systèmes de mouvement, il est essentiel d’inclure la traduction.
Il existe deux techniques efficaces pour documenter les concepts de mouvement : les diagrammes et le texte.
En utilisant le logiciel que vous préférez, vous pouvez généralement ouvrir un panneau de paramètres et une capture d’écran ou documenter manuellement un diagramme (un peu comme un diagramme de Gantt).
Les graphiques aident à décrire la chorégraphie et la durée de manière claire.
Cette deuxième approche est similaire au code, mais les concepteurs n’ont pas à craindre de parler de code. Cela peut être aussi simple que d’apprendre :
L’avantage de cette approche est que le texte est facilement modifiable et que ces points de données peuvent plus facilement être traduits en code de production.
Dans After Effects, il existe un plugin appelé Inspector Spacetime qui traduit les propriétés des images clés dans un fichier texte.
Pour les concepts de mouvement avancés tels que la physique, les accéléromètres, les systèmes de particules ou les modèles 3D, un processus plus manuel est nécessaire pour trouver une traduction 1:1. Comme tout dans ce processus, avoir une discussion pour comprendre les paramètres du code éclairera la bonne stratégie de conception.
Conseil de pro : la création d’une bibliothèque de modèles de vos systèmes de mouvement est extrêmement précieuse pour la cohérence et l’efficacité (courbes d’accélération, durées, composants).
Si vous voulez donner vie à votre site web, notre équipe qualifiée d’animateurs et de graphistes chez Wapiyeah peut créer des vidéos exceptionnelles. Pour en savoir plus, contactez-nous dès maintenant.
