Cependant, ce n’est pas un mystère, le CSS3 a un sacré appétit et son repas préféré est le CPU (Central Processing Unit), le processeur en version française. Qu’en est-il réellement ?

Je me suis donc intéressé de plus prêt à cette consommation sur des animations simples, puis plus complexes et sur différents navigateurs, principalement Google Chrome et Firefox. J’utilise également un Mac Intel Core 2 Duo pour les tests.

1er test – transition et rotation

J’ai donc testé une translation d’un bloc combinée à une rotation et un changement de couleur. Le test est réalisé sur Google Chrome. Voici les résultats sur le CPU en position initiale, puis pendant l’animation :


Interprétations : le test révèle donc une augmentation de la consommation du CPU. On s’en doutait, mais 18% en système et 17% en utilisateur pour une si petite animation, ce n’est pas négligeable. Le résultat laisse assez perplexe d’autant que j’ai réalisé le test avec seulement Chrome d’ouvert. Si on ouvre Photoshop et autres fioritures de créatif ou développeur, on se retrouve très vite avec un PC qui chauffe, encore plus sur un PC portable.

2ème test – animation complexe sur beta.theexpressiveweb.com :

Google chrome :

Firefox :

Interprétation : ici sur une animation plus complexe, une bonne partie de la puissance du CPU est mobilisée pour l’animation. Sur Google Chrome nous avons 47% du CPU utilisé par l’utilisateur et 20,55% pour le système. Sur Firefox les résultats sont meilleurs. Nous avons 45,75% pour l’utilisateur et 11,75% pour le système. Chaque navigateur interprète le CSS3 à sa manière. Firefox est plus orienté vers le développement du navigateur en tant que plateforme, il va ainsi privilégier les outils comme les modules sélecteurs avancés.

En réalité, les animations qui consomment le plus sont en toute logique les plus longues, normal. Par exemple sur hakim.se/…/slideshow, des animations courtes montrent que le CPU ne s’emballe pas, bien qu’elles fassent appelle à de grosses transformations. Un conseil donc, visez juste dans la durée de vos animations pour ne pas affoler les compteurs.

Conclusions :

Alors il faut prendre en compte que mon matériel n’est pas le plus performant. Maintenant il faut aussi se mettre à la place du visiteur qui n’a peut-être pas non plus un foudre de guerre comme machine.

Le CSS3 propose de belles animations et s’améliore chaque jour. Chaque version de navigateur améliore le rendu et sa consommation. Ce petit test tout simple permet de mettre en avant un point technique : dans un projet, il faut pouvoir tester toutes les possibilités pour trouver celle qui sera la plus adaptée et pertinente pour répondre aux problématiques. Le choix d’une animation pourra se porter soit sur le Javascript avec notemment JQuery, ou sur le CSS3. Il faut pouvoir réaliser les tests sur un matériel récent, un plus ancien et également le plus de versions de navigateur possible. Il ne faut pas oublier que les animations doivent bien tourner en mode « production ».

Alors dans vos animations, attention aux bouffées de chaleur.

Au sommaire :

• Les goûts et les couleurs : la formation sur la symbolique des couleurs
• Tester l’ergonomie de son site même sans budget : les best practices
• Petite arithmétique de l’UX design : choisir, renoncer, construire étapes par étapes
• API et formulaires en HTML5
• Un bug à la fois : les problématiques d’un navigateur, Opera
• Les lighting Talks : 40 min, 10 intervenants, 10 speechs à mourir de rire !

Bonne lecture !

Les goûts et les couleurs

Une formation intéressante sur la symbolique des couleurs appliquée au web. La palette de couleurs est extrêmement importante pour l’expérience utilisateur, notamment sur les sites e-commerce où elle peut fortement favoriser l’acte d’achat. En fonction de leur spectre, les couleurs entrainent des réactions acquises et physiques différentes. Dans le premier cas, ces réactions dépendent de notre éducation et de notre culture. La réaction physique quant à elle entraine une accélération ou une réduction de notre métabolisme. C’est pour cela qu’il est communément admis que le rouge excite alors que le bleu apaise. La symbolique de chaque couleur en occident s’en est suivie, ainsi que des exemples de sites internet correspondants.

Quelques conseils en matière de sélection de couleurs ont été proposés : une couleur de base + une nuance correspondante + la couleur complémentaire correspondante. Et des outils pour faciliter cette tâche ont également été proposés tel que Kuler et Mypant.

Une question se pose ici finalement : peut-on stigmatiser chaque couleur à des sensations physiques même en ne restant que dans la symbolique des codes occidentaux ? Ne serait-ce pas comme l’a précisé un membre de l’assistance durant la session de questions/réponses : « un peu bullshit » ?

Tester l’ergonomie de son site même sans budget

Formation sur les best practices pour faire tester son site par des utilisateurs lambda sans avoir à passer par une agence spécialisée, car cela peut rapidement coûter très cher. « Do it yourself » ! Aussi bien durant la phase de maquettage ou de développement, car comme vous allez le voir, cela peut être « facile » avec de la méthode !

Tout d’abord, sélectionnez un panel d’utilisateurs pioché dans vos proches :

• La famille / des amis : pas vraiment optimal, car ces membres risquent d’être trop positifs dans leurs réponses pour vous faire plaisir.
• Des collègues : attention ici à ceux qui risqueraient de répondre sans vis-à-vis de leur propre intérêt. Un collègue intégrateur ayant tout intérêt à ne pas être négatif pour éviter toute modification de travail !
• Des étudiants : pratique, car toujours à la recherche d’argent !

Un lieu clos doit être choisi, ainsi qu’un logiciel d’enregistrement de la session tel que Camstudio. Sélectionnez ensuite un observateur : il aidera les utilisateurs si des problèmes techniques arrivent, pour répondre à ses questions, incitez celui-ci à parler à voix haute tout en lui proposant étapes par étapes le scénario. Il doit être présenté comme détaché du projet pour éviter de biaiser les réponses de l’utilisateur. Attention également à ne pas donner d’indices sur une fonctionnalité à l’utilisateur, exemple : « recherchez des billets de train »

Un scénario d’accompagnement de l’utilisateur doit être préparé en amont pour l’aider dans les tâches qu’il devra réaliser. Une tâche c’est un contexte et un objectif. Un scénario pour contextualiser un achat, une inscription par exemple. Et un objectif correspondant que l’utilisateur peut lui-même valider : « j’ai réussi à commander cette paire de chaussures » quitte à ce que cela soit faux ! Un bon démarrage peut être tout simplement la description de ce que voit l’utilisateur : type de site, fonctionnalité présente sur la page, etc. Prenez des notes après chaque session pour optimiser le debrief avec le chef de projet effectué en fin de la journée de test.

Finalement, le seul coût de l’opération est la rémunération de l’utilisateur, 40 euros semblent être une bonne moyenne, que cela soit en bon d’achat ou en cash suite avec une note de frais (tout dépend de votre comptabilité !). Pensez aussi que les lieux publics tels que le bon vieux Starbucks coffee et les tests utilisateurs à distance sont des options tout à fait envisageables ! On notera sur ce point des sites utiles tels que Appili en français (25^e par utilisateur) ou Youeye en anglais qui possédera bientôt une fonction de EyeTracking pour utiliser à distance la webcam de l’utilisateur.

Bref, faîtes des tests, que cela soit fait par vos soins, ou ceux d’une agence, cela vous évitera de toute façon des coûts bien plus importants par la suite et les éternels V3,V4,V5 !

Petite arithmétique de l’UX : choisir, renoncer, construire

Restons « User Centric » avec cette formation très intéressante pour « épurer » efficacement et avec pertinence votre site internet durant sa création ou sa refonte. On démontrera ici l’utilité de la méthode S.H.E pour « Shrink » (réduire) Hide (cacher) et Embody (personnifier).

Tout d’abord, il va falloir choisir le nombre de fonctionnalités pour éviter d’avoir des multi-tools « qui en jettent » et peu utiles au final pour l’utilisateur. Plus facile à dire qu’à faire, car dans cette étape de réduction on se confronte :

• À nous-mêmes, créateurs de site internet.
• À l’utilisateur, attaché par habitude à des fonctionnalités.
• À la concurrence : si elle fait beaucoup de choses, je ne peux pas en faire moins !

Comment faire alors ? Lister une fonctionnalité et comparer sa valeur à son coût en « Journée Homme ». Vous verrez dans le mapping ci-dessous le résultat du comparatif de chaque fonctionnalité : certaines auront beaucoup de valeur, mais seront très compliquées à mettre en œuvre (coût élevé), d’autres auront une valeur limitée et un cout élevé (poubelle), d’autres encore auront beaucoup de valeurs et seront très simples à mettre en place (the best ones !).

Pour réduire sa sélection on peut : prioriser, raconter une histoire, penser « mobile first » tout en gardant dans l’esprit que l’instinct ne doit pas être brimé dans cette démarche !

• Cacher permet de faciliter le travail d’attention sélective, certaines fonctionnalités sont évidentes dans cette démarche : menus déroulants, apparition d’éléments uniquement au survol.
• Personnalisez, simplifiez avec des icônes et en pensant à l’opposition entre l’agencement dans l’espace (un écran, x rubriques) VS l’empilage dans le temps (x écrans, 1 rubrique) dans le but d’optimiser l’expérience utilisateur.

Petite note de fin, « l’usabilité » d’un site est une affaire d’ergonomie alors que la simplification est une affaire d’UX design (User eXperience design).

HTML5

Deux formations distinctes ont été proposées : une sur les API HTML5 et une autre sur les nouvelles possibilités des formulaires.

Du coté des formulaires, l’intervenant a démarré sa session avec un parti-pris très clair sur les webkits qui sont des bibliothèques logicielles permettant aux développeurs d’intégrer facilement un moteur de rendu de pages Web dans leurs logiciels. En trois mots : « C’est à prohiber ! ». S’en est suivi un listing d’attributs pour améliorer l’expérience utilisateur dans un formulaire tel que :

• @autofocus : pour donner le focus d’un élément
• @placeholdfer : pour afficher un texte donnant un indice sur le contenu à rentrer (input et texte area)

Du coté des APIs on listera :

• Les Websockets : pour avoir une communication bidirectionnelle entre le serveur et le client.
• File API : possibilité de lire directement côté client le contenu des fichiers sans avoir à passer par le serveur
• vidéos API : avec les formats H264 (bourrés de brevets) et WebM (open source). La vidéo se comporte comme un élément HTML, libre à vous de lui donner toutes les compétences CSS ou SVG que vous souhaitez ! À noter un media framework pour synchroniser à une vidéo avec tout type de marqueurs : http://popcornjs.org/
• History API : pour gérer l’historique plus efficacement qu’en Ajax avec la méthode pushState.
• Le format JSON : pour transférer à peu près n’importe quel objet JavaScript valide en chaîne de caractère et de faire la transformation inverse.
• La technologie Apcash pour permettre l’utilisation du site lorsque l’on est hors ligne.
• Les incontournables Canvas : tueront-ils la technologie Flash dans le futur ?
• pdf.js : pour garantir l’intégration de format PDF sans l’utilisation de plug-in.
• La technologie WebGL : pour des rendus 3D plus que bluffants (ex : http://bodybrowser.googlelabs.com/ pour regarder le corps humain sous tous les niveaux. Toujours, en bêta test malheureusement…)

Le vrai défi du HTML5 a clairement été soulevé en fin de formation : une utilisation globale, répandue et stable. Bref, il faut le démocratiser !

Un bug à la fois

Un intervenant a sensibilisé l’assistance sur le problème de l’XML parsing du point de vue du navigateur Opera. Avec un message fort pour les intégrateurs : créer des hacks est une mauvaise politique et l’utilisation de librairy « funky » présente plus de risques que d’avantages ! Opera comme tout navigateur est confronté à un insight récurrent de la part des internautes : « si cela ne marche pas c’est la faute de mon navigateur, pas celle du site internet ! »

Les lighting Talks

Une très bonne surprise pour ma part, 10 intervenants présentent durant 4 min top chrono un point de vue, un fait en rapport au web.
@Karlpro remporte la compétition à l’applaudimètre avec son étonnante démonstration : comment faire un sac de laptop avec un jean !

Suivi par deux ex-aequo proposant pour l’un un fait absurde : Pas De Liens Sans Autorisation, ou comment informer que de nombreux sites obligent, selon leurs mentions légales, les internautes à les informer avant de poster un lien hypertexte ! Tel que Facebook, Google, Twitter… Le second ex-aequo nous propose le concept hilarant du G.A.O : les best practices de la Glande Assisté par Ordinateur. 25 min de travail, 5 min de pause !

Voilà pour le long debrief de cette première journée de formations à ParisWeb, deuxième session ce matin que vous pouvez suivre en live ici !

« Après plusieurs années passées au service de la communauté des développeurs, nous avons réalisé l’importance d’un self-service orienté vers les particuliers, demandeurs d’une expérience d’achat plus appropriée. [...] TryPhone™ perment aux consommateurs de prendre le contrôle total du processus d’achat sans avoir à mettre les pieds dans un magasin ». Faraz Syed, PDG de Mobile Complete

Ainsi, vous pouvez sélectionner le mobile de votre choix et faire apparaître une image virtuelle de celui-ci, en ayant la possibilité d’appuyer sur les touches, de jouer avec les fonctionnalités et de lancer les programmes. Le catalogue est pour le moment léger : seulement 14 mobiles sont disponibles (dont l’Iphone, et le LG Prada), mais Mobile Complete promet l’enrichir continuellement avec plusieurs nouveaux modèles chaque semaine.

Il est aussi possible de comparer différents modèles côte à côte.

A la différence des applications flash ou autres programmes basés sur l’émulation, TryPhone™ est accessible gratuitement pour le consommateur, mais tire parti de tous les avantages de sa plateforme technique DeviceAnywhere™ qui, développée à partir de la technologie unique propriétaire Direct-to-Device™, permet aux développeurs d’applications mobiles d’accéder en direct et à distance à plus de 1000 terminaux depuis leur écran d’ordinateur.