Inclure l'animation dans votre système de conception

Il est important de comprendre comment l’animation peut être utilisée (ou non) dans votre système de conception. Dans cet article, Val Head explique comment vous pouvez vous assurer que votre marque utilise l'animation de manière cohérente et efficace tout en aidant votre équipe à travailler plus rapidement.

(Cet article est sponsorisé par Adobe.) Les systèmes de design sont de toutes formes et tailles, mais comme le signalent le système de design de Sparkbox ils ne contiennent pas tous des instructions pour l’animation. Bien sûr, certaines équipes ont peut-être décidé que le mouvement n'était pas un élément sur lequel leur produit nécessitait des conseils, mais je suppose que dans certains cas, le mouvement a été laissé de côté car elles ne savaient pas quoi inclure.

Ces dernières années, j'ai J'ai parlé à de nombreuses équipes et concepteurs qui admettent qu'ils pensent que le mouvement doit être abordé, mais ils ne savent pas comment. Si vous êtes dans ce bateau, vous avez de la chance. Cet article traite de tout ce qu'il faut inclure dans un ensemble de directives de mouvement pour votre système de conception et comment le retirer.

Pourquoi l'animation?

L'animation est un outil de conception important pour la messagerie de marque UX et. Tout comme la typographie et la couleur, l'animation que vous utilisez en dit long sur votre produit et sa personnalité. Ainsi, quand il n’est pas traité dans un système de conception, ce système laisse essentiellement cette partie de l’outillage de conception d’interface utilisateur non comptabilisée. Ensuite, les personnes qui suivent le système de conception font ce qu'elles veulent avec une animation (ce qui peut entraîner un étrange mélange d'exécution d'une animation à travers l'expérience) ou n'utilisent tout simplement pas l'animation car elles n'ont pas le temps de s'imaginer. sur tous les détails eux-mêmes. Les deux cas ne sont pas idéaux.

Définir clairement la manière dont l'animation est utilisée (ou non) dans votre système de conception peut aider à garantir que votre marque utilise l'animation de manière cohérente et efficace, tout en aidant votre équipe à travailler plus rapidement. Nous allons creuser pour commencer avec un ensemble de lignes directrices de mouvement pour votre système de conception.

Le travail de base: définir ce que vous devez couvrir

Parlons d'abord

Comme le dit Jina Anne, « Design les systèmes sont conçus pour les personnes . ”J'ai souvent entendu dire qu'il était essentiel de parler aux personnes qui utiliseront le système de conception que vous créez pour créer un système de conception que les utilisateurs utiliseront réellement. Cela vaut également pour les directives que vous créez autour de l'animation. La plus grande chose que vous pouvez en tirer est de savoir ce dont ils ont besoin et sur quoi se concentrer. Cela vous aide à définir une portée appropriée pour ce que vous devez couvrir dans vos directives. Personne ne souhaite consacrer des heures à l'élaboration de directives détaillées qui traitent plus que ce dont votre équipe aura besoin. Ce ne serait pas amusant (ou utilisé).

Votre équipe ne vous dira peut-être pas quels sont leurs problèmes d'animation, mais cela ne veut pas dire qu'ils n'en ont pas. Organisez des entretiens avec les utilisateurs (utilisateurs de votre système de conception) et demandez-leur où ils se retrouvent coincés avec de l'animation. Demandez-leur comment / s'ils utilisent l'animation, et où l'animation entre dans leur processus de conception. Demandez-leur ce qu'ils souhaiteraient avoir pour aider les points de douleur qu'ils rencontrent. Plus important encore, écoutez comment ils parlent d'utiliser l'animation dans leur travail et ce qui se passe bien ou moins bien.

Bien que chaque équipe soit différente, les préoccupations et les questions que j'ai le plus souvent entendues lors de cette recherche sont les suivantes: «Comment savoir qu'une animation est bonne ou correspond à notre marque?», «Comment puis-je transmettre efficacement les détails de l'animation à nos ingénieurs?» Ou «Nos développeurs disent toujours qu'il n'y a pas de temps pour mettre en œuvre les animations que nous concevons.

Vous avez probablement déjà deviné où je voulais en venir, mais vous pouvez aider à résoudre ces problèmes dans vos lignes directrices relatives à la motion. Et vous pouvez utiliser les questions et les points douloureux qui se posent le plus souvent pour orienter et concentrer vos efforts sur les lignes directrices de mouvement.

Référence: autres systèmes

Tous les systèmes de conception ne doivent pas nécessairement être publics, mais il est bon qu'ils soient si nombreux. . Elles constituent une ressource utile lors de la planification de votre système de conception et peuvent également constituer une recherche utile pour les directives de mouvement de votre système de conception. (En fait, nous en référencerons quelques-uns dans cet article même.)

L'utilisation d'autres sections de mouvement comme référence pour votre propre système de conception est très utile, mais je ne recommande pas d'adopter en gros les directives de mouvement d'une autre marque. ton propre. Non, pas même si c’est la directive de motion de Material Design.

La section de requête de Material Design est la directive de prise de mouvement de Google. Un bon, oui, mais son but est de vous montrer comment animer Google. C’est parfait si vous faites quelque chose pour l’écosystème de Google (ou si vous voulez intentionnellement avoir l’air de vous ressembler). Mais ce n’est pas un bon choix quand ce n’est pas votre objectif. Vous n'utiliserez pas les couleurs ou les caractères d'une autre marque sur votre produit, ne suivez donc pas simplement les directives de déplacement d'une autre marque.

Les systèmes de conception les plus efficaces contiennent un point de vue lié à la marque qui leur est propre – des éléments qui font de leur système de conception plus spécifiques au produit pour lequel ils sont conçus – avec les meilleures pratiques de conception communes. Consacrez un peu de temps à la recherche et à la lecture des directives de mouvement d’autres systèmes, et vous commencerez à avoir une idée des pièces qui sont les meilleures pratiques et des pièces adaptées au point de vue de la marque ou du produit. Ensuite, vous pouvez choisir les meilleures pratiques à inclure également dans vos instructions, ainsi que l'emplacement de personnalisation de ces instructions pour votre produit.

Par exemple, il est courant d'utiliser des raccourcis pour les sorties et des allégements pour les entrées. bonne pratique pour l'animation d'interface utilisateur. Mais la courbe exacte d’entrée ou de sortie est généralement adaptée au message et à la personnalité de la marque.

Pour citer Dan Mall :

: «C’est le genre de chose qu’un système de conception devrait avoir des directives pour: la perspective, le point de vue, l'extension de la direction créative à tous ceux qui décident de construire quelque chose avec le système de conception. Ce genre de choses devrait être cuit dedans. "

Je suis tout à fait d'accord.

Les directives de requête d'un système de conception – 19659007] Il n'y a pas de règle spécifique indiquant que vous devez avoir ces deux sections, mais j'ai a constaté que cette ventilation était un moyen efficace d’aborder les directives de motion sur lesquelles j’ai travaillé. Et j’ai également remarqué que la plupart des systèmes de conception qui traitent le mouvement ont également ces deux catégories, ce qui semble donc être une approche qui fonctionne aussi pour d’autres.

Les deux sections principales sont les suivantes: principes et mise en œuvre. Les principes sont généralement des déclarations de haut niveau qui expliquent comment cette marque utilise le mouvement. C’est le point de vue général ou l’intention de conception qui explique pourquoi la marque utilise l’animation et son point de vue. La section de mise en œuvre explique comment appliquer concrètement ces principes dans la conception et / ou le code. Il sert de blocs de construction pour le système de conception, et la quantité de détails qu’ils couvrent varie en fonction des besoins de la marque.

Principes de la motion

La ​​section des principes permet de définir les valeurs de votre marque en matière d’animation. Il s’agit des principes de haut niveau permettant de mesurer les décisions de conception et de définir des définitions ou des valeurs spécifiques autour de l’animation. Les principes ont souvent tendance à se focaliser sur le «pourquoi» de l’utilisation de l’animation au sein d’un système de conception donné et sur l’objectif qu’ils servent à la réalisation de l’UX. Dans de nombreux cas, les systèmes de conception les répertorient sous l’intitulé «Principes» dans leur section de mouvement. Cependant, vous pouvez voir le concept de principes présent dans ceux qui n'incluent pas non plus de section spécifique à leur sujet.

Vos principes de mouvement peuvent être modelés sur les principes de conception globale existants que votre marque pourrait avoir, extrapolés à partir d'éléments tels que la voix. et tonifier les directives, ou même être déduit de regarder les animations d'interface utilisateur existantes de votre produit dans un audit de mouvement.

Regardons quelques exemples pour avoir une meilleure idée de la façon dont elles se déroulent. Le système de conception Fluent de Microsoft définit leurs principes de mouvement comme étant physiques, fonctionnels, continus et contextuels. Ils incluent une brève description et une illustration de chacun pour expliquer comment cela s’applique à l’animation d’interface utilisateur.

Audi ne comporte pas de section consacrée aux principes, mais commence par la section animation avec une déclaration indiquant pourquoi ils utilisent l'animation, ce qui permet de définir le type de mouvement à utiliser dans le système de conception. , comme le ferait un principe. Ils déclarent:

«Nous défendons la mobilité dynamique dynamique. Ainsi, les mouvements de l’aspect Audi ont un caractère typiquement dynamique. ”

Lors du développement de la section de mouvement de Spectrum, le système de conception d’Adobe, nous avons opté pour une section de principes correspondant au modèle utilisé dans d’autres sections du système. Dans Spectrum, l’animation se veut résolue, intuitive et transparente.

Note : Spectrum n’a pas de site accessible au public au moment de la rédaction.

Quelle que soit la manière dont vous décidez de les présenter, les principes d’animation de votre système de conception peuvent être utilisés à la fois pour établir les attentes du système en matière d’animation et pour évaluer une éventuelle animation de l’interface utilisateur pour le (s) produit (s) auquel le système de conception est appliqué. Par exemple, si un concepteur suivant le système de conception Fluent souhaitait introduire une animation de grand rebond dans un composant, il pourrait être question de savoir si cela respectait les principes de mouvement. (Convient-il aux principes de fonctionnalité et de continuité?) Ensuite, une décision pourrait être prise quant à savoir si cette animation particulière méritait ou non de rompre avec les principes énoncés, ou si l'animation devait être repensée pour correspondre aux principes.

maintenir les discussions de conception à l’écart du domaine «aimez-vous cela?» ou de l’opinion personnelle et donne-t-il une structure pour évaluer l’animation de manière plus pragmatique. C’est mon avantage préféré d’avoir déclaré des principes de mouvement; ils facilitent énormément la discussion sur l'animation, même pour les personnes n'ayant pas beaucoup d'expérience en animation.

Astuce : Pour plus de références aux principes du mouvement, consultez Photon's. Principes de mouvement Principes de mouvement de conception et Principes de mouvement de Carbon . Il y en a aussi d'autres, mais ce sont un bon début.

Mise en oeuvre

Les principes de mouvement sont parfaits pour certaines directives de haut niveau, mais sans quelques détails sur la manière de les mettre en œuvre, vous manquerez le plus important. Avantages de l'intégration de l'animation dans votre système de conception, qui vous font gagner du temps. La section consacrée à la mise en œuvre (bien qu’elle soit rarement intitulée en tant que telle) aide à répondre à de nombreuses questions «comment» et
"Quoi" questions de votre équipe autour de l'animation. L'objectif est de fournir des valeurs par défaut intelligentes à quiconque suit le système de conception. Ainsi, au lieu de passer du temps à jouer avec les durées et à faciliter chaque animation, ils peuvent utiliser les valeurs par défaut intelligentes que vous avez fournies dans les instructions et continuer leur chemin. C’est un gain de temps considérable, qui rend également l’animation de votre interface utilisateur beaucoup plus cohérente.

Les directives de mise en œuvre indiquent les approches divergentes de nombreux systèmes de conception dans leur approche et leur couverture. La quantité de détails que vous incluez et les sujets que vous abordez dans ces consignes dépendent de l’importance du rôle joué par l’animation dans vos efforts de conception et des besoins de votre équipe. Par exemple, la section de mise en œuvre de Photon ne comprend qu'une durée et une courbe d'accélération, tandis que celle de Material Design comprend des sections individuelles sur la durée et l'assouplissement, ainsi que des pages supplémentaires remplies de détails de mise en œuvre.

Il n’existe pas de longueur parfaite pour une section de requête; il s’agit plus de couvrir les détails dont votre équipe a besoin que de frapper un nombre spécifique de pages ou de règles. Voici quelques éléments de base de l'animation à prendre en compte dans vos directives de requête:

Les trois premiers éléments de la liste représentent les principales méthodes de personnalisation ou de style de l'animation. Les variations dans les propriétés, les durées et les assouplissements utilisés pour l'animation peuvent avoir une incidence considérable sur la manière dont les animations apparaissent. (Et le dernier est une façon d’emballer les trois premiers.)

Explorons chacun plus en détail, et pour chacun d’eux, je soulignerai quelques-unes des pratiques exemplaires les plus courantes et les possibilités qui s’offrent à vous. interprétation personnalisée.

Durations, plages et rythmes

La durée dépend de la durée des animations. Lorsque nous parlons d'animation d'interface utilisateur, ces valeurs ont tendance à être très courtes. C’est incroyable le nombre d’informations que nous pouvons transmettre en quelques fractions de seconde! Il s'agit d'un aspect clé de l'animation. Tous les systèmes de conception dotés de directives de mouvement le couvrent, mais de différentes manières.

Parmi les meilleures pratiques de durée que vous verrez, la plupart des directives de mouvement incluent:

• Des durées plus courtes devraient être utilisées pour des effets plus simples et des animations de taille relativement petite (comme des fondus ou des changements de couleur);
• Des durées plus longues devraient être utilisées pour des effets plus complexes et des simulations de plus grande échelle (comme des transitions de pages ou des déplacements). objets sur et hors écran);
• La synchronisation optimale peut changer en fonction de la taille de la fenêtre.
  Bien que les spécificités de chaque ensemble de directives varient – parfois même considérablement – vous verrez ces meilleures pratiques communes dans presque toutes. Différents systèmes ont des définitions différentes de ce que sont exactement les durées «courtes» ou «longues», et détaillent différemment la différence entre les deux. De plus, bien qu'il s'agisse davantage d'un système de conception que d'une meilleure pratique d'animation, il est également utile de prendre en compte les jetons de conception correspondant aux valeurs de durée spécifiées.

Carbon fournit un tableau succinct des plages de valeurs de durée. en fonction du type d'animation en question. Tandis que Material Design décompose les recommandations relatives à la vitesse de la durée en catégories basées sur la complexité de l’animation, ainsi que sur la surface relative couverte par l’animation. Pluralsight adopte une approche différente et fournit un ensemble de mots-clés correspondant à différentes durées associées à des animaux mignons.

Atténuation des valeurs

Mon conseil numéro un pour l’assouplissement des instructions est de créer vos propres courbes personnalisées et de ne pas utiliser uniquement les valeurs par défaut de CSS. C’est le moyen le plus efficace de créer une association de mouvements cohérente pour votre marque et, comme le dit Sarah Drasner: construisez «l’équité des mouvements ». Vous serez sur un terrain solide avec seulement trois courbes: une out, easy-in, et easy-in-out. Et il y a toujours la possibilité d'en ajouter d'autres si nécessaire.

Petit conseil : Si vous ne savez pas trop comment commencer à atténuer les courbes, consultez l'équation de Penner Easing sur easings.net . Celles-ci sont conçues pour vous donner un joli mouvement et sont regroupées par trois pour une utilisation facile. Ils sont beaucoup plus expressifs et flexibles que les valeurs par défaut de CSS. L'utilisation d'un ensemble de celles-ci dans vos directives de mouvement peut constituer un excellent point de départ.

Fonctions d'accélération essentielles

Je vous recommande de définir les trois courbes d'assouplissement principales, car elles couvriront tous vos principaux besoins d'atténuation pour diverses animations.

• Ease-in
  Cette courbe est celle qui accélère elle commence n'importe quel mouvement qui se lit bien pour déplacer un objet hors de la vue.
• Ease-out
  Cette courbe provoque la décélération des objets avant de s’arrêter, ce qui offre un moyen plus naturel de faire apparaître les objets. 19659053] Ease-in-out
  Comme son nom l'indique, cette courbe combine les caractéristiques des deux premières et convient parfaitement au déplacement d'éléments d'un point à l'autre.

Avec ces trois courbes personnalisées, vous allez couvrez presque tous vos besoins en animation.

Pour Spectrum, nous avons fait exactement cela et avons créé trois courbes d’atténuation personnalisées, ainsi que des recommandations sur les types d’animation à utiliser pour chacune. (Nous avons élaboré ces courbes en examinant l'animation existante et en expérimentant certaines études de mouvement.)

Carbon et Pluralsight adoptent une approche similaire en désignant trois courbes avec des utilisations suggérées. en plus d'en désigner une comme courbe par défaut à utiliser en cas de doute. Dans certains cas, vous pourriez ne ressentir le besoin de disposer que d’une courbe d’atténuation personnalisée (comme le fait le photon ) pour l’utiliser dans toutes les animations.

Parallèlement aux courbes d'assouplissement, il est utile de fournir des informations complémentaires telles que des jetons de conception associés, du code spécifique à la langue (pour CSS, JS, iOS et / ou Android) ou des vélocités des images clés After Effects, en fonction des outils utilisés par votre équipe. . Cela ajoute à la facilité d'utilisation et permet de suivre les valeurs par défaut intelligentes dans vos règles de mouvement comme le chemin de moindre résistance.

Une illustration visuelle de la courbe et des exemples interactifs de la courbe sont également un avantage considérable pour montrer rapidement comment les courbes fonctionnent et à quoi elles ressemblent. Ne sous-estimez jamais le pouvoir de montrer au lieu de dire. (Ou montrer et raconter!)

Hiérarchie d'assouplissement

L'inclusion d'une hiérarchie d'assouplissement est un moyen de pousser les choses un peu plus loin que les trois courbes personnalisées de base. Cela peut être particulièrement utile pour les marques qui utilisent le mouvement comme méthode principale pour transmettre leur message de conception. Comme avec le texte, vous souhaiterez peut-être un moyen de faire ressortir certaines animations plus que d’autres. Des animations plus remarquables peuvent être utilisées pour souligner un point ou une interaction en particulier. Dans ces cas, structurer vos courbes d'assouplissement de manière à en créer une plus spectaculaire peut être une technique utile.

Off To A Good Start

À ce stade, armé de principes et de votre durée. et assouplir les sections, vous avez un ensemble solide de lignes directrices de mouvement. C’est peut-être tout ce dont vous avez besoin pour une version 1 de vos directives de mouvement, ou pour une marque qui n’a pas vraiment recours au mouvement dans sa conception. Si vous êtes pressé par le temps, il vous suffira d'établir des valeurs par défaut intelligentes pour des durées plus longues et plus simples, ce qui vous permettra de voir les avantages de l'établissement de directives de mouvement et de gagner du temps pour votre équipe.

Named Effects

Fournir une liste des effets nommés ou une bibliothèque. des animations à utiliser peut être une chose utile à avoir dans vos directives de mouvement. Toutes les directives de mouvement du système de conception ne les ont pas, certaines optent plutôt pour intégrer (ou aussi bien) les directives d'animation dans leurs composants, et d'autres n'ont tout simplement pas besoin de ce niveau de détail.

Un mot de prudence à ce sujet: plus ce n'est pas toujours mieux. Il peut sembler intéressant d’avoir une vaste bibliothèque d’animations dans votre système de conception, mais plus vous listez d’effets, plus il vous faudra du temps et des efforts pour les maintenir. Pour éviter de vous faire perdre beaucoup de temps, à vous et à votre équipe, je vous suggère de créer une collection d'effets nommés aussi petite que possible.

Il existe généralement deux approches pour fournir une bibliothèque d'effets. Une approche est la façon dont le système de conception Lightning Lightning propose une bibliothèque de petits effets d'animation (molécules d'animation, si vous préférez) pouvant être utilisés individuellement ou composés ensemble pour créer des animations plus complexes. 19659090] Liste de petites animations nommées pouvant être composées en effets plus complexes « />

L’autre approche consiste à fournir des effets plus complets et spécifiques, comme Audi pour ses effets d’affichage et de masquage, de transformation, de décalage et de superposition et Fluent pour ses effets de transition de page . Pour l'une ou l'autre approche, il est utile de fournir la justification de la conception et les implémentations de code spécifiques pour chacune d'elles.

Astuce : Si vous recherchez des lignes directrices de mouvement supplémentaires pour la recherche, Adele . ] est une collection de systèmes de conception qui vous permet de filtrer par sujets tels que motion et styleguides.io est toujours une excellente ressource pour la recherche de systèmes de conception publics également.

D'autres endroits où le mouvement peut apparaître dans votre système de conception

Les systèmes de design sont de toutes formes et tailles. Et dans de nombreux cas, ces directives d'animation sont également intégrées à l'ADN ou aux composants de vos systèmes de conception. Explorer comment faire cela dépasse le cadre de ce que nous couvrons ici, mais je tiens à noter que cela peut également être utile d’inclure des informations d’animation sur des pages spécifiques à un composant plutôt que dans une section d’effets nommés. Tout dépend de ce qui fonctionne le mieux pour votre équipe et votre système de conception.

De plus, il peut être utile de signaler des considérations de performances et d'accessibilité pour l'animation dans ces sections de votre système de conception, dans les instructions relatives aux composants ou dans le document. section de mouvement lui-même. Les objectifs de performance et d’accessibilité affectent tous les aspects de notre travail de conception, et l’animation ne fait pas exception à la règle.

Quelques réflexions négatives

J'espère que cet article a aidé à montrer que l’inclusion de directives de mouvement dans votre système de conception peut être incroyablement utile. aidé à démystifier le processus de création. S'adresser à une animation dans votre système de conception peut être bénéfique pour la cohérence de la conception de votre produit et ne pas nécessiter trop de temps.

Pendant que vous travaillez sur vos directives de mouvement, je vous encourage à travailler par étapes. au lieu d'attendre que vos directives de motion soient parfaites. Il est beaucoup plus facile pour vous, la personne ou les personnes qui ont rédigé les directives, d'expédier une version 1 avec l'intention de la compléter et de la mettre à jour, tout en vous aidant à créer des directives utiles.

peut être de partager quelque chose qui manque à certains détails, il peut s'avérer extrêmement utile d'envoyer une version 1 de vos directives de requête, puis reparlez à votre équipe pour voir en quoi la première version des directives les a aidées et quels sont les points douloureux. toujours un facteur. Cette approche itérative peut vous permettre de faire en sorte que vos recommandations couvrent les sujets les plus pertinents et vous permettent de les adapter aux besoins de votre équipe. Les deux sont utiles pour disposer d’un système utile et éviter des efforts supplémentaires inutiles.

(il)

Cet article fait partie de la série de designs UX sponsorisée par Adobe. Adobe XD est conçu pour un processus de conception UX rapide et fluide car il vous permet de passer de l'idée au prototype plus rapidement. Conception, prototype et partage – le tout dans une seule application. Vous pouvez consulter d'autres projets inspirants créés avec Adobe XD sur Behance ainsi que pour vous abonner au bulletin d'information d'Adobe Experience Design afin de rester au courant des dernières tendances et des idées pour UX / Conception de l'interface utilisateur.