http://www.interfacesriches.fr Toute l'actualité des interfaces riches (Flash, HTML5, 3D...) Mon, 22 Jul 2013 07:48:18 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5.3-alpha De l’intérêt des transitions pour concentrer l’attention http://www.interfacesriches.fr/2013/07/22/de-linteret-des-transitions-pour-concentrer-lattention/ http://www.interfacesriches.fr/2013/07/22/de-linteret-des-transitions-pour-concentrer-lattention/#comments Mon, 22 Jul 2013 07:48:18 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5414 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 !

]]> http://www.interfacesriches.fr/2013/07/22/de-linteret-des-transitions-pour-concentrer-lattention/feed/ 2 Avec la sortie d’IE9, HTML5 devient enfin une réalité http://www.interfacesriches.fr/2011/03/17/avec-la-sortie-die9-html5-devient-enfin-une-realite/ http://www.interfacesriches.fr/2011/03/17/avec-la-sortie-die9-html5-devient-enfin-une-realite/#comments Thu, 17 Mar 2011 14:13:51 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=1086 J’ai déjà eu de nombreuses occasions de vous expliquer dans quelle mesure HTML5 et CSS3 allaient révolutionner les interfaces web : CSS3 et javascript seront-elles les technologies RIA du future ?. Cette révolution est maintenant définitivement amorcée avec le lancement cette semaine de la version 9 d’Internet Explorer : IE9, Beauty of the Web. Est-ce réellement la dernière version du navigateur de Microsoft qui va révolutionner le marché ? Non pas réellement. Mais la sortie d’IE9 va s’accompagner de plusieurs évènements qui vont accélérer les choses :

Ce n’est donc pas IE9 qui va bousculer le marché, mais sa sortie effective. IE était ainsi le boulet qui ralentissait l’adoption d’HTML5 et CSS3. Maintenant qu’IE9 est sorti, HTML5 va réellement commencer à être exploité en masse. Certes, il va falloir quelques mois avant que le marché se reconfigure (migration vers IE9 et FF4), mais la tendance est déjà bien amorcée comme en témoignent les récentes statistiques de parts de marché (source = StatCounter) :

Parts de marché des différents navigateurs en Europe

Cela fait déjà quelques mois que Microsoft s’est repositionné sur HTML5 (avec des sites comme IE9 Test Drive ou Never Mind the Bullets) et la sortie de cette neuvième mouture ne déçoit visiblement pas : The most modern browser there is: Internet Explorer 9 reviewed.

Non, IE9 n’est pas plus performant que les dernières versions de Chrome ou Firefox. Par contre, les premiers tests révèlent des scores de compatibilité et de performances très largement supérieurs à ceux d’IE7 ou 8. La volonté de Microsoft n’est donc pas de livrer le navigateur le plus poussé techniquement, mais de proposer un bon compromis en terme de performances, stabilité et de continuité avec les anciennes versions. N’oubliez pas que, contrairement aux autres, Microsoft doit gérer l’héritage de ses anciennes versions.

La nouvelle interface d'IE9

Cette neuvième version matérialise donc des mois d’efforts pour les équipes d’Internet Explorer qui ont su livrer un produit fidèle à la promesse. Ne vous y trompez pas : je n’utilise plus IE depuis des années, mais cette sortie m’enthousiasme au plus haut point car elle va réellement changer beaucoup de choses. À commencer par les coûts de développement : assurer une compatibilité avec IE6 alourdissait votre code source de 50% (15% pour IE7). Développer des interfaces web compatibles avec les dernières générations de navigateur va donc être bien plus simple… et rentable !

Ceci étant dit, plusieurs questions sont aujourd’hui en suspens. Il y a tout d’abord la place de Silverlight dans la stratégie de Microsoft. Pour résumer une longue histoire, disons que Microsoft préfère se concentrer sur HTML5 et faire de Silverlight un produit de niche (Internet Explorer Director: HTML5 Will Revolutionize Web Experience). De ce point de vue là, les équipes de Microsoft font preuve de clairvoyance car il faudrait un miracle pour que Silverlight remplace Flash. Chose qui ne risque pas de se produire dans la mesure où Flash est en ce moment la technologie à abattre (Firefox VP: Say Goodbye to Flash). Silverlight va donc poursuivre son évolution tranquillement, au même titre que Quicktime qui traverse les âges avec un taux d’installation pourtant très faible, mais qui ne remet pas en cause sont abandon.

Il me faut également aborder la concurrence qui ne va pas se laisser coiffer au poteau par IE9 :

Au final, faut-il se réjouir de la sortie d’IE9 ? Oui, car elle annonce la mort d’IE6 et la migration des interfaces web vers HTML5 et CSS3. Cette migration va être d’autant plus spectaculaire que les bénéfices sont directement visibles : typographies personnalisées, coins arrondis, ombrage et transparence, dégradés, transitions…

Vous remarquerez d’ailleurs que le nouveau thème graphique de ce blog exploite à fond HTML5 et CSS3. Si la mise en page est cassée, alors vous savez quoi faire (indice : vérifiez que votre navigateur est à jour).

]]> http://www.interfacesriches.fr/2011/03/17/avec-la-sortie-die9-html5-devient-enfin-une-realite/feed/ 19