La rupture de symétrie crée du contraste et attire l'attention sur vos projets. Découvrez quand et comment l'appliquer à vos projets.
La synchronisation des animations asymétriques améliore l'expérience utilisateur en vous permettant d'exprimer votre personnalité tout en répondant rapidement aux interactions des utilisateurs. Cela crée également un contraste avec la convivialité, ce qui rend l'interface plus attrayante.
- Utilisez des codes temporels d'animation asymétriques pour ajouter de la personnalité et du contraste à votre travail.
- Favorisez toujours l'interaction de l'utilisateur ; utilisez des durées plus courtes lorsque vous répondez aux appuis ou aux clics, et réservez des durées plus longues pour les moments où vous ne l'êtes pas.
Comme pour la plupart des "règles" d'animation, vous devez effectuer des tests pour déterminer 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, pendant 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 300 ms environ.
En revanche, lorsque vous affichez une vue modale, une erreur ou un autre message critique s'affiche normalement. Dans ce cas, il est préférable d'afficher la vue un peu plus lentement, à nouveau aux 300 ms, mais la fermeture, déclenchée par l'utilisateur, devrait 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, doivent inclure une introduction rapide (courte durée), mais une conclusion lente (durée plus longue).
- Pour les animations de l'interface utilisateur déclenchées par votre code, telles que les erreurs ou les vues modales, l'introduction doit être plus lente (durée plus longue), mais la fin rapide (courte durée).