4 façons d'utiliser l'animation fonctionnelle dans la conception d'interface utilisateur
Il y a une dizaine d'années, les interfaces utilisateur utilisant des animations étaient évitées, étant le plus souvent associées à des fenêtres contextuelles et à des publicités clignotantes, mais cela a changé. Aujourd'hui, les détails du design d'interaction et de l'animation font une différence fondamentale sur les sites Web modernes et dans les applications modernes. Ce changement de mentalité est clairement exprimé dans la déclaration de Zurb:
Nous ne sommes plus en train de concevoir des écrans statiques. Nous concevons pour l'utilisateur comment ces écrans permettent de visualiser le contenu.
Si nous voulons concevoir de meilleurs produits numériques, nous devons adopter le caractère interactif de l'application et des sites Web dès le début.
Pourquoi l'animation fonctionne
Motion, de par sa nature, a le plus haut niveau de visibilité dans une interface utilisateur. Ni la copie de texte ni les images statiques ne peuvent concurrencer le mouvement. Nos yeux sont câblés pour faire attention aux objets en mouvement, c'est presque un réflexe. Nous pouvons en profiter avec cette animation fonctionnelle.
Qu'est-ce que l'animation fonctionnelle?
L'animation fonctionnelle est une animation subtile intégrée à l'interface utilisateur dans le cadre des fonctionnalités de cette conception. Il a des objectifs très clairs et logiques:
- Réduire la charge cognitive
- Prévenir le changement de cécité
- Établir un meilleur rappel dans les relations spatiales
Dans une approche de conception centrée sur l'homme, où l'utilisateur est le centre d'attention, une interface utilisateur doit être intuitive, réactive et humaine. L'animation fonctionnelle vous aide à atteindre ces objectifs.
Comment l'animation fonctionnelle améliore UX
Notre expérience et notre impression d'une application ou d'un site sont façonnées par une combinaison de facteurs, l'interaction jouant un rôle fondamental. L'ajout de mouvement à notre conception peut être significatif et fonctionnel lorsque nous trouvons les bonnes circonstances. Une animation fonctionnelle bien pensée et testée a le potentiel de remplir plusieurs fonctions, notamment:
1. Commentaires visuels
Une bonne conception d'interaction fournit des commentaires. La rétroaction reconnaît que le système a reçu l'action d'un utilisateur et démontre le résultat de l'interaction, qu'elle soit réussie ou non. L'animation dans ce groupe doit être très subtile et doit être conçue de manière réactive.
Bouton Feedback
Dans la vraie vie, les boutons répondent à notre interaction, et c'est ainsi que nous nous attendons à ce que les choses fonctionnent. Afin d'être prévisible pour l'utilisateur, l'interface numérique devrait agir de la même manière.
La source: Jaron Pulver
Visualiser le résultat d'une action
En suivant le principe , ne dites pas , vous pouvez utiliser des commentaires animés pour souligner que quelque chose a mal tourné. Par exemple, l'animation visuelle de secousse sur la saisie incorrecte du code d'accès. C'est comme si on secouait la tête comme pour dire "non, réessayez". L'utilisateur remarque l'animation et comprend instantanément l'état actuel.
Vous pouvez également renforcer les actions effectuées par un utilisateur. Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur "Soumettre", un compteur apparaît brièvement avant que l'application affiche l'état de réussite. L'animation de la coche donne à l'utilisateur le sentiment que le processus est terminé avec succès.
Crédit d'image: Colin Garven
2. Modification des changements d'état
D'autres bons endroits pour ajouter de l'animation au design sont des moments de changement. Les changements d'état dans l'interface utilisateur, en particulier sur le Web, impliquent souvent des coupures difficiles qui peuvent les rendre difficiles à suivre. Rien ne semble plus contre nature qu'un changement soudain. Les modifications brusques dans une interface sont difficiles à traiter pour les utilisateurs. Ces moments de changement doivent être adoucis en ajoutant une animation à l'interface utilisateur.
Établissement de connexions
Les transitions animées doivent servir d'intermédiaires entre les différents états de l'interface utilisateur, aidant les utilisateurs à comprendre ce qui se passe lorsque l'état de l'écran change. L'utilisateur suit simplement le mouvement et comprend comment les deux états de l'interface utilisateur sont liés.
Crédits d'image: Anish Chandran
Cela fonctionne également bien pour associer des vues miniatures et des vues détaillées:
La carte s'anime de sa position initiale dans une position dans le modal, ce qui montre clairement que c'est le même objet, avec plus de détails.
Crédits d'image: Charles Patterson
Appelez l'attention sur les changements
L'animation peut aider l'œil à voir d'où vient un nouvel objet lors de sa révélation ou d'un objet caché, et peut être retrouvé. Nous pouvons l'utiliser pour attirer l'attention sur les modifications qui masquent ou révèlent des informations, telles que l'ouverture de tiroirs latéraux de contenu. Dans l'exemple ci-dessous, la navigation principale disparaît lorsque vous cliquez sur l'icône du hamburger. Ce mouvement vous permet de savoir que le menu principal n'a pas disparu.
Crédits d'image: Tamas Kojo
3. Visibilité de l'état du système
En tant que l'une des 10 heuristiques de Jakob Nielsen pour la facilité d'utilisation, la visibilité de l'état du système reste l'un des principes les plus importants de la conception de l'interface utilisateur. Pour les utilisateurs, il est très important de connaître et de comprendre leur contexte actuel dans le système à tout moment.
Indicateurs de progrès
Les processus de téléchargement et de téléchargement de données sont d'excellentes opportunités pour une animation fonctionnelle. Les barres de chargement animées définissent une attente pour la rapidité avec laquelle l'action sera traitée. L'animation peut être utile en cas d'échec. Même une notification peu agréable, telle qu'un échec de téléchargement de données, doit être fournie de manière agréable.
Crédits d'image: xjw
Tirer pour rafraîchir
Le temps d'attente d'un utilisateur commence au moment où il déclenche une action, et dans le pire des cas, lorsqu'il ne dispose d'aucune indication indiquant que le système l'a reçu. L'action de réactivation doit avoir une réaction immédiate . Il est essentiel de donner un retour visuel immédiatement après avoir reçu la demande de l'utilisateur pour indiquer que le processus a été lancé. L'animation vous aidera avec ça.
Crédits d'image: Tony Babel
4. Animation explicative
Parfois, les utilisateurs ont besoin d'une aide supplémentaire pour comprendre le flux d'utilisateurs ou comment interagir avec certains éléments d'interface. Cela est particulièrement vrai pour les interfaces utilisateur contenant des fonctionnalités ou des interactions nouvelles ou inconnues pour l'utilisateur.
Embarquement
L’intégration des utilisateurs exige un UX sans défaut, et les animations dans un flux d’intégration ont un impact considérable sur la manière dont les nouveaux utilisateurs s’engageront dans une application. L'animation vous offre une liberté illimitée de transmettre n'importe quoi, aussi complexe ou aussi ardu que soit le sujet, d'une manière divertissante.
Crédits d'image: Anastasiia Andriichuk
Conseils visuels
L'animation peut offrir des repères visuels utiles. L'animation explicative est le plus souvent observée lorsqu'une page est ouverte pour la première fois et que l'animation montre comment certains éléments de la page sont supposés être utilisés. Ce type d'animation peut être trouvé dans les jeux qui traitent souvent très bien avec la divulgation progressive, révélant les mécanismes de jeu à mesure que vous progressez dans un jeu. Ces indications ne sont déclenchées que lorsque l'utilisateur atteint le point approprié de son expérience.
Conclusion
L'animation est un outil puissant lorsqu'elle est utilisée de manière sophistiquée.
Nous devons adopter la motion dès le début et la considérer comme faisant partie intégrante de notre conception, car le design ne se limite pas à la présentation visuelle. Comme Steve Jobs l’a dit à propos du design: ce n’est pas seulement ce à quoi il ressemble et se sent. Le design est comment ça marche.