Très présentes dans les interfaces de jeux vidéo, les transitions se font beaucoup plus discrètes dans les interfaces web. Si je fais abstraction des interfaces en Flash du début de siècle (RIP), les transitions n’étaient tout simplement pas présentes, car il n’était techniquement pas possible d’en faire avec les technologies natives (HTML). Puis est apparu l’iPhone et la communauté a découvert l’intérêt de peaufiner l’expérience utilisateur et de faire de l’interface un élément de différenciation. Le problème des smartphones est qu’ils sont généralement utilisés dans un contexte où l’attention est bien inférieure à celle que l’on a lorsque l’on est devant un écran (avec les bruits de la rue…). D’autant plus que l’écran est beaucoup plus petit, d’où l’intérêt des transitions pour faire comprendre à l’utilisateur ce qui est en train de se passer (basculement d’un écran à un autre, changement d’état de l’application…).
Du coup, cela a donné des idées aux designers web qui commencent à découvrir certaines des nouvelles propriétés de HTML5 (plus précisément des CSS3) pour rajouter des transitions natives à leurs interfaces : De l’intérêt des transitions pour concentrer l’attention. Partant du principe que les transitions sont systématiquement utilisées dans les interfaces des logiciels et jeux vidéo, on se demande pourquoi cela ne pourrait pas se faire pour les interfaces web. Les transitions pourraient ainsi être considérées comme des éléments indissociables de la couche de présentation : tout comme vous devez choisir une police de caractère ou des couleurs, vous devez choisir des transitions.
C’est en prolongement de cette réflexion que je vous propose ce très bon article du Smashing Magazine : Smart Transitions In User Experience Design. L’auteur y explique que les animations sont un élément essentiel des interfaces que si l’utilisateur n’est pas très concentré (ce qui arrive avec les terminaux mobiles), il puisse perdre le contexte de la tâche qu’ils sont en train d’effectuer et ne plus comprendre les informations ou modalités d’interaction que l’interface leur propose. L’illustration ci-dessous est parfaitement explicite quant à l’intérêt d’un effet de transition dans le cas d’une ancre dans une barre de navigation :
Plusieurs exemples de transitions sont détaillés dans cet article, comme l’apparition d’un panneau contextuel, très bien mis en scène ici :
Idem pour ces champs complémentaires dans le cas d’un formulaire de dépôt d’un commentaire :
Je n’ai pas grand-chose à ajouter par rapport aux arguments ou aux exemples de l’article. Par contre, je peux vous recommander vivement le site Meaningful Transitions qui répertorie 6 grandes catégories de transitions et autant d’études de cas.
Moralité : maintenant que de nombreux effets d’animation peuvent être réalisés de façon native, ne concevez plus d’interface sans transition.