Pourquoi les animations sont-elles souvent négligées, même de la part de Google?
Animation-In sont bien MAIS aucune animation quand quelque chose disparaît. IS CE BON?
À partir d'images Google
Depuis Toptal
https://www.toptal.com/designers/ux/interview-questions
De la désignation
http://designation.io/campfires/author/will/
L'animation est utilisée pour dessiner le focus sur les objets. Il est moins logique de dessiner le focus sur un objet sur lequel l'utilisateur ne pointe plus (et donc, il n'est plus intéressé à se concentrer sur) que de dessiner le focus sur l'objet sur lequel l'utilisateur souhaite se concentrer.
Ce n'est pas une question de négligence, mais une décision consciente de restreindre la zone de mise au point pour coïncider avec l'objet qui intéresse actuellement l'utilisateur.
Je ne pense pas que ce soit une décision de conception; Je pense qu'ils sont négligés parce qu'au moins dans le développement Web, ils sont plutôt ennuyeux à mettre en œuvre et ne contribuent pas suffisamment à l'expérience utilisateur pour qu'ils valent le coup. Si vous regardez les directives d'animation de conception de matériaux de Google , elles montrent toujours les animations de fin:
Alors que montrer une animation d'entrée est aussi simple que d'ajouter animation: ...; au CSS, une animation de sortie nécessite soit 1) d'éviter display: none (pas toujours possible; nécessite de sauter dans certains cercles) 2) utilisez JavaScript pour attendre la fin de l'animation de sortie avant de définir display: none. Voici un tutoriel complet sur le sujet.
Faites attention au fait que les trois exemples ci-dessus sont tous des animations fonctionnelles mais ont un objectif différent.
Les deux premiers exemples agissent comme une fenêtre modale. L'utilisateur ouvre une boîte et s'attend à ce qu'elle disparaisse une fois terminé. C'est donc une bonne décision de conception de la révéler lente, d'aider l'utilisateur à comprendre les modifications apportées et de les masquer rapidement. L'utilisateur a le contrôle total ici.
La troisième animation vise à garder l'utilisateur orienté tout en zoomant sur la tuile d'horloge (ce qui est une interaction un peu moins triviale). Et il est donc important que l'animation revienne à l'emplacement d'origine de la tuile une fois le zoom arrière lancé - l'utilisateur ne perdra pas son orientation.
En bout de ligne, la décision de conception est dérivée du but de l'animation fonctionnelle spécifique. Référence: Animation fonctionnelle dans la conception UX
Animation d'ouverture
. sentiment.
Cela se produit lorsque l'utilisateur perd son contexte. L'utilisateur perd le focus et a soudain l'impression d'avoir cassé quelque chose.
Une animation, comme faire glisser progressivement un formulaire, communique à l'utilisateur quelque chose comme "Hé, regardez comment j'insère ce bloc ici, ne paniquez pas!".
On peut donc dire que l'un des objectifs est de modifier l'interface utilisateur sans voler le focus de l'utilisateur en préservant le contexte en le faisant évoluer à la place de changer instantanément.
Notez que l'animation consomme un peu d'une ressource non infinie, qui est le temps de l'utilisateur. Comme par exemple 0,6 seconde, potentiellement plusieurs fois.
Animation de fermeture
L'animation de fermeture doit exister, car il y a un risque que l'utilisateur perde son attention sur le chemin du retour.
Sinon c'est superflu.
Ce que je fais personnellement, c'est de définir des animations de fermeture, bien plus rapidement que les animations d'ouverture. De cette façon, je ne perds pas le temps de l'utilisateur. J'utilise des intervalles comme 0,2 secondes.
Alors pourquoi omettons-nous de fermer les animations?
Parce que parfois, cela pourrait être une perte de temps pour l'utilisateur.
Une animation prend du temps, et pour un utilisateur expérimenté/familier, cela ne fera que perdre du temps. Une animation bien faite n'aura pas cet effet, car elle attirera votre attention sur le bon endroit, mais lors de l'animation, vous "connaissez" déjà cet écran, donc ce n'est pas nécessaire. De plus, il n'y a souvent pas d'endroit spécifique pour concentrer votre attention.
Une exception à cela pourrait être que, lors de l'animation, vous devez charger une ressource, ce serait une bonne façon de masquer le petit retard de la charge.
La seule raison à laquelle je peux penser est basée sur une hypothèse. Les exemples donnés ont en commun qu'il s'agit d'une transition entre un état établi, un nouvel état et le retour à l'état d'origine. De plus, le contexte ne change pas (la vue ne change pas trop radicalement). L'animation vers un nouvel état est souvent utilisée pour préparer l'utilisateur au changement de vue. Le retour à un état que l'utilisateur connaît déjà est peut-être considéré comme inutile.
Lorsque vous regardez des animations sur le Web, en ce qui concerne la conception de l'interface utilisateur, vous devez prendre en compte context.
Toutes les animations d'interface ne sont pas identiques et ne doivent pas être traitées de la même manière.
Nous sommes des créatures visuelles et des choses comme un flash de couleurs vives dans un environnement autrement monochromatique, ou un mouvement "physique" attire instantanément notre attention. Les gens utilisent ces instincts pour attirer l'attention à des fins de marketing depuis des années.
Je dois être d'accord avec Rotem et MJB - bien que cdrini soulève un autre très bon point.
C'est une sorte de Gimmicky, sur le modèle du tag FLASH old-school qui a depuis été jeté.
Vous devez également prendre en compte SI un concepteur a pris en compte les besoins d'accessibilité (les animations peuvent déclencher des crises d'épilepsie si elles sont mal faites). Peu de concepteurs connaissent ou sont conscients de ces besoins. Certaines des animations ci-dessus ne me semblent pas prendre en compte ce grave problème.
L'autre aspect est, s'il ajoute de la valeur. S'il n'ajoute pas de valeur (que l'animation soit en entrée ou en sortie), ne l'utilisez pas. Cela interfère avec l'UX plutôt que de l'améliorer.
Donc, toutes les animations ne sont pas des pommes pour des pommes. Il y a beaucoup à considérer.