Les articles de l'année 2012

Ce week-end, j’ai regardé la vidéo du test du Nexus 4 de The Verge. Les tests vidéo de The Verge sont particulièrement bien réalisés, et le Nexus 4 semble être un bon rapport qualité/prix pour un téléphone Android. Mais à un moment, je suis un resté bloqué devant un petit détail de l’interface d’Android. De 4:15 à 4:30 dans la vidéo, Joshua Topolski joue avec le menu de notifications et le nouveau panneau de préférences.

Ma réaction a été de me dire : « Whao, cette animation est vraiment naze ». Alors que je regardais ce passage en boucle pour comprendre pourquoi, mon cerveau n’arrêtait pas de me dire « Ce n’est pas possible. On n’y croit pas une seule seconde. Pitié arrête moi ça ».

A ce stade de votre lecture, il y a quelque chose que vous devez savoir sur moi : j’adore les animations. Et pas juste des courts-métrages animés, comme celui-ci, celui-ci ou celui-là. Mais plus particulièrement, les animations d’interface. Bien réalisé, c’est le genre de détails qui peut totalement transformer et donner vie à une interface. Et dans ce domaine, Apple maîtrise plutôt bien le sujet.

Alors j’ai me suis tourné vers Youtube pour voir des vidéos du centre de notifications d’iOS, et essayer de comprendre en quoi l’animation d’Apple était si différente. Voici une comparaison côte à côte.

iOS et Android utilisent deux métaphores différentes pour cet effet d’apparition, que j’appelerais le tiroir et le parchemin. Quand vous ouvrez un tiroir, le contenu qui se révèle à vous suit le mouvement du tiroir. Pour voir le contenu qui apparaît, il suffit de laisser votre regard fixe vers le haut du tiroir. Quand vous déroulez un parchemin, le contenu qui se révèle à vous reste fixe. Pour voir le contenu qui apparaît, vous devez suivre du regard le déroulement en cours.

Retranscrits dans notre monde informatique, vous comprendrez déjà que l’effet du parchemin est naturellement plus fatigant pour notre cerveau et nos yeux. Mais surtout, sans notion physique et sans indication visuelle du contenu restant à dérouler, je pense que cette métaphore ne fonctionne pas.

Et le problème, c’est que sur le web, on en voit partout, des menus déroulants en parchemin. Voici quelques exemples glânés sur le web et via Twitter (merci @synapse_studio) : Ville d’Agen, Beats by Dr Dre, World Trade Center de Lyon, Highcharts JS, La cinémathèque française.

Alors cela ne signifie pas qu’il faut bannir les animations en parchemin. Mais ça signifie que si vous tenez vraiment à faire une animation en parchemin, vous allez devoir faire quelques kilomètres en plus pour que ça fonctionne vraiment. Récemment, Justin Windle a publié Makisu, une impressionnante démonstration de menu déroulant en CSS 3D. Je pense que cette animation rend particulièrement bien car elle est très détaillée. Mais le rendu est du coup visuellement un peu trop lourd et beaucoup trop caractérisé pour une utilisation réelle sur un site institutionnel.

Je pense que la propagation de cette animation est dûe en partie à jQuery. En jQuery, pour faire une animation en parchemin, il suffit d’appeler la fonction slideDown() sur n’importe quel élément. Et c’est tout. A l’opposé, pour faire une animation en tiroir, il faudra surcharger son code HTML pour avoir un conteneur avec une hauteur souple et un overflow:hidden, pour ensuite jouer sur un margin-top négatif sur un élément global à l’intérieur. Ce n’est pas forcément plus compliqué, mais ça demande plus de travail, et plus de réflexion. Certains sites, comme Converse, font ça pas trop mal.

Après jQuery, il devient désormais plus facile que jamais de faire des animations dans une page web. Mais comme j’aime à le répéter : juste parce que vous pouvez le faire ne signifie pas que vous devez le faire. Voici quelques conseils pour animer vos sous-menus :

1. Une animation sert à attirer l’attention et à renforcer la compréhension d’une action. Si vous n’êtes pas sûr de ce que vous faites, ou si vous n’avez pas beaucoup de temps pour travailler sur ces animations, alors ne faites rien. Une mauvaise animation va rendre votre site pire que sans animation.
2. A moins que vous n’ayez de solides arguments, privilégiez une animation en tiroir (plus reposante visuellement), et pas en parchemin (plus difficile à suivre pour notre cerveau, et beaucoup plus complexe à mettre en place pour être réellement efficace).
3. Ne répétez pas votre animation à l’apparition de chaque sous-menu quand on passe d’un onglet à un autre. Votre animation doit se jouer à la première ouverture d’un sous-menu, et puis c’est tout. Cela signifie que même si vous utilisez des animations CSS, vous aurez besoin d’un peu de JavaScript pour détecter ce comportement. Si cela vous semble trop contraignant à mettre en place, alors ne faites pas d’animation.

S’il y a une chose particulièrement importante que vous devez savoir à propos de l’intégration, c’est qu’il s’agit avant tout de faire des choix. Tout le temps. Choisir la bonne balise, le bon nom de classe, la bonne méthode de positionnement, le bon framework, etc… En mai dernier, j’abordais déjà (maladroitement) ce sujet dans mon article sur les contraintes de l’intégration. Mais l’importance de nos choix en intégration m’est revenu à l’esprit à travers deux exemples.

A Paris Web, j’ai pu assister au très bon atelier de Jean-Pierre Vincent sur la performance sur les sites mobiles. Ce qui m’a marqué, c’est la dualité entre certaines bonnes pratiques. Par exemple, afin d’améliorer le temps de chargement de votre site, il est conseillé de diminuer le nombre de requêtes. Une bonne pratique consiste alors à privilégier l’emploi de propriétés CSS pour éviter d’utiliser des images pour des effets graphiques (bords arrondis, ombres, fond en dégradés). Sauf que l’utilisation de ces propriétés a un coût important sur le temps de rendu de la page une fois téléchargée côté client. En optimisant d’un côté, vous alourdissez de l’autre. Quel choix allez vous faire ?

Et puis la semaine dernière, il y a eu ce tweet de Raphaël Goetter : « WebPerf says : « id is the best CSS selector »; OOCSS says : « don’t use id ». Well.« . Si l’impact bénéfique sur la performance d’un id n’est plus vraiment d’actualité, son utilisation reste toujours sujet à débat. En utilisant des ids dans votre HTML, vous aurez potentiellement une page plus légère. Mais vous serez contraint d’alourdir vos sélecteurs CSS, en compliquant au passage la maintenabilité de votre code. Quel choix allez vous faire ?

Si certains choix vont être faits en réponse à des objectifs clairs de votre site, d’autres vont plutôt relever de votre personnalité d’intégrateur. En mai dernier, je résumais  :

S’il est assez naturel de voir la personnalité d’un graphiste transparaître à travers ses créations, il en va de même pour un intégrateur. Mais contrairement à un graphiste, le travail de l’intégrateur est souvent invisible, et beaucoup plus difficile à juger.

L’intégration, c’est faire des choix. Mais souvent, il ne s’agit pas forcément de faire le meilleur choix, mais plutôt de faire le moins pire.

Après 3 trimestres exceptionnels, Apple a présenté hier ses résultats pour le quatrième trimestre 2012, clôturant ainsi son année fiscale.

La société a publié un chiffre d’affaire pour le trimestre de 36 milliards de dollars et un bénéfice net de 8,2 milliards de dollars, ou 8,67$ par action diluée. […]

La société a vendu 26,9 millions d’iPhones au cours de ce trimestre, soit une hausse de 58% en comparaison au même trimestre il y a un an. Apple a vendu 14 millions d’iPads au cours de ce trimestre, soit une hausse de 26% en comparaison au même trimestre il y a un an. La société a vendu 4,9 millions de Macs au cours de ce trimestre, une hausse de 1% en comparaison au même trimestre il y a un an. Apple a vendu 5,3 millions d’iPods, une baisse de 19% en comparaison au même trimestre il y a un an.

Si on additionne les chiffres de l’année 2012, ça donne :

• 125,04 millions d’iPhones vendus (37,04 + 35,1 + 26 + 26,9)
• 58,23 millions d’iPads vendus (15,43 + 11,8 + 17 + 14)
• 18,1 millions de Macs vendus (5,2 + 4 + 4 + 4,9)
• 35,2 millions d’iPods vendus (15,4 + 7,7 + 6,8 + 5,3)

Avec 41,73 milliards de dollars de bénéfices, Apple enregistre ainsi le plus gros record de bénéfices depuis 2008 (détenu alors par ExxonMobile). De manière assez amusante, la seule société d’électronique qui s’en sort aussi bien en ce moment, c’est Samsung.

Je le dis et je le répète : nous vivons dans le monde d’Apple. Je suis curieux de voir combien de temps cela va durer, et ce que cela va donner en 2013.

La conférence de Véronique Marino à Paris Web la semaine dernière, Comprendre l’autisme pour améliorer les projets transmédias, était pour moi une très bonne surprise. Certes, ce n’était pas une grande conférence ni du grand spectacle, comme ont pu l’être les conférences de Mike Monteiro ou Jake Archibald. Mais c’était une conférence avec un sujet important, le genre de sujet qu’on garde bien dans un petit coin de sa tête et qui mûrit en nous tout doucement.

La conférence tournait beaucoup autour de la description de l’autisme et les effets du handicap, mais aussi sur les solutions pour accompagner les autistes. Les exemples n’étaient pas nombreux, mais pourtant bien marquants.

Par exemple, les autistes comprennent difficilement le langage imagé. Donc si vous dîtes à un autiste que vous allez « manger un buffet froid », il comprendra plutôt que vous allez manger le meuble de votre grand-mère sans le réchauffer. Et ça, ça pose évidemment des problèmes dans la vie quotidienne, notamment face à des pictos.

Alors qu’ils sont d’usage courant, un autiste ne comprendra pas les pictogrammes de toilettes avec un homme ou une femme. Pour lui, c’est juste un homme ou une femme. Rien n’indique qu’il s’agit de toilettes dans le pictogramme en lui-même. Ça laisse à réfléchir sur les pictogrammes qu’on utilise sur nos sites (et ça rejoint l’autre excellente conférence de Sébastien Desbenoit sur l’utilisation des pictos).

L’autisme est un sujet que je connais peu, mais qui m’attire beaucoup. En début d’année, j’étais tombé sur cet article intitulé « Attention to Detail » qui m’avait particulièrement marqué (et il se base sur des exemples de Toy Story et Plants vs Zombies, donc allez le lire, vraiment).

Il y a une société appelée Specialist People Foundation qui traite abondamment des problèmes dans ce domaine. Elle emploie des personnes atteintes d’autismes et autres troubles similaires, et s’appuie sur la différente nature de perception de ses employés pour s’attaquer à une variété de problèmes. J’aime beaucoup de chose à propos de cette organisation, mais je pense que le plus impressionnant est comment ils ont efficacement créé une force de quelque chose qui est perçue comme une faiblesse.

« Nos consultants ont une passion pour le détail sans égal, et apportent des compétences uniques à des tâches pour lesquelles les employés de la plupart des sociétés ont moins de motivation à réaliser, laissant ainsi plus de places à des erreurs. Les caractéristiques uniques de l’autisme font que nos consultants apprécient vraiment des tâches que la plupart des employés trouvent ennuyeuses, répétitives ou difficiles dues au niveau de détail et de concentration requis.« 

En attendant la vidéo de Paris Web, vous pouvez consulter ses slides, ou regarder la vidéo de sa conférence donnée l’année dernière à Web-In à Montréal.

Suite à Paris Web la semaine dernière, j’avais très envie de vous parler de la conférence de Jake Archibald : Application cache is a douchebag. J’avais vu passer les slides de sa conférence en début d’année et j’avais trouvé ça plutôt rigolo. J’avais tort. C’est carrément excellent.

Jake Archibald prend un sujet en apparence assez simple, le cache d’application en HTML5, et explique en détails à quel point en pratique c’est complexe. Et le tout en enchaînant des blagues à un rythme soutenu tout au long de sa conférence. A tel point que Jake Archibald ferait passer Le comte de Bouderbala pour Anne Roumanoff.

Voici comment sa conférence débute.

A l’époque des modems 56k, on utilisait seulement Internet pour des courtes durées. Vous vous connectiez, vous vérifiez vos e-mails, et puis vous partiez. Mais maintenant on est presque toujours connecté. Et ça transforme le fait de ne pas avoir de connexion en un gros problème. Ceux qui comme moi doivent utiliser une connexion à l’étranger savent de quoi je parle. Quand je me connecte depuis l’étranger, je me sens comme un accro au jeu. A chaque fois que je me connecte, je sais que je dépense de l’argent. Mais je ne peux pas m’en empêcher. Je dois savoir ce qu’Internet dit sur mon dos ou ce qu’il se passe. Mon téléphone émets un petit son quand j’utilise des données en 3G depuis l’étranger. Mais je n’en ai pas vraiment besoin car j’arrive presque à entendre les bouchons de Champagne sauter à chaque fois que j’utilise un méga-octet.

Et ma propre dépendance me dégoûte vraiment. Il y a un moment, là où je travaillais, je devais aller faire la grosse commission aux toilettes. Il y avait cinq cabinets à l’intérieur. Malheureusement, les quatre premiers étaient occupés. En général ce n’est pas grave, je n’ai besoin que d’un cabinet. Mais je savais par mes expériences passées que le Wi-fi du bureau n’allait que jusqu’au quatrième.

J’y ai réfléchi un instant et je me suis dit : « Non. Je trouve cela totalement inacceptable. » Et j’ai fait demi-tour et je suis retourné à mon bureau et j’ai attendu.

Je suis devenu quelqu’un qui a besoin d’une connexion Internet pour aller faire caca.

Et c’est ainsi que Jake Archibald nous emmène dans les méandres du fonctionnement du cache d’application, en personnifiant cette spécification, et en la présentant comme un trou-du-cul (ou plus précisémment un « douchebag« ). Le genre de personne qui dirait « I’m going to turn your offline user experience from sucks-ass… to success !« .

J’étais mort de rire quand Jake expliquait qu’il ne faut surtout jamais changer le nom de fichier de manifeste. En faisant ça, vous rentrez dans une boucle infinie ou vos anciens utilisateurs ne recevront plus jamais aucune mise à jour.

J’ai fait ça sur Sprite Cow de façon totalement idiote. Et j’ai mis 30 minutes à me rendre compte de ce que j’avais fait et de pouvoir le corriger. D’après Google Analytics, 20 personnes ont visité le site pendant cette période. Ces 20 utilisateurs ne recevront plus jamais la moindre mise à jour du site. Jamais, jamais.

Ils vivent maintenant la vie de développeurs Drupal. Tous les autres s’amusent à faire des trucs nouveaux super cools, et eux sont coincés avec la vieille même merde.

Vous l’aurez compris, je vous recommande vraiment de voir cette conférence. Si la vidéo de Paris Web n’est pas encore en ligne, vous pourrez en trouver quelques unes dans d’autres événements, comme celle-ci à Mobilism 2012. Les slides de sa conférence sont eux déjà disponible sur le site de Paris Web. Et vous pouvez également lire son article du même nom chez A List Apart publié en mai dernier.