Dans Webdesign
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.
Le contenu de gauche apparaît et disparaît progressivement.
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.
Le contenu de gauche ouvre un nouvel écran qui s’ouvre.
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.
Les cartes de gauche apparaissent par glissement et fondu.
Les cartes de droite présentent la même animation, mais chaque carte a un court délai.
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.
L’animation à gauche s’anime au-dessus de l’autre contenu.
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.
Le menu sur la gauche vole d’en bas.
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.
Le bouton à gauche affiche un texte indiquant les états.
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.
L’exemple de gauche utilise la couleur et la position pour faire ressortir un élément.
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 !
