De l’intérêt des transitions pour concentrer l’attention

Je me suis toujours intéressé aux effets de transitions et à la façon dont elles pouvaient sublimer une page web. Vous n’êtes pas censé ignorer que les possibilités d’affichage et de présentation de HTML sont historiquement limitées : du texte, des images, des tableaux, des formulaires et des boutons. Du coup, certains ont essayé de faire mieux (Vive les transitions !). Le problème est que pour réaliser ces transitions à l’époque, il fallait utiliser du code plutôt lourd et complexe à manier (Quel framework pour les animations en Javascript ?).

Heureusement, les choses ont bien changé avec HTML5 et surtout la version 3 des spécifications des feuilles de style. Du coup, les designers se sont à nouveau lancés dans la scénarisation de textes et la narration interactive. Et comme toujours, une plus grande sophistication entraîne nécessairement plus de complexité. Une feuille de style performante et bien conçue en CSS3 est ainsi beaucoup plus complexe à coder qu’elle ne l’était avec l’ancienne version des spécifications. À tel point que Google, d’habitude très réservé, a publié des recommendations : Google HTML/CSS Style Guide.

Mais n’y voyons pas que du mal, car ces nouvelles spécifications autorisent des mises en page beaucoup plus astucieuses (très intéressant pour les terminaux mobiles), ainsi que le choix de n’importe quelle typographie. Maos HTML5 et les CSS3 sont avant tout une véritable libération pour les concepteurs et designers qui peuvent enfin laisser libre-court à leur créativité tout en respectant les standards du web. C’est également une aubaine pour les éditeurs (Quels logiciels pour l’animation HTML5 ?), mais aussi pour la communauté qui s’organise afin d’éviter des catastrophes à grande échelle (22 best responsive CSS framework for web design). Quoi qu’il arrive, le progrès est toujours source d’expérimentations un peu folles qui permettent de faire progresser la profession.

Les transitions n’échappent pas à la règle, pour mon plus grand bonheur, et j’espère pour le vôtre. Il existe de nombreuses ressources en ligne pour vous familiariser avec le sujet : Ressources et tutoriels pour les transitions et animations en CSS325 CSS3 Transitions and Animations Effects Tutorials et 17 delightful micro UX effects and transitions for your website.

Je vous invite bien évidemment à tester les différentes démos proposées pour bien vous rendre compte du potentiel de ces animations et transitions, mais je ne peux m’empêcher de vous faire une courte sélection :

Outre l’aspect purement visuel (cosmétique) de ces transitions, j’y vois surtout un excellent moyen d’attirer l’attention lors de la phase exploratoire d’une page, quand l’internaute parcourt rapidement la page des yeux et de la souris, comme s’il la découvrait avec ses mains. Toutes ces petites animations qui se déclenchent au survol de la souris sont ainsi autant d’occasions de surprendre l’oeil et de capter l’attention des visiteurs. Ceci est également vrai pour les animations d’ouverture de page où les éléments les plus importants seront affichés en premier ou mis en évidence.

En un mot comme en cent, les transitions et animations font entièrement partie d’une interface et de son comportement. Idéalement, chaque page ou écran devrait être pensé en terme de mise en page, mais également de transitions. Ce type de techniques sont beaucoup utilisées dans les interfaces de logiciels (classiques ou en ligne), et je ne comprends pas bien pourquoi nous n’en voyons pas plus sur les pages web plus classiques. Ceci étant dit, je constate un nombre croissant d’articles publiés à ce sujet, c’est bon signe !

5 commentaires pour “De l’intérêt des transitions pour concentrer l’attention”

  1. Posté par Regis le Guennec a dit : le

    Fred, une carte de voeux d’une PME française qui fait le tour du monde, reçoit des prix (CSS design Awards, CSS winner, …) et qui illustre bien tes propos ci-dessus #HTML5 #CSS3… yapluska c’est par ici : http://2013.mba-multimedia.com /regis

  2. Posté par Frédéric Cavazza a dit : le

    Bravo pour cette réalisation, félicitations !

  3. Posté par joe a dit : le

    Pour compléter la sélection, une petite collection de transitions entre pages très pratique et plutôt exhaustive. C’est par ici : http://tympanus.net/Development/PageTransitions/

  4. Posté par Régis a dit : le

    Merci Fred :-) .. Tu viens de gagner ta 2eme bouteille de cidre MBA … RDV au Web in Lorient, … je te laisse bien sur gérer la galette !

  5. Posté par Silver Price a dit : le

    Vous connaissez certainement les Media Queries CSS. Celles-ci permettent d’adapter les instructions de style appliquées à un document HTML, en fonction de nombreux critères (résolution de l’écran, dimensions, périphérique de sortie). C’est la technique la plus souple et la plus utilisée actuellement pour ajuster dynamiquement l’affichage et obtenir un rendu graphique différent sur écrans classiques, mobiles, tablettes, et autres moyens d’accéder au web.