Le fait de briser la symétrie apporte du contraste et de l'attrait à vos projets. Découvrez quand et comment appliquer cela à vos projets.
Le timing asymétrique des animations améliore l'expérience utilisateur en vous permettant d'exprimer votre personnalité tout en répondant rapidement aux interactions des utilisateurs. Il offre également un contraste avec la sensation, ce qui rend l'interface plus attrayante visuellement.
- Utilisez des délais d'animation asymétriques pour ajouter de la personnalité et du contraste à votre travail.
- Privilégiez toujours l'interaction de l'utilisateur. Utilisez des durées plus courtes lorsque vous répondez à des pressions ou à des clics, et réservez des durées plus longues pour les moments où vous ne le faites pas.
Comme pour la plupart des "règles" de l'animation, vous devez effectuer des tests pour déterminer ce qui fonctionne pour votre application. Toutefois, en ce qui concerne l'expérience utilisateur, les utilisateurs sont notoirement impatients. La règle d'or est de toujours répondre rapidement à une interaction utilisateur. Toutefois, la plupart du temps, l'action de l'utilisateur est asymétrique, et l'animation peut l'être aussi.
Par exemple, lorsqu'un utilisateur appuie pour afficher une barre latérale de navigation, vous devez l'afficher aussi rapidement que possible, avec une durée d'environ 100 ms. Toutefois, lorsque l'utilisateur ferme le menu, vous pouvez vous permettre d'animer la vue un peu plus lentement, par exemple autour de 300 ms.
En revanche, lorsque vous affichez une vue modale, c'est généralement pour afficher une erreur ou un autre message critique. Dans ce cas, vous devez afficher la vue un peu plus lentement, toujours autour de 300 ms, mais la fermeture, déclenchée par l'utilisateur, doit se produire très rapidement.
La règle générale est donc la suivante:
- Pour les animations d'interface utilisateur déclenchées par l'interaction d'un utilisateur, telles que les transitions d'affichage ou l'affichage d'un élément, utilisez une introduction rapide (durée courte) et une fin lente (durée plus longue).
- Pour les animations d'interface utilisateur déclenchées par votre code, telles que les erreurs ou les vues modales, utilisez une introduction plus lente (durée plus longue), mais une fin rapide (durée courte).