7 astuces pour améliorer les animations dans vos interfaces
Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous
Avec quelques modifications ici ou là, vous pouvez rendre votre contenu interactif encore plus intéressant pour vos utilisateurs.
Nous allons voir quelques exemples d’animations à faire pour mettre en évidence la hiérarchie de votre site, attirer l’attention de votre utilisateur, ou même le divertir.
Cet article est une traduction libre de Good to great UI animation tips.
Ces conseils sont inspirés des lignes directrices sur l’expérience utilisateur de Material Motion, IBM’s Animation Principles et The UX in Motion Manifesto.
Toutes les interactions ont été réalisées à l’aide d’ InVision Studio . Vous pouvez télécharger les fichiers source ici.
Faites glisser la navigation entre onglets
Celui de droite glisse avec les onglets.
Si vous avez choisi d’organiser le contenu de votre site par onglet, il existe un moyen simple et efficace de rendre la navigation entre ces derniers plus intéressantes.
Essayez de définir la position du contenu en fonction de l’action qui l’affiche pour donner plus de poids à l’action de l’utilisateur. Encore mieux : au lieu d’effacer le contenu du premier onglet pour le remplacer par celui de l’onglet actif, faites glisser ce dernier ! Le top du top ? Qu’un geste de balayage sur le trackpad permette à vos utilisateurs de passer d’un onglet à l’autre.
Gardez votre élément … mais ajoutez-y du détail !
La carte de droite s’agrandit et remplit l’écran.
Plutôt que d’utiliser des transitions vers le haut ou vers la droite pour afficher les détails d’un élément, essayez de conserver l’élément de base en y ajoutant du détail.
Oui, je sais, c’est un peu compliqué à expliquer, mais si vous utilisez le logiciel InVision Studio, vous devez comprendre de quoi je parle. En effet, sur ce logiciel, si vous réalisez deux screens qui se suivent et qui partagent des éléments communs, InVision va de lui même créer une transition Motion.
Consultez le manifeste de mouvement pour voir les types d’animations que vous pouvez appliquer. L’exemple ci-dessus associe les principes de masquage , de transformation , de parentage et d’ accélération .
Utilisez un effet cascade pour afficher votre contenu
La plupart des designers utilisent des effets de couleurs ou d’opacité pour accentuer le mouvement d’ouverture de leurs menus. Cependant, avec un effet cascade, vous aurez un rendu sympa et dynamique !
Pour réaliser cet effet, rien de plus simple : ajouter du délai d’affichage à chaque élément du menu en gardant un écart constant entre les éléments pour éviter d’avoir un effet saccadé. Attention à ce que l’animation s’enchaine bien (et surtout rapidement). Google recommande de ne pas dépasser 20ms entre l’affichage de vos éléments.
Laissez votre contenu montrer qui est le plus fort
L’animation à droite repousse le contenu au fur et à mesure de sa croissance.
Plutôt que d’avoir des éléments indépendants, faites les interagir les uns avec les autres. Par exemple, si votre utilisateur clique sur un bloc texte pour l’agrandir, plutôt que de simplement faire disparaitre les autres blocs, vous pouvez créez une animation pour que l’élément choisi pousse les autres hors de l’écran.
En faisant interagir vos contenus entre eux, vous donnerez de la cohérence à ces derniers.
Rendez l’ouverture de vos menus plus précise
Le menu de droite se développe à partir de l’action qui l’a créé.
Plutôt que de simplement faire apparaitre votre menu à un endroit prédéfini, pourquoi ne pas le faire émerger de l’endroit où votre utilisateur a cliqué sur le bouton ?
Une modification mineure mais qui donne du contexte à vos interactions.
Utilisez vos boutons pour illustrer les changements d’état
Le bouton à droite utilise le conteneur pour afficher différents événements.
Souvent, l’action générée par le clic sur un bouton est affichée à côté de celui-ci. Ces derniers peuvent être utilisés pour montrer (par exemple) la progression d’un chargement ou encore la fin de l’envoi d’un formulaire.
Soyez créatifs et créez des animations qui permettront à votre utilisateur de patienter tout en félicitant votre travail d’animation. N’oubliez pas d’utiliser la couleur du bouton pour transmettre l’information principale plus rapidement.
Attirez l’attention sur un point important
Celui de droite utilise une animation subtile pour attirer l’attention de l’utilisateur.
Plutôt que de simplement utiliser la couleur, la taille ou la position, vous pouvez utiliser l’animation pour pour marquer l’importance d’un élément.
Lorsque l’utilisateur doit agir sur quelque chose d’important, essayez d’animer les actions pour attirer son attention.
Commencez par une animation subtile et augmentez l’intensité (changement de taille, de couleur et de vitesse) en fonction de l’importance de l’action. Utilisez cette option uniquement pour les actions critiques: plus vous utilisez cet effet, moins il a d’impact… et plus votre utilisateur est agacé.
Pour conclure, les animations sont un excellent moyen de rendre votre site intéressant pour votre utilisateur de façon simple et fun.
Avec de nouveaux outils d’animation tels que InVision Studio nous n’avons pas fini de voir les sites internet prendre vie et donner naissance à de superbes interactions créatives.
Attention cependant, un grand pouvoir implique de grandes responsabilités, il est donc important d’utiliser les animations avec parcimonie pour éviter de déclencher une crise d’épilepsie chez vos internautes !
By
Fondateur du BlogDuWebdesign en 2010, je fais en sorte que ce blog soit un véritable outil de référence pour aider les esprits créatifs à se connecter avec des nouvelles inspirations et des nouvelles ressources.
