Comment et quand utiliser l'animation dans votre application?
Parfois, les applications peuvent bénéficier d'animations dans l'interface utilisateur.
- Quels conseils avez-vous pour déterminer quand utiliser l'animation?
- Comment pouvez-vous maximiser l'utilité des animations et éviter les abus?
Pensez à la cause et à l'effet. Si je passe la souris sur un bouton, j'aimerais avoir des commentaires en quelque sorte. Si je peux faire glisser quelque chose, indiquez-le d'une manière ou d'une autre. S'il y a une alerte ou une notification, attirez discrètement mon attention dessus. Au-delà de cela, sauf si vous avez une raison très spécifique pour l'animation, n'en utilisez pas. Essayez d'éviter tout ce qui peut devenir gênant si cela continue. Si l'animation n'est pas importante et qu'elle détourne l'attention du but principal de la page, supprimez-la.
Quelques endroits où l'animation peut être appropriée:
- Réduire un panneau à un emplacement spécifique - l'animation aide à apprendre à l'utilisateur où le panneau réduit est allé et comment le restaurer.
- Masquage automatique des éléments, par exemple une barre de navigation - l'animation attire l'attention de l'utilisateur sur le fait que quelque chose vient de disparaître et d'où il peut être récupéré.
- Mise à jour d'une zone qui n'est pas immédiatement proche de la zone où le changement qui l'a provoqué s'est produit. Par exemple, modifier des données dans une liste/grille qui modifie la représentation visuelle de ces données dans un autre panneau.
L'animation (changement/mouvement) attire le regard plus que la plupart des autres choses, donc c'est génial lorsque vous voulez attirer l'attention sur une action qui aurait pu autrement attirer l'attention de l'utilisateur.
Cependant, même pour les éléments ci-dessus, cela peut valoir la peine de ne le faire que les premières fois - puisque l'œil est automatiquement attiré par lui, il sert de distraction et doit donc être évité après la fin du "guidage" initial. .
Vous devriez toujours avoir une sorte d'animation occupée/fonctionnelle pour empêcher votre utilisateur de penser que l'application a cessé de fonctionner (particulièrement important pour les applications ajax).
Les transitions rapides simples sont OK si elles ajoutent à l'expérience utilisateur globale, mais n'en mettent pas trop.
Avez-vous déjà utilisé une application dans laquelle vous pensiez que "j'aurais aimé que le développeur consacre autant de temps à la planification des fonctionnalités réelles qu'à la planification des effets sympas de l'interface utilisateur"? Gardez cela à l'esprit lorsque vous ajoutez des animations.
Grande question. Comme d'habitude, cela dépend de l'application (les jeux devraient probablement utiliser beaucoup plus d'animation d'interface utilisateur que les applications de productivité, par exemple), mais il existe certains principes généraux.
À l'époque où les iThings étaient nouveaux et chauds, tout devait être animé, mais il est intéressant de regarder VS2010 et Office 2010 et de voir combien est pas animé. En particulier, dans Office 2010, survoler/survoler les boutons avec fondu (contrairement à Office 2007). OMI, il se sent plus réactif. Les menus continuent à apparaître/disparaître (bien qu'il soit intéressant de noter que les menus prennent environ deux fois plus de temps pour s'éteindre out que pour s'éteindre in, ce qui peut augmenter la perception réactivité).
En général, l'animation doit être utilisée lorsque les composants de l'interface utilisateur se déplacent sans que l'utilisateur ne les fasse glisser/défiler explicitement . Si l'utilisateur fait glisser une icône en place, le fait de "déplacer" les autres icônes de la manière transmet les effets de l'action de l'utilisateur (bien que parfois une ligne de point d'insertion soit suffisante). La "barre d'informations" sur IE/Firefox pousse d'autres éléments vers le bas pour réduire la nervosité et attirer l'attention des utilisateurs. Les menus accordéon et arborescent ont mieux testé l'animation puisque l'utilisateur voit où vont les autres éléments.
J'ai vu une étude une fois qui a montré que les utilisateurs de tous niveaux sont moins enclins à interagir avec un élément d'interface utilisateur qui s'anime (si je trouve le lien, je le mettrai à jour). Donc, si vous allumez un bouton pendant plus de 2 secondes lorsque l'utilisateur le survole, même si le bouton va fonctionner pendant l'animation, les utilisateurs attendront inconsciemment que l'animation se termine. Pour avoir une idée de cela, consultez l'exemple WPF Themes . Certains thèmes ont des animations de survol plus longues que d'autres, et vous pouvez déterminer immédiatement ceux qui semblent lents. Les effets de fondu lent peuvent également avoir contribué à ce que les utilisateurs disent que Vista se sentait lent - sur Win7, toutes les mêmes animations sont là (donc c'est tout aussi lent sur le processeur/la carte graphique), mais beaucoup sont plus courts.
OTOH, le nouveau google.com propose des éléments qui s'affaiblissent et la recherche d'images Google propose désormais des boîtes à lumière. La tendance va donc dans les deux sens.
Pour résumer, les animations ont deux effets puissants sur le cerveau que vous pouvez utiliser:
Réduit la charge cognitive: Ils permettent à l'utilisateur de voir ce qui s'est passé entre deux états, de sorte que le cerveau n'a pas à "combler l'écart". Cela donne à l'utilisateur l'impression que tout est plus clair et facile à utiliser --> Faites un usage intensif des animations pour les transitions (cf Apple)
Attirez l'attention des utilisateurs: Les humains sont vraiment bons pour détecter les mouvements à un endroit qu'ils ne regardent pas directement. Cela se fait grâce à nos cellules de tige , les cellules utilisées pour détecter les mouvements, qui sont vraiment denses aux bords extérieurs de la rétine (doivent avoir quelque chose à voir avec la survie dans un environnement hostile) -> Utilisez l'animation si quelque chose de vraiment important s'est produit à un endroit éloigné.
Ces effets sont très forts car ils sont directement liés à notre cerveau reptilien. Puissant et dangereux à la fois.
Lorsque je crée des animations pour une application web/native, je prends toujours l'approche github, sorte de "distraire presque l'utilisateur" pendant une demi-seconde, pendant le chargement du contenu. Trouvez les parties les plus lentes de l'application (en particulier les parties où vous appuyez sur un bouton et pendant une bonne demi-seconde, il semble que rien ne se passe, et trouvez un moyen de faire une animation, afin de minimiser la frustration pour l'utilisateur (" J'ai appuyé sur le bouton mais rien ne se passe "), veuillez noter que je ne parle pas d'une roue de chargement rotative, ou d'une sorte d'animation de chargement, je veux dire comme une animation coulissante ou quelque chose du genre, pour créer l'illusion d'une nappe , interface utilisateur rapide, (voir: https://github.com/github/linguist chaque fois que vous cliquez sur quelque chose, il y a cette animation de diapositive qui fait que github semble super rapide et fluide), veuillez noter ne pas exagérer ceci (en utilisant cette technique sur des parties de vos applications qui prennent> 500 ms), je pense que 500 ms, c'est le nombre magique, mais expérimentez et trouvez le vôtre.
Vous devez vous demander: cette animation aide-t-elle l'utilisateur à comprendre ce qui se passe? J'ai immédiatement désactivé l'effet génie d'OS X, mais j'apprécie la simple animation de réduction/restauration car elle est rapide et donne un indice supplémentaire sur ce qui vient de se passer. De même avec Spaces/Exposé. Ou peut-être que c'est une transition de fondu courte, simple et douce qui fait que quelque chose semble moins brusque et plus humain.
Là encore, un peu de flair peut être votre marque de fabrique, comme le `` Lucas wipe '' de Star Wars.
L'animation a un but, et ce but est de visualiser les changements d'état.
Il est plus facile de grogner lorsque vous pensez à une animation déclarative telle que le type présent dans le CSS moderne tel que proposé par le webkit. Dans ce contexte, vous spécifiez l'apparence des éléments dans un certain état, puis indiquez à CSS à quoi ils ressemblent dans un état différent. Comment spécifiez-vous les états? Avec des règles CSS, telles que les noms de classe et les identifiants. Ainsi, par exemple (et pardonnez-moi d'utiliser du code ici!):
.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }
Ce que nous décrivons ici est une boîte qui s'ouvre, et nous disons au code comment animer entre les deux règles CSS. Cela en fait des états et lorsque vous vous rendez compte que l'application d'animation à votre application devient soudainement beaucoup plus logique. Au lieu de penser en termes de ce que l'animation va où, vous voyez l'animation comme un sous-produit des changements d'état; un indicateur que quelque chose s'est produit ou un retour d'information à l'utilisateur qu'un changement est en cours.
Quand j'ai appris à faire la différence entre une "animation" pure (d'un point de vue de la programmation) et un "changement d'état" (d'un point de vue déclaratif), cela a rendu toutes mes conceptions d'interface utilisateur beaucoup plus solides et logiques.