{"partition": "head_middle", "source_domain": "www.interfacesriches.fr", "digest": "sha1:5IFCDIMADKYUFG4KRKRC5G7K7OUIJYCG", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2016-26/000_00034.parquet"}
InterfacesRiches.fr
FredCavazza.net
RichCommerce.fr
MarketingVirtuel.fr
MediasSociaux.fr
Entreprise20.fr
SimpleWeb.fr
TerminauxAlternatifs.fr
Toute l'actualité des interfaces innovantes
De l’émergence de standards pour la réalité virtuelle
Le web est mort, vive le web
HTML5 est enfin officialisé, l’avenir du web ouvert n’est pas assuré pour autant
Comment les composants web ambitionnent de révolutionner les applications en ligne
Redfin propose la visite virtuelle en 3D des biens immobiliers
Des expériences visuelles toujours plus sophistiquées avec HTML5
Avec Polymer, Google veut faire d’Android une interface universelle
Trois expériences de lecture différentes pour Marseille, Guy Cotten et la BBC
Microsoft lance les applications universelles pour smartphones, tablettes, ordinateurs et Xbox
De la 3D encore plus performante dans votre navigateur grâce à WebGL et WebCL
De l’intérêt des transitions pour concentrer l’attention	22 juillet 2013
Frédéric Cavazza
animations, CSS3, html5, transitions
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 CSS3, 25 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 :
Blur Menu with CSS3 Transitions
Exemple d’effet de floutage sur un menu
Circle Hover Effects
Très belles transitions circulaires
Animated Buttons with CSS3 Transitions and Animations
Messages incitatifs qui apparaissent au survol de la souris
Animated Profile Popover
Affichage d’informations complémentaires
Direction-aware hover effect
Effet de transition directionnel
Product item additions info
Affichage contextuel des détails d’un produit
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 !
Voir les 5 commentaires	5 commentaires pour “De l’intérêt des transitions pour concentrer l’attention” Posté par Regis le Guennec a dit :
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
Posté par Frédéric Cavazza a dit :
Bravo pour cette réalisation, félicitations !
Posté par joe a dit :
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/
Posté par Régis a dit :
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 !
Posté par Silver Price a dit :
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.
À propos	Passionné d’internet, je travaille dans les métiers du web depuis plus de 17 ans. Je partage sur ce blog mes réflexions et opinions. Je suis également conférencier et consultant, n'hésitez pas à faire appel à mes services : mon offre.
Mes livres	© 2003-2016 Frédéric CAVAZZA. Ce site est sous licence Creative CommonsDesign : Francis Chouquet Développement : Mahi-Mahi