La symétrie brisée donne du contraste et de l'attrait à vos projets. Découvrez quand et comment l'appliquer à vos projets.
Le timing d'animation asymétrique améliore l'expérience utilisateur en vous permettant d'exprimer votre personnalité tout en réagissant rapidement aux interactions des utilisateurs. Elle offre également un contraste avec la sensation, ce qui rend l'interface plus attrayante.
- Utilisez le timing d'animation asymétrique pour ajouter de la personnalité et du contraste à votre travail.
- Privilégiez toujours l'interaction de l'utilisateur. Définissez des durées plus courtes lorsque vous répondez aux appuis ou aux clics, et réservez des durées plus longues aux moments où vous ne le faites pas.
Comme pour la plupart des "règles" d'animation, vous devez effectuer des tests pour identifier ce qui fonctionne pour votre application, mais 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. Cela dit, la plupart du temps, l'action de l'utilisateur est asymétrique, et l'animation peut donc l'être également.
Par exemple, lorsqu'un utilisateur appuie pour afficher une barre de navigation latérale, vous devez l'afficher le plus rapidement 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 aux alentours des 300 ms.
En revanche, lorsque vous affichez une vue modale, il s'agit normalement d'afficher une erreur ou un autre message critique. Dans ce cas, l'affichage doit s'afficher un peu plus lentement, aux alentours des 300 ms environ, mais la fermeture, déclenchée par l'utilisateur, doit se produire très rapidement.
La règle de base est donc la suivante:
- Pour les animations de l'interface utilisateur déclenchées par l'interaction d'un utilisateur, comme les transitions de vue ou l'affichage d'un élément, utilisez une introduction rapide (courte durée), mais une sortie 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 sortie rapide (courte durée).