5 modèles d'animation clés et comment les utiliser

L'animation peut être très puissante outil de conception web . Mais avant d'animer chaque élément de nos créations, nous devons savoir quand et comment utiliser ce nouvel outil. Une grande puissance s'accompagne d'une grande responsabilité, et ainsi de suite. Et comme l'animation doit rivaliser avec de nombreuses autres préoccupations en matière de développement et de conception, il est logique de dépenser nos ressources là où elles iront le plus loin.

Cet article vous présente certains modèles d'animation de base et vous montre comment l'animation s'applique à un système supérieur. Ensuite, vous apprendrez à repérer les goulots d'étranglement cognitifs et les fruits faciles à obtenir, en maximisant l'impact des animations dans lesquelles vous investissez pour améliorer le expérience utilisateur .

  • Ceci est un extrait de L'animation au travail de Rachel Nabors - achetez-le ici

Si vous avez examiné autant d'exemples d'animation sur le Web et d'interfaces d'application que moi, certains modèles commencent à émerger. Ces modèles sont utiles pour identifier et verbaliser succinctement le but d'une animation aux autres.

Voici les catégories que j'ai le plus souvent utilisées: transitions, suppléments, commentaires, démonstrations et décorations. Jetons un coup d'œil à chacun d'entre eux et voyons leur impact sur l'expérience de l'utilisateur.

01. Transitions

Les transitions emmener les utilisateurs d'un endroit à l'autre dans l'espace d'informations, ou les faire passer d'une tâche à une autre. Celles-ci ont tendance à avoir des impacts massifs sur le contenu de la page, remplaçant de grandes parties d'informations.

Le Web a été conçu à l'origine comme une série de documents liés. En cliquant sur un lien, le navigateur essuyait l'écran, provoquant souvent un éclair de blanc révélateur, avant de peindre la page suivante à partir de zéro. Bien que cela ait du sens dans le contexte des documents liés au texte, cela a moins de sens à une époque où les pages partagent de nombreux éléments de conception riches et appartiennent au même domaine. Non seulement recréer sans cesse la même mise en page est une perte de ressources du navigateur, mais cela augmente également la charge cognitive des utilisateurs lorsqu'ils doivent réorienter et réévaluer le contenu de la page.

L’animation, en particulier le mouvement, peut faciliter l’orientation de l’utilisateur dans un espace d’information en déchargeant cet effort sur le cortex visuel du cerveau. L'utilisation d'une transition entre des changements dans le flux des tâches ou des emplacements dans l'architecture de l'information renforce idéalement où l'utilisateur a été, où il va et où il se trouve maintenant d'un seul coup.

Par exemple, sur la page SB Dunk de Nike (illustrée ci-dessus), lorsqu'un utilisateur clique sur une flèche de navigation, la sneaker actuelle s'écarte du chemin tandis que la sneaker suivante entre dans la direction opposée. Ces transitions montrent clairement à l'utilisateur comment il navigue le long d'un continuum linéaire de baskets, l'aidant à garder une trace de sa place et renforçant le modèle spatial de la lecture d'une rangée de baskets du monde réel.

Sur un autre site de chaussures, John Fluevog, les transitions déplacent l'utilisateur d'une tâche à l'autre (voir ci-dessus). Une fois qu'un utilisateur commence à taper dans le champ de recherche, les résultats sont animés sur un fond plus sombre. Cela fait passer l'utilisateur du contexte de navigation à l'affinage de ses résultats de recherche, en rationalisant son objectif tout en le rassurant qu'il peut revenir à la navigation sans trop d'effort.

02. Suppléments

Les suppléments apportent des informations sur ou en dehors de la page, mais ne modifient pas la 'localisation' ou la tâche de l'utilisateur. Ils ajoutent ou mettent généralement à jour des morceaux de contenu supplémentaire sur la page.

Alors que les transitions déplacent l'utilisateur d'un état à l'autre, des animations supplémentaires apportent des informations auxiliaires à l'utilisateur. Pensez aux moments où des informations complémentaires au contenu principal de la page apparaissent ou disparaissent dans la vue: les alertes, les listes déroulantes et les info-bulles sont tous de bons candidats pour une animation supplémentaire à l'entrée et à la sortie.

N'oubliez pas que ces animations doivent respecter le cône de vision de l'utilisateur: vont-ils regarder directement une info-bulle apparaissant à côté de leur curseur, ou leur attention devra-t-elle être dirigée vers une alerte sur le côté de sa tablette?

Lorsqu'un utilisateur ajoute un produit à son panier sur glossier.com, plutôt que de le diriger vers une toute nouvelle page de panier, le site met simplement à jour l'utilisateur quant au contenu de son panier en l'affichant sous forme de barre latérale (ci-dessus). Alors qu'une transition ferait sortir l'utilisateur du mode de navigation, cette animation supplémentaire permet à l'utilisateur de fermer le panier et de continuer ses achats.

La barre latérale du panier utilise une animation supplémentaire pour attirer rapidement et subtilement l'œil de l'utilisateur: un indicateur de progression se remplit progressivement pour indiquer combien l'utilisateur doit dépenser pour bénéficier de la livraison gratuite.

Ce processus de panier a un troisième modèle d'animation en cours: le bouton Ajouter au panier gagne une icône en rotation lorsque vous cliquez dessus, ce qui donne à l'utilisateur un retour sur son état de chargement. En parlant de commentaires ...

03. Commentaires

Les commentaires indiquent un lien de causalité entre deux ou plusieurs événements, souvent utilisés pour relier l'interaction d'un utilisateur à la réaction de l'interface.

L'animation peut donner aux utilisateurs des commentaires directs sur leurs interactions. Un bouton enfoncé, un geste de glissement - tous deux relient une action humaine à la réaction d'une interface. Ou le revers de la médaille: un spinner de chargement sur une page indique que nous attendons sur l'ordinateur. Sans retour visuel, les gens se demandent s'ils ont réellement cliqué sur le bouton «payer maintenant» ou si la page se charge vraiment après tout.

Sur le site de l’aquarium de Monterey Bay, le fait de survoler un bouton fait passer sa couleur du rouge au bleu, indiquant que l’élément est interactif et prêt à réagir aux entrées de l’utilisateur. Les survols de boutons sont des exemples classiques de ce type d'animation, en partie parce que le gain de donner aux utilisateurs un retour visuel sur les boutons est si mesurable et important pour les entreprises.

Le site du studio de design Animal utilise une barre de couleur en haut de la page ainsi qu'une version animée de son logo pour indiquer le chargement et les états chargés de la page tout en suscitant l'intérêt et en renforçant son image de marque «sauvage».

04. Démonstrations

Les démonstrations expliquent comment quelque chose fonctionne ou exposent ses détails en montrant au lieu de raconter. Ce sont mes utilisations préférées de l'animation. Ils peuvent être à la fois divertissants et perspicaces.

Ces animations mettent les informations en perspective, montrent ce qui se passe ou comment quelque chose fonctionne. Cela fait des animations démonstratives de parfaits partenaires pour l'infographie. Une chose que toutes les animations de démonstration font est de raconter une histoire, comme vous le verrez.

Les pages 'Traitement ...' sont l'occasion d'expliquer ce qui se passe aux utilisateurs pendant qu'ils attendent. ImpôtRapide fait bon usage de ces pages de traitement. Une fois que les utilisateurs ont soumis leurs formulaires fiscaux aux États-Unis, il élimine toute anxiété persistante en leur montrant où vont leurs informations et à quoi ils peuvent s'attendre, tout en renforçant la convivialité et l'accessibilité de leur marque. (Cela aide également à ce que l'animation distrait les utilisateurs d'un chargement de page assez long avec quelque chose de visuellement attrayant!).

Coin utilise des animations démonstratives pour expliquer la proposition de valeur de leur carte de consolidation aux visiteurs curieux lorsqu'ils font défiler le site - pas besoin d'appuyer sur lecture et de regarder une annonce vidéo ou de parcourir des paragraphes de contenu explicatif. Cette page est l'essence même de «montrer, ne pas dire».

05. Décorations

Il n’est pas difficile de confondre les animations décoratives avec des animations démonstratives. Mais il y a une différence essentielle: là où les démonstrations apportent de nouvelles informations au système, les animations décoratives ne le font pas. Ce sont les graisses et les sucres de la pyramide alimentaire d'animation: ils font d'excellents exhausteurs de goût, mais la modération est la clé.

La meilleure façon de repérer une animation purement décorative est de demander: «Que peut apprendre un utilisateur de cette animation? Est-ce que cela les guide ou leur montre quelque chose qu'ils ne sauraient pas autrement? » Si la réponse est non, vous pourriez avoir une animation décorative entre vos mains.

Même si elles ont une mauvaise réputation, les animations décoratives peuvent aider à transformer l'ordinaire en extraordinaire. Le site de Revisionist History utilise judicieusement des animations décoratives pour donner vie à des illustrations plates. Les animations ajoutent juste assez d'intérêt pour permettre au contenu visuel de la page d'être plus austère, permettant aux utilisateurs de se concentrer sur le podcast.

Polygon.com a utilisé épiquement des illustrations animées pour créer des centres de table pour une série de critiques de console. Ces animations décoratives n'ont peut-être pas ajouté de nouvelles informations, mais elles ont considérablement renforcé la marque Polygon. Ils ont également aidé chaque revue de console à se démarquer de la concurrence, qui à l'époque arborait des photographies indiscernables des mêmes appareils.

Cet article est un extrait de l'Animation au travail de Rachel Nabors - un livre électronique A Book Apart Briefs qui vous guide à travers l'anatomie des animations Web, des modèles et des décisions de communication entre les équipes. Achetez-le ici.

Lire la suite: